Published
Edited
Mar 28, 2022
d3 = require("d3", "d3-scale", "d3-axis")
width = 800
height = 400
margin = 30
data = {
let output = [];
for (let i = 1; i < 20; i++)
output.push([i, 2 * i + Math.random()]);
return output;
}
x = d3.scaleLinear()
.domain([0, 20])
.range([margin, width - margin])
x(10)
y = d3.scaleLinear()
.domain([0, 40])
.range([height - margin, margin])
chart31 = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
svg.append("g")
.selectAll("circle")
.data(data)
.join("circle")
.attr("cx", d => x(d[0]))
.attr("cy", d => y(d[1]))
.attr("r", 5)
.attr("fill", "#000000");
return svg.node();
}
chart41 = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
svg.append("g")
.selectAll("circle")
.data(data)
.join("circle")
.attr("cx", d => x(d[0]))
.attr("cy", d => y(d[1]))
.attr("r", 5)
.attr("fill", "#000000");
svg.append("g")
.attr("transform", `translate(0,${height - margin})`)
.call(d3.axisBottom(x));
svg.append("g")
.call(d3.axisLeft(y))
.attr("transform", `translate(${margin}, 0)`);
return svg.node();
}
chart42 = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
svg.append("g")
.selectAll("circle")
.data(data)
.join("circle")
.attr("cx", d => x(d[0]))
.attr("cy", d => y(d[1]))
.attr("r", 5)
.attr("fill", "#000000");
svg.append("g")
.attr("transform", `translate(0,${height - margin})`)
.call(d3.axisBottom(x));
svg.append("g")
.call(d3.axisLeft(y).tickSize(width - margin - margin))
.attr("transform", `translate(${width - margin}, 0)`)
.call(g => g.select(".domain").remove())
.call(g => g.select(".tick:first-of-type text").remove())
.call(g => g.selectAll(".tick:not(:first-of-type) line")
.attr("stroke-opacity", 0.4)
.attr("stroke-dasharray", "2,2"));
return svg.node();
}
solution31 = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
svg.append("g")
.selectAll("circle")
.data(data)
.join("circle")
.attr("cx", d => x(d[0]))
.attr("cy", d => y(d[1]))
.attr("r", 5)
.attr("fill", "#000000");
svg.append("g")
.selectAll("text")
.data(data)
.join("text")
.attr("x", d => x(d[0]))
.attr("y", d => y(d[1] + 1))
.attr("text-anchor", "middle")
.attr("font-size", "10")
.attr("font-family", "sans-serif")
.text(d => d[1].toFixed(2));
return svg.node();
}
solution32 = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const color = d3.scaleLinear().domain([0, 20]).range(["red", "green"]);
svg.append("g")
.selectAll("circle")
.data(data)
.join("circle")
.attr("cx", d => x(d[0]))
.attr("cy", d => y(d[1]))
.attr("r", 5)
.attr("fill", d => color(d[0]));
return svg.node();
}
solution41 = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
svg.append("g")
.selectAll("circle")
.data(data)
.join("circle")
.attr("cx", d => x(d[0]))
.attr("cy", d => y(d[1]))
.attr("r", 5)
.attr("fill", "#000000");
svg.append("g")
.call(d3.axisBottom(x).tickSize(height - 2 * margin))
.attr("transform", `translate(0, ${margin})`)
.call(g => g.select(".domain").remove())
.call(g => g.select(".tick:first-of-type text").remove())
.call(g => g.selectAll(".tick:not(:first-of-type) line")
.attr("stroke-opacity", 0.4)
.attr("stroke-dasharray", "2,2"));
svg.append("g")
.call(d3.axisLeft(y).tickSize(width - 2 * margin))
.attr("transform", `translate(${width - margin}, 0)`)
.call(g => g.select(".domain").remove())
.call(g => g.select(".tick:first-of-type text").remove())
.call(g => g.selectAll(".tick:not(:first-of-type) line")
.attr("stroke-opacity", 0.4)
.attr("stroke-dasharray", "2,2"));
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.
