![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](https://image.slidesharecdn.com/cdjs-170314015648/85/Crushing-Data-with-JavaScript-12-320.jpg)
![CRUSHING DATA IN JAVASCRIPT
FILTER
var currObj = data.filter(function(a) {
return a.headline === arr[j];
}, []);](https://image.slidesharecdn.com/cdjs-170314015648/85/Crushing-Data-with-JavaScript-13-320.jpg)
![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.](https://image.slidesharecdn.com/cdjs-170314015648/85/Crushing-Data-with-JavaScript-14-320.jpg)
![CRUSHING DATA IN JAVASCRIPT
REDUCE
var sum = [0, 1, 2, 3].reduce(function (a, b) {
return a + b;
}, 0);
// sum is 6](https://image.slidesharecdn.com/cdjs-170314015648/85/Crushing-Data-with-JavaScript-15-320.jpg)
![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](https://image.slidesharecdn.com/cdjs-170314015648/85/Crushing-Data-with-JavaScript-19-320.jpg)
Crushing Data with 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?