- Stands for Data-Driven-Documents
- Is a Javascript Library
- works on "modern" web browsers
- renders stunning visualizations
- can be plugged to Django (as this is completely dealt as frontend)
- Uses SVG (Scalable Vector Graphics), HTML5 and CSS
- D3 Wiki
- download/clone the folder
- open index.html in any modern browser.
- d3.min.js (D3 javascript library)
- a base.css file for basic look-n-feel
- an index.html file that demonstrates the work
- an open style.css file
- a bunch of d3 javascripts (most of them are already enabled in index.html)
- Open your favorite editor. I use atom
- Look at the source code of index.html
- Spend time enabling one javascript at a time. Start with select_script.js
- Comment all other javascripts, just keep script.js active
- You can copy select_script.js into script.js
- Refresh the browser index.html
- The best part is, the changes you make immediately reflects on the browser
- Please use browser debuggers to inspect the elements.
- Now, understand the content of script.js line-by-line. There are code comments in place to help you
- Once done understanding select_script.js, move on to the subsequent ones.
- And, don't forget to have fun!