Public
Edited
May 3
Insert cell
Insert cell
// url = "https://data.cityofberkeley.info/resource/ysvs-bcge.json?$limit=2000"
url = "https://data.cityofberkeley.info/resource/ysvs-bcge.json"
Insert cell
navio(data)
Insert cell
viewof attribs = multiAutoSelect(Object.keys(data[0]), {
title: "Attributes"
})
Insert cell
viewof height = html`<input type="range" min="100", max="900">`
Insert cell
viewof typeOfTree = select(["treemap", "icicle", "sunburst"])

Insert cell
chart = typeOfTree === "icicle"
? icicle
: typeOfTree === "sunburst"
? sunburst
: treemap
Insert cell
treeData = table2Tree(data, attribs)
Insert cell
data = loadSocrata(url)
Insert cell
// data = fetch(url).then((res) => res.json())
import { loadSocrata } from "@john-guerra/socrata-load-multiples-pages"
Insert cell
import { navio } from "@john-guerra/navio"
Insert cell
import { chart as treemap } with {
treeData as data,
height
} from "@d3/cascaded-treemap"
Insert cell
import { chart as sunburst } with {
treeData as data,
height
} from "@d3/zoomable-sunburst"
Insert cell
import { chart as icicle } with {
treeData as data,
height
} from "@d3/zoomable-icicle"
Insert cell
import { table2Tree } from "@john-guerra/table-2-tree"
Insert cell
import { multiAutoSelect } from "@john-guerra/multi-auto-select"
Insert cell
import { select } from "@jashkenas/inputs"
Insert cell

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.
Learn more