D3.js

【D3.js講座】D3.jsで折れ線グラフを描画する（後編）

• 2017.01.06
• JavaScript
• D3.js

 前回はd3.scaleLinear(), d3.line()を使用し、折れ線グラフの描画を行いました。 今回は前回作成した折れ線グラフをもとに、x軸、y軸、目盛りの追加をご紹介します。

【D3.js講座】D3.jsで折れ線グラフを描画する（前編）

• 2016.10.07
• JavaScript
• D3.js

 今回は、D3.jsを使った折れ線グラフの描画をご紹介します。 前回は簡単なsvg描画を紹介しましたが、今回はデータビジュアライゼーションを目的としているD3.js本来の利便性を感じられるかと思います。 さっそく実装を紹介します。 日本のオリンピックにおけるメダル取得数の推移グラフ 今回もオリンピック …

【D3.js講座】D3.jsを使用した図形の描画

• 2016.09.21
• JavaScript
• D3.js

 アナトミーではD3.jsを使用しsvgタグでタイルを描画しています。 データごとに属性の値を変更する処理は複雑ですが、D3.jsを使用すると比較的簡単に描画できます。 簡単なデータの可視化 前回に引き続き、リオ・オリンピックの国別メダル獲得数のデータを使用し、データごと描画する図形の大きさ、色を変え …

【D3.js講座】 D3.jsとは？

• 2016.08.31
• JavaScript
• D3.js

 アナトミーでは、webサイトの情報を俯瞰するというコンセプトで開発しており、多量のデータをブラウザの１画面に収める必要がありました。 そこで利用したのが D3.js です。 D3.jsはデータの可視化のためのJavaScriptライブラリです。（公式サイト：https://d3js.org/） アナ …