Designer, Artist, Researcher, Educator @sugi2000lab .
co-translator for Japanese edition of “Generative Design” and “Code as Creative Medium”.
Published
Edited
Sep 30, 2022
Importers
2 stars
{
const data = d3.range(11);
const width = 900;
const height = 360;
const x = d3.scaleLinear(d3.extent(data), [10, width - 110]);
const y = d3.scaleLinear([0, 1], [10, 60]);
const color = (d) => `hsl(${(d / 12) * 360}, 100%, 50%)`;
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const g = svg
.selectAll("g")
.data(data)
.join("g")
.attr("transform", (d) => `translate(${x(d)}, ${y(d % 2)})`)
.attr("fill", color)
.attr("fill-opacity", 0.2)
.attr("stroke", "#000")
.attr("stroke-width", 2);
g.each(function () {
const d = d3.select(this).datum();
d3.select(this).call(roundRect, 0, 0, 100, 100, d * 5);
});
const g2 = svg
.selectAll("g.g2")
.data(data)
.join("g")
.classed("g2", true)
.attr("transform", (d) => `translate(${x(d)}, ${180 + y(d % 2)})`)
.attr("fill", color)
.attr("fill-opacity", 0.2)
.attr("stroke", "#000")
.attr("stroke-width", 2);
g2.each(function () {
const d = d3.select(this).datum();
d3.select(this)
.append("path")
.attr("d", roundRectPath(0, 0, 100, 100, d * 5));
});
return svg.node();
}
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.
