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

Learn JS Data: Iterating Over and Reducing Data

Three Takeaways:

  •  Sorting, unlike filter, map, and other functions modifies the array you are sorting in place, instead of returning a new array with objects sorted.
    • You need a comparator function that takes two pieces of data and indicates which one you want higher on the list.
    •  Example of sorting population in a desecending order:
    • data.sort(function a, b) {
    •                 return b.population – a.population;
    • });
  • D3 also has a few helper functions to implement ascending and descending comparator functions but they appear to only accept arrays of raw numbers instead of objects. In odrer to use d3.ascending or d3.descending you may need to do something like this:
    • var populations = { return d.population; });
    • console.log(populations);
      • => [652405, 8405837, 645966, 467007]
    • populations.sort(d3.descending);
  • Reduce() applies a function against an accumulator and each value of array to reduce to a single value.
    • First is a call back function that will return the reduction.  The function is passed in the previous value from the last time the callback was called.  Reduce can also take an initial value, which is the second parameter to the reduce call.
    • var landSum = data.reduce(function(sum, d) {
    •   return sum + d.land_area;
    • }, 0);
      • => 749.8
    • var weirdString = data.reduce(function(str, d, i) {
    •   var ending = (i % 2 === 0) ? ” is cool.” : ” sucks.” ;
    •   return str + ” ” + + ending;
    • }, “”);
      • => seattle is cool. new york sucks. boston is cool. kansas city sucks.

 Knight Journalism Intermediate D3 for Data Visualization 

Week Four Lecture: Adding Data Points to the Map

  • Data load involves loading long and lat values in function by setting attributes in property as an array in projection
    • .attr(cx, function(d) { return projection([d.longitude, d.latitude])[0]; })
    • .attr(“cy”, function(d) { return projection([d.longigtude, d.latitude])[1]; })
  • Order matters to make sure circles or other elements are after paths so that they’re overload
  • Use Math.sqrt to scale circles by area and not radius to be proportional
    • Math.sqrt(+d.population * .001)

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 )

Google+ photo

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


Connecting to %s