Public
Edited
Aug 11, 2023
chart = {
const differences = [];
for (let num = 11; num < 100; num++) {
const reversedNum = parseInt(num.toString().split("").reverse().join(""));
const diff = Math.abs(num - reversedNum);
differences.push(diff);
}
const margin = { top: 20, right: 30, bottom: 40, left: 50 };
const width = 800 - margin.left - margin.right;
const height = 400 - margin.top - margin.bottom;
const o = d3.create("svg");
const svg = o
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
const xScale = d3.scaleLinear().domain([11, 99]).range([0, width]);
const yScale = d3
.scaleLinear()
.domain([0, d3.max(differences)])
.range([height, 0]);
const xAxis = d3.axisBottom(xScale);
const yAxis = d3.axisLeft(yScale);
svg
.append("g")
.attr("class", "x-axis")
.attr("transform", `translate(0, ${height})`)
.call(xAxis);
svg.append("g").attr("class", "y-axis").call(yAxis);
const line = d3
.line()
.x((d, i) => xScale(11 + i))
.y((d) => yScale(d));
svg
.append("path")
.datum(differences)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 2)
.attr("d", line);
svg
.selectAll("circle")
.data(differences)
.enter()
.append("circle")
.attr("cx", (d, i) => xScale(11 + i))
.attr("cy", (d) => yScale(d))
.attr("r", 3);
return o.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.
