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 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:

Show Me the Numbers by Stephen Few

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

Day 173 of 180 Days of Data Viz Learning #jfdi #dataviz #doneisbetterthanperfect

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

• Elements of an axis created from d3.svg.axis are:
  1) <path.domain> with a size equal to size of axis
  2) <g.tick.major> contains <line> and <text> for each major tick
  3) <line.tick.minor> for each minor tick
  g element is called when these elemnets are created
  p 113
• Use d3.scale.quartile() to create a box plot p 117
• “It’s a good rule to always use the <g> elements for your charts, because they allow you to apply labels or other important information to your grpahicl representations. But that means yo’ull need to use the tranform attribute, which is how <g> elements are position on the canvas. Elements appened to a <g> base their coorindates off of the coordinates of their parent. When applying x and y attributes to child elmenet,s you need to set them relative to the parent <g>.” p 119

Reading and Learning Data Visualization Theoretically/Critically:

Show Me the Numbers by Stephen Few

Chapter 2 Simple Statistics to Get You Started

Three Takeaways Today

• Quantitative stories include two types of data: 1) Quantitative 2) Categorical p. 20
• “If more than two values appear more than once with the same high degree of frequency, the set is multimodal.  Modes are rarely useful for most data presentation purposes” p 24
• Frequency polygon uses a line to map the frequency of instances that occur for each value from lowest to highest p 28

Day 171 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.

*Good development this week in that my frustration with not knowing anything or just jumping over another learning hump to see there’s another hill is now not anywhere as it was daunting as it was 30 days ago let alone 180 days ago.  I’m actually getting more genuinely excited on being able to make stuff in the near future now then dreading more learning and frustration like some points of this process.

Reading and Learning Data Visualization Theoretically/Critically:

Edward Tufte Visual Display of Quantitative Information

Chapter 8 Data Density and Small Multiples

Three Takeaways

• “Good design has two key elements.  Graphical elegance is often found in simplicity of design and complexity of data.  Visually attractive graphics also gather power from content and interpretations beyond the immediate display of some numbers.  The best graphics are about the useful and important, about life and death, about the universe.  Beautiful graphics do not traffic with the trivial” p 177
• “The substantive content, extensiveness of labels, and volume and ordering data all help determine the choice of method for the display of quantitative materials.  The basic structures for showing data are the sentence, the table, and the graphic.  Often two more three of these devices should be combined.” p 178
• On tables and text
  • “Tables are clearly the best way to show exact numerical values, although the entries can also be arranged in semi-graphical form.  Tables are preferable to graphics for many small data sets.”p 178
  • “One super table is far better than a hundred little bar charts.” p 179
  • “Words and pictures belong together.” p 180

Day 170 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:

Edward Tufte Visual Display of Quantitative Information

Chapter 8 Data Density and Small Multiples

Three Takeaways

• “The way to increase data density other than by enlarging the data matrix is to reduce the area of a graphic.  The Shrink Principle has a wide application: Graphic can be shrunk way down.” p 169
• “Well designed small multiples are
  • inevitably comparative
  • deftly multivariate
  • shrunken, high-density graphics
  • usually based on a large data matrix
  • drawn almost entirely with data-ink
  • efficient in interpretation
  • often narrative in context, showing shifts in the relationship between variables as the index variable changes (thereby revealing interactive or multiplicative effects). p 175
• “Small multiples reflect much of the theory of data graphics: For non-data-ink, less is more.  For data-ink, less is a bore” p 175

Day 169 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.

Code Learning:

Eljiah Meeks D3.js in Action

Three Takeways Today

Chapter 3 Data-Driven Design and Interaction

• • // We can’t set the .html() of a <g> element to the text of our incoming elements like we did with the >div> because SVG doesn’t have a corresponding property to innerHTML, and therefore the .html() function on a selection of SVG elements doesn’t work. We have to clone the paths and append them to each <g> element instead. p101

  // Example of cloning paths to append to each SVG element

  d3.html(“icon.svg”, loadSVG);

  function loadSVG(svgdata) {

  d3.selectAll(“g”).each(function() {

  var gParent=this;

  d3.select(svgData).selectAll(“path”).each(function() {

  gParent.appendChild(this.cloneNode(true))
  });

  });

  };

  // The datum function is what you use when you’re binding just one piece of data to an element. It’s the equivalent of wrapping your variable in an array and binding it to .data(). p 102

  d3.selectAll(“g.overallG”).each(function(d) {

  d3.select(this).selectAll(“path”).datum(d)});
  var tenColorScale = d3.scale.category10([“UEFA”, “CONMEBOL”, “CAF”, “AFC”])

  d3.selectAll(“path”).style(“fill”, function(p) {

  return tenColorScale(p.region)

  }).style(“stroke”, “black”).style(“stroke-width”, “2px”);

Reading and Learning Data Visualization Theoretically/Critically:

Edward Tufte Visual Display of Quantitative Information

Chapter Six Data-Ink Maximization and Graphical Design and Chapter 7 Data Density and Small Multiples

Three Takeaways

• “Graphics can be designed to have at least three viewing depths: (1) what is seen from a distance, a overall structure usually aggregated from an underlying microstructure; (2) what is seen up close and in detail, the fine structure of the data; and (3) what is seen implicitly, underlying the graphic- that which is behind the graphic.” p 155
• “Doing analysis of the viewing architecture of a graphic will help in creating and evaluating designs that organize complex information hierarchically” p 159
• “Maximize data density and the size of the data matrix, within reason” p 168