東京都立大学 システムデザイン学部 インダストリアルアート学科 ネットワークデザインスタジオ 杉本達應研究室
Scatterplot
chart = {
const width = 400;
const height = 400;
const margin = { top: 20, right: 20, bottom: 30, left: 30 };
const svg = d3.create("svg").attr("width", width).attr("height", height);
const x = d3
.scaleLinear()
.domain([0, 100])
.range([margin.left, width - margin.right]);
const y = d3
.scaleLinear()
.domain([0, 100])
.range([margin.top, height - margin.bottom]);
const r = d3.scaleSqrt().domain([0, 100]).range([10, 30]);
const axisX = d3
.axisBottom(x)
.tickSize(-(height - margin.top - margin.bottom));
const axisY = d3.axisLeft(y).tickSize(-(width - margin.left - margin.right));
svg
.append("g")
.attr("class", "axisX")
.attr("transform", `translate(0, ${height - margin.bottom})`)
.call(axisX);
svg
.append("g")
.attr("class", "axisY")
.attr("transform", `translate(${margin.left}, 0)`)
.call(axisY);
svg
.selectAll("g.axisX, g.axisY")
.selectAll("line, path")
.attr("stroke-opacity", 0.2);
svg
.append("g")
.selectAll("circle")
.data(dataset)
.join("circle")
.attr("cx", (d) => x(d.x))
.attr("cy", (d) => y(d.y))
.attr("r", (d) => r(d.z))
.attr("fill", "blue")
.attr("fill-opacity", 0.2)
.append("title")
.text((d) => d.id);
return svg.node();
}
dataset = d3.tsv(url, d3.autoType)
url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vRgABhzZkXwZihskMCzNWKcL5lqRwyHRF-bygd7uxZ1rq7DbgcZXpSLClyh9FPJlw_JroNhDK73QUq-/pub?gid=0&single=true&output=tsv"
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.
