D3をマスター 簡単な棒グラフ

2021-05-21
d3

D3とは

下記D3のトップページから引用

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

D3.jsは、データに基づいて文書を操作するためのJavaScriptライブラリです。D3は、HTML、SVG、CSSを使ってデータを生き生きと表現することをサポートします。ウェブ標準を重視するD3は、独自のフレームワークに縛られることなく、強力なビジュアライゼーションコンポーネントとDOM操作へのデータドリブンなアプローチを組み合わせることで、モダンブラウザの機能をフルに発揮します。

D3のトップページ

D3の使い方

D3は下記のようにCDNを使って簡単に使うことができます。

<script src="https://d3js.org/d3.v6.min.js"></script>

バーチャート

では早速バーチャートを作っていきます。こちらの記事を参照に進めていきます。 https://observablehq.com/@d3/lets-make-a-bar-chart

データとなる配列の数字をまずは下記のように定義します。

data = [4, 8, 15, 16, 23, 42]

それでは簡単な棒グラフを描いてみます。

@section Scripts{

    <script>
        $(function () {

            data = [4, 8, 15, 16, 23, 42];

            // Create an empty (detached) chart container.
            const div = d3.select("#simple-bar-chart-1");

            // Apply some styles to the chart container.
            div.style("font", "10px sans-serif");
            div.style("text-align", "right");
            div.style("color", "white");

            // Define the initial (empty) selection for the bars.
            const bar = div.selectAll("div");

            // Bind this selection to the data (computing enter, update and exit).
            const barUpdate = bar.data(data);

            // Join the selection and the data, appending the entering bars.
            const barNew = barUpdate.join("div");

            // Apply some styles to the bars.
            barNew.style("background", "steelblue");
            barNew.style("padding", "3px");
            barNew.style("margin", "1px");

            // Set the width as a function of data.
            barNew.style("width", d => `${d * 10}px`);

            // Set the text of each bar as the data.
            barNew.text(d => d);

            // Return the chart container.
            return div.node();
        });

    </script>
}

<h2>Simple Bar Chart 1</h2>
<div id="simple-bar-chart-1">
</div>

下記のようにバーチャートが表示されます。

バーチャート

幅を固定値でなくスケールさせるためにはコードを下記のように変更します。 ${x(d)}px)のところで幅を割り出しています。


@section Scripts{

    <script>
        $(function () {

            data = [4, 8, 15, 16, 23, 42];

            x = d3.scaleLinear()
                .domain([0, d3.max(data)])
                .range([0, 420])

            // Create an empty (detached) chart container.
            const div = d3.select("#simple-bar-chart-1")
                .style("font", "10px sans-serif")
                .style("text-align", "right")
                .style("color", "white");

            div.selectAll("div")
                .data(data)
                .join("div")
                .style("background", "steelblue")
                .style("padding", "3px")
                .style("margin", "1px")
                .style("width", d => `${x(d)}px`)
                .text(d => d);

            return div.node();
        });

    </script>
}

<h2>Simple Bar Chart 1</h2>
<div id="simple-bar-chart-1">
</div>
公開日: 2021-05-21