D3 Examples - Force: Eample

xxxxxxxxxx
 
<script src="https://d3js.org/d3.v4.min.js"></script>
​
<style type="text/css">
</style>
​
<body>
<button onclick="update()">Update Layout</button>
</body>
​
<script> 
var width = 600;
var height = 800;
var color = d3.scaleOrdinal(d3.schemeCategory10);
var svg = d3.select('body').append('svg')
  .attr('width', width).attr('height', height);
  
var update
​
d3.json('miserables.json', function(error, data) { 
  
  // format data
  data.nodes.forEach(row => {
    row.size = Math.random() * 30
  })
  
    console.log(data);
  
//   Start a force simulation
  d3.forceSimulation(data.nodes)
    .force('center', d3.forceCenter(width / 2, height / 2))
    .force('collide', d3.forceCollide(row => row.size))
    .on("tick", ticked)
​
  // create circles for nodes
  var circles = svg.selectAll('circle')
    .data(data.nodes).enter().append('circle')
        .attr('r', row => row.size)
      .attr('fill', function(d) {return color(d.group)}); 
​
  function ticked() {
    circles.attr('cx', function(d) {return d.x})
      .attr('cy', function(d) {return d.y});
  }
  
  update = () => {
    d3.forceSimulation(data.nodes.filter(d => d.group === 1))
      .force('x', d3.forceX(100))
        .force('y', d3.forceY(100))
        .force('collide', d3.forceCollide(row => row.size))
    
    d3.forceSimulation(data.nodes.filter(d => d.group === 2))
      .force('x', d3.forceX(300))
        .force('y', d3.forceY(100))
    .force('collide', d3.forceCollide(row => row.size))
    
    d3.forceSimulation(data.nodes.filter(d => d.group === 3))
      .force('x', d3.forceX(500))
        .force('y', d3.forceY(100))
    .force('collide', d3.forceCollide(row => row.size))
    
    d3.forceSimulation(data.nodes.filter(d => d.group === 4))
      .force('x', d3.forceX(100))
        .force('y', d3.forceY(300))
    .force('collide', d3.forceCollide(row => row.size))
    
    d3.forceSimulation(data.nodes.filter(d => d.group === 5))
      .force('x', d3.forceX(300))
        .force('y', d3.forceY(300))
    .force('collide', d3.forceCollide(row => row.size))
    
    d3.forceSimulation(data.nodes.filter(d => d.group === 6))
      .force('x', d3.forceX(500))
        .force('y', d3.forceY(300)) 
    .force('collide', d3.forceCollide(row => row.size))
    
    d3.forceSimulation(data.nodes.filter(d => d.group === 7))
      .force('x', d3.forceX(100))
        .force('y', d3.forceY(500)) 
    .force('collide', d3.forceCollide(row => row.size))
    
    d3.forceSimulation(data.nodes.filter(d => d.group === 8))
      .force('x', d3.forceX(300))
        .force('y', d3.forceY(500)) 
    
    d3.forceSimulation(data.nodes.filter(d => d.group === 9))
      .force('x', d3.forceX(500))
        .force('y', d3.forceY(500)) 
    .force('collide', d3.forceCollide(row => row.size))
    
    d3.forceSimulation(data.nodes.filter(d => d.group === 10))
      .force('x', d3.forceX(100))
        .force('y', d3.forceY(700)) 
    .force('collide', d3.forceCollide(row => row.size))
  }
​
});
</script>
    