GUNMA GIS GEEK

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

「 D3v3 」 一覧

no image

[D3.js]トランジションをpromiseを使って管理する。

2016/07/07   -D3v3

タイトルのまんまの内容です。 仕事でデータビジュアライゼーションを作成していると、「AとBの要素のトランジションが完了してから、Bのトランジションを始める」など複雑なアニメーションが必要になることが多 …

d3.js logo

D3.jsの参考書、20冊。

2016/05/27   -D3v3, 書籍

以前から幾つか紹介してきたD3.jsの参考書ですが、前回からだいぶ出版数が増えたので改めて紹介記事をかいてみました。 なにより、「in Action」シリーズ「Mastering」シリーズにD3.js …

群馬県交通死亡事故発生マップ

群馬県の交通死亡事故発生箇所データをヒートマップにして表示してみた。

2016/05/24   -D3v3, Google Map API, maps

demo 群馬県が待望のオープンデータを開始してくれたので、早速公開されているデータを使ってみました。 防犯・交通事故情報の中から「交通死亡事故発生場所」を取得して地図上に表示しています。 一応スマホ …

no image

svg要素でもinnerHTMLを使えるようにするpolyfill

2016/05/10   -D3v3, Javascript

主にIE対応に必要。

例えば、上記のコードで #base 以下の要素をまるごと #overlay にコピーしたい場合に innerHT …

2016/4 earthquake

4月中に発生した地震を視覚化してみた。

2016/04/27   -D3v3, datavis

Demo USGSにて公開されている過去30日分の地震データ(Past 30 Days. All Earthquakes)を視覚化しました。データ量が多かったので、マグニチュード0以下のデータは省略し …

重み付けボロノイ図

【D3.js】重み付けボロノイ図

2016/04/25   -D3v3, leaflet.js

example 重み付けボロノイ図のサンプルを作った。 通常のボロノイ図は母点間に垂直二等分線を引いていく形で作られるが、重み付けボロノイ図は特定の値でもって二等分ではなく内外にラインを移動させること …

病院位置 95,762件プロット

【D3.js】約97,000件の位置情報を地図にプロットしてみた。

2016/04/02   -Canvas, D3v3

医療経済研究機構にて、公開されている「全国保険薬局一覧」と「全国保険医療機関(病院・診療所)一覧」データをD3.jsを使って地図上にプロットしてみた。 全国保険医療機関(病院・診療所)一覧 データの数 …

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

2016/03/25   -Canvas, D3v3

最近、D3.jsを使ってジェネレーティブアートの勉強をしているので、ゴラン・レヴィンの作品を参考にボロノイ図エフェクトを画像に適用してみました。 Segmentation and Symptom &# …

d3-xray-demo

D3.jsのデバッグ用ブックマークレット「d3-xray」

2016/03/24   -D3v3

D3.jsを使ったデータビジュアライゼーションの作成では、SVGを含むDOM要素にデータをバインドして作品を構築することになりますが、表示されているDOMにどんなデータが束縛されているのかは目視では確 …

余命地図

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

2016/03/18   -D3v3, datavis, leaflet.js

厚生労働省の「平成22年市区町村別生命表」のデータを用いて「余命地図」なるものを作成してみました。あくまでネタとしてお楽しみください。 右上のセレクトボックスで、年代と性別を選択すると各市区町村での平 …

1798年〜1891年におけるロンドンまでの情報伝達速度

18世紀〜19世紀の情報伝達速度を視覚化してみた。

2016/03/09   -D3v3, datavis

ファンタジー国税庁と勇者の申告、女騎士の会計処理 – Togetterまとめ 女騎士、経理になる。─プロローグ─ – デマこい! Twitterで話題になっていたツイートがコミ …

css 3d line chart

【D3.js】3D風のラインチャートを作る

2016/03/04   -CSS, D3v3

example D3.jsを使って3D風の線グラフをつくってみました。 手前から奥に向かって進むようなアニメーションになっています。 解説 実は、たいしたことは何もしていません。 D3.jsで普通に線 …

過去の震災データを並べて視覚化してみた。

2016/02/17   -D3v3, datavis, maps

もうすぐ3月11日。震災から5年経ったわけですが、時が経つのは早いものですね。 Map of Worldというサイトで東日本大震災を含む、1902年〜2015年までの間で死者数が1000人を超える地震 …

ハート型の地図

2016/02/15   -D3v3, maps

ハッピーバレンタイン(1日遅れ) 上記はオロンス・フィネ(オロンティウス・フィネウス)さん作成のハート型の地図です。この時期になると、やたらと海外のGeo系ブログで見かける一部の人にとってはおなじみの …

四国はオーストラリア

D3.jsを使って四国をオーストラリアにしてみた。

2016/02/12   -D3v3

example 最近のテレビでは四国がオーストラリアになっていたりするらしいですね。そういった地図の発注がいつきても困らないようにD3を使って四国をオーストラリアにしてみました。 解説 本州(四国抜き …

d3_Before_After_Image

【D3.js】Before After Image Slider

2016/01/29   -D3v3

example スライダーで2枚の画像を切り替えて比較できる、いわゆる「Before After Image Slider」というものをD3.jsで作ってみた。 「2枚でなく複数枚重ねて切り替えられる …