Getting Started with D3.js
This guide provides a little background for getting started with D3.js. See the Data Visualization Resources and the Introduction to D3.js Observable notebook for more.
Web Technologies
Before trying to tackle learning D3.js, it helps to already be familiar with basic web technologies. The Mozilla Developer Network (MDN) guides are great for both tutorials and no-nonsense references:
I also recommend the following:
- Truthy (MDN Glossary)
- Mastering Markdown (Github Guides)
Here are a few other resources that may be useful for learning HTML and JavaScript:
- Introduction to HTML (Github Training Course)
- Introduction to HTML (Observable Notebook)
- Introduction to HTML (Codecademy)
- Introduction to Basic HTML and HTML5 (freeCodeCamp)
- Introduction to CSS (freeCodeCamp)
- Introductionto JavaScript (freeCodeCamp)
- Introduction to JavaScript (Codecademy)
- JavaScript (Wikibooks)
- JavaScript for Cats
There are many more options that can be found with a web search, especially if you prefer videos over text.
Remote Hosting
Small examples may be hosted via a combination of Github gists, bl.ocks.org, and blockbuilder.org.
The files required for the visualization(s) are stored in a gists, which is basically a lightweight git repository meant for sharing code with others. This should include an index.html file, and any other files and resources required by the code. See the Github Help pages for more information about gists.
To view the visualization, load the gist in bl.ocks.org. See the About page for how to view a gist on bl.ocks.org. Keep in mind there is sometimes a slight delay between the files cached by bl.ocks.org and those hosted on gist.github.com. If you want to modify the code and see live changes, load the gist in blockbuilder.org instead.
All of these websites use the gistid in the URL, with the primary difference being the domain:
https://gist.github.com/username/gistid
https://bl.ocks.org/username/gistid
https://blockbuilder.org/username/gistid
Small examples may also be hosted using Observable Notebooks as well. Many examples are being moved over to Observable, but it is still in beta. See the Introduction to D3.js Observable notebook for more.
For hosting an entire website of visualizations, use Github Pages. There are many guides for setting up Github repositories for Github Pages:
- Github Pages (Landing Page)
- Github Pages (Github Training Course)
- Github Pages Basics (Github Help Pages)
- Getting Started with GitHub Pages (Github Guides)
- Customizing Github Pages (Github Help Pages)
The course website is also hosted using Github Pages.
Local Development
Run a local web server to run and debug visualizations locally. This is especially important for loading data. There are many options for running a local web server.
The official D3 wiki recommends using npm to run the http-server package from Node:
npm install -g http-server
http-server &
It is also possible to use Python to run a web server. Use the SimpleHTTPServer module if Python version 2 is installed:
python -m SimpleHTTPServer
Use the http.server module for Python version 3:
python3 -m http.server
Another option is to develop in Atom and use the live-server package to launch a local web server.
For all of these options, run the local web server from the same directory as the index.html file. Access the website at http://localhost:[port] where [port] is the port number used by the web server. This is usually something like 3000, 4000, or 8080.