More than 3 years have passed since last update.

H27国勢調査のODデータ（自宅外就業者数及び通学者数）をdeck.glで表示してみました

Last updated at 2021-10-02Posted at 2021-10-02

はじめに

H27国勢調査のODデータ（従業・通学市区町村，常住市区町村，男女別自宅外就業者数及び通学者数）をdeck.glで表示してみました
H27国勢調査のODデータ（従業・通学市区町村，常住市区町村，男女別自宅外就業者数及び通学者数）は、e-statより統計データをダウンロードして用いています。
deck.glの表示には、ArcLayer及びTextLayerを用いています。

アウトプットイメージ

H27国勢調査の自宅外就業者数及び通学者数（自市区町村での従業・通学は含まず）をhttps://t.co/j5x1odcLvTのArcLayerで可視化してみた🙋

ODの位置が同じ場合はどうしようかと思ったけど、getTiltで円弧を横に傾けることができる😇https://t.co/j5x1odcLvTごいすー🙆‍♂️https://t.co/IrQgCnYaEV pic.twitter.com/Bzplsa21iu
— shi_works🌥️ (@syanseto) November 3, 2020

H27国勢調査の就業者数・通学者数のhttps://t.co/j5x1odcLvTのArcLayerに、
・市区町村名（ローマ字表記）
・ツールチップで就業者数・通学者数の表示
を追加してみた😇 pic.twitter.com/hsgjJduJro
— shi_works🌥️ (@syanseto) November 7, 2020

事前準備

H27国勢調査のODデータをArcLayerで表示するためには、市区町村（重心）の座標データが必要です。
市区町村（重心）の座標データは、e-statより小地域の境界データをダウンロードして、QGISで小地域のポリゴンデータを市区町村単位でマージを行うとともに、市区町村（重心）の座標データを作成して、ODデータに市区町村（重心）の座標を紐づけています。
作成した、ODデータ（座標付き）は以下のとおりです。
ヘッダ名にfromが付いているものが常住市区町村の市区町村コード（5桁）、市区町村名及び座標（lng及びlat）、toが付いているものが従業・通学市区町村の市区町村コード（5桁）、市区町村名及び座標（lng及びlat）になります。
jinkoが自宅外就業者数及び通学者数になります。
市区町村名をTextLayerで表示するため（deck.glのTextLayerは日本語表記には未対応のためローマ字表記になる）に、市区町村のポイントデータを以下のとおり作成して用いています。

前提条件

Mapboxのアクセストークンが必要になります。
Mapboxのアクセストークンを入力してください。
ODデータ（座標付き）（H27ka01_Commute_v2.csv）を読み込んでいます。
国土数値情報の鉄道データ（ラインデータ：N02-19_RailroadSection.geojson）を読み込んでいます。
市区町村のポイントデータ（h27ka01_47_city_center_v2.csv）を読み込んでいます。

html

H27kokusei_cityjyugyojinko.html

<html>
  <head>
    <title>平成27年国勢調査 常住市区町村 従業・通学市区町村 自宅外就業者数及び通学者数</title>
    <meta charset="UTF-8">
    <!--<script src="https://unpkg.com/deck.gl@^7.0.0/dist.min.js"></script>-->
    <script src="https://unpkg.com/deck.gl@^8.0.0/dist.min.js"></script>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js"></script>
    <link rel="stylesheet" href="style.css"/>
  </head>
  <body>
    <div id="control-panel">
      <div>
        <label>opacity</label>
        <input id="opacity" type="range" min="0" max="1" step="0.01" value="0.3"></input>
        <span id="opacity-value"></span>
      </div>
      <div>
        <label>getHeight</label>
        <input id="getHeight" type="range" min="0" max="2" step="0.1" value="1"></input>
        <span id="getHeight-value"></span>
      </div>
      <div>
        <label>getTilt</label>
        <input id="getTilt" type="range" min="0" max="30" step="1" value="5"></input>
        <span id="getTilt-value"></span>
      </div>
      <div>
        <label>Font Size</label>
        <input id="getSize" type="range" min="0" max="100" step="1" value="0"></input>
        <span id="getSize-value"></span>
      </div>
    </div>
    <script  src="script.js"></script>
  </body>
</html>

CSS

style.css


html,body {
  font-family: Helvetica, Arial, sans-serif;
  width: 100vw;
  height: 100vh;
  margin: 0;
}
.deck-tooltip {
  font-family: Helvetica, Arial, sans-serif;
  padding: 6px !important;
  margin: 8px;
  color: #ffffff;
  background-color: #4682b4;
  max-width: 300px;
  font-size: 20px;
}

#control-panel {
  position: absolute;
  top: 0;
  left: 0;
  margin: 12px;
  padding: 20px;
  font-size: 12px;
  line-height: 1.5;
  z-index: 1;
  background: #fff;
  font-family: Helvetica, Arial, sans-serif;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
}

label {
  display: inline-block;
  width: 140px;
}

JavaScript

script.js


const deckgl = new deck.DeckGL({
  mapboxApiAccessToken: 'Mapboxのアクセストークンを入力してください',
  mapStyle: 'mapbox://styles/mapbox/dark-v9',
  initialViewState: {
    latitude: 35.1801494,
    longitude: 136.9034925,
    zoom: 7,
    maxZoom: 16,
    pitch: 45,
    bearing: 15
  },
  controller: true,
  });

const OPTIONS = ['opacity','getHeight','getTilt','getSize'];

const getValue=(d) =>{
  return Number(d.jinko);
};

const getValue2=(d) =>{
  return d.city_name;
};

const getValue3=(d) =>{
  return Number(d.jinko/1000);
};

const jinko = d3.csv('data/H27ka01_Commute_v2.csv');
const railway = d3.json('data/N02-19_RailroadSection.geojson');
const city = d3.csv('data/h27ka01_47_city_center_v2.csv');

const renderLayer = () => {
    const options = {};
    OPTIONS.forEach(key => {
      const value = document.getElementById(key).value;
      document.getElementById(key + '-value').innerHTML = value;
      options[key] = Number(value);
    });

    const arcLayer = new deck.ArcLayer({
      id: 'arc',
      data: jinko,
      opacity: 0.3,
      pickable: true,
      getSourcePosition: d => [Number(d.from_lng), Number(d.from_lat)],
      getTargetPosition: d => [Number(d.to_lng), Number(d.to_lat)],
      getSourceColor: [204,255,204],
      getTargetColor: [0,203,0],
      getHeight: 1,
      getTilt: 5,
      getWidth: getValue3,
      ...options
    });

    const geoJsonLayer = new deck.GeoJsonLayer({
      id: 'geojson',
      data: railway,
      stroked: false,
      filled: false,
      lineWidthMinPixels: 2,
      parameters: {
        depthTest: false
      },
      opacity: 0.5,
      getLineColor: [240,240,240],
      getLineWidth: 2,
    
      pickable: false,
    });
    
    const textLayer = new deck.TextLayer({
      id: 'text',
      data: city,
      pickable: true,
      getPosition: d => [Number(d.lng), Number(d.lat)],
      getText: d => d.city_name_en,
      getSize: 0,
      getAngle: 0,
      getColor: [255,255,255],
      getTextAnchor: 'middle',
      getAlignmentBaseline: 'center',
      ...options
    });

    deckgl.setProps({
      layers:[arcLayer, geoJsonLayer, textLayer],
      getTooltip: ({object}) => object && `${object.from_cityname} ⇒ ${object.to_cityname} 通勤・通学人口: ${object.jinko}`  
    });
  
}

renderLayer();

OPTIONS.forEach(key => {
  document.getElementById(key).oninput = renderLayer;
});

参考文献

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up