D3 Force Directed Graph in Svelte

This project contains Svelte JS versions of the D3 Force Directed Graph example.

Each Svelte version is implemented as a file/component which can be tested by modifying src/App.svelte to select the one you wish to try. Or you can view the code and a live example using the 'REPL' links below.

Svelte Implementations

1. NetworkGraph.svelte - uses SVG elements (REPL)*

2. NetworkGraphCanvas.svelte - uses canvas with D3 hit detection (REPL)

3. NetworkGraphCanvasIdContext.svelte - uses canvas with a second context for hit detection (REPL)

   * In (1) only, I've added some axes but that's the only visual difference.

Performance

I'm planning to add the ability to create much larger networks in order to do some performance tests with tens to hundreds of thousands of nodes. It will be interesting to see how the alternative hit detection methods of (2) and (3) compare. The former uses D3 simulation.find() while (3) uses a second idContext (drawing all the nodes a second time and using the colour of any hit to determine which node was hit).

Touch Screens

All should work with laptop, mobile and tablet touch screens (tested with Chrome and Firefox on Ubuntu and Android) but note:

It can be hard to hit the nodes with a fat finger on a small screen, so if you want to test or support mobile devices, you may have to enlarge the hit radius when the display is a small screen.

Get started

The conversions are based on the default sveltejs/template, so refer to that for more information. Note though, I have modified it to use yarn rather than npm, so the essential commands are given below.

Note that you will need to have Node.js and yarn installed.

Get the code...

git clone https://github.com/theWebalyst/d3-fdg-svelte

Install the dependencies...

cd d3-fdg-svelte
yarn

...then start Rollup:

yarn dev

Navigate to localhost:5000. You should see the app running.

More information

For more information about the template used to create this app, see the README at https://github.com/sveltejs/template.