GUNMA GIS GEEK

群馬県の片隅でオープンデータとデータビジュアライゼーションとGIS(地理情報システム)に戯れるエンジニアのブログ。

*

【D3.js】全国の熱中症発生数を表示してみた(CSVデータ読み込み)

     - d3.js ver.3

はてなブックマーク - 【D3.js】全国の熱中症発生数を表示してみた(CSVデータ読み込み)
Pocket

Heatstroke

とりあえず、色々やってみて覚えよう!ってことで。
国立環境研究所」よりいただいた熱中症発生数のデータを可視化。
ダウンロードしたtsvファイルをExcelを使ってcsvに変更、文字コードをUTF8にコンバートしてD3に読み込ませています。

d3.csvでcsvファイルを読み込むと1行目をキーとした連想配列が返ってきます。あとはそれをデータセットとして使用するだけ。簡単!

example

ホントは、ソートを行った時に、サークルが移動するようなインタラクションにしたかったのだけれど、力及ばすでした orz

↑やり方が分かったので追記。

example

はてなブックマーク - 【D3.js】全国の熱中症発生数を表示してみた(CSVデータ読み込み)
Pocket

 - d3.js ver.3

Comment

  関連記事

ggooglemap
【D3.js】Google MapにSVGをオーバーレイする(SHAPEデータ軽量化)

Google MapにD3.jsで作成したSVGをオーバーレイする 前回作成した …

大阪市 ひったくり事件発生個所
大阪市のオープンデータを使って、ひったくり事件発生個所を視覚化してみた。

[2016/6/8 data update] 以前、大阪都構想住民投票結果の地図 …

Parallel_Coordinates1
【D3.js】データを絞り込むユーザインタフェースとしても使える、パラレルコーディネート図を作成する

example 昨日の「オンライン学習部 #0」で作成したグラフです。 下記do …

maplineanimation
【D3.js】 地図上のルートに沿ってアニメーション

example 以前の記事で、地図上の2点を結ぶ線を引く方法を掲載しましたが、今 …

rosen1
【D3.js】 SVGで路線図を描く

example 今までやってきた内容の復習に、D3.jsを使って路線図を描いてて …

filelisttreemap
【D3.js】サイズの大きなファイルを可視化する(ツリーマップ)

example 以前、アクセス流入元をツリーマップで表示してみたことがあるのです …

satellite1
【D3.js】 Satellite Projection(衛星俯瞰図)てすと

D3.jsには上記のような地図を表示するためのProjection(投影法)関数 …

分解
【D3.js】画像をデータセットとして使う

読み込んだ画像ファイルをcanvasに転写し、getImageDataで取得した …

e0014773_12325886
FOSS4G 2014 Hokkaidoに行ってきました。

FOSS4G 2014 HokkaidoにてD3.jsに関する講演を行わせていた …

d3barchart000006
【D3.js】おさらい1回目 棒グラフ

昨年末、ブログレイアウトのリニューアルのために去年書いた記事を見直していたのです …