hden · December 19, 2017 08:25
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Geo Mapping</title>
    <style>
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    .area {
      fill: none;
      stroke: black;
    }

    .cell {
      fill: none;
      stroke: gray;
    }

    .station {
      fill: crimson;
      r: 4px;
    }

    .restaurant {
      fill: steelblue;
      r: 1px;
    }
    </style>
  </head>
  <body>
    <svg width=800 height=600></svg>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/3.0.0/topojson.min.js"></script>
    <script src="index.js"></script>
  </body>
 </html>
diff --git a/index.js b/index.js
 /* global d3, topojson */

 const svg = d3.select('svg')

 const width = +svg.attr('width')
 const height = +svg.attr('height')

 const projection = d3.geoMercator()
                     .center([139.8, 35.7])
                     .scale(90000)

 const path = d3.geoPath()
               .projection(projection)

 d3.queue()
  .defer(d3.json, 'tokyo23.topojson')
  .defer(d3.csv, 'stations2.csv', parse)
  .defer(d3.csv, 'restaurants.csv', parse)
  .awaitAll(ready)

 function ready (e, [topo, stations, restaurants]) {
  if (e) {
    return console.error(e)
  }

  const tokyo = topojson.feature(topo, topo.objects.tokyo23)

  svg.append('g').selectAll('.area')
     .data(tokyo.features)
     .enter().append('path')
     .attr('class', 'area')
     .attr('d', path)

  console.log('bbox', d3.geoBounds(tokyo))

  svg.append('g').selectAll('.station')
     .data(stations)
     .enter().append('circle')
     .attr('class', 'station')
     .attr('cx', cx)
     .attr('cy', cy)

  const voronoi = d3.voronoi()
                    .extent([[-1, -1], [width + 1, height + 1]])
                    .x(cx)
                    .y(cy)

  const diagram = voronoi(stations)

  svg.append('g').selectAll('.cell')
     .data(diagram.polygons())
     .enter().append('path')
     .attr('class', 'cell')
     .attr('d', function (d) {
       return d ? `M${d.join('L')}Z` : null
     })

  svg.append('g').selectAll('.restaurant')
     .data(restaurants)
     .enter().append('circle')
     .attr('class', 'restaurant')
     .attr('cx', cx)
     .attr('cy', cy)

  const x = restaurants.map(function (d) {
    const {data} = diagram.find(d.projection[0], d.projection[1])
    return `${d.id},${data.id}`
  })

  console.log(['restaurant_id,station'].concat(x).join('\n'))
 }

 function parse (d) {
  const [lng, lat] = d3.extent([+d.lng, +d.lat])
  return {
    id: d.restaurant_id || d.name,
    coordinate: [lat, lng],
    projection: projection([lat, lng])
  }
 }

 function cx (d) {
  return d.projection[0]
 }

 function cy (d) {
  return d.projection[1]
 }
diff --git a/restaurants.csv b/restaurants.csv
diff --git a/stations2.csv b/stations2.csv
diff --git a/tokyo23.topojson b/tokyo23.topojson
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Geo Mapping</title>
	<style>
	html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	}

	.area {
	fill: none;
	stroke: black;
	}

	.cell {
	fill: none;
	stroke: gray;
	}

	.station {
	fill: crimson;
	r: 4px;
	}

	.restaurant {
	fill: steelblue;
	r: 1px;
	}
	</style>
	</head>
	<body>
	<svg width=800 height=600></svg>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/3.0.0/topojson.min.js"></script>
	<script src="index.js"></script>
	</body>
	</html>
	/* global d3, topojson */

	const svg = d3.select('svg')

	const width = +svg.attr('width')
	const height = +svg.attr('height')

	const projection = d3.geoMercator()
	.center([139.8, 35.7])
	.scale(90000)

	const path = d3.geoPath()
	.projection(projection)

	d3.queue()
	.defer(d3.json, 'tokyo23.topojson')
	.defer(d3.csv, 'stations2.csv', parse)
	.defer(d3.csv, 'restaurants.csv', parse)
	.awaitAll(ready)

	function ready (e, [topo, stations, restaurants]) {
	if (e) {
	return console.error(e)
	}

	const tokyo = topojson.feature(topo, topo.objects.tokyo23)

	svg.append('g').selectAll('.area')
	.data(tokyo.features)
	.enter().append('path')
	.attr('class', 'area')
	.attr('d', path)

	console.log('bbox', d3.geoBounds(tokyo))

	svg.append('g').selectAll('.station')
	.data(stations)
	.enter().append('circle')
	.attr('class', 'station')
	.attr('cx', cx)
	.attr('cy', cy)

	const voronoi = d3.voronoi()
	.extent([[-1, -1], [width + 1, height + 1]])
	.x(cx)
	.y(cy)

	const diagram = voronoi(stations)

	svg.append('g').selectAll('.cell')
	.data(diagram.polygons())
	.enter().append('path')
	.attr('class', 'cell')
	.attr('d', function (d) {
	return d ? `M${d.join('L')}Z` : null
	})

	svg.append('g').selectAll('.restaurant')
	.data(restaurants)
	.enter().append('circle')
	.attr('class', 'restaurant')
	.attr('cx', cx)
	.attr('cy', cy)

	const x = restaurants.map(function (d) {
	const {data} = diagram.find(d.projection[0], d.projection[1])
	return `${d.id},${data.id}`
	})

	console.log(['restaurant_id,station'].concat(x).join('\n'))
	}

	function parse (d) {
	const [lng, lat] = d3.extent([+d.lng, +d.lat])
	return {
	id: d.restaurant_id \|\| d.name,
	coordinate: [lat, lng],
	projection: projection([lat, lng])
	}
	}

	function cx (d) {
	return d.projection[0]
	}

	function cy (d) {
	return d.projection[1]
	}
area_id	name	station_id	lat	lng
A1301	銀座・新橋・有楽町	2800210	35.671989	139.763965
A1301	銀座・新橋・有楽町	1130226	35.666195	139.758587
A1301	銀座・新橋・有楽町	1130225	35.675441	139.763806
A1302	東京・日本橋	1130224	35.681391	139.766103
A1302	東京・日本橋	2800109	35.682078	139.773516
A1303	渋谷・恵比寿・代官山	1130205	35.658871	139.701238
A1303	渋谷・恵比寿・代官山	1130204	35.646685	139.71007
A1303	渋谷・恵比寿・代官山	2600102	35.648193	139.703284
A1304	新宿・代々木・大久保	1130208	35.689729	139.700464
A1304	新宿・代々木・大久保	1130207	35.683061	139.702042
A1304	新宿・代々木・大久保	1130209	35.700875	139.700261
A1305	池袋〜高田馬場・早稲田	1130212	35.730256	139.711086
A1305	池袋〜高田馬場・早稲田	1130211	35.720476	139.706228
A1305	池袋〜高田馬場・早稲田	1130210	35.712677	139.703715
A1305	池袋〜高田馬場・早稲田	2800404	35.705723	139.721319
A1306	原宿・表参道・青山	1130206	35.670646	139.702592
A1306	原宿・表参道・青山	2800118	35.665247	139.712314
A1306	原宿・表参道・青山	2800116	35.672765	139.724159
A1307	六本木・麻布・広尾	2800318	35.662836	139.731443
A1307	六本木・麻布・広尾	9930123	35.656503	139.736116
A1307	六本木・麻布・広尾	2800319	35.652279	139.722202
A1308	赤坂・永田町・溜池	2800515	35.67323	139.738348
A1308	赤坂・永田町・溜池	2800616	35.678757	139.740258
A1308	赤坂・永田町・溜池	2800114	35.673621	139.741419
A1309	四谷・市ヶ谷・飯田橋	2800215	35.687958	139.720103
A1309	四谷・市ヶ谷・飯田橋	9930404	35.692594	139.735794
A1309	四谷・市ヶ谷・飯田橋	1131316	35.701835	139.745143
A1310	秋葉原・神田・水道橋	1130222	35.698619	139.773288
A1310	秋葉原・神田・水道橋	1131202	35.691173	139.770641
A1310	秋葉原・神田・水道橋	1131317	35.702039	139.754312
A1311	上野・浅草・日暮里	1130220	35.71379	139.777043
A1311	上野・浅草・日暮里	9930218	35.709461	139.79697
A1311	上野・浅草・日暮里	1130218	35.727908	139.771287
A1314	浜松町・田町・品川	1130227	35.655391	139.757135
A1314	浜松町・田町・品川	1130228	35.645736	139.747575
A1314	浜松町・田町・品川	1130229	35.62876	139.738999
A1316	目黒・白金・五反田	1130203	35.633923	139.715775
A1316	目黒・白金・五反田	2800918	35.637917	139.726133
A1316	目黒・白金・五反田	1130202	35.625974	139.723822
A1323	大塚・巣鴨・駒込・赤羽	1130213	35.731412	139.728584
A1323	大塚・巣鴨・駒込・赤羽	1130214	35.733445	139.739303
A1323	大塚・巣鴨・駒込・赤羽	1130215	35.736825	139.748053
A1323	大塚・巣鴨・駒込・赤羽	1133210	35.778026	139.720928
A1312	両国・錦糸町・小岩	1131321	35.69579	139.793334
A1312	両国・錦糸町・小岩	1131322	35.696802	139.814136
A1312	両国・錦糸町・小岩	1131325	35.716903	139.857777
A1313	築地・湾岸・お台場	9930119	35.664895	139.766915
A1313	築地・湾岸・お台場	1132605	35.646172	139.827402
A1313	築地・湾岸・お台場	9931107	35.625908	139.771435
A1315	大井・蒲田	1133228	35.606257	139.73485
A1315	大井・蒲田	1133230	35.562517	139.716032
A1317	東急沿線	2600103	35.643854	139.698621
A1317	東急沿線	2600105	35.628786	139.68522
A1317	東急沿線	2600107	35.607224	139.668664
A1317	東急沿線	2600303	35.643716	139.670156
A1317	東急沿線	2600202	35.626526	139.71469
A1317	東急沿線	2600503	35.615928	139.714862
A1318	京王・小田急沿線	2400603	35.65868	139.684308
A1318	京王・小田急沿線	2400605	35.661539	139.66691
A1318	京王・小田急沿線	2400612	35.683253	139.615115
A1318	京王・小田急沿線	2400105	35.671092	139.659413
A1319	中野〜西荻窪	1131307	35.705765	139.665835
A1319	中野〜西荻窪	1131306	35.705326	139.649664
A1319	中野〜西荻窪	1131303	35.703842	139.599361
A1321	西武沿線	2200102	35.726572	139.694363
A1321	西武沿線	2200303	35.737893	139.654368
A1321	西武沿線	9930138	35.758526	139.628603
A1322	板橋・東武沿線	2100102	35.741283	139.716749
A1322	板橋・東武沿線	1132106	35.745435	139.719507
A1322	板橋・東武沿線	2800608	35.73323	139.698715
A1322	板橋・東武沿線	2100104	35.748398	139.702589
A1324	千住・綾瀬・葛飾	1132005	35.749677	139.804872
A1324	千住・綾瀬・葛飾	2800502	35.762222	139.825019
A1324	千住・綾瀬・葛飾	2300302	35.756323	139.875188
A1320	吉祥寺・三鷹・武蔵境	1131302	35.703119	139.579765
A1320	吉祥寺・三鷹・武蔵境	1131301	35.702683	139.560325
A1320	吉祥寺・三鷹・武蔵境	1131221	35.702083	139.543402
A1325	小金井・国分寺・国立	1131223	35.701337	139.506483
A1325	小金井・国分寺・国立	1131106	35.700123	139.480841
A1325	小金井・国分寺・国立	1131226	35.69923	139.44634
A1326	調布・府中・狛江	2400118	35.652181	139.543988
A1326	調布・府中・狛江	1130320	35.665766	139.477142
A1326	調布・府中・狛江	2500116	35.632001	139.577127
A1327	町田・稲城・多摩	1130611	35.542004	139.445579
A1327	町田・稲城・多摩	1130318	35.644184	139.502811
A1327	町田・稲城・多摩	1130319	35.649249	139.489781