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

  関連記事

余命地図
あなたの余命はあと何年? 余命地図を作ってみた。

厚生労働省の「平成22年市区町村別生命表」のデータを用いて「余命地図」なるものを …

d3.js logo
D3.jsの参考書、20冊。

以前から幾つか紹介してきたD3.jsの参考書ですが、前回からだいぶ出版数が増えた …

【D3.js】ベクター地図のパン/ズーム&移動

example D3.jsで表示した地図のパン/ズーム&移動サンプルです。 サン …

globe wirework
D3.jsで作った地球儀にSVGフィルターエフェクトを適用する。

D3の描画機能にsvgの画像効果を適用することで多彩な表現が可能になります。そこ …

【D3.js】 SVGで地球儀を描く

回転させるのも簡単、そうD3ならね。 example データはNaturalEa …

Data visualization
ゴールデンウィーク中にD3.jsを学びたい方にお勧めな厳選まとめ

「データビジュアライゼーション(D3.js)を学ぶための教材まとめ」も大分量が増 …

no image
【D3.js】D3 Arrays sample

D3 Arrays D3には、配列を操作するのに非常に便利な関数がたくさんありま …

D3 geo projection Playgraund
D3 Geo Projection Playgraund

D3 geo projection Playgraund ブラウザ上で、D3.j …

高崎市のビリオンダラーグラムつくってみた

example 例を見てみましょう。これは「ビリオンダラーグラム」です。この画像 …

svg mask
[SVG]ドーナツ状のcircleを描画する。

先日の勉強会にて「重ねたcircleの途中の色だけ変えたい」という質問があり、そ …