D3をScrapboxで実行する

D3をScrapboxで実行する(2019/1/18)

    D3.jsという情報視覚化ライブラリをScrapboxから簡単に使えるようにしてみた。
https://masui.github.io/rund3/?p=masui/D3をScrapboxで実行する&c=d3.js&s=d3.css のようなリンクをクリックすると別ウィンドウが開いて下の d3.js が実行されてデータが表示される。

ソース: https://github.com/masui/rund3
Jupyter的な使い方ができるかも?

以下を実行
d3.cssCopied!
 div.bar {
    display: inline-block;
    width: 40px;
    height: 75px;
    background-color: teal;
 }
d3.jsCopied!
 var dataset = [ 3, 1, 4, 1, 5, 9 ];
 d3.select("body")
    .selectAll("div")
    .data(dataset)
    .enter()
    .append("div")
    .attr("class", "bar")
    .style("height", function(d) {
       var barHeight = d * 10
       return barHeight + "px"
    });

実行結果:

#D3 #技術情報 #ブログ #Tips
D3をScrapboxで実行する

関連ページ
