Here is a public team for a 2022 data viz class at TMU conducted by @sugi2000 @sugi2000lab
dataset = d3.range(10).map((d) => ({
apple: d3.randomInt(100)(),
orange: d3.randomInt(100)(),
customer: d3.randomInt(10, 20)()
}))
{
const width = 200;
const height = 200;
const margin = { top: 22, right: 22, bottom: 22, left: 22 };
const xScale = d3
.scaleLinear()
.domain([0, d3.max(dataset, (d) => d.apple)])
.range([margin.left, width - margin.right]);
const yScale = d3
.scaleLinear()
.domain([0, d3.max(dataset, (d) => d.orange)])
.range([height - margin.bottom, margin.top]);
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("width", width)
.attr("height", height);
svg
.selectAll("circle")
.data(dataset)
.join("circle")
.attr("cx", (d) => xScale(d.apple))
.attr("cy", (d) => yScale(d.orange))
.attr("r", 2);
const xAxis = d3.axisBottom().scale(xScale);
svg
.append("g")
.attr("transform", `translate(0, ${height - margin.bottom})`)
.call(xAxis);
const yAxis = d3.axisLeft().scale(yScale);
svg.append("g").attr("transform", `translate(${margin.left}, 0)`).call(yAxis);
return svg.node();
}
{
const width = 200;
const height = 200;
const margin = { top: 22, right: 22, bottom: 22, left: 22 };
const xScale = d3
.scaleLinear()
.domain([0, d3.max(dataset, (d) => d.apple)])
.range([margin.left, width - margin.right]);
const yScale = d3
.scaleLinear()
.domain([0, d3.max(dataset, (d) => d.orange)])
.range([height - margin.bottom, margin.top]);
const cusScale = d3
.scaleLinear()
.domain([0, d3.max(dataset, (d) => d.customer)])
.range([0, 10]);
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("width", width)
.attr("height", height);
svg
.selectAll("circle")
.data(dataset)
.join("circle")
.attr("cx", (d) => xScale(d.apple))
.attr("cy", (d) => yScale(d.orange))
.attr("r", (d) => cusScale(d.customer));
const xAxis = d3.axisBottom().scale(xScale);
svg
.append("g")
.attr("transform", `translate(0, ${height - margin.bottom})`)
.call(xAxis);
const yAxis = d3.axisLeft().scale(yScale);
svg.append("g").attr("transform", `translate(${margin.left}, 0)`).call(yAxis);
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.
