This document discusses techniques for summarizing and visualizing data in JavaScript. It covers built-in array methods like filter, reduce, and map for manipulating data, as well as the D3 library. Filter is used to subset data by a predicate, reduce condenses data into a single value, and map transforms each element of an array. D3 offers grouping and rollup capabilities using nest, key, and rollup to summarize data by dimension and aggregate metrics. The overall aim is to boil data down on the backend and serve a minimized dataset to optimize frontend performance when working with large amounts of data in JavaScript.

1. CRUSHING DATA IN
JAVASCRIPT
MODERN DEVS CHARLOTTE

2. BRIAN GREIG
DIGITAL CONSULTATION / JAVASCRIPT ENGINEER
- TWITTER @IGNOREINTUITION
- GITHUB /IGNOREINTUITION

3. CRUSHING DATA IN JAVASCRIPT
FULL DISCLAIMER
▸ Summarizing data in the front end is not advised
▸ Boil your data down on the backend
▸ Serve up a single, minimized dataset
▸ Use the techniques described to produce analytics

4. CRUSHING DATA IN JAVASCRIPT
PRINCIPLES OF DATA MANAGEMENT
▸ Summarize (reduce)
▸ Subset (filter)
▸ Transform (map)

5. CRUSHING DATA IN JAVASCRIPT
DATA MANAGEMENT TERMINOLOGY
▸ Dimensions
▸ Metrics
▸ Hierarchies
▸ Detailed Dimensions

6. CRUSHING DATA IN JAVASCRIPT
DATA MANAGEMENT TERMINOLOGY
▸ Dimensions
▸ Metrics
▸ Hierarchies
▸ Detailed Dimensions

7. CRUSHING DATA IN JAVASCRIPT
DATA MANAGEMENT TERMINOLOGY
▸ Dimensions
▸ Metrics
▸ Hierarchies
▸ Detailed Dimensions

8. CRUSHING DATA IN JAVASCRIPT
VISUALIZING DATA
Quality Comparisons (Show comparisons, contrasts, differences)
Causality (Show causality, mechanism, explanation, systematic structure)
Multivariate Analysis (Show more than 1 or 2 variables)
Integration of Evidence (Completely integrate words, numbers, images, and diagrams)
Documentation (Thoroughly describe the evidence. Provide a detailed title, indicate the authors
and sponsors, document the data sources, show complete measurement scales, point out
relevant issues.)
Content Counts Most of All (Analytical presentations ultimately stand or fall depending on the
quality, relevance, and integrity of their content)
- Edward Tufte

9. CRUSHING DATA IN JAVASCRIPT
VISUALIZING DATA
https://d3js.org/
http://shop.oreilly.com/product/0636920026938.do

10. CRUSHING DATA IN JAVASCRIPT
DATA IN JAVASCRIPT

11. CRUSHING DATA IN JAVASCRIPT
WHAT WE ARE LOOKING AT
▸ Immutable functions
▸ Basic functions of the Array Prototype
▸ Well supported

12. CRUSHING DATA IN JAVASCRIPT
FILTER
▸ var newArray = arr.filter(callback[, thisArg])
▸ callback: Function is a predicate, to test each element of
the array. Takes three arguments: element, index, array
▸ array: array filter was called upon

13. CRUSHING DATA IN JAVASCRIPT
FILTER
var currObj = data.filter(function(a) {
return a.headline === arr[j];
}, []);

14. CRUSHING DATA IN JAVASCRIPT
REDUCE
‣ arr.reduce(callback, [initialValue])
‣ callbackFunction to execute on each value in the array,
taking four arguments: accumulator, currentValue,
currentIndex, array
‣ array: The array reduce was called upon.
‣ initialValue: Optional. Value to use as the first argument to
the first call of the callback.

15. CRUSHING DATA IN JAVASCRIPT
REDUCE
var sum = [0, 1, 2, 3].reduce(function (a, b) {
return a + b;
}, 0);
// sum is 6

16. CRUSHING DATA IN JAVASCRIPT
REDUCE
‣ Works for a single measure, dimension
‣ We want our dataset to have
‣ Several measures, Multi-dimensional

17. CRUSHING DATA IN JAVASCRIPT
REDUCE
data.reduce(function(a, b){
a.count++;
if (b.age > 50) { a.over50 += b.males; }
if (b.age <= 50) { a.under50 += b.males; }
return a;
}, {"count": 0,"under50": 0,"over50": 0})

18. CRUSHING DATA IN JAVASCRIPT
REDUCE

19. CRUSHING DATA IN JAVASCRIPT
MAP
‣ var new_array = arr.map(callback[, thisArg])
‣ callback: Function that produces an element of the new
Array, taking three arguments: currentValue, index, array,
thisArg

20. CRUSHING DATA IN JAVASCRIPT
MAP
data.map(function(a){
if (a.age > 50){
return {"age": "over50", "males": a.males}
} else {
return {"age": "under50", "males": a.males}
};});

21. CRUSHING DATA IN JAVASCRIPT
MAP

22. CRUSHING DATA IN JAVASCRIPT
USING D3
▸ D3 offers grouping / rollup capabilities
▸ d3.nest
▸ key
▸ rollup
▸ sum, average, mean, etc

23. CRUSHING DATA IN JAVASCRIPT
USING D3
d3.nest()
.key(function(d){return d.age})
.rollup(function(v){return d3.sum(v, function(d) {return
d.males;})})
.entries(data2);

24. CRUSHING DATA IN JAVASCRIPT
MORE
https://medium.com/@IgnoreIntuition/crushing-data-in-javascript-9d728b94c051#.xzef0qutd
https://github.com/ignoreintuition/Crushing-Data

25. CRUSHING DATA IN JAVASCRIPT
QUESTIONS?