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

Advertisements

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

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:

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