Webデザイン入門編2:データビジュアライゼーション D3.js

#08:データビジュアライゼーション D3.js

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>D3.js</title>
        <style>
            .bar {
                margin-bottom: 10px;
                width: 0;
                padding: 5px 10px;
            }
        </style>
    </head>
    <body>
        <script src="https://d3js.org/d3.v5.min.js"></script>
        <script>
            d3.selectAll("div")
            .data([10, 50, 80])
            .enter().append("div");
        </script>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>D3.js</title>
        <style>
            .bar {
                margin-bottom: 10px;
                width: 0;
                padding: 5px 10px;
            }
        </style>
    </head>
    <body>
        <script src="https://d3js.org/d3.v5.min.js"></script>
        <script>
            d3.selectAll("div")
            .data([10, 50, 80])
            .enter().append("div");
        </script>
    </body>
</html>

この動画を見るにはpaiza会員登録のうえ
有料会員登録が必要です

無料会員登録して始める

データを表現するデータビジュアライゼーションのライブラリ「D3.js」を紹介します。

作成したコード

<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
    d3.selectAll("div")
    .data([10, 50, 80])
    .enter().append("div")
    .text( function(d){ return d; } )
    .style('background', 'yellow')
    .attr('class','bar')
    .transition()
    .duration(1000)
    .style("width", function(d) { return d*2+'px'; });
</script>

参考になるWebサイト

d3.js
https://d3js.org/

paizaラーニング HTML/CSS入門編
https://paiza.jp/works/html/primer

paizaラーニング JavaScript入門編
https://paiza.jp/works/js/primer

有料プランで現役エンジニアに相談可能！

プログラミング学習 > Webデザイン入門編 > Webデザイン入門編2: レイアウトパターンとビジュアルデザイン > データビジュアライゼーション D3.js

実行する

採点する

入力
出力
コンパイルエラー
実行時エラー

出力タイプ：

コード判定結果

作成したコード

参考になるWebサイト