東京都立大学 システムデザイン学部 インダストリアルアート学科 ネットワークデザインスタジオ 杉本達應研究室
viewof max = Inputs.range([20, 200], { step: 10 })
data = d3.range(10, max, 10)
barChart = {
const div = d3.create("div");
div
.selectAll("div")
.data(data, (d) => d)
.join("div")
.classed("bar", true)
.text((d) => `${d}点`)
.style("font-family", "sans-serif")
.style("color", "white")
.style("background-color", "maroon")
.style("overflow", "hidden")
.style("margin-bottom", "1px")
.style("width", (d) => `${d * 5}px`)
.style("height", "1.5em");
return div.node();
}
verticalBarChart = {
const div = d3.create("div");
div
.selectAll("div")
.data(data, (d) => d)
.join("div")
.classed("bar", true)
.text((d) => `${d}点`)
.style("display", "inline-block")
.style("font-family", "sans-serif")
.style("color", "white")
.style("background-color", "maroon")
.style("overflow", "hidden")
.style("margin-right", "1px")
.style("height", (d) => `${d * 5}px`)
.style("width", "1.5em");
return div.node();
}
chart2 = {
const div = d3.create("div");
div
.selectAll("div")
.data(data, (d) => d)
.join(
(enter) =>
enter
.append("div")
.classed("bar", true)
.text((d) => d)
.style("font-family", "sans-serif")
.style("color", "white")
.style("background-color", "maroon")
.style("margin-bottom", "1px")
// .style("width", (d) => `${d}px`)
.style("width", 0)
.call((enter) =>
enter
.transition()
.duration(1000)
.style("width", (d) => `${d}px`)
),
(update) =>
update.call((update) =>
update.transition().duration(1000).style("background-color", "pink")
),
(exit) => exit.remove()
// exit.call((exit) =>
// exit
// .transition()
// .duration(1000)
// // .style("background-color", "rgba(255, 255, 255, 0)")
// .style("width", 0)
// .remove()
// )
);
return div.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.
