Published
Edited
Sep 18, 2020
2 forks
1 star
viewof selectedTable = navio(tableData)
groupedData = d3.rollup(
selectedTable,
v => v.length,
d => d.object_type,
d => d.request_category
)
treeData = d3.hierarchy(groupedData)
treeData.leaves()
layTree = d3.tree().size([width, height])
layedOutTreeData = layTree(treeData)
layedOutTreeData.links()
{
const svg = d3
.create("svg")
.attr("viewBox", [
-margin,
-margin,
width + margin * 2,
height + margin * 2
]);
svg
.selectAll(".link")
.data(layedOutTreeData.links())
.join("path")
.attr("class", "link")
.attr(
"d",
d3
.linkVertical()
.x(d => d.x)
.y(d => d.y)
)
.attr("fill", "none")
.attr("stroke", "#ccc");
svg
.selectAll(".node")
.data(layedOutTreeData)
.join("g")
.attr("class", "node")
.attr("transform", d => `translate(${d.x}, ${d.y})`)
.call(g =>
g
.append("circle")
.attr("r", 5)
.attr("fill", "#333")
)
.call(g => g.append("text").text(d => d.data[0]));
return svg.node();
}
{
const svg = d3
.create("svg")
.attr("viewBox", [
-margin,
-margin,
height + margin * 2,
width + margin * 2
])
.attr("width", height);
svg
.selectAll(".link")
.data(layedOutTreeData.links())
.join("path")
.attr("class", "link")
.attr(
"d",
d3
.linkHorizontal()
.x(d => d.y)
.y(d => d.x)
)
.attr("fill", "none")
.attr("stroke", "#ccc");
svg
.selectAll(".node")
.data(layedOutTreeData)
.join("g")
.attr("class", "node")
.attr("transform", d => `translate(${d.y}, ${d.x})`)
.call(g =>
g
.append("circle")
.attr("r", 5)
.attr("fill", "#333")
)
.call(g => g.append("text").text(d => d.data[0]));
return svg.node();
}
md`## Containment`
treeDataAggregated = d3.hierarchy(groupedData).sum(d => d[1])
layTreemap = d3
.treemap()
.size([width, height])
.round(true)
.padding(1)
layedOutTreemapData = layTreemap(treeDataAggregated.copy())
swatches({color})
{
const svg = d3
.create("svg")
.attr("viewBox", [
-margin,
-margin,
width + margin * 2,
height + margin * 2
]);
svg
.selectAll(".node")
.data(layedOutTreemapData.leaves())
.join("g")
.attr("class", "node")
.attr("transform", d => `translate(${d.x0}, ${d.y0})`)
.call(g =>
g
.append("rect")
.attr("width", d => d.x1 - d.x0)
.attr("height", d => d.y1 - d.y0)
.attr("fill", d => color(d.data[0]))
)
.call(g =>
g
.append("text")
.attr("y", 10)
.call(text =>
text
.append("tspan")
.attr("x", 0)
.attr("dy", 0)
.text(d => d.data[0])
)
.call(text =>
text
.append("tspan")
.attr("x", 0)
.attr("dy", 10)
.text(d => d.data[1])
)
);
return svg.node();
}
layIcicle = d3
.partition()
.size([width, height])
.round(true)
.padding(1)
layedOutIcicleData = layIcicle(treeDataAggregated)
{
const svg = d3
.create("svg")
.attr("viewBox", [
-margin,
-margin,
width + margin * 2,
height + margin * 2
]);
svg
.selectAll(".node")
.data(layedOutIcicleData.descendants())
.join("g")
.attr("class", "node")
.attr("transform", d => `translate(${d.x0}, ${d.y0})`)
.call(g =>
g
.append("rect")
.attr("width", d => d.x1 - d.x0)
.attr("height", d => d.y1 - d.y0)
.attr("fill", d => color(d.data[0]))
)
.call(g =>
g
.append("text")
.attr("y", 10)
.call(text =>
text
.append("tspan")
.attr("x", 0)
.attr("dy", 0)
.text(d => d.data[0])
)
.call(text =>
text
.append("tspan")
.attr("x", 0)
.attr("dy", 10)
.text(d => d.value)
)
);
return svg.node();
}
layPack = d3
.pack()
.size([width, height])
.padding(1)
layedOutPackedData = layPack(treeDataAggregated.copy())
{
const svg = d3
.create("svg")
.attr("viewBox", [
-margin,
-margin,
width + margin * 2,
height + margin * 2
]);
svg
.selectAll(".node")
.data(layedOutPackedData.descendants())
.join("g")
.attr("class", "node")
.attr("transform", d => `translate(${d.x}, ${d.y})`)
.call(g =>
g
.append("circle")
.attr("r", d => d.r)
.attr("fill", d => color(d.data[0]))
)
.call(g =>
g
.append("text")
.attr("y", 10)
.call(text =>
text
.append("tspan")
.attr("x", 0)
.attr("dy", 0)
.text(d => d.data[0])
)
.call(text =>
text
.append("tspan")
.attr("x", 0)
.attr("dy", 10)
.text(d => d.value)
)
);
return svg.node();
}
color = d3
.scaleOrdinal()
.range(
d3.quantize(
t => d3.interpolateSpectral(t * .8 + .2),
new Set(tableData.map(d => d.request_category)).size
)
)
new Set(tableData.map(d => d.request_category)).size
html`<style>svg text { font-size: 8pt; font-family: sans-serif }</style>`
height = 400
margin = 20
url = "https://data.cityofberkeley.info/resource/bscu-qpbu.csv?$limit=10000"
tableData = d3.csv(url)
d3 = require("d3@6")
import { navio } from "@john-guerra/navio"
import { swatches } from "@d3/color-legend"
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.
