Day 163 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
  • Don’t forget to assign your selections to a variable to refer to it so your code is more clean without having to type out d3.selectAll() every time p 81
    • var teamG = d3.selectAll(:g.overallG”);
  • “Although you might write an application entirely with D3 and your own custom code, for large-scale sustainable projects you’ll have to integrate more external libraries” p 82
  • Example of Event
    • var dataKeys = d3.keys(incomingData[0].function(el) {
      return el != “team” && el != “region”;
      }); // use d3.keys and pass it one of the objects from our array. d3.keys function returns the names of attributes of an objet as an array. The array is filtered to remove team and region attributes because they’re nonnumerical data that won’t be suitable for buttonClick functionality.“#controls”).select(“button.teams”)
      .data(dataKeys).enter() // builds buttons based on the numerical data
      .on(“click”, buttonClick) // registers onclick behavior for reach button, whith a wrapper that gives access to the data the at was bound to it when it was created
      .html(function(d) { return d;}) // remember dataKeys consists of an array of attribute names, so the d corresponds to one of those names and makes a good button title

      function buttonClick(datapoint) {
      var maxValue = d3.max(incomingData, function(d)
      return parseFloat(d[datapoint])}
      }); // function each button is calling on click, with the bound data sent automatically as the first argument

      var radiusScale = d3.scale.linear()
      .domain([0, maxValue]).range([2, 20]);

      .attr(“r”, function(d) {
      return radiusScale(d[datapoint]);
      }; // initial button click function sizes circles based on numerical value of each associated attribute

      // changing color on hoverover and back on mouseout

      teamG.on(“mouseover”, highlightRegion);
      function highlightRegion(d) {
      .style(“fill”, function(p) {
      return p.region == d.region ? “red”: “gray”;

      teamG.on(“mouseout”, function() {
      d3.selectAll(“g.overallG”).select(“cirlce”).style(“fill”, “pink”);

      teamG.on(“mouseout”, function() {
      d3.selectAll(“g.overallG”.select(“circle”).style(“fill”, “pink”);

Reading and Learning Data Visualization Theoretically/Critically:

Edward Tufte Visual Display of Quantitative Information

Chapter Three Sources of Graphical Integrity and Sophistication

 Three Takeaways
  • “If the statistics are boring, then you’ve got the wrong numbers.  Finding the right numbers requires as much specialized skill – statistical skill- and hard work as creating a beautiful design or covering a complex news story.” p 80
  • “The conditions under which many data graphics are produced- the lack of substantive and quantitative skills of the illustrators, dislike of quantitative evidence, and contempt for the intelligence of the audience- guarantee graphic mediocrity.  These conditions engender graphics that (1) lie; (2) employ only simplest designs, often unstandardized time-series based on a small handful of data points; and (3) miss the real news actually in the data” p 87
  • “Graphical competence demands three quite different skills: the substantive, statical, and artistic.” p 87

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