GUNMA GIS GEEK

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

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

How to Draw Fantasy Art and RPG Maps

ファンタジー世界の地図の書き方参考書

2016/04/11   -maps, 書籍

西洋ファンタジー小説の挿絵などによく描かれている、幻想的な地図の書き方を多数のイラストとともにわかりやすく教えてくれる参考書。 Kindleで購入できます。 個人的には、こういうタイプの地図をD3.j …

日本の地形地図

日本の典型地形情報をGoogleの地形図の上に重ねてみた。

2016/04/04   -leaflet.js, maps

「日本の典型地形ウェブサイト」をリニューアル ~地理院地図との連携でより分かりやすく~|国土地理院 「日本の典型地形」というデータが地理院地図上で見ることができるようになったというニュースがあったので …

病院位置 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年市区町村別生命表」のデータを用いて「余命地図」なるものを作成してみました。あくまでネタとしてお楽しみください。 右上のセレクトボックスで、年代と性別を選択すると各市区町村での平 …

連休中におすすめのスマホゲーム

2016/03/18   -iPhone/iPad

すっかり忘れていましたが、今週末は連休ですね。特に予定もないので、またおかしな地図でも作ろうかと思っています。月曜日頃公開。 ネタもないので、連休中にサクッと遊べるゲームを紹介。 Breakneck …

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で普通に線 …

1936年の日本国立鉄道地図

1936年の日本国立鉄道地図

2016/02/23   -leaflet.js, maps

Fullscreen 1936年に作成された日本のカラフルな鉄道地図が、海外のサイトで公開されていたのでleaflet上に乗せてみました。 時代柄、韓国、台湾、満州などの鉄道地図も掲載されています。 …

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

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を使って四国をオーストラリアにしてみました。 解説 本州(四国抜き …