Force: Eample

Built with blockbuilder.org

forked from sxywu's block: Selections: Data example

forked from sxywu's block: Selections: Enter example

forked from sxywu's block: Selections: Update-Exit example

forked from sxywu's block: Transitions: example

forked from sxywu's block: Force: example

forked from sxywu's block: Force: Starter code

forked from sxywu's block: Force: Eample

<body>
<button onclick="update()">Update Layout</button>
</body>

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>

https://d3js.org/d3.v4.min.js