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

  関連記事

d3.js map hexbin
【D3.js】地図上にHexbin(六角形)を表示する

地図上に表示するポイントが多くなるとゴチャゴチャして見難くなります。 「そんな時 …

FOSS4G 2014Hokkaido
「FOSS4G Hokkaido」にてD3.jsに関する講演をさせていただくこになりました。

FOSS4G 2014 Hokkaido 「FOSS4G Hokkaido」は地 …

東京メトロAPIてすと
東京メトロAPIテスト

example なんだかんだでやっと承認され、東京メトロAPIで遊んでいます。 …

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

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

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

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

vectorTileMap1
ベクタータイルマップの紹介

FOSS4G Advent Calendar 2013 7日目 参加記事です。 …

pathGL
【D3プラグイン】 D3で作成したグラフをWebGLでレンダリングするプラグイン「PathGL」

先週末からずっと雪かきです。 生まれて初めて「雪のせいで家から出られない!」とい …

party-mode
D3.jsとWeb Audio APIを使ったオーディオビジュアライゼーション

Demo ※Chrome推奨 D3.jsとWeb Audio APIを用いて作ら …

panning
【D3.js】水平パンニング

example データを表示する領域を制限して、ドラッグした際に続きのデータを見 …

Octocat
【D3.js】今まで作成したexampleをGitHubに公開しました。

shimizu/d3example 「せっかく、勉強会にも行ったことだし積極的に …