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

Three Takeways Today

Chapter 4 General Charting Principles 
  • Axis is a function that is a d3 component that lets you draw all graphical elements needed for an exists.  eg.  d3.svg.line() lets you draw a straight or curved line across many points. p 108
  • D3 functionality can be put in three broad categories p 109:
    • Generators take in datapoint array values.  They produce “SVG drawing code for the d attribute of <path> elements.  Generators include area(), line(), diagonal(), arc()
    • Components take in Functions such as scale(), axis(), brush(), zoom().  They productive “elements and event listeners ‘<g><line class=“tick”/><text class=“label” /></g>”
    • Layouts take in whole datasets.  These include stack(), pie(), chord().
  • After creating an axis function, we define how we want the axis to look like.  We use the .call() method from a selection on <go> element on where we want the graphical elements drawn.
    • var yAxis = d3.axis().scale(ySale).orient(“right”);
    • d3.select(“svg”).append(“g”.attr(“id”, “yAxisG”).call(yAxis);
    • var aAxis = d3.svg.axis().scale(xScale).orient(“bottom”);
    • d3.select(“svg”).append(“g”).attr(“id”, “xAxisG”).call(xAxis);
    • The .call() method of a selection invokes a function with the selection thats active in the method chain.  Same as: xAxis(d3.select(“svg”).append(“g”).attr(“id”, xAxisG”));
Advertisements

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

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

Code Learning:

Longer Takeways since took the weekend off

Chapter 3 Data-Driven Design and Interaction

  • A modal dialogue is a way of describing a “floating area” that typically only shows up when you click an element. Typicaly, youou write HTML table file separately in another file.
  • Example of a function to create a div with ID “model” to add loaded HTML code using .html() function:
    d3.text(“resources/modal”, function(data) {
    d3.select(“body”).append(“div”).attr(“id”, “modal”).html(data)
    });

    teamG.on(“click”, teamClick);

    function teamClick(d) {
    d3.selectall(“td.data”).data(d3.values(d))
    .html(function(p) {
    return p
    });
    };
    If you use d3.html(), you get HTML nodes that allow to do more sophisticated manipulation.

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

Code Learning:

Longer Takeways since took the weekend off

Chapter 3 Data-Driven Design and Interaction

  • d3.hsl() lets you create HSL color objects the same way you do for d3.rgb().  HSL can help avoid muddying, which can happen you you build color ramps and mix colors using D3 functions.  Interpolated values for colors created by ramps can look like crap and be hard to distinguish p 90
  • HSL is a different color coordinate model from RGB that is cylindrical and stands for hue, saturation, lightness – mean to be a more intuitive color scale
  • // setting the interpolation method for a scale is necessary when we don’t want the default behavior, such as when creating a color scale with a method other than interpolating RGB values
    • var ybRamp= d3.scale.linear()
      • interpolate(d3.interpolateHsl)
      • domain([0, maxValue]).range([“yellow”, “blue”])
  • “As a general rule, you’ll find that colors interpolated with in RGB tend toward muddy and gray, unless you break the color ramp into multiple stops.  You can experiment with different color ramps, or stick to ramps that emphasize hue or saturation (by using HSL). ” p 92
  • How to quantize colorbrewer data – since they’re discrete scales designed for quantitative data that has already been separate into categories, eg like income ranges 
    • function buttonClick(d) {
      var maxValue = d3.max(incomingData, function(el) {return parseFloat(el[d])}); // sorts circles in our visualization into three categories with colors associated with them
      var colorQuantize = d3.scale.quantize().domain([0,maxValue]).range(colorbrewer.Reds[3]); // the quantize scale sorts the numerical data into as many categories as there are in the range. Because colorbrewer.Reds[3] is an array of three values, the data is sorted into three discrete categories, and each category has a different shade of red assigned.
      var radiusScale = d3.scale.linear().domain([0,maxValue]).range([2,20]);
      d3.selectAll(“g.overallG”).select(“circle”).transition().duration(1000).style(“fill”, function(p) {return colorQuantize(p[d])}).attr(“r”, function(p) {return radiusScale(p[d])})
      }
  • Example of inserting images.  You use .insert() instead of .append() so D3 inserts the images before text elements so labels don’t get drawn behind the images
    • d3.selectAll(“g.OverallG”).insert(“image”, “text”)
      • .attr(“x.link:href”, function(d) {
        • return “images/” + d.team + “.png”;
      • })
      • .attr(“width”, “45px”).attr(“height”, “20px”).attr(“x”, “-22”)
      • .attr(“y”, “-10”);
  • “One effective interaction technique is to set a node as fixed when the user interacts with it.  This allows users to drag nodes to a position on the canvas so they can visually sort the important nodes” p 196
    • d3.selectAll(“g.site”).on(“click”. fixNode);
    • function fixNode(d) {
      • d3.select(this).select(“circle”).style(“stroke-width”, 4); // add thicker width to style
      • d.fixed = true;
      • }
  • To filter a network, you need to stop() it, remove any nodes and links that are no longer part of the network, rebind those arrays to the force layout, and then start() the layout.  This can be done as a filter on the array that makes up your nodes” p 197
  • “By using the .indexOf function of an array, though, we can easily create our filtered links by checking to see if the source and target are both in our filtered nodes array.  Because we used key values when we first bound our arrays to our selection, we can use the selection.exit() to behavior to easily update our network” p 197

D3.js Meet-up 

  • React is library for UI that does component style building
  • Takes advantage of functional programming
  • D3 does the math, React modifies the DOM
    • D3 should not manipulate the DOM in this context