D3 Examples - img-svg

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>
  <script src="https://npmcdn.com/babel-core@5.8.34/browser.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <svg></svg>
  <script type="text/babel">
  var n = 20;
​
var nodes = d3.range(1000).map(function(i) {
  return {
    index: i,
    radius: 3,
    color: i < 200 ? "brown" : "steelblue"
  };
});
    
    var width = window.innerWidth;
    var height = window.innerHeight;
    var color = d3.scaleOrdinal(d3.schemeCategory20);
    var radius = 3;
    var radiusScale = d3.scaleLinear()
        .range([radius, radius * 5]);
    var simulation = d3.forceSimulation()
​
        .force('collide', d3.forceCollide().radius(d => d.radius+ 6).iterations(2))
.force("center", d3.forceCenter(width / 2, height / 2))
        .force('x', d3.forceX(width/2).strength(0.1))
        .force('y', d3.forceY(width/2).strength(0.1));
    
    
    var svg = d3.select('svg')
        .attr('width', width).attr('height', height);
​
 
        var circle = svg.append('g')
            .classed('circles', true)
            .selectAll('circle')
            .data(nodes, (d) => d.index)
            .enter().append('circle')
            .attr('fill', 'steelblue')
            .attr('r', (d) => d.radius);
        
        simulation.nodes(nodes)
            .on('tick', forceTick);
        
        function forceTick() {
          circle
            .attr("cx", function(d) { return d.x; })
            .attr("cy", function(d) { return d.y; });
        }
​
  </script>
</body>
    