Day 120 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:

Udacity Data Visualization and D3.js – Continuing lecture on Dimple.js

Three Takeaways

  • Dimple.js simplifies D3 functions such as axis and certain charts
  • in myChart.addSeries(null, dimple.bar.plot); the null is telling Dimplejs not to facet or group the bars in anyway
  • Remember to use debugger and developer tools to taste piece by piece if necessary – it’s your friend

LearnJS Grouping Data

  • Map Output
    • Have d3.nest return an object (or d3.map) of the reuslts for direct access
    • var expensesTotal = d3.nest()
    •                 .key(function(d) { return d.name; })
    •                 .rollup(function(v) { return d3.sum(v, function(d) { return d.amount; }); })
    •                 .map(expenses)
    • console.log(JSON.stringify(expensesTotal));
    • => {“jim”:79,”carl”:120.11,”stacy”:90.9}
  • Multi-Level Nesting
    • Subdividing further.  Rollup callback is called for each of our smaller groupings.  Order of nest.key determines order of the grouping.
      • var expensesTotalByDate = d3.nest()                .key(function(d) { return d.name; }).key(function(d) { return d.date; })         .rollup(function(v) { return d3.sum(v, function(d) { return d.amount; }); })             .map(expenses)
    • console.log(JSON.stringify(expensesTotalByDay));
      • => {“jim”:{“11/12/2015″:34,”12/01/2015”:45},
      • “carl”:{“11/12/2015”:120.11},
      • “stacy”:{“01/04/2016″:46.1,”01/05/2016”:44.8}}
    • Order matters here:
      • var expensesTotalByDate = d3.nest()             .key(function(d) { return d.date; }).key(function(d) { return d.name; })             .rollup(function(v) { return d3.sum(v, function(d) { return d.amount; }); }                .map(expenses)
      • => {“11/12/2015”:{“jim”:34,”carl”:120.11},
      • “12/01/2015”:{“jim”:45},
      • “01/04/2016”:{“stacy”:46.1},
      • “01/05/2016”:{“stacy”:44.8}}
  • Derived Key Values
    • Specifying key value using a function. eg. some basic string manipulation
    • var expensesByYear = d3.nest()
    •                 .key(function (d) { return d.date.split(“/”)[2]; })
    •                 .rollup(function(v) { return d3.sum(v, function(d) { return d.amount; }); })
    •                 .map(expenses);
    • console.log(JSON.stringify(expensesByYear));
      • => {“2015″:199.11,”2016”:90.9}

Jerome Cukier D3 Selections – Putting the data in data visualization section

Three Takeaways:

  •             var fs=[“10px”, “20px”, “30px”]; // match an array of values to selection of elements in a page
  •             d3.selectAll(“p”).data(fs).style(“font-size”, function(d) {return d;})
  •             d3.selectAll(“p”).data(fs).style(“font-size”, String) // also works as a shorter example by converting any element into a string versus having the whole function

Reading and Learning Data Visualization Theoretically/Critically:

The Functional Art: An Introduction to Information Graphics and Visualization by Alberto Cairo

p25-36 Intro and Why Visualize: From Information to Wisdom

Three Takeaways

  • What should an infographic help me with?
    • Must present several variables, allow for comparisons, help me organize comparisons, and make correlations or relationships evident.
  • “The form of a thing is a clue to its nature.”  “Form ever follows function” – however, don’t so strictly apply this – it’s not always the case in nature or with design p32
  • For designs: “The form should be constrained by the functions of your presentation… In general, the better defined the goals of an artifact, the narrow the variety of forms it can adopt.” p 36
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