Published
Edited
Nov 13, 2021
svg = {
const width = 550;
const height = 550;
const margin = { top: 30, right: 30, bottom: 55, left: 65 };
const svg = d3.create("svg").attr("width", width).attr("height", height);
const xScale = d3
.scaleLinear()
//.domain([0, d3.max(dataset, (d) => d.x)])
.domain([0, 100])
.range([margin.left, width - margin.right]);
const yScale = d3
.scaleLinear()
//.domain([0, d3.max(dataset, (d) => d.y)])
.domain([0, 100])
.range([height - margin.bottom, margin.top]);
svg
.append("rect")
.attr("width", width)
.attr("height", height)
.attr("fill", "hsl(100,70%,91%)");
svg
.selectAll("circle")
.data(dataset)
.join("circle")
.attr("cx", (d) => xScale(d.x))
.attr("cy", (d) => yScale(d.y))
.attr("r", 4)
.attr("fill", "hsl(200,90%,40%)");
const xAxis = d3.axisBottom();
xAxis.scale(xScale).ticks(5);
svg
.append("g")
.attr("transform", `translate(0,${height - margin.bottom})`)
.attr("font-weight", "bold")
.call(xAxis)
.append("text")
.attr("fill", "black")
.attr("x", (width - margin.left - margin.right) / 2 + margin.left)
.attr("y", 35)
.attr("text-anchor", "middle")
.attr("font-size", "10pt")
.attr("font-weight", "bold")
.attr("font-family", "sans-serif")
.text("value of x");
const yAxis = d3.axisLeft();
yAxis.scale(yScale).ticks(5);
svg
.append("g")
.attr("transform", `translate(${margin.left},0)`)
.attr("font-weight", "bold")
.call(yAxis)
.append("text")
.attr("fill", "black")
.attr("x", -(height - margin.top - margin.bottom) / 2 - margin.top)
.attr("y", -35)
.attr("transform", "rotate(-90)")
.attr("text-anchor", "middle")
.attr("font-weight", "bold")
.attr("font-size", "10pt")
.attr("font-family", "sans-serif")
.text("value of y");
svg
.append("g")
.selectAll("text")
.data(dataset)
.join("text")
.text((d) => d.id)
.attr("text-anchor", "middle")
.attr("x", (d) => xScale(d.x))
.attr("y", (d) => yScale(d.y) - 5)
.attr("fill", "hsl(30,50%,50%)")
.attr("font-family", "sans-serif")
.attr("font-weight", "bold")
.attr("font-size", 10);
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.
