Public
Edited
Oct 1, 2023
data = {
const random = d3.randomNormal(0, 0.2);
const sqrt3 = Math.sqrt(3);
const N = 300;
return [].concat(
Array.from({length: N}, () => [random() + sqrt3, random() + 1, 0]),
Array.from({length: N}, () => [random() - sqrt3, random() + 1, 1]),
Array.from({length: N}, () => [random(), random() - 1, 2])
);
}
height = 600
k = height / width // width is in stdlib, automatically adjust by your window size
x = d3.scaleLinear()
.domain([-4.5, 4.5])
.range([0, width])
y = d3.scaleLinear()
.domain([-4.5 * k, 4.5 * k])
.range([height, 0])
z = d3.scaleOrdinal()
.domain(d3.map(data, d => d[2]))
.range(d3.schemeCategory10)
{
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const dotGroup = svg.append("g")
// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap
.attr("stroke-linecap", "round");
dotGroup.selectAll("path")
.data(data)
.join("path")
// https://developer.mozilla.org/zh-TW/docs/Web/SVG/Tutorial/Paths
.attr("d", d => `M${x(d[0])} ${y(d[1])}Z`)
.attr("stroke", d => z(d[2]))
// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width
.attr("stroke-width", 3);
return svg.node();
}
{
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const dotGroup = svg.append("g")
.attr("stroke-linecap", "round");
dotGroup.selectAll("path")
.data(data)
.join("path")
.attr("d", d => `M${x(d[0])} ${y(d[1])}Z`)
.attr("stroke", d => z(d[2]))
.attr("stroke-width", 5);
const gridGroup = svg.append("g")
.attr("stroke", "currentColor")
.attr("stroke-opacity", 0.2);
gridGroup.append("g")
.attr("transform", `translate(0, ${height})`)
.call(d3.axisTop(x).ticks(12))
.call(g => g.select(".domain").attr("display", "none"))
.call(g => g.selectAll(".tick line").clone() // We use tick line instead of creating new lines in the original code
.attr("y1", -height)
.attr("y2", 0)
.attr("stroke-opacity", 0.1));
gridGroup.append("g")
.call(d3.axisRight(y).ticks(12 * k))
.call(g => g.select(".domain").attr("display", "none"))
.call(g => g.selectAll(".tick line").clone() // We use tick line instead of creating new lines in the original code
.attr("x1", 0)
.attr("x2", width)
.attr("stroke-opacity", 0.1));
return svg.node();
}
{
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const dotGroup = svg.append("g")
.attr("stroke-linecap", "round");
dotGroup.selectAll("path")
.data(data)
.join("path")
.attr("d", d => `M${x(d[0])} ${y(d[1])}Z`)
.attr("stroke", d => z(d[2]))
.attr("stroke-width", 5);
const gridGroup = svg.append("g")
.attr("stroke", "currentColor")
.attr("stroke-opacity", 0.2);
// We cannot use tick line since it performs badly when zoom in/out
// Original code use class to identify two groups
gridGroup.append("g")
.attr("transform", `translate(0, ${height})`)
.call(d3.axisTop(x).ticks(12))
.call(g => g.select(".domain").attr("display", "none"));
gridGroup.append("g")
.selectAll("line")
.data(x.ticks(12))
.join("line")
.attr("y2", height)
.attr("x1", d => 0.5 + x(d))
.attr("x2", d => 0.5 + x(d))
.attr("stroke-opacity", 0.1);
gridGroup.append("g")
.call(d3.axisRight(y).ticks(12 * k))
.call(g => g.select(".domain").attr("display", "none"));
gridGroup.append("g")
.selectAll("line")
.data(y.ticks(12 * k))
.join("line")
.attr("x2", width)
.attr("y1", d => 0.5 + y(d))
.attr("y2", d => 0.5 + y(d))
.attr("stroke-opacity", 0.1);
return svg.node();
}
// https://observablehq.com/@observablehq/input-button
viewof reset = Inputs.button("Reset")
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const dotGroup = svg.append("g")
.attr("stroke-linecap", "round");
const gridGroup = svg.append("g")
.attr("stroke", "currentColor")
.attr("stroke-opacity", 0.3);
const axisXGroup = gridGroup.append("g");
const gridXGroup = gridGroup.append("g");
const axisYGroup = gridGroup.append("g");
const gridYGroup = gridGroup.append("g");
const zoom = d3.zoom()
.scaleExtent([0.5, 32])
.on("zoom", handleZoom);
svg.call(zoom).call(zoom.transform, d3.zoomIdentity);
function handleZoom({transform}) {
const rescaledX = transform.rescaleX(x).interpolate(d3.interpolateRound);
const rescaledY = transform.rescaleY(y).interpolate(d3.interpolateRound);
dotGroup.selectAll("path")
.data(data)
.join("path")
.attr("d", d => `M${rescaledX(d[0])} ${rescaledY(d[1])}Z`)
.attr("stroke", d => z(d[2]))
.attr("stroke-width", 5 / transform.k);
axisXGroup.attr("transform", `translate(0, ${height})`)
.call(d3.axisTop(rescaledX).ticks(12))
.call(g => g.select(".domain").attr("display", "none"));
gridXGroup.selectAll("line")
.data(rescaledX.ticks(12))
.join("line")
.attr("y2", height)
.attr("x1", d => 0.5 + rescaledX(d))
.attr("x2", d => 0.5 + rescaledX(d))
.attr("stroke-opacity", 0.1);
axisYGroup.call(d3.axisRight(rescaledY).ticks(12 * k))
.call(g => g.select(".domain").attr("display", "none"));
gridYGroup.selectAll("line")
.data(rescaledY.ticks(12 * k))
.join("line")
.attr("x2", width)
.attr("y1", d => 0.5 + rescaledY(d))
.attr("y2", d => 0.5 + rescaledY(d))
.attr("stroke-opacity", 0.1);
}
return Object.assign(svg.node(), { reset() {
svg.transition().duration(750).call(zoom.transform, d3.zoomIdentity);
}});
}
reset, chart.reset() // This block reference reset, so it will run when the button referencing reset get clicked
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.
