Data Scientist, Author, DataVis, Educator, Speaker, Public Service @ClintonBrownley
https://cbrownley.github.io
parsedData = ({
name: "root",
children: rawData.map(d => {
const name = d["title"]
const processChildren = (children=[]) => {
return children.map(d => ({
name: (d["name"] || d["title"] || "").split(" - ")[0],
children: processChildren(d["children"]),
value: (d["children"] || []).length,
value: d["size"] || d["value"] || (d["children"] ? sum(d["children"].map(d => d["value"])): 1),
}))
}
return {name, children: processChildren(d["children"]), value: d["size"] || d["value"]}
})
})
circlePack
circlePackPack = data => d3.pack()
.size([width, 975])
.padding(3)
(d3.hierarchy(parsedData)
.sum(d => 1))
import {chart as circlePack} with {
parsedData as data,
} from "@d3/circle-packing-monochrome"
treemap
import {chart as treemap} with {
parsedData as data
} from "@d3/treemap-by-count"
// tidyTree
import {chart as tidyTree} with {
parsedData as data
} from "@d3/tidy-tree"
bubbleChart
bubbleChartData = parsedData["children"].map(({children, ...d}) => ({...d, group: d["name"]}))
import {chart as bubbleChart} with {
bubbleChartData as data
} from "@d3/bubble-chart"
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.
