learningD3

Practice works learning D3

Tutorials from DashingD3js.com

CodePen links:

Lessons 6 & 7

Lesson 8 Binding data to DOM elements

Lesson 9 Using Data Bound to DOM Elements

Lesson 10 Creating SVG Elements Based on Data

Lesson 11 Using the SVG Coordinate Space

Lesson 13 Using JSON to Simplify Code

15 D3.js Path Data Generator Line Example - This is where I being doubting if I'm smart enough in math to do D3 well - I've never heard of these linear interpolation types in any math class before

Back at it

Lesson 18 SVG Group Element and D3.js

Lesson 19 SVG Text Elements

May 21: Have been taking time off from learning while work is busy. Attending a d3.js meetup in Columbus, Ohio tonight, however, and attempting to complete their code practice. JS Fiddle : OpenBeerDatabase API

And here is the final result of that --- not the prettiest, but it's real data! Final JS Fiddle : OpenBeerDatabase API

Back to DashingD3

Lesson 20 D3.js Axes - Built onto the JSFiddle

And that's actually the last of the basic D3 lessons on DashingD3js.com before you hit a paywall. Overall, the previous tutorials were clearly written and easy to follow, and I feel that I have a good introduction to D3.

Tutorials from alignedleft.com, Scott Murray

I came across this tutorial while building my OpenBeerDatabase exercise, so it fits that I'll work through it next, using the same code. This is the same beer data as previous but with the data starting from the bottom rather than the top, and labelled more nicely. Making Bar Charts

Making a scatterplot Same data as before, just more circles

Scatterplot using scales to plot data

Scatterplot using scales and axes

That's the end of the alignedleft tutorials. I understand scales and axes much better now than when I read about them the first time.

Let's Make A Bar Chart I,II and III

CodePen Bar Chart with Axes, Labels, Scales I actually found these tutorials difficult to follow, probably because I am not quite quick enough with D3 yet to see the jumps from example to example. I modified the chart example, however, to something that worked for me and then built on that to create additional x-axis label and chart title.