Skip to content

Instantly share code, notes, and snippets.

@hden

hden/index.html

Last active December 19, 2017 08:25
Show Gist options
  • Save hden/988da1fcc4fa560c64abe3fe8a3fcd3a to your computer and use it in GitHub Desktop.
Save hden/988da1fcc4fa560c64abe3fe8a3fcd3a to your computer and use it in GitHub Desktop.
Download ZIP
Tokyo map
Raw
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>
Raw
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]
}
Raw
restaurants.csv
restaurant_id lat lng
0 35.6649471 139.7277817
Raw
stations2.csv
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
Display the source blob
Display the rendered blob
Raw
tokyo23.topojson
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment