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(“”, function(d) {
        • return “images/” + + “.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(“”).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

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



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