D3をScrapboxで実行する

(2019/1/18)

D3.jsという情報視覚化ライブラリをScrapboxから簡単に使えるようにしてみた。

のようなリンクをクリックすると別ウィンドウが開いて下のd3.jsが実行されてデータが表示される。

Jupyter的な使い方ができるかも?

code:d3.css

div.bar {

display: inline-block;

width: 40px;

height: 75px;

background-color: teal;

}

code:d3.js

d3.select("body")

.selectAll("div")

.data(dataset)

.enter()

.append("div")

.attr("class", "bar")

.style("height", function(d) {

var barHeight = d * 10

return barHeight + "px"

});

実行結果:

https://gyazo.com/915ec6910d2085fd27af5a85abac82f4