Skip to content

Coding :: d3js

Jump to bottom Edit New page
Marielle Lange edited this page Aug 29, 2015 · 2 revisions

Learning d3js

d3js, official website

Demos

Give it a try

  • Follow the instructions on the d3js website. Make sure you add <meta charset='utf-8'> in your html document (as d3 uses unicode for math symbols)

Code Examples that accompany d3js books on github

Running Code over a server

Most demos will use ajax to load data from some json or csv file. This requires the code to be run over a server. If you feel like overdoing it, download Xampp to run a server on your local machine.

If you prefer to be able to run demos from wherever they are on your machine, different options.

On any platform, if you have nodejs already installed, run npm install http-server -g and navigate to the demo folder and, on the command line, run http-server. Then open your browser and go to http://localhost:8080.

On OSX, if you don't have nodejs installed or are reluctant to install anything globally, run python -m SimpleHTTPServer. Then open your browser and go to http://localhost:8000.

On Unix environments, if you get tired of using the command line for each demo, create a file called server.command, make the file executable chmod u+x server.command, paste this content in it.

#!/bin/bash
cd "$(dirname "$0")"
open http://0.0.0.0:8000/
python -m SimpleHTTPServer

or

#!/bin/bash
cd "$(dirname "$0")"
open http://0.0.0.0:8080/
http-server

From now on, you can simply drag that file in any demo folder and double click on it. No need to open the command line anymore.

On Windows, download the windows webserver provided with the sample code of developing a d3js edge. As per the instructions given "Start the application and drag index.html onto the window to have the server serve this collection."

Cheatsheets

d3js cheatsheet by Jerome Cukier

Get inspired by the best

(in no particular order)

Add a custom footer
Add a custom sidebar
Clone this wiki locally