Spend a few hours (minimum) going through these materials. It's okay if you don't understand half of it on your first time through (75% is way too much though). I found it super helpful to write out the code snippets and test them out while following along. There are now quite a few D3 tutorials out there, but I found these particularly helpful:
- Intro by Mike Bostock, D3 Creator
- D3 Workshop (just skim through)
- Three Little Circles
- A Bar Chart
- Tutorial by Scott Murray
And plenty more tutorials can be found here
Open Terminal and let's download the d3 library
git clone https://github.com/mbostock/d3.git
Open up folder in your favorite editor (textmate example below)
cd d3/
mate .
Now, let's fire up our local web server (examples won't properly otherwise)
python -m SimpleHTTPServer
In Chrome/FF/Safari, navigate to this page
http://127.0.0.1:8000/examples/
Go through most/all of them so you can see what d3 can do (short answer: anything!)
The examples are awesome, but also pretty complicated. I'd suggest:
- Focus on a few of the simpler examples (line chart, bar chart)
- In your editor, make some small tweaks to the file (e.g., try to adjust colors, change width of bars, radius of circles, etc.) and see what happens in your browser.
Go through D3 Gallery (or examples from above) and pick one that you want to use Etsy data with.
Try to sub out current data with Etsy data (either csv or json format for now), change around variables names, and try to get it to work (this can sometimes take awhile)
Make enhancements and improvise (transitions, tooltips, anything!), debug, and repeat!
D3 is hard and takes a looong time to feel comfortable with (I'm not there yet either). The API Reference and Google Group are your friends.
And of course feel free to ask Chuck, Wil, or Bren about anything and we can try to help :)