athletes = [
{name: "Floyd Mayweather", sport: "Boxing", nation: "United States", earnings: 285},
{name: "Lionel Messi", sport: "Soccer", nation: "Argentina", earnings: 111},
{name: "Cristiano Ronaldo", sport: "Soccer", nation: "Portugal", earnings: 108},
{name: "Conor McGregor", sport: "MMA", nation: "Ireland", earnings: 99},
{name: "Neymar", sport: "Soccer", nation: "Brazil", earnings: 90},
{name: "LeBron James", sport: "Basketball", nation: "United States", earnings: 85.5},
{name: "Roger Federer", sport: "Tennis", nation: "Switzerland", earnings: 77.2},
{name: "Stephen Curry", sport: "Basketball", nation: "United States", earnings: 76.9},
{name: "Matt Ryan", sport: "Football", nation: "United States", earnings: 67.3},
{name: "Matthew Stafford", sport: "Football", nation: "United States", earnings: 59.5}
]
athletesBySport = d3.group(athletes, d => d.sport)
athletesBySport.get("Basketball")
html`<table>
<thead>
<tr><th>Sport</th><th>Athletes</th></tr>
</thead>
<tbody>${Array.from(athletesBySport, ([key, values]) => html`
<tr>
<td>${key}</td>
<td>${values.map(d => d.name).join(", ")}</td>
</tr>`)}</tbody>
</table>`
athletesBySport.get("Soccer")
athletesByNationSport = d3.group(athletes, d => d.nation, d => d.sport)
athletesByNationSport.get("United States").get("Boxing")
d3.group(athletes, d => d.name[0])
d3.groups(athletes, d => d.name)
d3.groups(athletes, d => d.name, d => d.sport)
transactions = [
{name: "Jim", amount: 3400, date: new Date("2015-11-12")},
{name: "Carl", amount: 12011, date: new Date("2015-11-12")},
{name: "Carl", amount: 2391, date: new Date("2015-11-12")},
{name: "Stacy", amount: 3405, date: new Date("2015-10-09")},
{name: "Stacy", amount: 1201, date: new Date("2016-01-04")}
]
d3.groups(transactions, d => d.date) // 🕷 Dates are not equal!
d3.groups(transactions, d => +d.date) // 👍 Numbers can be equal.
athletes
d3.rollup(athletes, v => v, d => d.sport)
d3.rollup(athletes, v => v[0].name, d => d.sport)
d3.rollup(athletes, v => v.length, d => d.sport)
d3.rollup(athletes, d => d[0].earnings, d => d.sport) // after d => d.sport result an array not an object
d3.rollup(athletes, v => d3.sum(v, d => d.earnings), d => d.sport)
d3.least(
d3.rollup(athletes, v => d3.sum(v, d => d.earnings), d => d.sport),
([, sum]) => -sum
)
d3.least(d3.group(athletes, d => d.sport), ([, v]) => -d3.sum(v, d => d.earnings))
d3.rollup(athletes, v => v.length, d => d.nation, d => d.sport)
d3.rollups(athletes, v => d3.sum(v, d => d.earnings), d => d.sport)
d3 = require("d3-array@^2.2")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
