Day 176 of 180 Days of Data Viz Learning #jfdi

I’m doing some form of data visualization learning for 180 days because I need to #JFDI.

See post explaining how and why I’m doing this.

Eljiah Meeks D3.js in Action

Chapter 4 General Charting Principles 

Three Takeways Today

  • the d3.svg.area has helper functions that that bound lower end of paths to produce charts.  You need to define a .y0() accessor that corresponds to the y accessor and determine the bottom shape of the area p 132
  • p 133
  • for (x in data[0]) {
    if x != “day” { // iterating through data attributes with for loop, where x is name of each column in data, which allows us to dynamically create and call generators

    var movieArea = d3.svg.area()
    .x(function(d) {
    return xScale(; // every line uses the day column for x value
    .y(function(d) {
    return yScale(d[x]); // dynamically sets the y-accesor function of our line generator to grab the data from the appropriate movie for our y variable
    .y0(function(d) {
    return yScale(-d[x]); // new accessor function provides us with ability to define where the bottom of the path is. In this case, we start by makign the bottom equal to hte inverse of the top, which mirrors the shape
    .style(“id”, x + “Area”)
    .attr(“d”, movieArea(data))
    .attr(“fill”, “darkgray”)
    .attr(“stroke”, “lightgray”)
    .attr(“stroke-wdith”, 2)
    .style(“opacity”, .5);

    // Use d3.svg.line to draw most shapes and lines, whether filled or unfilled, closed or open. Use when you want the bottom of the shape to be calculated based on top of the shape. Suitable for bands of data, such as for stacked area charts or steamgraphs. p 135

Reading and Learning Data Visualization Theoretically/Critically:

Show Me the Numbers by Stephen Few

Three Takeaways Today
Chapter 4 Fundamental Variations of Tables
  • When you think of relationships, think between quantitative to categorial versus quantitative to quantitative p 56
    • Eg sales and regions versus different sales people across months
  • Unidirectional tables are categorial items laid in one direction (e.g. Sales by department e.g. across columns or down rows while bidirectional tables are categorial items laid out in both directions (cross tabs and picts, e.g. dept, expense type, and expenses p 57
  • Quantitative-to-Categorical relationships can be unidirectional or bidirectional p 60

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s