family= {
return {
name: "root",
children: [
{name: "child #1",
children:[
{name: "grandchild #4"}
]
},
{name: "child #2",
children: [
{name: "grandchild #1"},
{name: "grandchild #2"},
{name: "grandchild #3"}
]
}
]
}
}
d3.hierarchy(family)
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}
]
nestGroupAthletes = d3.group(athletes, d => d.nation, d => d.sport)
hierFamily = d3.hierarchy(family)
hierFamily.leaves()
Object.keys(hierFamily)
hierFamily["__proto__"]
hierFamily.leaves()
hierFamily.leaves().map(d=>d.data.name)
hierFamily.ancestors()
hierFamily.depth
hierFamily.children[1]
//hierFamily.count() //adds the count to 'value' property
hierFamily.children[0].parent
hierFamily.children[0].parent == hierFamily
{let s="";
hierFamily.eachAfter(d=>s+=d.data.name+" | ")
return s;}
{let s="";
hierFamily.each(d=>s+=d.data.name+" | ")
return s;}
{let s="";
hierFamily.eachBefore(d=>s+=d.data.name+" | ")
return s;}
hierFamily.copy()
hierFamily.children[1].count()
hierFamily
treeFamily=hierFamily.copy()
d3.tree()(treeFamily)
treeFamily //contains x and y
hierFamily //doesnt contain x and y
stratifier = d3.stratify()
root = stratifier.path((d) => d)(paths);
root.leaves()
rootTab = d3.stratify().id((d) => d.name).parentId((d) => d.parent)(tabularTree);
Plot.plot({
axis: null,
margin: 20,
marginRight: 120,
marks: [
Plot.tree(rootTab, {path:d=>d.id})
]
})
Sunburst(flare, {
path: (d) => d.name.replaceAll(".", "/"), // e.g. flare/animate/Easing
label: (d) => d.name.split(".").pop(), // display text
value: (d) => d.size, // angle of each arc
title: (d, n) => [n.id, n.value.toLocaleString()].join("\n"), // hover text
width,
height: 720
})
Sunburst(family, {
//path: (d) => d.name.replaceAll(".", "/"), // e.g. flare/animate/Easing
label: (d) => d.name, // display text
//value: (d) => d?.size, // angle of each arc
//title: (d, n) => [n.id, n.value.toLocaleString()].join("\n"), // hover text
//width,
//height: 720
})
Sunburst(hierFamily, {label: (d) => d.data.name+"\r"+d.height})
nestGroupAthletes
nestGroupAthletes2 = d3.rollup(athletes, v=>v.map(d=>[d.name,undefined]), d => d.nation, d => d.sport)
d3.hierarchy(nestGroupAthletes2)
Sunburst(d3.hierarchy(nestGroupAthletes2), {height:600,label:d=>d.data[0]} )
Sunburst( (nestGroupAthletes2), {height:600,label:d=>d[0]} )
Sunburst(flare, {label: (d) =>{debugger;return d.name}, height: 580})
gods = [
"Chaos/Gaia/Mountains",
"Chaos/Gaia/Pontus",
"Chaos/Gaia/Uranus",
"Chaos/Eros",
"Chaos/Erebus",
"Chaos/Tartarus"
]
Plot.plot({
axis: null,
height: 100,
margin: 20,
marginRight: 120,
marks: [
Plot.link(gods, Plot.treeLink()),
Plot.dot(gods, Plot.treeNode()),
Plot.text(gods, Plot.treeNode({text: "node:name", dx: 6}))
]
})
Plot.plot({
axis: null,
margin: 20,
marginRight: 120,
marks: [
Plot.tree(family)
]
})
Plot.plot({
axis: null,
margin: 20,
marginRight: 120,
marks: [
Plot.tree(d3.hierarchy(family),{})
]
})
import {Sunburst} from "@d3/sunburst"
import {ForceGraph} from "@d3/force-directed-graph"
miserables
ForceGraph(miserables, {
nodeId: (d) => d.id, // node identifier, to match links
nodeGroup: (d) => d.group, // group identifier, for color
nodeTitle: (d) => d.id, // hover text
width,
height: 520,
invalidation // stop when the cell is re-run
})
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.
