Getting Started with D3.js
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:
- 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)
There are many more options that can be found with a web search, especially if you prefer videos over text.
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.
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.
npm install -g http-server http-server &
python -m SimpleHTTPServer
Use the http.server module for Python version 3:
python3 -m http.server
For all of these options, run the local web server from the same directory as the
index.html file. Access the website at
[port] is the port number used by the web server. This is usually something like