Published
Edited
Dec 1, 2021
xScale = {
const domain = d3.extent(data.map(d => d.date));
const range = [margin.left, width - margin.right];
const scale = d3.scaleUtc(domain, range);
return scale;
}
yScale = {
const domain = [0, d3.max(data.map(d => d.close))];
const range = [height - margin.bottom, margin.top];
const scale = d3.scaleLinear(domain, range);
return scale;
}
xAxis = d3.axisBottom(xScale).ticks(width / 80).tickSizeOuter(0);
{
const svg = createSvg(640, 50);
// axis
svg.append("g")
.attr("transform", `translate(0,${margin.top})`) // <-- x-axis is fixed right-to-left
.call(xAxis);
// origin, red dot
svg.append("g")
.attr("transform", `translate(0,${margin.top})`)
.attr("cx", 0 + margin.side)
.attr("cy", 0 + 50 - margin.bottom)
.attr("r", 2)
.attr("fill", "red");
return svg.node();
}
yAxis = d3.axisLeft(yScale).ticks(height / 40, undefined);
{
const svg = createSvg(640, 400);
const _yAxis = svg.append("g")
.attr("transform", `translate(${margin.left}, 0)`) // <-- y-axis is fixed up-and-down
.call(yAxis);
const _origin = svg.append("circle")
.attr("cx", 0 + margin.left)
.attr("cy", 0 + height - margin.bottom)
.attr("r", 2)
.attr("fill", "red")
.append("text");
return svg.node();
}
line = d3.line()
.curve(d3.curveLinear)
.x(d => xScale(d.date))
.y(d => yScale(d.close))
line(data)
{
const svg = createSvg();
svg.append("path")
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 1.5)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("d", line(data));
svg.append("circle")
.attr("cx", 0 + margin.left)
.attr("cy", 0 + height - margin.bottom)
.attr("r", 2)
.attr("fill", "red")
.append("text");
return svg.node();
}
{
const svg = createSvg();
const _xAxis = svg.append("g")
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(xAxis);
const _yAxis = svg.append("g")
.attr("transform", `translate(${margin.left}, 0)`)
.call(yAxis);
const _line = svg.append("g")
.attr("translform", `translate(0, 0)`)
.append("path")
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 1.5)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("d", line(data));
const _origin = svg.append("circle")
.attr("translform", `translate(0, 0)`)
.attr("cx", 0 + margin.left)
.attr("cy", 0 + height - margin.bottom)
.attr("r", 2)
.attr("fill", "red")
.append("text");
return svg.node();
}
{
const svg = createSvg(640, 100)
.style("border", "solid LightGray 1px")
.on("pointerenter", pointermoved)
.on("pointermove", pointermoved)
.on("pointerleave", pointerleft)
.on("touchstart", e=> e.preventDefault());
const text = svg.append("text")
.attr("x", 0)
.attr("y", 20);
const circle = svg.append("circle")
.attr("r", 10)
.attr("fill", "red");
function pointermoved(event) {
text
.text(d3.pointer(event));
circle
.attr("cx", d3.pointer(event)[0])
.attr("cy", d3.pointer(event)[1]);
}
function pointerleft(event) {
text
.text("Awaiting mouseover...");
circle
.attr("cx", 0)
.attr("cy", 100);
}
pointerleft();
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.
