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