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
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s