GUNMA GIS GEEK

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

*

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

     - d3.js

  • このエントリーをはてなブックマークに追加

Heatstroke

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

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

example

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

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

example

 - d3.js

  • このエントリーをはてなブックマークに追加

Comment

  関連記事

mapdorpshadow
【D3.js】地図上にオーバーレイしたSVG要素にドロップシャドウを付ける

昨日の記事でLeafletで作成した地図上にSVGをオーバーレイしましたが、地図 …

D3.js GoogleMap Voronoi Diagram
【D3.js】Google Map上にボロノイ図を描く

前の記事では、ガソリンスタンドの位置情報を用いて高崎市の地図上にボロノイ図を表示 …

voroart_svg160325
D3.jsを使ってジェネレーティブアートを作成してみた

最近、D3.jsを使ってジェネレーティブアートの勉強をしているので、ゴラン・レヴ …

opendatamap
オープデータを公開している都市に色を塗ってみた。

はやく真っ赤に(あるいは緑に)日本全体が染まればいいのに。 example オー …

Data-Driven Documents ?
9月6日に大宮でD3.js勉強会をやります。

Code for SAITAMAさんに声をかけていただき、D3.jsの勉強会を開 …

d3linechart000002
【D3.js】おさらい2回目 線グラフ

棒グラフに続いて、今回は(折れ)線グラフを作成します。 前回説明した内容について …

Data_Visualization_with_d3.js
D3.js本の出版が止まらない(最近出版されたD3参考書)

参考書が増えてくると「定番のライブラリ」感が出てきて、なんか安心感があるよね。 …

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

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

WS000012
D3.js 教材まとめ

D3.jsについては以下を。 データビジュアライゼーション「d3.js」 Tri …

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

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