Day 180 of 180 Days of Data Viz Learning #jfdi #done #dataviz

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.

Guess what?  It took longer than 180 days, but it’s been a pretty cool journey.  Did my daily learning will post a debrief early next week.  This has been quite the intellectual and emotional exercise for me.  Learned so much about data viz + more.

Eljiah Meeks D3.js in Action

Chapter 5 Layouts
Some last takeaways
  • One key with generators eg. d3.svg.arc is that they have particular settings p 144
  • “One of the core uses of a layout in D3 is to update the graphical chart. All we need to do is make changes to the data or layout and then rebind the data to the existing graphical elements” p 146
  • If transitions are distorted because of default data-binding keys, you may need to change sorts, eg pieChart.sort(null); in conjunction with exit and update behavior p 147
  • Layouts in D3 expect a default representation of data,  usually a JSON object array where the child elements in a hierarchy are stored in child attribute that points to an array.  p 149
  • You can either data munge or get use to using accessor functions p 149
  • Pack layouts have a built-in .padding() function to adjust spacing and a .value() function to size out spacing and influence size of parent nodes p 151

Reading and Learning Data Visualization Theoretically/Critically:

Show Me the Numbers by Stephen Few

Three Takeaways Today

Chapter 5 Visual Perception and Graphical Communication
  • “Our perception of space is primarily two dimension.  We perceive differences in vertical position (up and down) and in horizontal position (left and right) clearly and accurately. We also perceive a third dimension, depth, but not nearly as well.” p 71
  • “We perceive hues only as categorically different, not quantitatively different; one hue is not more or less than another, they’re just different.  In contrast, we perceive color intensity quantitatively, from low to high” p 71
  • Both size and color intensity are not the best way to code quantitative values.  The key is not good at matching a number to a relative size or color intensity -> use length or position if possible instead p 73

Day 179 of 180 Days of Data Viz Learning #jfdi #dataviz

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 5 Layouts

Three Takeways Today

  • Layouts are D3 functions that help format data so it can be used for select group of charting methods p 139
  • Layouts do not actually draw the data nor are they called like components or referred to in the drawing code like generations.  They’re actually a preprocessing step that formats data so it’s ready to be displayed in the form of the visual.  You can update layouts and if you rebind the altered data, you can use D3 enter/update/exit syntax. p 139
  • “Many people get who started with D3 think it’s a charting library, and that they’ll find a function like d3.layout.histogram that creates a bar chart in a <div> when it’s run.  But D3 layouts don’t result in charts; they result in the settings necessary for charts.  You have to put in a bit of extra work for charts, but you have enormous flexibility (as you’ll see in this and later chapters) that allows you to make diagrams and charts that you can’t find in other libraries” p 141

Day 178 of 180 Days of Data Viz Learning #jfdi #dataviz

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

// Callback function breakdowns

var n = 0 // counter to increment
for (x in data[0])
if (x != day) { //not drawing a line for day value of each object because this is giving x value of coordinate
var movieArea = d3.svg.area() // generator that iterates through each objet that corresponds to one of our movies using day vlaue for x coorindate but iterating through values for each movie for the y coordinates
.x(function(d) {
return xScale(d.day)
})
.y(function(d) {
return yScale(d,x))
})
.y0(function(d) {
return yScale(simpleStacking(d,x) – d[x])
})
}

// Stacking function. Takes incoming bound data and name of attr and loops throuhg the incoming data, adding each value until it reaches current named attribute. As a result, it returns the total value for every movie during this day up to the movie we’ve sent.

function simpleStacking(incomingData, incomingAttribute) {
var newHeight = 0
for (x in incomingData) {
if (x != “day”) {
newHeight += parseInt(incomingData[x]);
if (x == incomingAttribute) {
break;
}
}
}
return newHeight;
};
// Stacking function that alternates vertical position of area drawn p 136

Day 177 of 180 Days of Data Viz Learning #jfdi #dataviz

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.

Reading and Learning Data Visualization Theoretically/Critically:

Show Me the Numbers by Stephen Few

Three Takeaways Today

Chapter 5 Visual Perception and Graphical Communication
  • “Built into visual perception is the assumption that the light is coming from above.”  Our real-life perception of everyday objects influence how we interpret graphics, in this case how shapes are “lit” p 62
  • There is iconic memory that relates to pre attentive processing in visuals, the fast recognition of color hues in text.  It is important to think of iconic memory when quickly making groups distinctive and highlighting objects p 66
  • Working memory is temporary and has limited storage capacity, only three or four chunks can be stored at one time.  Think of how you structure tables and graphs – if you have ten different symbols, the reader won’t be able to process it p 67

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(d.day); // 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
    })
    .interpolate(“cardinal”);

    d3.select(“svg”)
    .append(“path”)
    .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 d3.sg.area() 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

Day 175 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

  • D3 line interpolation methods draw the lines so they can more accurately represent data.  p 129
    • eg
    • tweetLine.interpolate(“basis”);
    • retweetLine.interpolate(“step”);
    • favLine.interpolate(“cardinal”);
  • Interpolation manipulates the representation of data.  Because data viz deals with visualizing statistical data, interpolation can misuse statistics because it can smooth out a “clunky-looking line” into a smooth, “natural” line.  p 129
  • Streamgraphs is a stacked chart that represents variation and change.  “The layers accrete upon each other and adjust the area of the elements above and below, based on the space taken up by the components closer to the center.  It appears organic because that accretive nature mimics the way many organisms grow, and seems to imply the kinds of emergent properties that govern the growth and decay of organisms.” p 131

Day 174 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

  • Using .each() really a choice of syntax in many cases p 121
  • When you write line generator functions, you need to define how it accesses the data to draw the line, append a <path> to the vans, and set its d attribution as equal to the the defined generator function. p 127
    • var tweetLine = d3.svg.line()
      • x(function(d) {
        • return xScale(d.day); // defines accessor function to take day as attribute and pass it to xScale first
      • })
      • .y(function(d) {
      • return yScale(d.tweets); // Take tweets and pass it to yScale
      • });
    • d3.select(“svg”)
      • .append(“path”)
      • .attr(“d”, tweetLine(data)) // appended path is drawn according to the generator with loaded data
      • .attr(“fill”, “none”)
      • .attr(“stroke”, “blue”)
      • .attr(“stroke-width”, 2);
  • If you create multiple lines, you’ll need multiple generator functions and multiple svgs with a different .attr(“d”, tweetLine(data), .attr(“d”, retweetLine(data))  p 128

Reading and Learning Data Visualization Theoretically/Critically:

Chapter 3 Differing Roles of Tables and Graphs
Three Takeaways Today
  • Use tables when you need people to look up individual value as easily as possible.  Use graphs for when people need to be able to see patterns. p 44
  • Tables for reporting on small sets of 20 numbers or less.  Then get into graphs p 50
  • Remember to design graphs for the story you want to tell p 51