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
Advertisements

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

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

Chapter 3 Data-Driven Design and Interaction

  • d3.rgb() allows us to create color objects p 89
    • teamColor = d3.rgb(“blue”);
    • teamColor = d3.rgb(“#ff0000”)
    • teamColor = d3.rgb(“#rgb(255, 0, 0)”);
    • teamColor = d3.rgb(255, 0, 0);
  • Color objects also have methods .darker() and .brighter()
    • //using the darker and brighter functions in this function produces a darker version of the set color for teams from the same region and lighter colors for teams from different regions
    • function  highlightRegion(d,i) {
      • var teamColor = d3.rgb(“pink”)
        • d3.select(this).select(“text”).classed(“highlight”, true).attr(“y”, 10)
        • d3.selectAll(“g.overallG”).select(“circle”).style(“fill”, function(p) { return p.region == d.region ? teamColor.darker(.75) :  teamColor.brighter(.5)})
      • this.parentElement.appendChild(this);
      • }
  • You do lose your ability to style with CSS when you’re using inline styles.  “As a rule, you should use CSS whenever you can, but if you want access to things like dynamic colors and transparency using D3 functions, then you’ll need to use inline styling” p 90

Reading and Learning Data Visualization Theoretically/Critically:

Edward Tufte Visual Display of Quantitative Information

Chapter Six Data-Ink Maximization and Graphical Design

Three Takeaways

  • You can use range-frames for presenting ranges along a single dimension or just looking at marginal distributions p 132
  • Dot-dash-plots for combining frequency distribution and bivariate distribution and then rug-plots connecting bivariate scatters p 133
  • “Graphics are almost always going to improve as they go through editing, revision, and testing against different design operations.  The principles of maximizing data-ink and erasing generate graphic alternatives and also suggest a direction in which revisions should move.” p 136

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

Chapter 3 Data-Driven Design and Interaction

  • An example of using the DOM element using the .node() function of a selection
    • d3.select(“circle”).node()
    • Getting to the Dom element lets you take advantage of js functionality.  For instance, you can measure the length of a <path> element or clone an element.
  • Example of highlighting function so that it increases the size of the label when we mouse over each element:
    • function highlightRegion(d,i) {
      • d3.select(this).select(“text”).classed(“active”, true).attr(“y”, 10);
      • d3.selectAll(“g.OverallG”).select(“circle.each(function(p, i) {
        • p.region == d.region ?
          • d3.select(this).classed(“active”, true): d3.select(this).classed(“inactive”), true:); // by turning on “active” class for the <g> that we hover over, we take advantage of the “g> text.active” rule in CSS that makes any text elements that <g> increase their font size
        • });
        • this.parentElement.appendChild(this); // re-appending the <g> element to <svg> element moves it to end of the DOM region and therefore it’s drawn above the other <g> elements
      • };
  • Unhighlight mouse event example
    • teamG.on(“mouseout”, unHighlight)
    • function unHighlight () {
      • d3.selectAll(“g.overallG”).select(“circle”).attr(“class”. “”);
      • d3.selectAll(“g.overallG)”.select(“text”)
      • .classed(“highlight”, false).attr(“y”, 30);
      • });
    • Easy way to disable mouse events
      • teamG.select(“text”).style(“pointer-events”, “none”);

Reading and Learning Data Visualization Theoretically/Critically:

Edward Tufte Visual Display of Quantitative Information

Chapter Five Chartjunk: Vibrations, Grids, and Ducks
Three Takeaways
  • Avoid “unintentional optical art” such as 3d or weird patterned fills that distort meaning p 110
  • Dark grid lines and excessive tick marks a chart junk.  Gray and mute as much as possible – use minimal ink p 113
  • “Computers and their affiliated apparatus can do powerful things graphically, in part by turning out the hundreds of plots necessary for good data analysis.  But at least a few computer graphics only evoke the response “Isn’t it remarkable that the computer can be programmed to draw like that?” instead of “My, what interesting data.” p 120

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

Chapter 3 Data-Driven Design and Interaction
  • Example of a chained transition to improve legibility of data viz: p 86
        teamG
             .append(“circle”).attr(“r”, 0)
             .transition()
             .delay(function(d, i) { return i * 100})
             .duration(500)
             .attr(“r”, 40)
             .transition()
             .duration(500)
             .attr(“r”, 20);
  • Getting access to DOM elements in a selection can be accomplished in two ways
    • Using the .node() function
    • Using the this in the inline functions
  • “Inline functions always have access to the DOM element along with the data point and array positioning of that data point in the bound data.  The DOM element, in this case, is represented by this.  We can see it in action using the .each() function of a selection, which performs the same code for each element in a selection.” p 86

Reading and Learning Data Visualization Theoretically/Critically:

Edward Tufte Visual Display of Quantitative Information

Chapter Four Theory of Data Graphics
Three Takeaways
  • “Bilateral symmetry doubles the space consumed by the design in a graphic, without adding new information.” p 97
  • “Redundancy, upon occasion, has its uses: giving a context and order to complexity, facilitating comparisons over various parts of the data, perhaps creating an aesthetic balance.” p 98
  • Five principles of theory of data graphics
    • Above else show the data
    • Maximum the data-ink ratio
    • Erase non-data-ink
    • Erase redundant data-ink
    • Revise and edit p 105