/d3-skeleton

Starting point for D3 Projects w/ some 🔝 explanations

Primary LanguageJavaScript

D3-skeleton

This repo provides a starting point for a D3 project! Setting up the html, css, and javascript files is a tedious process, and I almost always end up copying the files from a past project and deleting most of the contents. Rather than do that, you can just clone this repo, delete the .git folder that comes with it, and reinitialize a git repo as if you had just written the files yourself!

What's in here?

  • index.html: this file loads the css and javascript files and has a basic html structure.
  • my_style.css: all the css styling should go in here.
  • my_script.js: this is the important file. All your D3 code goes in here.
  • test.csv: a dummy data file, replace it with your actual data.

How do I use this?

This repo isn't intended to be a comprehensive D3 tutorial, rather more of a starting point for you to make some D3 visualizations. To use it, you'll probably need to have a pretty firm grasp of SVG, Javascript and D3.

When I'm working on a D3 project, I like to start a local web server to see my work. To do this, navigate to this folder in your terminal and run the command python -m SimpleHTTPServer (Python 2.x) or python -m http.server (Python 3.x). Then, go to localhost:8000 in your browser. If you haven't made any changes to this repository, you should see a gray rectangle and a little red circle, which means you're on your way to a dope D3 project! Good luck!