all nodes: zoom

forked from newsummit's block: all nodes

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width: 100%; height: 100%; }
  </style>
</head>

<body>
  <script>
    var width = 900,
				height = 600,
				centerX = width / 2,
				centerY = height / 2,
    		groups = {};

d3.json('https://raw.githubusercontent.com/smcclung2015/d3/master/data2.json', function(data) {

data.forEach(function(d, index) {

//console.log(d);
      d.x = centerX / 2 * d.x + width / 2;
      d.y = centerY / 2 * d.y + height / 2;
      if (d.size <= 1000) {  d.r = 1; }
      times = Math.floor(Math.log(d.skill_count) / Math.log(10));
      baseR = (times - 2) * 2;
      firstDigit = d.skill_count / Math.pow(10, times);
      r = (1 + firstDigit / 10) * baseR;
      d.r = parseInt(r);
      d.size = d.skill_count;
      d.color = d.cluster_labels.toString();
      d.label = d.label;

var label = d.label,
          color = d.cluster_labels;

if (groups[color]) {
        groups[color].push(d);
      } else {
        groups[color] = [d];
      }
    });

xScale = d3.scale.linear().domain([0, width]).range([0, width]);
    yScale = d3.scale.linear().domain([0, height]).range([height, 0]);
  
    var svg = d3.select('.skill-map')
    	.append('svg')
      .attr('width', width)
      .attr('height', height)
      .append('g')
      .call(d3.behavior.zoom()
            .x(xScale)
            .y(yScale)
            .scaleExtent([-1, 100])
            .on('zoom', zooming));

svg.append('rect')
      .attr('class', 'overlay')
    	.attr('fill-opacity', .7)
      .attr('width', width)
      .attr('height', height);

for (var key in groups) {
      var circlesData = groups[key],
      		circleGroup = svg.append('g').attr('class', 'group'),
      		circles = circleGroup.selectAll('circle')
            .data(circlesData)
            .enter()
            .append('circle')
            .attr('class', 'dot')
            .attr('id', function(d) {
              return 'node'+d.skill_count;
            })
            .attr('r', function(d) {
              return d.r;
            })
            .attr('transform', function(d) {
      				return 'translate(' + xScale(d.x) + ',' + yScale(d.y) + ')';
    				})
            .style('fill', function(d) {
             if (d.color === '#ffffff')  {
               return 'transparent';
             } else {
               return d.color;
             }
           })
           .style('display', function(d) {
             if (d.color === '#ffffff')  {
               return 'none';
             } else {
               return 'block';
             }
           });
    }
	});
    
  
  </script>
  
  <div class='skill-map'></div>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js