Designer, Artist, Researcher, Educator @sugi2000lab .
co-translator for Japanese edition of “Generative Design” and “Code as Creative Medium”.
Published
Edited
Nov 1, 2019
md`# D3 Div bar chart sample`
div = html`<div style="background-color: black; padding: 10px;"></div>`
dataset = {
const dataset = []; // 配列の宣言と初期化
for (let i = 0; i < 80; i++) { // ループを25回繰り返す
const newNumber = Math.round(Math.random() * 30); // 0～30のランダムな数を生成
// const newNumber = 30 - i;
dataset.push(newNumber); // 生成した数を配列に追加
}
return dataset;
}
// dataset = [ 20, 18, 10, 5, 3, 2, 1, 1, 20, 30, 20, 1, 1, 2, 3, 5, 10, 18, 26 ];
d3.select(div).selectAll("div")
.data(dataset)
.enter()
.append("div")
.attr("class", "bar")
.style("height", function(d) {
var barHeight = d * 5; // 高さを 5 倍にします
return barHeight + "px";
// return d * 5 + "px";
})
.style("background-color", function(d) {
if (d >= 15) {
return "cyan";
} else {
return "stealblue";
}
});
html`<div class="bar"></div>`
html`<style>
div.bar {
display: inline-block;
width: 8px;
height: 75px; /* この数値は実行時に上書きされます */
background-color: teal;
margin-right: 1px;
}
</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.
