Image Sharpeningd3.blurd3.rankd3.flatGroup, d3.flatRollupd3.moded3.groupSortSet Operationsd3.groups as a hierarchyd3.fsum, d3.AdderTime thresholds for d3.bind3.cumsumTidy Stacked Area ChartMerging Duplicate Valuesd3.zip, d3.transposed3.bind3.ticksd3.mean, d3.median, and friendsd3.quickselectd3.bisectd3.sumd3.countd3.min, d3.max, d3.extentd3.least, d3.greatestd3.pairsd3.crossd3.ascending, d3.descendingd3.merged3.ranged3.permuted3.shuffled3-array 2.0
d3.group, d3.rollup, d3.index
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")
<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.group(transactions, d => d.date) // 👍 Dates can be equal!
d3.rollup(athletes, v => v.length, d => d.sport)
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)
index = d3.index(athletes, d => d.name)
facts = [
{about: "Neymar", fact: "Neymar is Neymar da Silva Santos Júnior"},
{about: "Roger Federer", fact: "Federer has won 20 Grand Slam men's singles titles"},
{about: "Megan Rapinoe", fact: "Rapinoe was named The Best FIFA Women's Player in 2019"}
]
facts.map(({about: name, fact}) => ({fact, name, ...index.get(name)}))
{
const index = d3.index(facts, d => d.about);
return athletes.map(({name, ...values}) => ({name, fact: index.get(name)?.fact}))
}
{
const index = d3.index(facts, d => d.about);
return athletes.map(({name, ...values}) => ({name, fact: index.get(name)?.fact, ...values}))
}
d3.index(athletes, d => d.nation)
nn = d3.index(athletes, d => d.nation, d => d.sport, d => d.name)
nn.get("United States")?.get("Basketball")
nn.get("United States")?.get("Basketball")?.get("LeBron James")
nn.get("United States")?.get("Soccer")?.get("Rapinoe")
d3.indexes(athletes, d => d.nation, d => d.name)
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.
