データを入れるだけで色々なグラフをhtmlに描けるツール(d3.js)

公開日:2019-06-09
最終更新:2019-06-09

はじめに


あったら便利かもと思って、簡単にグラフを描けるツールを作ってみたのでそれの紹介です。
詳しい説明などはhatenaに載せる予定です。(まだ)

d3のバージョンはv4です。バージョンによって書き方が違うのでご注意ください。
グラフに出力しているデータはこちらを使用させていただきました。

コード

ソースコードはGithubにあげてみました。こちら

多くのデザインが可能なグラフ

単にグラフを選ぶのではなく、カラーテーマバーのデザイン軸のデザインツールチップのデザイン別々に選択できるようにして多くのグラフを描写できるようにしました。シンプルのものから面白いグラフまで多くの種類を選択できるようになればグラフを作る助けになると思います。

グラフの生成方法

コードにサンプルのhtmlが上がっています。それを見ていきましょう。

<!DOCTYPE html>  
<head>  
    <meta charset="utf-8">  
    <!-- d3.jsの読み込み -->  
    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>  
</head>  
<body>  
    <!-- divのidはインスタンス化の引数と同じ名前を入れること -->  
    <div id = "example"></div>  

    <!-- ファイル(graph_bar.js)の読み込み -->  
    <script src="graph_bar.js"></script>  

    <script>  
        //データの入力例です。  
        var dataset = [  
            { name: "角換わり", value: 55.3 },  
            { name: "矢倉", value: 52.1 },  
            { name: "相掛かり", value: 48.8 },  
            { name: "横歩取り", value: 53.1 },  
            { name: "一手損角換わり", value: 61.5 },  
            { name: "中飛車", value: 50.9 },  
            { name: "四間飛車", value: 45.3 },  
            { name: "三間飛車", value: 59.5 },  
            { name: "角交換振り飛車", value: 51.4 },  
            { name: "相振り飛車", value: 45.5 },  
            { name: "向かい飛車", value: 40.0 },  
            { name: "その他", value: 55.0 },];  
        var color_theme = 6;                        //色のテーマ。1~7  
        var width = 1500, height=400;               //グラフ全体の幅  
        var axis_name = "先手勝率 [%]";              //y軸のラベル  
        var graph_title = "戦法とその先手番の勝率";     //グラフのタイトル  

        //Graph_barをインスタンス化する------------------------------------------  
        var graph_bar = new Graph_bar("example", dataset,  
                color_theme, width, height, axis_name, graph_title);  


        var bar_design = 4;                         //棒のデザイン。1~5  
        var axis_design = 3;                        //軸のデザイン。1~3  
        var tooltip_design = 3;                     //ツールチップのデザイン。1~3  

        //グラフを描写する-------------------------------------------------------  
        graph_bar.draw(bar_design,axis_design,tooltip_design);  
    </script>  

</body>  

入力がちょっと多そうですね。必要な処理はこの二つになります。

  • Graph_barのインスタンス化
    //Graph_barをインスタンス化する------------------------------------------  
          var graph_bar = new Graph_bar("example", dataset,  
                  color_theme, width, height, axis_name, graph_title);  
  • グラフの描写
    //グラフを描写する-------------------------------------------------------  
          graph_bar.draw(bar_design,axis_design,tooltip_design);  

引数の説明

各引数の説明をしていきます。

new Graph_bar(name, data, colortheme, width, height, name_axisy, graph_title);

  • name
    このグラフの名前(id)。htmlで作ったdivブロックのidと同じにする必要があります
  • data
    グラフに使うデータ。各データは{name: , value: }のように連想配列で入れる必要があります。一番目がx軸、二番目がy軸になります。
  • colortheme
    カラーテーマはここで選択します。現在は1~7のテーマがあります。それ以外を入力したらデフォルトになります。
  • width
    グラフ全体の横幅です。y軸の名前などの範囲を取るので描写される棒グラフはこれより小さいです。
  • height
    グラフ全体の縦幅です。グラフ名などの範囲を取るので描写される棒グラフはこれより小さいです。
  • name_axisy
    y軸のラベル名です。
  • graph_title
    グラフタイトルです。

graph_bar.draw(bar_design, axis_design, tooltip_design);

  • bar_design
    棒のデザインです。現在は1~5のデザインがあります。
  • axis_design
    軸のデザインです。現在は1~3のデザインがあります。
  • tooltip_design
    ツールチップのデザインです。現在は1~3のデザインがあります。

デザイン例

一つ一つのデザインを紹介すると長くなるので、個人的におすすめなデザインをいくつか紹介します。

シンプルグラフ

テーマ 番号 説明
color_theme 1 シンプルなブラック
bar_design 2 棒の上に値が描写されたバー
axis_design 1 シンプルな直線
tooltip_design 2 丸みのあるツールチップ


シンプルさを求めたグラフです。

ノート風グラフ

テーマ 番号 説明
color_theme 3 棒は黒っぽく、軸を青くしたテーマ
bar_design 3 棒の上部に値が描写されたバー
axis_design 3 点線
tooltip_design 3 丸みのある白がベースなツールチップ


ノートっぽいグラフが好きなので作りました。正直、ツールチップと軸は3が一番いいと思います(他にいいデザインが思い浮かばなかったorz)

容器に入っているかのようなグラフ

テーマ 番号 説明
color_theme 6 赤を基調にしたテーマ
bar_design 4 棒の上部に値が描写されたバー
axis_design 3 点線
tooltip_design 3 丸みのある白がベースなツールチップ


最大値が一目でわかることから割合を見せたいときにいいかもしれないです。

面白いグラフ

テーマ 番号 説明
color_theme 7 虹色なテーマ
bar_design 5 中がくりぬかれた棒
axis_design 3 点線
tooltip_design 3 丸みのある白がベースなツールチップ


ふと思いついたので作ったグラフです。ポップでかわいいのでこれもアリだと思っています。

さいごに

様々な棒グラフを描写するツールを紹介しました。上で紹介したものが今のところほぼ全部になりますが、組み合わせで色々つくれるので試してみてくださると光栄です。
途中でも言ってますが、軸とツールチップはほぼ固定なのでデザインを更新していければなと思います。
あとは、これは普通の棒グラフのみ描写が可能なので、横向きの棒グラフや積み重ね棒グラフ、複数の棒グラフを表示したグラフは描写できません。ヒストグラムですら値によって色分けできないので微妙です。

ご要望があれば検討しますが、あとは気分次第で作りますのでよろしくお願いします。

記事が少しでもいいなと思ったらクラップを送ってみよう!
26
+1
@syakooのブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする