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