SYMMETRIC Web開発ブログ
レスポンシブWebデザイン、CSSフレームワークなど、Webフロントエンド開発に関するBLOGです。
※SYMMETRIC公式BLOGと統合し、ブログ名称を変更しました

Naomasa FUSHIMI

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

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

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

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

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

NO IMAGE

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

Page Top