Day 117 of 180 Days of Data Viz Learning #jfdi

See post explaining how and why I’m doing this.

Code Learning:

Selections in d3 – the long story

Three Takeaways:

  • D3 looks not cryptic but is
  • Take extra care that ‘inheritance’ in D3 is not the same for every layout either
  • In D3 like in real life “children behave like their parents, unless they are given specific instructions.”

Learn Js Iterate Data End + Grouping Data

  • Remember you can chain different functions togther for data wrangling.  Sort here is working on returned filtered array from value.
    • var bigCities = data.filter(function(d) { return d.population > 500000; })
      • .sort(function(a,b) { return a.population – b.population; })
      •  .map(function(d) { return d.city; });
  •  D3.nest functionality produces groups of data with minimal amounts of code from flat data structures eg
    •  d3.csv(“expenses.csv”, function(data) {
    • });
    • var expensesByName = d3.nest()
    •   .key(function(d) { return d.name; })
    •   .entries(expenses);
    •   expensesByName = [
    •   {“key”:”jim”,”values”:[
    •     {“name”:”jim”,”amount”:34,”date”:”11/12/2015″},
    •     {“name”:”jim”,”amount”:45,”date”:”12/01/2015″}
    •   ]},
    •   {“key”:”carl”,”values”:[
    •     {“name”:”carl”,”amount”:120.11,”date”:”11/12/2015″}
    •   ]},
    •   {“key”:”stacy”,”values”:[
    •     {“name”:”stacy”,”amount”:12.00,”date”:”01/04/2016″},
    •     {“name”:”stacy”,”amount”:34.10,”date”:”01/04/2016″},
    •     {“name”:”stacy”,”amount”:44.80,”date”:”01/05/2016″}
    •   ]}
    • ];
  • With roll-up, you can provide a function that takes in an array and can produce a value based on the array.
    • var expensesCount = d3.nest()
      •   .key(function(d) { return d.name; })
      •   .rollup(function(v) { return v.length; })
      •   .entries(expenses);
    • => [{“key”:“jim”,“values”:2},{“key”:“carl”,“values”:1},{“key”:“stacy”,“values”:3}]

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