md`# Diamonds`
md`Grouped triangles like a diamond surface`
{
const width = 950
const height = 500
const svg = d3.create('svg')
.attr("width",width)
.attr("height",height);
const group = svg.append("g")
const lineGenerator = d3.line()
for (let i = 0; i < 24; i++) {
const dots = group.append("g")
.attr("transform", function (d) {
if (i < 8) return "translate(" + (i * 100) + "," + (0) + ")";
else if (i >= 8 && i < 16) return "translate(" + ((i - 8) * 100) + "," + (140) + ")";
else return "translate(" + ((i - 16) * 100) + "," + (270) + ")";
})
for (let cc = 4; cc > 0; cc--) {
const rand = Math.random()
const rand2 = Math.random()
for (let dd = 0; dd < cc; dd++) {
const verA = [80 - (cc - 1) * 10 + dd * 20, 40 + cc * 20]
const verB = [80 - (cc) * 10 + dd * 20, 40 + (cc + 1) * 20]
const verC = [80 - (cc) * 10 + (dd + 1) * 20, 40 + (cc + 1) * 20]
const thepoints = [
verA,
verB,
verC,
verA
];
const pathData = lineGenerator(thepoints);
dots
.append("path")
.attr('d', pathData)
.style("stroke-width", "0px")
.style("fill", d3.rgb(10, 220 - cc * 2 + rand2 * 40, 255 - cc * 2 + rand2 * 40).toString())
}
for (let dd = 0; dd < cc - 1; dd++) {
const verA = [80 - (cc - 1) * 10 + dd * 20, 40 + cc * 20]
const verB = [80 - (cc - 1) * 10 + (dd + 1) * 20, 40 + cc * 20]
const verC = [80 - (cc) * 10 + (dd + 1) * 20, 40 + (cc + 1) * 20]
const thepoints = [
verA,
verB,
verC,
verA
];
const pathData = lineGenerator(thepoints);
dots
.append("path")
.attr('d', pathData)
.style("stroke-width", "0px")
.style("fill", d3.rgb(10, 220 - dd * 20 + rand * 30, 255 - dd * 20 + rand * 30))
.style("stroke", "none");
}
}
}
return svg.node();
}
d3 = require("d3@6")
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.
