leafletで構築するの全国公示地価地図

全国公示地価地図

公示地価とは

地価公示は、土地鑑定委員会が毎年1回標準地の正常な価格を公示し、一般の土地の取引価格に対して指標を与えるとともに、公共事業用地の取得価格算定の規準とされ、また、国土利用計画法に基づく土地取引の規制における土地価格算定の規準とされる等により、適正な地価の形成に寄与することを目的としている。

地域の代表となる地点の土地価格を評価し公開されるため、土地価格の参考になります。

公示地価データについて

公示地価のデータは毎年、国土交通省から公開されています。今回使うデータはこちらからダウンロードしたものです。

http://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-L01-v2_5.html

地図サイト構築について

まず成果物はこちらです。

全国公示地価地図

典型的にやり方は、

  1. 生データを解析して、データベースに登録する。
  2. APPサーバを立て、APPサーバがクライアントのリクエストを受け、SQLまたはNoSQLでデータベースからデータを取得し、クライアントへ送る。
  3. クライアントブラウザがデータを受け取り、javascriptによりレンダリングする。

ですが、今回は、サーバーサイドの負荷を軽減するため、生データを小さいjsonファイルに分割し、静的ファイルとして直Nginxの元に置きます。

データの配置

メイン地図画面全国の、公示地価データを一気に表示するため、
2019年分のデータをgeobufで圧縮し、一つのファイルにまとめます。

やり方は前回の記事人口集中地区(DID)地図を作成しました
を参照してください。

各地点の過去データを描画するため、
年次フォルダ分けして、地点毎のデータを小さいjsonファイルに保存する。

実装

実装は、例のleaflet + bootstrapで実装しましたが、
今回は例年地価の変動をグラフで表現したいため、d3.jsを導入しました。
d3.jsによるグラフ描画は非常にシンプルできれいがグラフが作成されます。
実際描画の関数のコードを貼ります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
var makeChart = function(priceData){
var dataset = [
{year: '2010', price: priceData['2010']/10000},
{year: '2011', price: priceData['2011']/10000},
{year: '2012', price: priceData['2012']/10000},
{year: '2013', price: priceData['2013']/10000},
{year: '2014', price: priceData['2014']/10000},
{year: '2015', price: priceData['2015']/10000},
{year: '2016', price: priceData['2016']/10000},
{year: '2017', price: priceData['2017']/10000},
{year: '2018', price: priceData['2018']/10000},
{year: '2019', price: priceData['2019']/10000}
];
var margin = {top: 20, right: 20, bottom: 70, left: 30};
var width = $('.modal-body').width() - margin.left - margin.right;
var height = 300 - margin.top - margin.bottom;
var x = d3.scaleBand().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
x.domain(dataset.map(function(d) { return d.year; }));
y.domain([Math.max(d3.min(dataset, function(d) { return d.price; }) - 10, 0), d3.max(dataset, function(d) { return d.price; })]);
var svg = d3.select('.chart-area').append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
var barGrp = svg.selectAll()
.data(dataset)
.enter()
.append('g');

barGrp .append('rect')
.attr('class', 'chart_bar')
.attr('x', function(d) { return x(d.year) + 10; })
.attr('width', x.bandwidth() - 20)
.attr('y', function(d) { return y(d.price); })
.attr('height', function(d) { return height - y(d.price); });

barGrp .append('text')
.attr('class', 'chart_bar_txt')
.attr('x', function(d){ return x(d.year) + x.bandwidth() / 2; })
.attr('y', function(d){ return y(d.price) - 5; })
.attr('text-anchor', 'middle')
.text(function(d){return d.price ? d.price+'万' : ''});

svg .append('g')
.attr('transform', 'translate(0,' + height + ')')
.call(d3.axisBottom(x));

svg .append("g")
.call(d3.axisLeft(y));

svg.append('text')
.attr('x', -(height / 2) - margin.top)
.attr('y', margin.left)
.attr('text-anchor', 'middle')
.text('価格 (万円)');
};

描画される結果はこんな感じになります。

おわりに

令和元年の公示地価の公開は来年1月以後になるようです。
またその時にデータを更新したいと思います。

d3.jsビジュアル系では大変人気のライブラリです。さらに理解を深めて行きたいですね。