[B! d3.js][svg] gayouのブックマーク

gayou id:gayou

d3.jsとsvgに関するgayouのブックマーク (2)

D3.jsで日本地図を作成しデータを反映するサンプル（コロプレス地図）｜ Tips Note by TAM
前回の記事「D3.jsの使い方とグラフを作成するサンプル」に引き続き、今回もD3.jsを使用します。今回はD3.jsを使用してブラウザ上に日本地図を作成し、 CSVファイルに記載された果物の都道府県別出荷量のデータを反映してみます。 ⇒サンプルデモ（平成25年産主要果樹都道府県別出荷量）まずは必要なデータを準備します。 [準備1] 地図データの取得（日本地図の座標データ / JSONファイル）日本地図は座標データを元にSVGの要素を使用してパスを作成します。ひとつひとつ座標データを設定するのは大変なので、フリーの地理データを使用します。フリーの地理データは下記のサイトで取得できます。 ●Natural Earth このサイトで取得できるデータはShape形式なので、これをブラウザ上で使用するために、Shape形式→GeoJSON→TopoJSONの順番で変換します。 GeoJ
gayou 2017/06/27
これは参考になる。

javascript

d3.js

svg
リンク
d3.jsで作ったバーンダウンチャート - Qiita
概要 d3.jsを使ってバーンダウンチャートを作ってみました。短いコードでデータをビジュアル化できるd3.jsは素晴らしいですね!!　いろいろ試した結果、出来上がったJavaScript部分のコードをこちらに掲載します。機能概要サーバサイドからJSONデータを受け取りd3.jsを使ってSVG領域にバーンダウンチャートを描画します。予定線をグレー、実績線をオレンジ、工数合計線をグリーンとして折れ線グラフを作ります。各データのポイント部はマウスオーバー時に数値を表示します。動作イメージフィルタ条件に対応したJSONをAjaxで出力し、d3.jsによりSVG領域を再描画します。d3.jsの処理が高速なので、ストレス無く快適に操作できます。 JSONデータの例データベースにはチケット毎に以下の項目を時系列に格納しています。各項目を日付毎にサマライズしたJSONを生成しd3.jsに渡します
gayou 2016/05/16
svg

javascript

d3.js
リンク
1