Published
Edited
May 22, 2020
1 fork
2 stars
data = FileAttachment("texnoskills@10.json").json()
format = d3.format(",d")
color_s = d3.scaleOrdinal(
d3.quantize(d3.interpolateRainbow, data.children.length + 1)
)
color_c = d3.scaleSequential([8, 0], d3.interpolateMagma)
color_zc = d3
.scaleLinear()
.domain([0, 5])
.range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"])
.interpolate(d3.interpolateHcl)
color_i = d3.scaleOrdinal(
d3.quantize(d3.interpolateRainbow, data.children.length + 1)
)
partition_s = data =>
d3.partition().size([2 * Math.PI, radius_s])(
d3
.hierarchy(data)
.sum(d => d.value)
.sort((a, b) => b.value - a.value)
)
partition_zs = data => {
const root = d3
.hierarchy(data)
.sum(d => d.value)
.sort((a, b) => b.value - a.value);
return d3.partition().size([2 * Math.PI, root.height + 1])(root);
}
partition_i = data =>
d3
.partition()
.size([height, width])
.padding(1)(
d3
.hierarchy(data)
.sum(d => d.value)
.sort((a, b) => b.height - a.height || b.value - a.value)
)
partition_zi = data => {
const root = d3
.hierarchy(data)
.sum(d => d.value)
.sort((a, b) => b.height - a.height || b.value - a.value);
return d3.partition().size([height, ((root.height + 1) * width) / 3])(root);
}
pack_c = data => d3.pack()
.size([width - 2, height - 2])
.padding(3)
(d3.hierarchy(data)
.sum(d => d.value)
.sort((a, b) => b.value - a.value))
pack_zc = data =>
d3
.pack()
.size([width, height])
.padding(3)(
d3
.hierarchy(data)
.sum(d => d.value)
.sort((a, b) => b.value - a.value)
)
arc_s = d3
.arc()
.startAngle(d => d.x0)
.endAngle(d => d.x1)
.padAngle(d => Math.min((d.x1 - d.x0) / 2, 0.005))
.padRadius(radius_s / 2)
.innerRadius(d => d.y0)
.outerRadius(d => d.y1 - 1)
arc_zs = d3
.arc()
.startAngle(d => d.x0)
.endAngle(d => d.x1)
.padAngle(d => Math.min((d.x1 - d.x0) / 2, 0.005))
.padRadius(radius_zs * 1.5)
.innerRadius(d => d.y0 * radius_zs)
.outerRadius(d => Math.max(d.y0 * radius_zs, d.y1 * radius_zs - 1))
function autoBox() {
document.body.appendChild(this);
const { x, y, width, height } = this.getBBox();
document.body.removeChild(this);
return [x, y, width, height];
}
d3 = require("d3@5")
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.
