ac-d3 - npm Package Compare versions

Comparing version 1.0.6 to 1.0.7

ac-d3.js

@@ -10,2 +10,3 @@ class acd3 {
   populatePlayerStore() {
+
     window.onYouTubeIframeAPIReady = () => {
@@ -21,4 +22,4 @@
         event.target.playVideo()
-                    .mute()
-                    .setLoop(true);
+          .mute()
+          .setLoop(true);
         let youtubeIframe = document.getElementById(event.target.a.id);
@@ -28,3 +29,3 @@ if (youtubeIframe.height <= this.config.resolutionThresholds[0]) {
         } else if (youtubeIframe.height > this.config.resolutionThresholds[0]
-                  && youtubeIframe.height <= this.config.resolutionThresholds[1]) {
+          && youtubeIframe.height <= this.config.resolutionThresholds[1]) {
           event.target.setPlaybackQuality('medium')
@@ -36,19 +37,21 @@ } else {
 
-      this.data.children.forEach((item) => {
-        let videoID = item.v_id;
-        if (item.type === 'youtube') {
-          this.playerStore[videoID] = createPlayer(item.v_id);
-        }
-      });
+      visStore.forEach((vis) => {
+        vis.data.children.forEach((item) => {
+          let videoID = item.v_id;
+          if (item.type === 'youtube') {
+            vis.playerStore[videoID] = createPlayer(item.v_id);
+          }
+        });
+      })
 
     }
 
-    this.data.children.forEach((item) => {
+    visStore[visStore.length - 1].data.children.forEach((item) => {
       let videoID = item.v_id;
       if (item.type === 'video') {
-        this.playerStore[videoID] = document.getElementById(videoID);
+        visStore[visStore.length - 1].playerStore[videoID] = document.getElementById(videoID);
       }
       else if (item.type === 'vimeo') {
         let vimeoPlayer = new Vimeo.Player(videoID);
-        this.playerStore[videoID] = vimeoPlayer;
+        visStore[visStore.length - 1].playerStore[videoID] = vimeoPlayer;
         vimeoPlayer.ready().then(() => {
@@ -61,2 +64,3 @@ vimeoPlayer.play();
     });
+
   }
@@ -74,12 +78,15 @@
     circle = g.append("circle")
-        .attr("r", (d) => d.r)
-        .on('mouseenter', (d) => {
-          this.unmuteOnMouseEnter(d.data);
-        })
-        .on('mouseleave', (d) => {
-          this.muteOnMouseLeave(d.data);
-        });
+      .attr("r", (d) => d.r)
+      .on('mouseenter', (d) => {
+        this.unmuteOnMouseEnter(d.data);
+      })
+      .on('mouseleave', (d) => {
+        this.muteOnMouseLeave(d.data);
+      })
+      .on('click', (d) => {
+        this.handleClick(d.data)
+      });
 
     foreignObject = g.append('foreignObject')
-            .style('pointer-events', 'none');
+      .style('pointer-events', 'none');
 
@@ -89,19 +96,19 @@ //firefox specific attributes:
       console.log('firefox')
-        g.attr("transform", (d) => "translate(" + d.x + "," + d.y + ")")
+      g.attr("transform", (d) => "translate(" + d.x + "," + d.y + ")")
 
-        foreignObject.attr('width', (d) => d.r * 2)
-            .attr('height', (d) => d.r * 2)
-            .attr('x', (d) => -d.r)
-            .attr('y', (d) => -d.r)
+      foreignObject.attr('width', (d) => d.r * 2)
+        .attr('height', (d) => d.r * 2)
+        .attr('x', (d) => -d.r)
+        .attr('y', (d) => -d.r)
 
-        video = foreignObject.append((d) => {
-            return d.data.type === 'video'
-                ? document.createElement('video')
-                : document.createElement('iframe');
-        })
+      video = foreignObject.append((d) => {
+        return d.data.type === 'video'
+          ? document.createElement('video')
+          : document.createElement('iframe');
+      })
 
-        video.style('border-radius', '50%')
-            .style('object-fit', 'cover')
-            .style('width', '100%')
-            .style('height', '100%');
+      video.style('border-radius', '50%')
+        .style('object-fit', 'cover')
+        .style('width', '100%')
+        .style('height', '100%');
     }
@@ -111,85 +118,103 @@
     else {
-        foreignObject.attr('x', (d) => d.x - d.r)
-            .attr('y', (d) => d.y - d.r)
+      foreignObject.attr('x', (d) => d.x - d.r)
+        .attr('y', (d) => d.y - d.r)
 
-        div = foreignObject.append('xhtml:div')
-            .style('width', (d) => (d.r * 2) + 'px')
-            .style('height', (d) => (d.r * 2) + 'px')
-            .style('border-radius', (d) => d.r + 'px')
-            .style('-webkit-mask-image', '-webkit-radial-gradient(circle, white 100%, black 100%)')
-            .style('position', 'relative')
+      div = foreignObject.append('xhtml:div')
+        .style('width', (d) => (d.r * 2) + 'px')
+        .style('height', (d) => (d.r * 2) + 'px')
+        .style('border-radius', (d) => d.r + 'px')
+        .style('-webkit-mask-image', '-webkit-radial-gradient(circle, white 100%, black 100%)')
+        .style('position', 'relative')
 
-        video = div.append((d) => {
-            return d.data.type === 'video'
-                ? document.createElement('video')
-                : document.createElement('iframe');
-        })
+      video = div.append((d) => {
+        return d.data.type === 'video'
+          ? document.createElement('video')
+          : document.createElement('iframe');
+      })
 
-       video.style('object-fit', (d) => d.data.type === 'video' ? 'cover' : null)
-            .attr("xmlns", "http://www.w3.org/1999/xhtml")
-            .style('width', (d) => d.data.type === 'youtube' || d.data.type === 'vimeo' ? `${this.config.zoom * 100}%` : '100%')
-            .style('height', (d) => d.data.type === 'youtube' || d.data.type === 'vimeo' ? `${this.config.zoom * 100}%` : '100%')
-            .style('top', (d) => d.data.type === 'youtube' || d.data.type === 'vimeo' ? -((this.config.zoom - 1) * d.r) + 'px' : null)
-            .style('left', (d) => d.data.type === 'youtube' || d.data.type === 'vimeo' ? -((this.config.zoom - 1) * d.r) + 'px' : null)
-            .style('position', 'absolute');
+      video.style('object-fit', (d) => d.data.type === 'video' ? 'cover' : null)
+        .attr("xmlns", "http://www.w3.org/1999/xhtml")
+        .style('width', (d) => d.data.type === 'youtube' || d.data.type === 'vimeo' ? `${this.config.zoom * 100}%` : '100%')
+        .style('height', (d) => d.data.type === 'youtube' || d.data.type === 'vimeo' ? `${this.config.zoom * 100}%` : '100%')
+        .style('top', (d) => d.data.type === 'youtube' || d.data.type === 'vimeo' ? -((this.config.zoom - 1) * d.r) + 'px' : null)
+        .style('left', (d) => d.data.type === 'youtube' || d.data.type === 'vimeo' ? -((this.config.zoom - 1) * d.r) + 'px' : null)
+        .style('position', 'absolute');
 
       circle.attr("cx", (d) => d.x)
-            .attr("cy", (d) => d.y)
+        .attr("cy", (d) => d.y)
     }
 
-       video.property('volume', (d) => d.data.type === 'video' ? '0.0' : null)
-            .attr('autoplay', (d) => d.data.type === 'video' ? '' : null)
-            .attr('loop', (d) => d.data.type === 'video' ? '' : null)
-            .attr('frameborder', (d) => d.data.type === 'iframe' ? 0 : null)
-            .attr('id', (d) => d.data.v_id)
-            .attr('src', (d) => {
-              if (d.data.type === 'youtube') {
-                let videoID = d.data.src.split('/').pop();
-                let params = `?enablejsapi=1&autoplay=1&controls=0&autohide=1&loop=1&disablekb=1&fs=0&modestbranding=0&showinfo=0&rel=0&version=3&playlist=${videoID}`;
-                return d.data.src + params;
-              } else if (d.data.type === 'vimeo') {
-                return d.data.src + '?' + 'autopause=0';
-              } else {
-                return d.data.src;
-              }
-            });
+    video.property('volume', (d) => d.data.type === 'video' ? '0.0' : null)
+      .attr('autoplay', (d) => d.data.type === 'video' ? '' : null)
+      .attr('loop', (d) => d.data.type === 'video' ? '' : null)
+      .attr('frameborder', (d) => d.data.type === 'iframe' ? 0 : null)
+
+      .attr('id', (d) => d.data.v_id)
+      .attr('src', (d) => {
+        if (d.data.type === 'youtube') {
+          let videoID = d.data.src.split('/').pop();
+          let params = `?enablejsapi=1&autoplay=1&controls=0&autohide=1&loop=1&disablekb=1&fs=0&modestbranding=0&showinfo=0&rel=0&version=3&playlist=${videoID}`;
+          return d.data.src + params;
+        } else if (d.data.type === 'vimeo') {
+          return d.data.src + '?' + 'autopause=0';
+        } else {
+          return d.data.src;
+        }
+      });
   }
 
   unmuteOnMouseEnter(data) {
-      console.log('enter')
-      let videoID = data.v_id;
-      let videoType = data.type;
-      if (videoType === 'vimeo') this.playerStore[videoID].setVolume(1);
-      else if (videoType === 'youtube') this.playerStore[videoID].unMute();
-      else this.playerStore[videoID].volume = 1;
+    console.log('enter')
+    let videoID = data.v_id;
+    let videoType = data.type;
+    if (videoType === 'vimeo') this.playerStore[videoID].setVolume(1);
+    else if (videoType === 'youtube') this.playerStore[videoID].unMute();
+    else this.playerStore[videoID].volume = 1;
   }
 
   muteOnMouseLeave(data) {
-      console.log('leave')
-      let videoID = data.v_id;
-      let videoType = data.type;
-      if (videoType === 'vimeo') this.playerStore[videoID].setVolume(0);
-      else if (videoType === 'youtube') this.playerStore[videoID].mute();
-      else this.playerStore[videoID].volume = 0;
+    console.log('leave')
+    let videoID = data.v_id;
+    let videoType = data.type;
+    if (videoType === 'vimeo') this.playerStore[videoID].setVolume(0);
+    else if (videoType === 'youtube') this.playerStore[videoID].mute();
+    else this.playerStore[videoID].volume = 0;
   }
 
+  handleClick(data) {
+    let videoID = data.v_id;
+    //does not work right now
+    d3.select('div').attr('height', this.diameter)
+    d3.select('div').attr('width', this.diameter)
+    d3.select('#' + videoID).attr('height', this.diameter)
+  }
+
   createBubbleChart() {
+
+    if (!window.visStore) window.visStore = [this];
+    else window.visStore.push(this);
+    // console.log('visStore --> ', visStore)
+
+    this.data.forEach((d) => d.v_id = 'id_' + d.v_id)
+    this.data = { 'children': this.data }
+
     const bubble = d3.pack(this.data)
-        .size([this.config.diameter, this.config.diameter])
-        .padding(1.5);
+      .size([this.config.diameter, this.config.diameter])
+      .padding(1.5);
 
     const svg = d3.select("#" + this.config.htmlAnchorID)
-        .append("svg")
-        .attr("width", this.config.diameter)
-        .attr("height", this.config.diameter);
+      .append("svg")
+      .classed("bubble-chart", true)
+      .attr("width", this.config.diameter)
+      .attr("height", this.config.diameter);
 
     //calculates radius, x and y positions for all child nodes
     const root = d3.hierarchy(this.data)
-        .sum(function (d) { return d.scalingParameter; });
+      .sum(function (d) { return d.scalingParameter; });
 
     const node = svg.selectAll("g")
-        .data(bubble(root).descendants())
-        .enter()
-        //only keeps objects that don't have children property
-        .filter((d) => !d.children);
+      .data(bubble(root).descendants())
+      .enter()
+      //only keeps objects that don't have children property
+      .filter((d) => !d.children);
 
@@ -199,5 +224,5 @@ this.addBubble(node);
   }
-
 }
 
-module.exports = acd3;
+// For use in NPM module
+module.exports = acd3;

package.json

 {
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/AC-D3/AC-D3.git"
-  },
   "_args": [
@@ -18,16 +14,28 @@ [
       "/Users/Luke/Desktop/ac-d3_2/example-visualizations"
+    ],
+    [
+      {
+        "raw": "ac-d3",
+        "scope": null,
+        "escapedName": "ac-d3",
+        "name": "ac-d3",
+        "rawSpec": "",
+        "spec": "latest",
+        "type": "tag"
+      },
+      "/Users/Luke/Desktop/ac-d3/AC-D3"
     ]
   ],
-  "_from": "ac-d3@latest",
-  "_id": "ac-d3@1.0.6",
+  "_from": "ac-d3",
+  "_id": "ac-d3@1.0.7",
   "_inCache": true,
   "_location": "/ac-d3",
-  "_nodeVersion": "7.9.0",
+  "_nodeVersion": "7.10.0",
   "_npmOperationalInternal": {
     "host": "s3://npm-registry-packages",
-    "tmp": "tmp/ac-d3-1.0.6.tgz_1497913949293_0.07374315382912755"
+    "tmp": "tmp/ac-d3-1.0.7.tgz_1498089490015_0.5028625796549022"
   },
   "_npmUser": {
-    "name": "jacobworrel",
-    "email": "[e-mail]"
+    "name": "lmichals",
+    "email": "[e-mail]"
   },
@@ -49,8 +57,11 @@ "_npmVersion": "4.2.0",
   ],
-  "_resolved": "https://registry.npmjs.org/ac-d3/-/ac-d3-1.0.6.tgz",
-  "_shasum": "7a3836bf55cbe98854127d867745dd66726a0384",
+  "_resolved": "https://registry.npmjs.org/ac-d3/-/ac-d3-1.0.7.tgz",
+  "_shasum": "a54c930c8dca871449b16d8093c1d4035d0c85d5",
   "_shrinkwrap": null,
   "_spec": "ac-d3",
-  "_where": "/Users/Luke/Desktop/ac-d3_2/example-visualizations",
+  "_where": "/Users/Luke/Desktop/ac-d3/AC-D3",
   "author": "",
+  "bugs": {
+    "url": "https://github.com/AC-D3/AC-D3/issues"
+  },
   "dependencies": {
@@ -63,5 +74,6 @@ "d3": "^4.8.0"
   "dist": {
-    "shasum": "7a3836bf55cbe98854127d867745dd66726a0384",
-    "tarball": "https://registry.npmjs.org/ac-d3/-/ac-d3-1.0.6.tgz"
+    "shasum": "a54c930c8dca871449b16d8093c1d4035d0c85d5",
+    "tarball": "https://registry.npmjs.org/ac-d3/-/ac-d3-1.0.7.tgz"
   },
+  "homepage": "https://github.com/AC-D3/AC-D3#readme",
   "license": "ISC",
@@ -73,2 +85,6 @@ "main": "ac-d3.js",
       "email": "[e-mail]"
+    },
+    {
+      "name": "lmichals",
+      "email": "[e-mail]"
     }
@@ -79,6 +95,10 @@ ],
   "readme": "ERROR: No README data found!",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/AC-D3/AC-D3.git"
+  },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "version": "1.0.6"
-}
+  "version": "1.0.7"
+}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

12045

increased by7.64%

Lines of code

184

increased by12.2%

Number of low maintenance alerts

2

decreased by-33.33%

Number of low quality alerts

1

decreased by-50%

No dependency changes