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