Crushing Data in JavaScript (Odds and Ends)

In a previous blog post series I wrote about how to manage data in the front end using JavaScript. That blog post can be found here: Crushing Data With JavaScript Part 1 if you haven’t read it yet. I realized as I was preparing to give a talk on this same topic that I left out some key items:

  • Perform data aggregation in the front end at your own risk. Aggregation of data can be a pretty resource intensive task and should be handled as such. Do as much of this processing on the server side as you can and only expose a semi-aggregated dataset to the front-end.
  • Much of the functionality that I described can be handled nicely in D3. If you are using D3 in your project already you might want to look at D3’s nest function. Pass the dimension you want to group by as the key, metrics as your rollup, and the dataset you are aggregating as your entries.
.key(function(d){return d.age})
.rollup(function(v){return d3.sum(v, function(d) {return d.males;})})
  • When you are creating data visualizations it is key to understand the core principles of design. Research the work of people like Edward Tufte and Stephen Few who have contributing significantly to the art of visualizing data. A great example are Tufte’s principles of design: Quality Comparisons, Causality, Multivariate Analysis, Integration of Evidence, Documentation, & Content Counts Most of All.

In essence: my blog post is a guideline for how to consume, manipulate, and present data in JavaScript but it should be used responsibly to ensure that the information is properly represented, easy to understand, maintainable, and performant. Understand the core concepts like JavaScript’s map, reduce, and filter functions but also understand the tools that are available in the libraries you have available.