D3.jsを使用してWordPressサイトにチャートを追加する方法

公開: 2016-05-11

「データの視覚化」という用語は、実践とキャリアパスの両方としてより主流になっているため、ご存知かもしれません。この新しい分野が順調に進んでいるのには理由があります。ユーザーについて常に学習し、主張を裏付けるデータをユーザーに示すことが重要です。

データがクリーンでプロフェッショナルな方法で提示されると、理解と解釈が容易になります。ほとんどの場合、ユーザーは視覚的な人物です。グラフを使用するよりも、データを説明するためのより良い方法はありますか？ D3.jsは、データドリブンドキュメントとも呼ばれ、WordPressサイトにグラフを追加するための優れた方法です。

なぜD3？

このライブラリは、デザイナーがWeb上でデータを紹介するのに役立ちます。可能性は無限大で、これは非常に人気のあるライブラリになっています。単純なものから複雑なもの、そしてその中間のものまで、D3をカスタマイズして、ほぼすべての種類のグラフをレンダリングできます。これは、標準のWebテクノロジーとうまく連携し、DOMを操作でき、非常に柔軟性があり、グラフを好みに合わせて正確にカスタマイズできます。

これまでに、SVGと呼ばれることが多いScalableVectorGraphicsに遭遇した可能性があります。これは、D3ライブラリが作成するフォーマットのタイプです。 SVGは、サイズが小さく、スケーラブルで、解像度に依存しないため、優れています。

明確にするために、このソリューションには、事前に作成されたチャートが付属していません。独自のチャートを作成する必要があります。 D3ギャラリーを見てください。あなたを刺激する多くの素晴らしい例を見ることができます。

オープンソースソリューションとして、ライセンスやコストについて心配する必要はありません。オープンソースであるため、開発が進んでいます。最新バージョンを最新の状態に保つために、GithubでD3をフォークできます。

簡単なD3チャートの作成

D3の素晴らしさがわかったので、何かを作成しましょう。 D3の基本的な概念をカバーする簡単なドーナツチャートを作成します。

wordpress-charts-with-d3-donut-chart — 完成したチャートは次のようになります。

ステップ1：スクリプトをサイトに追加します

まず、WordPressサイトにD3スクリプトを追加する必要があります。 d3 Webサイトからダウンロードできます。または、最新バージョンに直接リンクすることもできます。このチュートリアルでは縮小版を使用していることに気付くでしょう。 D3のサイズは当然かなり小さいですが、最小化されたサイズは148KBとわずかに小さくなっています。

次に、カスタムチャートスクリプトが配置される新しいJavaScriptファイルを作成します。見つけやすいように、ファイルにわかりやすい名前を付けます。

チャート固有のJavaScriptの前にD3スクリプトを呼び出すことが非常に重要です。物事が正しい順序で呼び出されない場合、チャートはレンダリングされません。（私は個人的な経験からこれを知っています、そしてあなたがすぐにそれを捕まえなければ、あなたはおそらく壊れていないものを直すのに多くの時間を費やすでしょう。）

これらのスクリプトは、body終了タグの後にサイトに追加する必要があります。ページを調べるときは、次のようになっていることを確認してください。

&amp;amp;amp;lt;script type=&quot;text/javascript&quot; src=&quot;js/d3/d3.min.js&quot;&amp;amp;amp;gt;&amp;amp;amp;lt;/script&amp;amp;amp;gt;
&amp;amp;amp;lt;script type=&quot;text/javascript&quot; src=&quot;js/charts/charts.js&quot;&amp;amp;amp;gt;&amp;amp;amp;lt;/script&amp;amp;amp;gt;

ファイル構造によっては、ファイルパスがこれとは異なる場合があることに注意してください。

JavaScriptを追加する方法がわかりませんか？ JavaScriptをサイトに追加する方法を学びます。

ステップ2：グラフを作成するためのスクリプトを追加する

d3.jsファイルにはまったく触れず、特定のチャートファイルでのみ作業します。この場合、 charts.jsと呼ばれます。

物事を少しずつ分解していきましょう。まず、変数を作成し、関数に必要なものを確立します。この変数にdonutという名前を付けます。

var donut = (function(one) {
})();

中括弧の中に、サイズ情報を追加します。

var width = 400,

height = 400,

radius = 200

次に、色を定義します。灰色と青色のチャートはどうですか？ここにリストされている最初の色は、デフォルトの色となるライトグレーです。 2つ目は、データを表す青色です。

colors = d3.scale.ordinal()

.range(['#e8e8e8', '#1dafd3']);

これをテストするにはいくつかのデータが必要になるので、次にそれを追加しましょう。このチュートリアルでは、データはハードコーディングされていますが、D3でスプレッドシートデータと動的データを使用することもできます。

var piedata = [{

value: 50

}, {

value: 30

}, ]

これで、グラフのレンダリング方法を定義するのに役立つ詳細を追加できます。

円弧は内側の半径を定義します。グラフの外側の半径を想像してください。かなり太くしたいので、100を引くだけで十分です。

var arc = d3.svg.arc()

.innerRadius(radius - 100)

.outerRadius(radius)

これによりSVGコンテナが作成され、 #donutは、実際にグラフをレンダリングするためにページでターゲットにするものです。これは、上記の手順から色が表示されるようになる場所です。

var donutChart = d3.select('#donut').append('svg')

.attr('width', width)

.attr('height', height)

.append('g')

.attr('transform', 'translate(' + (width - radius) + ',' + (height - radius) + ')')

.selectAll('path').data(pie(piedata))

.enter().append('g')

.attr('class', 'slice')
var slices1 = d3.selectAll('g.slice')

.append('path')

.attr('fill', function(d, range) {

return colors(range);

})

.attr('d', arc)

完成したコード

持っているものをサンプルと比較したい場合に備えて、ここに完全なコードスニペットがあります。

/* start donut charts */
var donut = (function(one) {
var width = 400,

height = 400,

radius = 200
colors = d3.scale.ordinal()

.range(['#e8e8e8', '#1dafd3']);
var piedata = [{

label: &quot;One&quot;,

value: 50

}, {

label: &quot;Two&quot;,

value: 30

}, ]
var pie = d3.layout.pie()

.value(function(d) {

return d.value;

})
var arc = d3.svg.arc()

.innerRadius(radius - 100)

.outerRadius(radius)
var donutChart = d3.select('#donut').append('svg')

.attr('width', width)

.attr('height', height)

.append('g')

.attr('transform', 'translate(' + (width - radius) + ',' + (height - radius) + ')')

.selectAll('path').data(pie(piedata))

.enter().append('g')

.attr('class', 'slice')
var slices1 = d3.selectAll('g.slice')

.append('path')

.attr('fill', function(d, range) {

return colors(range);

})

.attr('d', arc)

})();

チャートを見る

ドーナツチャートを「呼び出し」て実際に表示できるように、新しいページまたは投稿を作成する必要があります。テキスト編集モードになっていることを確認してください。

 &amp;amp;amp;lt;div&amp;amp;amp;gt;

      &amp;amp;amp;lt;svg id=&quot;donut&quot; viewBox=&quot;0 0 400 400&quot; perserveAspectRatio=&quot;xMinYMid&quot;&amp;amp;amp;gt;&amp;amp;amp;lt;/svg&amp;amp;amp;gt;

&amp;amp;amp;lt;/div&amp;amp;amp;gt;

ビューボックスとアスペクト比とサイズのグラフ

SVGタグには、 viewBoxとpreserveAspectRatioという余分なものがあります。これはD3によって生成されたものではなく、完全にオプションです。別の好ましいサイズ設定方法があるかもしれませんが、これはうまく機能する傾向があり、チャートの応答性に役立ちます。

特にこの場合、完全に丸い形状を維持したいので、アスペクト比を設定すると、SVGのスケールがフィットするようになります。ここで、 viewBoxが役立ちます。 viewBoxの利点は、SVG内で使用されるすべての測定値と座標を、使用可能なスペースに収まるようにスケーリングする方法を定義することです。 400も測定値として使用している場合は、円形を維持する方法について簡単に説明します。

同じ400の値が2つあります。これは、画像が適切に拡大縮小されるためです。 viewBox="0 0 400 400"を使用して、グラフィックの座標系を作成しています。幅400ユニット、高さ400ユニットです。 SVGグラフィックの幅と高さによって表示領域が確立され、 viewBoxを設定すると、グラフィックを特定のコンテナー（ほとんどの場合、ユーザーがWebページの一部であるデフォルトのビューポート）に合わせて拡大できるように指定できます。現在参照）。

viewBoxを定義しても、完全にスケーリングされないため、もう少しあります。歪むことはありません。これは良いことですが、方程式にはまだまだあります。ウィングマン、 preserveAspectRatioに会いましょう。画像のアスペクト比を定義するviewBoxがない限り、効果はありません。アスペクト比を維持するためにスケールが調整されるため、完全な円形のグラフを維持できます。 preserveAspectRatioを含める場合、 viewBoxがチャートが含まれるビューポートまたはコンテナのアスペクト比と一致しない場合を計画しています。ほとんどの場合、デフォルトでは、画像は高さと幅の両方に収まるまで拡大縮小されますが、余分なスペースの中央に配置されます。ビューポート内のグラフィックを両方向の中央に配置するようにブラウザに指示するpreserveAspectRatio="xMidYMid"が含まれています。

最も重要なポイントは、グラフィックが途切れることがなく、スケーラブルであることを知っていることです。これを実際に理解するための鍵は、値を試すことです。そのための良い方法は、値が変更されたときに何が起こるか、そしてそれがビューポートにどのように関連するかを確認することです。

ブラウザのサポートとd3

最新のブラウザを使用している可能性がありますが、古いブラウザをサポートする必要がある場合は言及する価値があります。全体として、ブラウザーのサポートは素晴らしく、おそらく問題は発生しませんが、D3.jsはIE8などの古いブラウザーではうまく機能しません。

簡単なグラフを作成することは、D3.jsを起動して実行するための優れた方法です。基本を理解し、D3スターターチャートに精通することは、データを設計してより多くのチャートタイプに移行するときに非常に役立ちます。単純なものから複雑なものまで、設計オプションは無限です。

あなたのチャートはどうでしたか？コメントで教えてください！

次は何ですか？

開発者に最も推奨されるプラグインのリストについては、この電子ブックをダウンロードしてください。これらのプラグインはすべて、使いやすく、サイトのパフォーマンスがそれほど高くなく、まったく信頼できることがわかりました。

新しいお気に入りのプラグインをインストールする準備はできましたか？ 以下をクリックしてください！