Interested in data visualisation, maps, JavasScript, and geology
Public
Edited
Jan 8, 2023
treemapChart(animationProperty)
voronoiTreeMap = d3.voronoiTreemap().clip(circleShape)
mutable debug = {}
treemapChart = (unorderedProperty) => {
const margin = 100;
const hierarchy = d3.hierarchy(animationProperty).sum((d) => d.value);
const viewWidth = size + margin * 2;
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, viewWidth, viewWidth])
.attr("font-family", "sans-serif");
svg
.append("rect")
.attr("width", viewWidth)
.attr("height", viewWidth)
.attr("fill", "white");
const rectWidth = 40;
const legend = svg
.append("g")
.attr("transform", `translate(5, 50)`)
.attr("id", "legend")
.selectAll("g")
.data(Object.entries(propertyTypes))
.join("g")
.attr("transform", (d, i) => `translate(0, ${i * (rectWidth + 10)})`)
.attr("data-name", (d) => d[0]);
legend
.append("rect")
.attr("fill", (d) => d[1])
.attr("rx", "2")
.attr("stroke-width", "1px")
.attr("stroke", "black")
.attr("width", rectWidth)
.attr("height", rectWidth);
legend
.append("text")
.attr("x", rectWidth + 8)
.attr("y", rectWidth / 1.6)
.attr("width", rectWidth)
.text((d) => d[0]);
const propertyName = svg
.append("text")
.attr("x", viewWidth / 2)
.attr("y", 60)
.attr("font-size", 42)
.attr("text-anchor", "middle")
.text(hierarchy.data.name);
const voronoi = svg
.append("g")
.attr("transform", `translate(${margin}, ${margin})`);
voronoiTreeMap(hierarchy);
let allNodes = hierarchy.descendants();
voronoi
.selectAll("path")
.data(allNodes)
.join("path")
.attr("d", (d) => "M" + d.polygon.join("L") + "Z")
.attr("stroke", "black")
.style("fill", (d) => propertyTypes[d.data.type])
.attr("class", "path")
.attr("stroke-width", (d) => 15 - d.depth * 7)
.append("title")
.text((d) => d.data.name);
voronoi
.selectAll("text")
.data(allNodes.filter((d) => d.depth === 1))
.join("text")
.attr("text-anchor", "middle")
.attr("font-size", 24)
.attr(
"transform",
(d) => "translate(" + [d.polygon.site.x, d.polygon.site.y + 6] + ")"
)
.text((d) => d.data.name.split("animation")[1])
.attr("cursor", "default")
.attr("pointer-events", "none")
.attr("fill", "black");
return svg.node();
}
edgeCount = 100
circleShape = {
return d3.range(edgeCount).map((i) => {
const rad = 360 + (i / edgeCount) * 2 * Math.PI;
return [
size / 2 + (size / 2) * Math.cos(rad),
size / 2 + (size / 2) * Math.sin(rad)
];
});
}
animationProperty = ({
name: "animation",
type: "shorthand",
subtype: "ordered",
children: [
{ name: "animation-delay", value: 50, type: "time" },
{ name: "animation-direction", value: 30, type: "keyword" },
{ name: "animation-duration", value: 70, type: "time" },
{ name: "animation-fill-mode", value: 70, type: "keyword" },
{ name: "animation-iteration-count", value: 70, type: "keyword" },
{ name: "animation-name", value: 120, type: "identifier" },
{ name: "animation-play-state", value: 30, type: "keyword" },
{ name: "animation-timing-function", value: 50, type: "easing-function" }
]
})
random = d3.randomUniform(4, 24)
size = 800
d3 = require("d3@6", "d3-weighted-voronoi", "d3-voronoi-map", "d3-voronoi-treemap", "seedrandom@2.4.3/seedrandom.min.js")
Select a data source…
Type SQL, then Shift-Enter. Ctrl-space for more options.
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.
