Merge pull request #59 from Priyami/visualizedata

avatar image and tooltip for bubbles

Author: princiya

src/components/Resources/Bubblechart.css

@@ -1,19 +1,33 @@
 text {
-  font: 14px sans-serif;
-  fill: #fff;
-  transition: all 0.3s;
-}
+    font: 16px sans-serif;
+    fill: #fff;
+    transition: all 0.3s;
+  }
+  
+  .label {
+    fill: #000;
+  }
+  
+  .chart {
+    width: 1500px;
+    height: 1500px;
 
-.label {
-  fill: #000;
-}
+  }
+  
+  .chart-svg {
+    width: 100%;
+    height: 100%;
+  }
+  
+  div.tooltip {
+    position: absolute;
+    text-align: center;
+    width: 160px;
+    height: 50px;
+    padding: 8px;
+    margin-top: -20px;
+    font: 16px sans-serif;
+    background: #ddd;
+    pointer-events: none;
+  }
 
-.chart {
-  width: 1200px;
-  height: 1060px;
-}
-
-.chart-svg {
-  width: 100%;
-  height: 100%;
-}

src/components/Resources/Bubblechart.js

@@ -4,9 +4,9 @@ import "./Bubblechart.css";
 
 
 const Bubblechart = (aData) => {
-  let jsonToDisplay = { "children":[...aData.data] };
-  let diameter = 1000,
-    color = d3.scaleOrdinal(["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"]);
+  let jsonToDisplay = { "children": [...aData.data] };
+  let diameter = 1000;
+  // color = d3.scaleOrdinal(["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"]);
   let bubble = d3.pack()
     .size([diameter, diameter])
     .padding(2);
@@ -19,49 +19,84 @@ const Bubblechart = (aData) => {
   }
 
   let svg = d3.select('#chart').append('svg')
+
     .attr('viewBox', '0 0 ' + (diameter + margin.right) + ' ' + diameter)
     .attr('width', (diameter + margin.right))
     .attr('height', diameter)
     .attr('class', 'chart-svg');
 
 
+
+
   let root = d3.hierarchy(jsonToDisplay)
-    .sum(function (d) { return d.id })
+    .sum(function (d) { console.log(d.id); return d.id; })
+
     .sort(function (a, b) { return b.id - a.id });
 
 
   bubble(root);
 
   let node = svg.selectAll('node')
     .data(root.children)
-    .enter()
-    .append('g').attr('class', 'node')
-    .attr('transform', function (d) {return 'translate(' + d.x + ' ' + d.y + ')'; })
+    .enter().append('g')
+    .attr('class', 'node')
+    .attr('transform', function (d) { return 'translate(' + d.x + ' ' + d.y + ')'; })
+
+
+  let defs = node.append('defs');
+
+  defs.append("pattern")
+    .attr("id", function (d) { console.log(d.data.id); return d.data.id })
+
+    .attr("width", 10)
+    .attr("height", 10)
+    .append("image")
+    .attr("xlink:href", function (d) {
+      return d.data.avatar_url
+    })
+    .attr('height', function (d) { return d.r * 2 })
+    .attr('width', function (d) { return d.r * 2 * 1.02 })
+    .attr("x", 0)
+    .attr("y", 0);
 
 
   node.append("circle")
     .attr('r', function (d) {
-      return d.r;
+      return d.r / (Math.sqrt(1.5));
     })
-    .style("fill", function (d) {
-      return color(d);
-    });
+    .style("fill", "#fff")
+    .style("fill", function (d) { return "url(#" + d.data.id + ")" })
+    .style("stroke", "black")
+    .on("mouseover", mouseover)
+    .on("mousemove", mousemove)
+    .on("mouseout", mouseout);
+
+
+  let div = d3.select("#bubble").append("div")
+    .attr("class", "tooltip")
+    .style("display", "none");
+
+  function mouseover() {
+    div.style("display", "inline");
+  }
+
+  function mousemove(event, d) {
+    
+    div
+      .text(d.data.login + ", " + d.data.contributions)
+      .style("left", (d.x + 150) + "px")
+      .style("top", (d.y  ) + "px")
+    
+  }
 
-  node.append("text")
-    .attr("dy", ".3em")
-    .style("text-anchor", "middle")
-    .text(function (d) { return d.data.login})
-    .style("fill", "#ffffff");
+  function mouseout(d) {
+    div.style("display", "none");
+  }
 
-  node.append("text")
-    .attr("dy", "2em")
-    .style("text-anchor", "middle")
-    .text(function (d) { return  d.data.contributions})
-    .style("fill", "#EEEfff");
 
 
   return (
-    <div>
+    <div id="bubble" className="bubble">
       <svg id="chart" className="chart" ></svg>
     </div>
   );