D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
newsummit
Full window
Github gist
all nodes
Built with
blockbuilder.org
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v3.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])); 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://d3js.org/d3.v3.min.js