Intro to D3.js 🌖 SVG gradientsIntro to D3.js 🥣 Animation and InteractivityIntro to D3.js 🦋 Data Joining
Intro to D3.js 🎨 SVG Composition Challenge
bands_of_equal_width = {
const svg = d3.create("svg").attr("viewBox", [-400, 0, width * 2, height]);
const box = 280;
const line = box / lowerLeftCircleColors.length;
const trapezoid = box / upperLeftLeftStripeColors.length;
svg
.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", width)
.attr("height", height)
.attr("fill", "#f6efe3");
svg
.append("rect")
.attr("x", 100)
.attr("y", 100)
.attr("width", 600)
.attr("height", 600)
.attr("fill", "black");
svg
.selectAll(".upperLeftLeft")
.data(upperLeftLeftStripeColors)
.enter()
.append("polyline")
.attr("points", (d, i) => [
[100 + line, 100 + line],
[100 + line + trapezoid * (16 - i), 100 + line],
[100 + line, 100 + line + trapezoid * (16 - i)]
])
.style("fill", (d) => d)
.attr("class", "upperLeftLeft");
svg
.selectAll(".upperLeftRight")
.data(upperLeftRightStripeColors)
.enter()
.append("polyline")
.attr("points", (d, i) => [
[100 + line + box, 100 + box + line],
[100 + line + box, 100 + line + trapezoid * i],
[100 + line + trapezoid * i, 100 + box + line]
])
.style("fill", (d) => d)
.attr("class", "upperLeftRight");
svg
.selectAll(".upperRight")
.data(upperRightCircleColors)
.enter()
.append("path")
.attr("d", (d, i) => [
`M${100 + line * 2 + box * 2}, ${100 + line} L${
100 + line * 2 + box * 2 - (22 - i) * line
}, ${100 + line}
C${100 + line * 2 + box * 2 - (22 - i) * line}, ${100 + line} ${
100 + line * 2 + box * 2 - (22 - i) * line
}, ${100 + line + box - i * line}
${100 + line * 2 + box * 2} ${100 + line + box - i * line}`
])
.style("fill", (d) => d)
.attr("class", "upperRight");
svg
.selectAll(".lowerLeft")
.data(lowerLeftCircleColors)
.enter()
.append("path")
.attr("d", (d, i) => [
`M${100 + line + box}, ${100 + box * 2 + line * 2} L${
100 + line + box - (22 - i) * line
}, ${100 + box * 2 + line * 2}
C${100 + line + box - (22 - i) * line}, ${
100 + line * 2 + box * 2 - (22 - i) * line
} ${100 + line + box}, ${100 + line * 2 + box * 2 - (22 - i) * line}
${100 + line + box} ${100 + line * 2 + box * 2 - (22 - i) * line}`
])
.style("fill", (d) => d)
.attr("class", "lowerLeft");
svg
.selectAll(".lowerRight")
.data(lowerRightBarColors)
.enter()
.append("rect")
.attr("x", (d, i) => 100 + box + line * 2)
.attr("y", (d, i) => 100 + box + line * 2 + i * line)
.attr("width", box)
.attr("height", line)
.style("fill", (d) => d)
.attr("class", "lowerRight");
return svg.node();
}
fourDirections = {
const svg = d3.create("svg").attr("viewBox", [-400, 0, width * 2, height]);
const box = 265;
const bar = box / upperLeftColors.length;
const trapezoid = box / lowerLeftLeftColors.length;
svg
.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", width)
.attr("height", height)
.attr("fill", "#f6efe3");
svg
.append("rect")
.attr("x", 100)
.attr("y", 100)
.attr("width", 600)
.attr("height", 600)
.attr("fill", "black");
svg
.selectAll(".upperLeft")
.data(upperLeftColors)
.enter()
.append("rect")
.attr("x", (d, i) => 100 + (i + 1) * bar)
.attr("y", 100 + bar)
.attr("width", bar)
.attr("height", box)
.style("fill", (d) => randomColorFromArray(upperLeftColors))
.attr("class", "upperLeft");
svg
.selectAll(".upperRight")
.data(upperRightColors)
.enter()
.append("rect")
.attr("x", (d, i) => 100 + box + bar * 2)
.attr("y", (d, i) => 100 + (i + 1) * bar)
.attr("width", box)
.attr("height", bar)
.style("fill", (d) => randomColorFromArray(upperRightColors))
.attr("class", "upperRight");
svg
.selectAll(".lowerLeftLeft")
.data(lowerLeftLeftColors)
.enter()
.append("polyline")
.attr("points", (d, i) => [
[100 + bar, 100 + box + bar * 2],
[100 + bar + trapezoid * (8 - i), 100 + box + bar * 2],
[100 + bar, 100 + box + bar * 2 + trapezoid * (8 - i)]
])
.style("fill", (d) => randomColorFromArray(lowerLeftLeftColors))
.attr("class", "lowerLeftLeft");
svg
.selectAll(".lowerLeftRight")
.data(lowerLeftRightColors)
.enter()
.append("polyline")
.attr("points", (d, i) => [
[100 + bar + box, 100 + box * 2 + bar * 2],
[100 + bar + box, 100 + box + bar * 2 + trapezoid * i],
[100 + bar + trapezoid * i, 100 + box * 2 + bar * 2]
])
.style("fill", (d) => randomColorFromArray(lowerLeftRightColors))
.attr("class", "lowerLeftRight");
svg
.selectAll(".lowerRightLeft")
.data(lowerRightLeftColors)
.enter()
.append("polyline")
.attr("points", (d, i) => [
[100 + box + bar * 2, 100 + box * 2 + bar * 2],
[100 + box + bar * 2, 100 + box + bar * 2 + trapezoid * i],
[100 + box + bar * 2 + trapezoid * (8 - i), 100 + box * 2 + bar * 2]
])
.style("fill", (d) => randomColorFromArray(lowerRightLeftColors))
.attr("class", "lowerRightLeft");
svg
.selectAll(".lowerRightRight")
.data(lowerRightRightColors)
.enter()
.append("polyline")
.attr("points", (d, i) => [
[100 + box * 2 + bar * 2, 100 + box + bar * 2],
[100 + box + bar * 2 + trapezoid * i, 100 + box + bar * 2],
[100 + box * 2 + bar * 2, 100 + box + bar * 2 + trapezoid * (8 - i)]
])
.style("fill", (d) => randomColorFromArray(lowerRightRightColors))
.attr("class", "lowerRightRight");
return svg.node();
}
function randomColorFromArray(colors) {
let randomIndex = Math.floor(Math.random() * colors.length);
let randomColorFromArray = colors[randomIndex];
return randomColorFromArray;
}
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.
