D3 force layout with WebAssembly!

This block demonstrates d3-wasm-force, a partial re-implementation of d3-force using WebAssembly.

This demo is based on Mike Bostock's force-directed graph that shows character co-occurence in Les Misérables, where d3-wasm-force is almost a drop-in replacement.

Built with blockbuilder.org

<!DOCTYPE html>
<meta charset='utf-8'>

.nodes circle {
  stroke: #fff;
  stroke-width: 1.5px;
}
</style>

var color = d3.scaleOrdinal(d3.schemeCategory20);

d3wasm.loaded
    .then(() => {

d3.json('graph.json', (error, graph) => {
        if (error) throw error;

const simulation = d3wasm.forceSimulation(graph.nodes, true)
          .force('charge', d3wasm.forceManyBody())
          .force('center', d3wasm.forceCenter(width / 2, height / 2))
          .force('link', d3wasm.forceLink().links(graph.links).id(d => d.id))
          .stop();
       
        var link = svg.append('g')
          .attr('class', 'links')
          .selectAll('line')
          .data(graph.links)
          .enter().append('line')
            .attr('stroke-width', d => Math.sqrt(d.value));
      
        var node = svg.append('g')
            .attr('class', 'nodes')
          .selectAll('circle')
          .data(graph.nodes)
          .enter().append('circle')
            .attr('r', 5)
            .attr('fill', d => color(d.group))
            .call(d3.drag()
                .on('start', dragstarted)
                .on('drag', dragged)
                .on('end', dragended));
      
        function ticked() {
          simulation.tick();
          link
              .attr('x1', d => d.source.x)
              .attr('y1', d => d.source.y)
              .attr('x2', d => d.target.x)
              .attr('y2', d => d.target.y);
      
          node
              .attr('cx', d => d.x)
              .attr('cy', d => d.y);
        }
      
        setInterval(ticked, 25);
        
        function dragstarted(d) {
          if (!d3.event.active) simulation.alphaTarget(0.3).restart();
          d.fx = d.x;
          d.fy = d.y;
        }

function dragged(d) {
          d.x = d3.event.x;
          d.y = d3.event.y;
          d.fx = d.x;
          d.fy = d.y;
        }

function dragended(d) {
          if (!d3.event.active) simulation.alphaTarget(0);
          d.fx = null;
          d.fy = null;
        }
      });
  });
</script>

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