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
Advertisements

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

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:

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

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

Code Learning:

Three Takeways Today

Chapter 3 Data-Driven Design and Interaction

  • Loading SVG directly into the DOM letes you mapniulate like any other SVG element you can create in the browser with D3 p 98
  • For SVGs, you want to ignore verbose settings in the document, such as its own <svg> canvas sand <g> elemnts that have been added. You only want <path> elements. p 99
  • “After we load the SVG into the fragment, we can loop trhough the fragment to get all the paths easily using the .empty() function of a selection. The .empty() function checks to see if a selection still has any elements inside it and eventually fires true after we’ve moved the paths out of the fragment into our main SVG. By including .empty() in a while statement, we can move all the path elements out of the document fragment and load them directly into the SVG canvas.” p 99
d3.html(“icon.svg”, loadSVG);
    function loadSVG(svgData) {
        while(!d3.select(svgData).selectAll(“path”).empty()) {
            d3.select(“svg”).node().appendChild(
                d3.select(svgData).select(“path”).node();
    }
    d3.selectAll(“path”).attr(“transform”, “translate(50, 50”); // transform attribute offsets the paths     so they won’t be clipped in the top-right corner
};

Reading and Learning Data Visualization Theoretically/Critically:

Edward Tufte Visual Display of Quantitative Information

Chapter Six Data-Ink Maximization and Graphical Design

Three Takeaways

  • Try to use graphical elements to carry as much data as possible: “A graphical element may carry data information and also perform a design function usually left to non-data-ink.  Or it might show several different pieces of data.  Such multi functioning graphic elements, if designed with care and subtly, can effectively display complex, multivariate data.” p 139
  • “Numbers can also double-funciton when used to both to name things (like an id #) and to reflect an order” p 149 e.g. stem-leaf plot
  • “A sure sign of a puzzle is that the graphic must be interpreted through a verbal rather than visual process” e.g. using a too complex color legend p 153