A re-implementation of d3-force with WebAssembly.
Switch branches/tags
Nothing to show
Clone or download
Latest commit d026648 Oct 30, 2017
Permalink
Failed to load latest commit information.
scripts Initial implementation Oct 6, 2017
src tidyup Oct 31, 2017
.gitignore it works!!!! Oct 3, 2017
README.md tidyup Oct 31, 2017
graph.json Initial implementation Oct 6, 2017
index.html tidyup Oct 31, 2017
package.json tidyup Oct 31, 2017
rollup.config.js was code is now bundled Oct 9, 2017

README.md

d3-wasm-force

A re-implementation of d3-force in WebAssembly with the AssemblyScript compiler. Read more about the project in the accompanying blog post, and see the code in action in this bl.ock.

Overview

The goal of this project is to create a drop-in replacement for d3-force, using WebAssembly. Rather than implement the full d3-force API, I am aiming to re-create the following example:

https://bl.ocks.org/mbostock/4062045

To build the project run:

npm install
npm run build

This will run the TypeScript compiler and rollup to create a bundle, and the AssemblyScript compiler to create a separate wasm file.

The resulting output is namespaces as d3wasm, and can be used in exactly the same way as the d3 counterpart:

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();

Switching between WebAssembly and JavaScript

One of the really interesting features of AssemblyScript is that it compiles TypeScript to JavaScript. As a result, the TypeScript source of the WebAssembly module can also be compiled to TypeScript, giving the option of running it either as WebAssembly or JavaScript!

The second argument passed to forceSimulation allows you to choose whether to use the WebAssembly or JavaScript build. Passing false uses the JavaScript version:

const simulation = d3wasm.forceSimulation(graph.nodes, false)

TODO

  • Create multiple typescript configurations
  • Inline the code (note, could use rollup-plugin-wasm), although inline code is still async
  • Resolve build-wasm warnings
  • Find a better way to read / write WASM buffers
  • Make use of d3-force typing
  • ensure the code behaves exactly the same as d3-force
  • implement the fx / fy properties of force layout