Day 161 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 2 Information Visualization Data Flow

  • SGV text by default is anchored at start – right of initial position.  If you want to draw it different, set “text-anchor” style to “end” or “middle” p72
  • Child elements gain initial positions from parents, but it is drawn from the position according to rules from the element p 72
  • Don’t rely on array position as binding key.  Use something such as value of the data object or something meaningful p 74

Chapter 6 Network Visualization

  • “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(“”).on(“click”. fixNode);
    • function fixNode(d) {
      •“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
    • function filterNetwork() {
      • force.stop()
      • var originalNodes = force.nodes()
      • var originalLinks = force.links()// Accesses the current array of nodes and array of links associated with the force layout
      • var influentialNodes = originalNodes.filter(function (d) {
        • return d.followers > 20;
        • });
      • var influentialLinks = originalLinks.filter(function (d) {
        • return influentialNodes.indexOf(d.source) > -1 &&
        • influential Nodes.indexOf( > -1; // makes an array of links only out of those that reference existing nodes
        • });
    • d3. selectAll(“g.node”)
      • .data(influentialNodes, function(d) { return}
      • .exit()
      • .transition()  // setting a transition on the .exit(), it applies the transition only to those nodes being removed and waits until the transition is finished to remove them
      • .duration(4000)
      • .style(“opacity”, 0)
      • .remove();
    • d3.selectAll(“”)
      • .data(influentialLinks, function(d) {
        • return + “-” +;
      • })
      • .exit()
      • .transition()
      • .style(“opacity”, 0)
      • .remove();
      • force
        • .nodes(influentialNodes)
        • .links(influentialLinks);
      • force.start();
    • };


Reading and Learning Data Visualization Theoretically/Critically:

Edward Tufte Visual Display of Quantitative Information

Chapter Two Graphical Integrity
Three Takeaways
  • “At the core of the preoccupation with deceptive graphics was the assumption that data graphics were mainly devices for showing the obvious to the ignorant.  It is hard to imagine any doctrine more likely to stifle intellectual progress in a field” p 53
  • “Show data variation, not design variation” p 61
  • “In time-series display of money, deflated and standardized units of monetary measurement are nearly always better than nominal units” p 68

Leave a Reply

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

You are commenting using your 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