東京都立大学 システムデザイン学部 インダストリアルアート学科 ネットワークデザインスタジオ 杉本達應研究室
Bar Chart
dataset = d3.shuffle(d3.range(10, 110, 10))
chart = {
const width = 600;
const height = 300;
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("width", width);
const x = d3
.scaleLinear()
.domain([0, d3.max(dataset)])
.range([0, width - 50]);
const y = d3.scaleBand().domain(dataset).range([0, height]).padding(0.1);
svg
.selectAll("rect")
.data(dataset)
.join("rect")
.attr("y", y)
.attr("width", x)
.attr("height", y.bandwidth())
.attr("fill", "orange");
svg
.selectAll("text")
.data(dataset)
.join("text")
.attr("x", x)
.attr("y", (d) => y(d) + y.bandwidth())
.attr("dy", "-0.4em")
.attr("dx", "0.5em")
.text((d) => d);
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.
