Skip to content

Latest commit

 

History

History
81 lines (57 loc) · 2.47 KB

d3.md

File metadata and controls

81 lines (57 loc) · 2.47 KB
Raw

Open-source JavaScript Libraries

D3 Overview

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation. - D3 documentation

D3 is useful for both its data-processing and data-visualization capabilities.

Source Code: https://github.com/d3/d3.

Data Processing

Arrays

Reference: https://github.com/d3/d3/blob/master/API.md#arrays-d3-array.

See also: https://github.com/d3/d3-array.

Statistics

Reference: https://github.com/d3/d3/blob/master/API.md#statistics.

Use D3 to perform statistical computations on an array of numbers:

var arr = [109,823,5,77,32,50]
d3.sum(arr) //> 1096
d3.mean(arr) //> 182.66666666666666
d3.median(arr) //> 63.5
d3.min(arr) //> 5
d3.max(arr) //> 823
d3.quantile(arr) //> NaN (d3.quantile() expects to receive a sorted array)

arr.sort(d3.ascending)
arr //> [5, 32, 50, 77, 109, 823] (MUTATING)
d3.quantile(arr, 0) //> 5 (MIN)
d3.quantile(arr, 0.25) //> 36.5 (FIRST QUARTILE)
d3.quantile(arr, 0.5) //> 63.5 (MEDIAN)
d3.quantile(arr, 0.75) //> 101 (THIRD QUARTILE)
d3.quantile(arr, 1) //> 823 (MAX)

arr.sort(d3.descending)
arr //> [823, 109, 77, 50, 32, 5] (MUTATING)
Collections

Reference: https://github.com/d3/d3/blob/master/API.md#collections-d3-collection.

Nests

Reference: https://github.com/d3/d3/blob/master/API.md#nests

Use d3.nest() to group an array of objects by a given key:

var teams = [
  {city:"New York", name:"Yankees"},
  {city:"New York", name:"Mets"},
  {city:"Boston", name:"Red Sox"}
]

var teamsGroupedByCity = d3.nest()
  .key(function(d) { return d.city })
  .entries(teams)

teamsGroupedByCity //> [Object, Object]
teamsGroupedByCity[0] //> {key: "New York", values: Array[2]}
teamsGroupedByCity[0].key //> "New York"
teamsGroupedByCity[0].values //> [Object, Object]
teamsGroupedByCity[0].values[0] //> {city: "New York", name: "Yankees"}
teamsGroupedByCity[0].values[1] //> {city: "New York", name: "Mets"}
teamsGroupedByCity[1] //> {key: "Boston", values: Array[1]}
teamsGroupedByCity[1].key //> "Boston"
teamsGroupedByCity[1].values //> [Object]
teamsGroupedByCity[1].values[0] //> {city: "Boston", name: "Red Sox"}

Data Visualization

Out of scope for this course.