東京都立大学 システムデザイン学部 インダストリアルアート学科 ネットワークデザインスタジオ 杉本達應研究室
dataset = (reset,
d3.range(10).map((d) => ({
apple: d3.randomInt(100)(),
orange: d3.randomInt(100)(),
customer: d3.randomInt(10, 20)()
})))
viewof reset = Inputs.button("Reset")
{
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]);
const rScale = d3.scaleSqrt().domain([0, 20]).range([0, 40]);
// グリッド
svg
.append("g")
.selectAll("line")
.data(xScale.ticks(10))
.join("line")
.attr("x1", xScale)
.attr("x2", xScale)
.attr("y1", yScale(0))
.attr("y2", yScale(100))
.attr("stroke", "#ccc");
svg
.append("g")
.selectAll("line")
.data(yScale.ticks(10))
.join("line")
.attr("x1", xScale(0))
.attr("x2", xScale(100))
.attr("y1", yScale)
.attr("y2", yScale)
.attr("stroke", "#ccc");
// ドット
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", "orange")
.attr("opacity", 0)
.transition()
.duration(1000)
.delay((d, i) => i * 100)
.attr("r", (d) => rScale(d.customer))
.attr("fill", "red")
.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.
