Love web applications » 可視化

D3.jsを使って、色相方向に地図を色分けする

kapibarawebmaster1515 — Sun, 25 Jan 2015 12:49:45 +0000

こんばんは。今日は前回記事の続きです。色相方向に補間して求めた色を使って、実際に地図を色分けしてみました。

題材として、過去の記事「横浜市地図に数値Dataラベルを貼る」で描いた横浜市・区人口ラベル付き地図を用いました。

ここでの色の範囲は最大値を赤（#ee0000）、最小値を緑（#00ee00）に設定して進めます。

まずは、下記のような普通の方法（？）で色分けしてみます。

areaGrad = d3.scale.linear().domain([target_min, target_max]).range([hexcode_min, hexcode_max])

これを使うと、下のような地図が表示されました。※画像をclickすると地図のページに飛びます。

かなり残念な配色ですよね。

一方で、HSV色空間で補間した結果はこんな感じです。※画像をclickすると地図のページに飛びます。

ソースコードは、次の通りです。

'use strict' ### * 色を変換する関数を定義する ### hex2rgb = (hexcode) -> # rgbに変換する result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hexcode); if result is null console.log "error!" return [r,g,b] = [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)] return [r,g,b] rgb2hsv = (r,g,b) -> # rgb to hsv r = r / 255 g = g / 255 b = b / 255 max_v = Math.max(Math.max(r,g), b) min_v = Math.min(Math.min(r,g), b) v = max_v s = max_v - min_v if min_v == max_v h = 0 else if min_v == b h = 60 * (g-r)/s + 60 else if min_v == r h = 60 * (b-g)/s + 180 else h = 60 * (r-b)/s + 300 return [h,s,v] hsv2rgb = (h,s,v) -> console.log [h,s,v] if h is null r = 0 g = 0 b = 0 else h_dash = h / 60 x = s * (1 - Math.abs(h_dash % 2 - 1)) if h_dash < 1 [r,g,b] = [s,x,0] else if h_dash < 2 [r,g,b] = [x,s,0] else if h_dash < 3 [r,g,b] = [0,s,x] else if h_dash < 4 [r,g,b] = [0,x,s] else if h_dash < 5 [r,g,b] = [x,0,s] else if h_dash < 6 [r,g,b] = [s,0,x] else console.log '変換エラー' return r += (v-s) g += (v-s) b += (v-s) r *= 255 g *= 255 b *= 255 return [Math.round(r),Math.round(g),Math.round(b)] readTopoFileDone = false readAttrFileDone = false # fileから読み込んだdataの格納変数 topo_data = null attr_data = null map_width = 500 map_height = 650 svg = null ### * JSONファイルを読み込み、地図描画関数mainを呼び出す ### readTopoFile = (json) -> topo_data = json readTopoFileDone = true readAttrFile = (json) -> attr_data = json readAttrFileDone = true d3.json("yokohama_topo_out.json", (error, json) -> if error return console.warn error readTopoFile(json) if readTopoFileDone and readAttrFileDone main(topo_data, attr_data)) d3.json("yokohama_codes_and_stat.json", (error, json) -> if error return console.warn(error) readAttrFile(json) if readTopoFileDone and readAttrFileDone main(topo_data, attr_data)) ### * 地図を描画する ### main = (topo, attr) -> labelLineHeight = 16 # 属性情報を入れ直すためのHash Table attrHash = [] # attr情報を、IDをkeyとするhash-tableに変換する # idをKeyとしたhashテーブル＆property毎のhashテーブルを作成する for e in attr attrHash[e.cityid]=e # 人口の最大値と最小値を求めておく # --全年齢人口データのみを入れた配列を作成する elements = [] target_key = "ttl" for e in attr elements.push(e[target_key]) # -- maxとminをとる target_max = Math.max.apply(null, elements) target_min = Math.min.apply(null, elements) # svgを追加 svg = d3.select("body #map").append("svg").attr("width", map_width).attr("height", map_height) # 横浜市のmapを描画する yokohama = topojson.object(topo, topo.objects.yokohama) # 横浜市を中心に指定したメルカトル図法で10万分の1で描画する projection = d3.geo.mercator().center([139.59,35.45]).scale(100000).translate([map_width / 2, map_height / 2]) # pathを作成する path = d3.geo.path().projection(projection) svg.append("path").datum(yokohama).attr("d", path) # classを指定する svg.selectAll(".yokohama").data(yokohama.geometries).enter().append("path").attr("class", (d) -> return "yokohama " + d.properties.name).attr("d", path) # 色を塗る hexcode_max = "#ee0000" hexcode_min = "#00ee00" # 念のためあらかじめ塗っておく svg.selectAll("path").attr("fill", "#bee59e") # HEXカラーコードからRGBに変換 [r_min,g_min,b_min] = hex2rgb(hexcode_min) [r_max,g_max,b_max] = hex2rgb(hexcode_max) # RGB(0-255)からHSVに変換 [h_min,s_min,v_min] = rgb2hsv(r_min,g_min,b_min) [h_max,s_max,v_max] = rgb2hsv(r_max,g_max,b_max) areaGrad = d3.scale.linear().domain([target_min, target_max]).range([[h_min,s_min,v_min], [h_max,s_max,v_max]]) for k, v of attrHash [h,s,v] = areaGrad(attrHash[k][target_key]) [r,g,b] = hsv2rgb(h,s,v) svg.selectAll("."+k).attr("fill", "rgba(#{r},#{g},#{b},1)") # 内部境界に線を引く svg.append("path") .datum(topojson.mesh(topo, topo.objects.yokohama, (a, b) -> return a isnt b)) .attr("d", path) .attr("class", "subunit-boundary") # 区コードのラベル貼り city_labels = new Array() svg.selectAll(".cityname-label") .data(yokohama.geometries) .enter() .append("text") .attr("class", (d) -> if not (city_labels.indexOf(d.properties.name) > -1) city_labels.push(d.properties.name) return "cityname-label "+d.properties.name) .attr("transform", (d) -> # 文字をpath中央から、文字高さ1/2分高い位置に貼る pos = path.centroid(d) pos[1] -= labelLineHeight / 2 return "translate(" + pos + ")") .attr("dy", ".35em") .text((d) -> return attrHash[d.properties.name].name) # 値ラベル貼り svg.selectAll(".stat-label") .data(yokohama.geometries) .enter() .append("text") .attr("class", (d) -> if not (city_labels.indexOf(d.properties.name) > -1) city_labels.push(d.properties.name) return "stat-label "+d.properties.name) .attr("transform", (d) -> # 文字をpath中央から、文字高さ1/2分高い位置に貼る pos = path.centroid(d) pos[1] += labelLineHeight / 2 return "translate(" + pos + ")") .attr("dy", ".35em") .text((d) -> return attrHash[d.properties.name][target_key]) # 各最初のエリアのみラベルを表示する for id in city_labels svg.select(".cityname-label."+id).style("display", "block") svg.select(".stat-label."+id).style("display", "block") return true

このように、HSV色空間の方が人の直感に合う結果が得られると思いますので、オススメです。

それでは♡

D3.jsで、色相方向（HSV色系）に補完する

kapibarawebmaster1515 — Thu, 22 Jan 2015 02:09:01 +0000

こんにちは。今日はD3.jsでグラフや地図に色塗りする場合のお話です。

グラフや地図を値ごとに色分けするには、d3.scale.linear()を使うと簡単です。これは、値に対応した色を簡単に算出できるので便利です。具体例としては、

grad = d3.scale.linear().domain([0,1]).range(["#ff0000", "#0000ff"])

とすれば、

grad(0.5)
> #800080

という風に、赤と青の中間の色コードを出力してくれます。

ところが、ここで言う赤と青の中間は、RGBの3次元空間での中間を意味しています。視覚的に言えば、次の画像のラインが値域であり、grad(0.5）はライン中央に位置する色ですね。

でも、赤〜青の範囲で色を使うときに、色相で補完したい場合もありますよね。というか、こっちの方が一般的には需要あるのではないでしょうか。

円周方向が色相（Hue）です。例えば、Max:赤から Min:青と指定すれば、入力値に応じて赤>橙>黄>緑>青って感じで、色を使えるようにしたい訳です。

そのためには、

RGB16進数→RGB色系→HSV色系の順に変換して、HSV色系の中でd3.scale.linear()で補完処理を行い、結果をRGB色系に再度変換してattribute指定に使うようにします。HSV色空間とは何ぞや？という方は、Wikipediaへ。

それぞれの変換を行うスクリプトを書いてみました。

hex2rgb = (hexcode) -> # rgbに変換する result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hexcode); if result is null console.log "error!" return [r,g,b] = [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)] return [r,g,b]hsv2rgb = (h,s,v) -> if h < 0 r = 0 g = 0 b = 0 else h_dash = h / 60 x = s * (1 - Math.abs(h_dash % 2 - 1)) if h_dash < 1 [r,g,b] = [s,x,0] else if h_dash < 2 [r,g,b] = [x,s,0] else if h_dash < 3 [r,g,b] = [0,s,x] else if h_dash < 4 [r,g,b] = [0,x,s] else if h_dash < 5 [r,g,b] = [x,0,s] else if h_dash < 6 [r,g,b] = [s,0,x] else console.log '変換エラー' return r += (v-s) g += (v-s) b += (v-s) r *= 255 g *= 255 b *= 255 return [r,g,b]rgb2hsv = (r,g,b) -> # rgb to hsv r = r / 255 g = g / 255 b = b / 255 max_v = Math.max(Math.max(r,g), b) min_v = Math.min(Math.min(r,g), b) v = max_v s = max_v - min_v if min_v == max_v h = -1 else if min_v == b h = 60 * (g-r)/s + 60 else if min_v == r h = 60 * (b-g)/s + 180 else h = 60 * (r-b)/s + 300 return [h,s,v]

厳密には、黒（R,G,B）=(0,0,0）の場合のHSV色空間におけるHの値は不定/undefinedなのですが（黒は彩度ゼロってことです）、ここのコードではゼロを割り当ててしまっています。それでも、今回の目的の実用上問題なさそうだったからです。

次回はHSV色系で色補完して、グラフor地図を色分けした具体例を紹介しようと思います。

それではまた♪

横浜市地図に数値Dataラベルを貼る

kapibarawebmaster1515 — Thu, 31 Jul 2014 11:56:37 +0000

今日は地図の方を進めようと思います。前回記事「横浜市地図を人口に応じて色塗りする」で描いた地図に、区名ラベルだけでなく数値のラベルも添付できるようにしたいと思います。

ポリゴンの中央にラベルを２行を貼付ける

区毎のポリゴンの中央にラベルが２行くるように位置を調整しつつ、ラベルを貼っていきます。

実際に描いた地図が次の通り（画像をクリックすると地図ページに飛びます）。

やっていることはカンタン。テキストラベルのtransform属性で指定する高さ方向の位置について、上の行は-0.5行、下の行は+0.5行だけシフトさせているだけです。行間は予め決めてあります（labelLineHight）。

ちなみに・・・
縦方向の座標は下向きが正なので、通常の感覚と逆方向になります。上方向への移動がマイナス，下がプラスですね。

ソースコードは次の通り。

index.html

Yokohama city map Yokohama city map

動けばよし！という感じのコードになってしまいましたが、数値ラベルも合わせて貼れました♪

ただ、濃い緑の背景の箇所は黒いテキストラベルが見づらいですね。背景が濃い場合は文字色を白にすると良いのではないでしょうか。

という訳で、次はこの問題を解決すべく、ラベルの色制御をしてみようと思います。

横浜市地図を人口に応じて色塗りする

kapibarawebmaster1515 — Fri, 25 Jul 2014 02:23:00 +0000

こんにちは。昨夜の大雨から一転して真夏の気候で大変ですね。外出時には日傘必須です^^;

地図を人口の大小に応じて色分けする

さて、前回の記事「JSONファイルをCSVファイルに変換する」で作成したJSONファイルを使って、横浜市地図を改めて描きます。行政区毎の人口数の大小に応じて、地図を色塗りします。

地図を描画する

早速完成した地図です♪画像をクリックしてくださいね^^

人口が多い区は濃く、少ない区は薄い色に指定してみました。

元のソースコードはこちら。

index.html

Yokohama city map Yokohama city map

L.84-93で、区毎の人口数の最大値と最小値を計算しています。

冗長過ぎるコードなので、すっきり直したいですが。

L.116-で、各区領域にclass属性を指定しています。

続いてL.126-で色塗りしています。

D3.jsの機能を使って、色を人口に応じて求める関数を作成します

areaGrad = d3.scale.linear().domain([target_min, target_max]).range(["#bee59e", "#349946"]);

d3.scale.linear()は、リニアに補間した結果を返す関数を作成するもので、f = d3.scale.linear()domain([x1, x2]).range([y1, y2])とすると、f(x)は下図のように補間した値yを返してくれます。

さらに、range()には16進数RGB colorも指定できるという優れもので、range([薄い緑, 濃い緑])を指定しました。

domainには、先ほど求めた人口の最小値＆最大値を指定してありますので、

という感じで、L.131でfill指定する色を返してくれます。

色塗り完成です♪

次回は、人口の数値自体を地図に書き入れる処理を追加したいと思います。

横浜市人口棒グラフに目盛りを追加する

kapibarawebmaster1515 — Mon, 14 Jul 2014 13:02:27 +0000

こんばんは。だんだん気候が夏に近づいてきましたね。私は暑いのが苦手なので、エアコンに頼りまくりです^^;

棒グラフに縦軸を追加する

今日は前回の記事「D3.jsで横浜市の人口棒グラフを表示する」で描いた棒グラフについて、縦軸を追加することにします。

スケール追加はカンタン

d3.scale()関数を使えばスケールを簡単に作れるみたいです。実装してみた結果が下のグラフです（画像をクリックすると、グラフのページに飛びます♪）。

ソースはこちら。軸を描くコードはたった３行です。

index.html

横浜市区別人口横浜市区別人口[千人]

これで縦軸のスケールが描けました。

ざっくりですが、グラフの値と元の表の値が合ってることが確認できました♥︎

次はこの人口データを、以前描いた横浜市地図上で表現することを考えてみようと思います。

それではまた♪

D3.jsで横浜市の人口棒グラフを表示する

kapibarawebmaster1515 — Fri, 11 Jul 2014 02:02:57 +0000

こんにちは。今朝は台風が通過する予報だったのでドキドキして起床しましたが、予想外にも快晴でした。

これがいわゆる台風一過でしょうか。とっても良いお天気です♥︎

人口を棒グラフで可視化する

さて、今日は前回の記事「Perlで横浜市の区別年齢別人口データを自動入手する」でWebから入手した横浜市の人口データを棒グラフにしてみたいと思います。

D3.jsで棒グラフを描画してみる

早速グラフを描いてみました。

D3.jsのチュートリアルなどをみると、divを使う方法とsvgを使う方法がありますが、このグラフはsvgを使って描いています。画像をクリックすると、グラフページに飛びます♪

コードは次の通りです。

index.html

横浜市区別人口横浜市区別人口

L56は、読み込んだJSONファイルの0番目の要素に横浜市全体の人口データが入っており、グラフから削除するためにカットしています。

stat.splice(0,1);

L59から棒グラフを描画、

L72から区名を描画する処理を記述しています。

L82でラベルを-90度回転させる処理は、回転基準アンカーを文字の位置にしたいので、transrate()rotate()で指定しております。（x,yで文字の位置を指定する書き方だと、回転基準が原点0,0になってしまう=>stackoverflow）

棒グラフが描けました♥︎

データを自動収集するスクリプトと連動させれば、人口グラフを自動更新するサイトが作れそうですね。

でも・・・このままだと縦軸に単位が入っていないので値が不明です（^^;

次回は、縦方向の目盛りを追加していきます。

それでは、よい一日をお過ごしください！

横浜市地図に区名を表示する

kapibarawebmaster1515 — Sat, 28 Jun 2014 05:41:17 +0000

こんにちは。梅雨で毎日ジメジメしていますが、気分だけは元気にブログを更新しようと思います。

横浜市地図に日本語区名を表示する

さて、今日でようやく横浜市地図に区名ラベルを表示できます。以前書いた記事「横浜市地図の各区に１つだけラベル表示する」で紹介したコードを、前回の記事「2つのJSONファイルを読み込む」のコードでModifyしました。

横浜市地図の完成です♪

下のような地図が出来上がりました。画像をクリックすると、地図ページに飛びます。

コードは次の通りです。

index.html

Yokohama city map Yokohama city map

変更点は２カ所だけです。

属性データの構造を、”id”+団体コードをキーとするHashに変換する

JSONファイルから読み込んだデータ配列は、そのままだと使いづらいので、団体コードをキーとするHashテーブル（attr => attrHash）に組み直します。

ラベルを区名に変更する

区名を貼るコードについて、d.properties.nameの箇所を、attrHash[d.properties.name].nameに書き換えます。

やっと普通の横浜市地図が描けました（笑）。

次は、横浜市の人口データの表示に進もうと思います。

それではまた♥︎

2つのJSONファイルを読み込む

kapibarawebmaster1515 — Thu, 19 Jun 2014 11:51:53 +0000

こんばんは。今夜も前回の記事「区名と行政団体コードを書き並べたCSVからJSONファイルを作成する」の続きで、せっせと地図を描き進めようと思います。

D3.jsのJSON読み込みは非同期処理

D3.jsでJSONファイルを読み込むには、

d3.js(filename)

という関数が用意されており、とても簡単に利用することができます。

しかし、２つのファイルを読み込むときは若干面倒です。２ファイル読み込みがそれぞれ独立している処理なので、両方のファイルが読み込まれるのを待ってから、main処理を開始しなければなりません。

制御用フラグを使う

２ファイル両方の読み込みが終わるのを待つ必要があります。そのため、制御用に各ファイルの読み込み完了フラグを用意しておき、ファイル読み込み完了した後でフラグを立てるようにします。そして、両方のフラグが立った時に初めてmain()を呼び出します。

こんな感じです。

index.html (scriptの一部)

// file読み込み制御用 var readTopofileDone = false; var readAttrfileDone = false; // filedata格納変数 var topodata; var attrdata; var map_width = 500; var map_height = 650; var svg; function readTopofile(json) { topodata = json; readTopofileDone = true; } function readAttrfile(json) { attrdata = json; readAttrfileDone = true; } d3.json("yokohama_topo_out.json", function(error, json) { if(error) return console.warn(error); readTopofile(json); if (readTopofileDone && readAttrfileDone) { main(topodata, attrdata); } }); d3.json("yokohama_codes.json", function(error, json) { if(error) return console.warn(error); readAttrfile(json); if (readTopofileDone && readAttrfileDone) { main(topodata, attrdata); } }); function main(topo, attr) { // break }

main関数内でbreakしてみました。

ちょっと見づらいですが、attrとtopoの両方の変数がちゃんと見えるのを確認しました♥︎

今日はここまで。

次回は属性情報（区名）を使って、地図上のラベルをコードから名前に変えます！

それでは〜

区名と行政団体コードを書き並べたCSVからJSONファイルを作成する

kapibarawebmaster1515 — Sat, 14 Jun 2014 12:33:56 +0000

こんばんは。今日は、横浜市の区名と”id”+行政団体コードをリストアップしたCSVファイルから、JSONファイルにコンバートします。これを後に、TopoJSONファイルと一緒に読み込んで、横浜市地図のラベル表示に使う訳です。（地図表示については、前回までの記事を読んでね）

CSVファイルを用意する

区名と団体コードをリストアップしたCSVファイルをUTF-8エンコードで作成します。ちなみに、もしあなたがMac使いなら、NumbersでUTF-8でさくっと出力することができます。Excelだとshift-jisが基本なので、適当なエディタでUTF-8に変換してくださいねー

yokohama_codes.csv

cityid,name id141011,鶴見区 id141020,神奈川区 id141038,西区 id141046,中区 id141054,南区 id141062,保土ヶ谷区 id141071,磯子区 id141089,金沢区 id141097,港北区 id141101,戸塚区 id141119,港南区 id141127,旭区 id141135,緑区 id141143,瀬谷区 id141151,栄区 id141160,泉区 id141178,青葉区 id141186,都筑区

PythonでCSVからJSONに変換する

１行目はカラム名と見なして要素名とし、行毎にDictionaryを作成、Listにポンポン入れて最後にJSON形式で書き出します。

conv_csv_to_json.py

#coding:utf-8 ''' Created on 2014/03/27 @author: Tae Matsumoto CSVファイルを読み込み、同名のJSONファイルを出力します。 ''' import csv, json filename = 'yokohama_codes' header = [] data = [] def unicode_csv_reader(unicode_csv_data, dialect=csv.excel, **kwargs): # csv.py doesn't do Unicode; encode temporarily as UTF-8: csv_reader = csv.reader(utf_8_encoder(unicode_csv_data),dialect=dialect, **kwargs) for row in csv_reader: # decode UTF-8 back to Unicode, cell by cell: yield [unicode(cell, 'utf-8') for cell in row] def utf_8_encoder(unicode_csv_data): for line in unicode_csv_data: yield line.encode('utf-8') with open(filename + '.csv', 'rU') as csvfile: spamreader = unicode_csv_reader(csvfile, dialect=csv.excel) is_first = True for row in spamreader: if is_first: header = row[:] is_first = False continue items = {} for i in range(0, len(row)): item = row[i] items[header[i]] = item data.append(items) with open(filename+'.json', 'w') as f: json.dump(data, f, ensure_ascii=False, indent=2, encoding='utf8') f.close()

JSONファイルに日本語が含まれるので、json.dumpにensure_ascii=falseとencoding=’utf8’を指定します。

http://stackoverflow.com/questions/18337407/saving-utf-8-texts-in-json-dumps-as-utf8-not-as-u-escape-sequence

上手くできました♥︎

次回は、今日作成したJSONファイルと前回作成した地図をMixして、横浜市地図に区名ラベルを表示できるようにしたいと思います。

それでは、また♪

横浜市地図の各区に１つだけラベル表示する

kapibarawebmaster1515 — Thu, 12 Jun 2014 01:52:34 +0000

こんにちは。今日は、前回記事「区名を英数字コードに置換する」でTopoJSONファイルの中の区名をID番号に書き換えたものを使って、再度横浜市地図を表示してみます。

区名の代わりに行政団体コードをラベル表示する

前々回の記事「地図に区名を表示する」で利用したindex.htmlをそのまま流用して、地図表示してみます。（読み込むTopoJSONファイルを、区名=>コードに置換したものに変えるだけです）

TopoJSONファイルの区名を”id”+団体コードに書き換えたので、地図上のラベルもコードに置き換わりました。

各区１つだけラベルを表示する

このままだと、前々回の記事と同様に同じ番号が重複表示されているので、修正します。

index.html

Yokohama city map Yokohama city map

まず区毎にラベリングしたいので、”id”+団体コードの文字列をclass属性に追加しました(L80,86-88)。そして冒頭のスタイル指定でラベルを一旦全て非表示にしておきます(L.25)。

地図描画処理に続いてラベル追加処理を終えた後（この時点では全てのラベルはdisplay:noneのまま）、for文で各団体コードについて１つのラベルのみdisplay:blockに書き換える処理を入れました(L.100-102)。

重複してラベル表示されていた箇所が消えました♥︎

でも、このままだとラベル名が団体コードってイマイチですよね。次は、これらの団体コードを再度区名に置き換えたいと思います。それではまた！