Lesson 1b - D3 Building blocks

Scott Murray provides an excellent overview of these fundamentals on his website, http://alignedleft.com/tutorials/d3/fundamentals. (time estimate: 10 minutes)

To learn the basics of HTML, CSS, and Javascript, we encourage you to work through Project 1 and Project 2 at https://dash.generalassemb.ly/. (time estimate: 10-20 hours)

Scott Murray also provides an excellent tutorial of creating a visualization using D3.js if you'd like to get a preview of what's to come in later lessons. (time estimate: 10-15 hours)

We try to re-create China's red circle. In 2015 China's

• life expectancy was 77 years
• income per person was 13300 GDP per capita
• population was 1.38 billion

For converting data values to pixel values we use scales in d3js

note that the x scale is logarithmic while y scale is linear

How Scales work

Scales for SVG in y direction start at 0 and increase going down

• d3 refers to the input values as the domain of the data
• d3 refers to the pixel values to which you want to map to as the range of the data

d3.scale.linear takes care of this mapping from domain to the range

What can go wrong when drawing circles

When drawing circles you need to consider that using value as the radius of the circle causes the circle's area to be proportional to the square of the data instead of the data itself. This can cause your data to be exagerrated

area = pi * (r ^ 2)

r = sqrt(area / pi)

Mike Bostock's Let's Make a Bar Chart Tutorial.

How selection work

• http://www.thefunctionalart.com/
• http://visualisingdata.com/
• http://flowingdata.com/
• http://www.storytellingwithdata.com/
• http://helpmeviz.com/ Good for getting feedback on visualizations from the community
• http://d3js.org/
• http://www.tableausoftware.com/public/
• http://raw.densitydesign.org/
• http://www.adobe.com/products/illustrator.html