Here is a public team for a 2022 data viz class at TMU conducted by @sugi2000 @sugi2000lab
dataset = (reset,
d3.range(10).map((d) => ({
apple: d3.randomInt(100)(),
orange: d3.randomInt(100)(),
customer: d3.randomInt(10, 20)()
})))
{
const width = 500;
const height = 500;
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("circle")
.data(dataset)
.join("circle")
.attr("cx", (d) => xScale(d.apple))
.attr("cy", (d) => yScale(d.orange))
.attr("r", 7);
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();
}
{
const width = 500;
const height = 500;
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]);
const rScale = d3.scaleSqrt().domain([0, 20]).range([0, 25]);
svg
.append("g")
.selectAll("circle")
.data(dataset)
.join("circle")
.attr("cx", (d) => xScale(d.apple))
.attr("cy", (d) => yScale(d.orange))
.attr("r", (d) => rScale(d.customer))
.attr("opacity", 0.4);
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();
}
viewof reset = Inputs.button("reset")
{
const width = 500;
const height = 500;
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]);
const rScale = d3.scaleSqrt().domain([0, 20]).range([0, 35]);
svg
.append("g")
.selectAll("circle")
.data(dataset)
.join("circle")
.attr("cx", (d) => xScale(d.apple))
.attr("cy", (d) => yScale(d.orange))
.attr("r", 0)
.attr("fill", "white")
.attr("opacity", 0)
.transition()
.duration(1000)
.attr("fill", "green")
.attr("opacity", 0.2)
.attr("r", (d) => 10)
.transition()
.duration(1000)
.delay((d, i) => i * 100)
.attr("fill", "green")
.attr("opacity", 0.4)
.attr("r", (d) => rScale(d.customer))
.transition()
.duration(300)
.delay((d, i) => (10 - i) * 100)
.attr("opacity", 0.5);
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.
