Interactive Network Visualization
This is the code for the Interactive Network Visualization using D3 tutorial.
The code here has been updated from the original tutorial in the following ways:
- Uses D3 version 4 - which includes significant changes to the force layout.
- Removed jQuery and other unnecessary libraries
- Moved the code around a bit to make things a bit clearer.
Otherwise, most of the functionality should be about the same.
Most of the interesting code is in:
So you should start there.
src/radial_layout.jsincludes a layout function for positioning things around a circle.
src/tooltip.jsimplements a simple tooltip that is used on hover.
I've attempted to add the keyword
@v4 in the comments to highlight significant changes in the implementation needed when working with D3v4.
To view the demo on your computer, you need to be running a local web server.
If you have python installed, you can easily run a web-server from the command line.
First check which version of python you have installed:
If it is python 2.xx, then run the following command:
cd /path/to/interactive-network-v4 python -m SimpleHTTPServer 3000
If it is python 3.xx, you can use:
cd /path/to/interactive-network-v4 python3 -m http.server 3000
If node is more your style and you have
npm installed, try out
# install the package globally, if you don't have it already. # NOTE: you only need to do this once. npm install http-server -g cd /path/to/interactive-network-v4 http-server -p 3000
The data comes from Last FM. A script used to create the json files in
data can be found in:
This is a ruby script, and may require additional packages to run.