Designer, Artist, Researcher, Educator @sugi2000lab .
co-translator for Japanese edition of “Generative Design” and “Code as Creative Medium”.
md`# D3 Tutorial 13-6`
dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
w = 500
h = 100
barPadding = 1
svg = {
const svg = DOM.svg(w, h)
d3.select(svg).selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
return i * (w / dataset.length);
})
.attr("y", function(d) {
return h - d * 4; // SVG の高さからデータの値 x 4 を引く
})
.attr("width", w / dataset.length - barPadding)
.attr("height", function(d) {
return d * 4; // データの値 x 4
})
.attr("fill", function(d) {
return "rgb(0, 0, " + (d * 10) + ")";
});
return svg
}
style = html`<style>
</style>`
d3 = require('d3@5')
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.
