動機

1．日本酒が美味しい所に旅行行きたい！(できれば海の日3連休に)
2．スクレイピングの勉強会に参加して、わくわくしたのでやってみたい
3．D3.jsに以前から興味があった

処理概要

スクレイピングでデータ取得
データ加工
D3.jsで日本地図描画　　　　　　　　　　　( ←今回ここまで )
描画した日本地図にスクレイピングでとってきたデータを反映
結果を見て目的地を決めて旅行に行って美味しい日本酒を飲んでくる

※可視化はすでにやっている方がいらっしゃいました。素晴らしい。。
http://gonomee.com/topics/alpha_ranking/

スクレイピングとは

※混同されがちな言葉にクローリングがある

クローリング・・・リンクを辿ってWebページを収集すること
スクレイピング・・・収集したWebページから必要な情報を抜き出すことを指す（両者を区別せず使うことも多いらしい）

スクレイピングを行う上での注意点

スクレイピングしたデータの使用目的や方法によっては、情報公開元に迷惑をかけたり、場合によっては法に触れることもある
以下のページを読み誰にも迷惑をかけないWebスクレイピングを心がけるべし
- Webスクレイピングの注意事項一覧
APIが提供されている場合はそちらを利用する
サイトの利用規約を確認する
robots.txtを確認する
- 大体のサイトに用意されているらしい。取得したいサイトのトップページのURLの末尾にrobots.txtをつけて確認
Webサイトに負荷をかけないようにアクセスする
- sleepを入れて行うらしい←未学習

スクレイピングの大まかな手順

スクレイピングを行いたいページを取得する
ページのDOMツリーを確認する
欲しいデータを抽出する

今回は「日本酒　都道府県　ランキング」でぐぐってTOPに出てきた日本酒ランキングのページを取得してきたいと思います。
(http://www.sakeno.com/ranking/)

scraping.py

# -*- coding:utf-8 -*-
import pandas as pd
import requests
from bs4 import BeautifulSoup
import re

# 抽出してきたタグを含む文字列から必要な単語のみをとってくる関数
def str_select(tag_name):
    str_list = []
    for name in tag_name:
        str_list.append('{name}'.format(name=name.string))
    return str_list

# WEBページのHTMLをgetし、ファイルとして保存
res = requests.get('http://www.sakeno.com/ranking/') #Response オブジェクト
with open('nihonsyu_ranking.html', 'wb') as f:
    f.write(res.content)

# WEBページの文字コードを確認して、encoding指定してHTMLを読み込む
html = open('nihonsyu_ranking.html',encoding='EUC-JP').read()
soup = BeautifulSoup(html, 'html.parser')

# 欲しい情報が構成されているHTMLタグを指定して、データをとってくる
# 銘柄名
meigara = soup.find_all("strong", attrs={"class":"lrg"})
# 都道府県名
tmp_pref = soup.find_all("td", attrs={"class":"smll"})
pref = []
for row in tmp_pref:
    pref += row.find_all("a", attrs={"href":re.compile("http://www.sakeno.com/ranking_todou/")})

# とってきたタグを含む文字列から欲しい単語のみを抽出
meigara_list = str_select(meigara)
pref_list = str_select(pref)
rank_list = []
for i in range(1,len(meigara_list)+1):
    rank_list.append(i)

# 結果をデータフレーム化
output = pd.DataFrame()
output["meigara"] = meigara_list
output["pref"] = pref_list
output["rank"] = rank_list

# 出力
output.to_csv('meigara_pref_rank.csv', index=False)

取得したデータ

meigara	pref	rank
獺祭	山口県	1
十四代	山形県	2
醸し人九平次	愛知県	3
黒龍	福井県	4
田酒	青森県	5
久保田	新潟県	6
出羽桜	山形県	7
飛露喜	福島県	8
八海山	新潟県	9
鳳凰美田	栃木県	10
〆張鶴	新潟県	11
...	...	...
麒麟	新潟県	190
酒一筋	岡山県	191
不老泉	滋賀県	192
花泉	福島県	193
米鶴	山形県	194
吉乃川	新潟県	195
翠露	長野県	196
三井の寿	福岡県	197
おんな泣かせ	静岡県	198
五橋	山口県	199
越州	新潟県	200

データ加工

都道府県毎に銘柄数をカウント
※データ量が少ないのでExcelで加工

state	value
新潟県	20
福島県	16
山形県	15
広島県	11
秋田県	10
宮城県	9
静岡県	9
長野県	9
兵庫県	7
岩手県	6
石川県	6
茨城県	5
...	...
香川県	1
山梨県	1
神奈川県	1
千葉県	1
徳島県	1
奈良県	1

データの準備は整った。
次は可視化の準備に取り掛かります！

D3.jsとは

Data Driven Documentの略
JavaScriptライブラリ
HTMLや SVG,CSSを使ってデータに命を吹き込んでくれる
ブラウザ上で動かせる
とにかくおしゃれ

事例紹介

日本地図を描画する

japan_plot.html

<!DOCTYPE html>
	<html lang ="ja">
		<head>
		<meta charset="utf-8">
		<script type="text/javascript" src="d3.min.js"></script>
		<script type="text/javascript" src="topojson.min.js"></script>
	<style>![Invalid file type: text/html]()

		body { background-color:LightCyan;}
	</style>
	</head>
	<body>
	<div id='example'></div>
	<script src="japan_plot.js"></script>
</body>
</html>

japan_plot.js

    //svg要素の設定
    var width = 600,
    height = 500;

    //D3を使ってsvg要素を生成し、中身を追加していく
    var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
     
    var color = d3.scale.category20();

    // 地図描画の準備 
    // 投影法(メルカトル法)の設定。
    var mercator = d3.geo.mercator()
        .center([136.0,35.6])
        .translate([width/2, height/2])
        .scale(800);
     
    // geojsonからpath要素を作るための設定
    var geopath = d3.geo.path()
    .projection(mercator);
     
    // topojsonファイルの読み込み
    d3.json("japan_topojson.json", function(error, jp) {
        console.log(jp);
         
        // topojsonからgeojsonへの変換。
        var geoJp = topojson.feature(jp, jp.objects.ne_10m_admin_1_states_provinces);
        console.log(geoJp);
         
        svg.selectAll("path")
            .data(geoJp.features) // geojsonのすべての県の座標データを読み込む。
          .enter().append("path")
            .attr("class", function(d) { return d.id; })
            .attr("d", geopath) // geojsonからpath要素に変換する。
            .attr("fill", function(d){ return color(d.geometry.coordinates); }); // idがないので、各県の座標リストに基づいて色を変える。
    });

日本地図描画できた。

今後

csvファイルを日本地図に反映する(そして旅行にいく)
クローリングして取得するデータを増やしてみる
自分の好きな日本酒の味などをキーワードにして自分好みの日本酒MAPにする
D3.js使っていろいろ可視化してみる
amd more...

D3.jsを使った地図可視化の他の方法のご紹介

Python(もしくはR)でleaflet
- JS書かなくていい
- ナレッジ豊富
ツールを使う
- http://blockbuilder.org/
- http://blockbuilder.org/n1n9-jp/e515f3df49957efc8693b746fdaf7bc8
- てっとり早そう
- ブラウザ上でコーディングできるツール

参考にさせて頂いたサイト

ありがとうございます。