Skip to content

Instantly share code, notes, and snippets.

@mmmaaatttttt

mmmaaatttttt/app.js

Created August 25, 2017 21:06
Show Gist options
  • Save mmmaaatttttt/e8b4a03237494270cfaa63ede746e341 to your computer and use it in GitHub Desktop.
Save mmmaaatttttt/e8b4a03237494270cfaa63ede746e341 to your computer and use it in GitHub Desktop.
Download ZIP
Basic SF Map
Raw
app.js
d3.json("./sf_zips.json", function(err, data) {
// data - TOPOJSON
// mapData - GEOJSON
var width = 600;
var height = 600;
var svg = d3.select('svg')
.attr('width', width)
.attr('height', height);
var mapData = topojson.feature(data, data.objects.zip_codes_for_the_usa).features;
var projection = d3.geoMercator()
.scale(2500)
.translate([0, height]);
var path = d3.geoPath().projection(projection);
svg
.selectAll("path")
.data(mapData)
.enter()
.append("path")
.attr("d", path)
.attr("fill", "red")
.attr("stroke", "black");
});
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D3 Maps</title>
<style>
svg {
margin: 0 auto;
display: block;
}
</style>
</head>
<body>
<svg></svg>
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://unpkg.com/topojson@3"></script>
<script src="app.js"></script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
sf_zips.json
{
"type": "Topology",
"arcs": [
[ [ 471, 418 ], [ -99, -85] ],
[ [ 372, 333 ], [ 0, 58 ] ],
[ [ 372, 391 ], [ 0, 11 ] ],
[ [ 372, 402 ], [ 71, 42 ] ],
[ [ 443, 444 ], [ 28, -26 ] ],
[ [ 372, 307 ], [ 0, 26 ] ],
[ [ 471, 418 ], [ 0, 10 ] ],
[ [ 471, 428 ], [ 21, -10 ] ],
[ [ 492, 418 ], [ -21, -111 ] ],
[ [ 471, 307 ], [ -99, 0 ] ],
[ [ 471, 428 ], [ 0, 27 ] ],
[ [ 471, 455 ], [ 21, -11 ] ],
[ [ 492, 444 ], [ -21, -16 ] ],
[ [ 492, 444 ], [ 28, 27 ] ],
[ [ 520, 471 ], [ 22, -69 ] ],
[ [ 542, 402 ], [ -50, 16 ] ],
[ [ 569, 243 ], [ -98, -16 ] ],
[ [ 471, 227 ], [ 0, 80 ] ],
[ [ 542, 402 ], [ 27, -159 ] ],
[ [ 443, 444 ], [ -22, 27 ] ],
[ [ 421, 471 ], [ 50, 0 ] ],
[ [ 471, 471 ], [ 0, -16 ] ],
[ [ 372, 402 ], [ 0, 69 ] ],
[ [ 372, 471 ], [ 0, 63 ] ],
[ [ 372, 534 ], [ 22, 16 ] ],
[ [ 394, 550 ], [ 27, -79 ] ],
[ [ 372, 148 ], [ 0, 69 ] ],
[ [ 372, 217 ], [ 0, 90 ] ],
[ [ 471, 227 ], [ 0, -79 ] ],
[ [ 471, 148 ], [ -77, -16 ] ],
[ [ 394, 132 ], [ -22, 16 ] ],
[ [ 471, 471 ], [ 21, 53 ] ],
[ [ 492, 524 ], [ 28, -53 ] ],
[ [ 394, 132 ], [ -22, -132 ] ],
[ [ 372, 0 ], [ -175, 0 ] ],
[ [ 197, 0 ], [ 27, 79 ] ],
[ [ 224, 79 ], [ 71, 53 ] ],
[ [ 295, 132 ], [ 77, 16 ] ],
[ [ 372, 217 ], [ -98, 63 ] ],
[ [ 274, 280 ], [ 98, 53 ] ],
[ [ 372, 391 ], [ -77, -16 ] ],
[ [ 295, 375 ], [ -21, 80 ] ],
[ [ 274, 455 ], [ 21, 0 ] ],
[ [ 295, 455 ], [ 77, 16 ] ],
[ [ 27, 227 ], [ 197, 16 ] ],
[ [ 224, 243 ], [ 0, -26 ] ],
[ [ 224, 217 ], [ -49, -58 ] ],
[ [ 175, 159 ], [ -148, -11 ] ],
[ [ 27, 148 ], [ 0, 79 ] ],
[ [ 246, 296 ], [ 0, 64 ] ],
[ [ 246, 360 ], [ 49, 15 ] ],
[ [ 274, 280 ], [ -28, 16 ] ],
[ [ 246, 360 ], [ -71, -11 ] ],
[ [ 175, 349 ], [ -27, 79 ] ],
[ [ 148, 428 ], [ 126, 27 ] ],
[ [ 175, 349 ], [ -175, 0 ] ],
[ [ 0, 349 ], [ 126, 95 ] ],
[ [ 126, 444 ], [ 22, -16 ] ],
[ [ 246, 296 ], [ -22, -53 ] ],
[ [ 27, 227 ], [ -27, 122 ] ],
[ [ 295, 455 ], [ -21, 79 ] ],
[ [ 274, 534 ], [ 98, 0 ] ],
[ [ 520, 0 ], [ -49, 148 ] ],
[ [ 569, 243 ], [ -49, -243 ] ],
[ [ 224, 79 ], [ -49, 80 ] ],
[ [ 224, 217 ], [ 71, -85 ] ],
[ [ 126, 444 ], [ 148, 90 ] ],
[ [ 175, 0 ], [ -126, 0 ], [ -22, 148 ] ],
[ [ 197, 0 ], [ -22, 0 ] ],
[ [ 394, 550 ], [ 98, -26 ] ],
[ [ 520, 0 ], [ -49, 0 ], [ -99, 0 ] ]
],
"objects": {
"zip_codes_for_the_usa": {
"type": "GeometryCollection",
"geometries": [
{
"arcs": [
[
0,
1,
2,
3,
4
]
],
"type": "Polygon",
"properties": {
"name": "SAN FRANCISCO",
"zip": "94102",
"state": "CA"
}
},
{
"arcs": [
[
5,
-1,
6,
7,
8,
9
]
],
"type": "Polygon",
"properties": {
"name": "SAN FRANCISCO",
"zip": "94103",
"state": "CA"
}
},
{
"arcs": [
[
10,
11,
12
]
],
"type": "Polygon",
"properties": {
"name": "SAN FRANCISCO",
"zip": "94104",
"state": "CA"
}
},
{
"arcs": [
[
-13,
13,
14,
15,
-8
]
],
"type": "Polygon",
"properties": {
"name": "SAN FRANCISCO",
"zip": "94105",
"state": "CA"
}
},
{
"arcs": [
[
16,
17,
-9,
-16,
18
]
],
"type": "Polygon",
"properties": {
"name": "SAN FRANCISCO",
"zip": "94107",
"state": "CA"
}
},
{
"arcs": [
[
-7,
-5,
19,
20,
21,
-11
]
],
"type": "Polygon",
"properties": {
"name": "SAN FRANCISCO",
"zip": "94108",
"state": "CA"
}
},
{
"arcs": [
[
-4,
22,
23,
24,
25,
-20
]
],
"type": "Polygon",
"properties": {
"name": "SAN FRANCISCO",
"zip": "94109",
"state": "CA"
}
},
{
"arcs": [
[
26,
27,
-10,
-18,
28,
29,
30
]
],
"type": "Polygon",
"properties": {
"name": "SAN FRANCISCO",
"zip": "94110",
"state": "CA"
}
},
{
"arcs": [
[
-12,
-22,
31,
32,
-14
]
],
"type": "Polygon",
"properties": {
"name": "SAN FRANCISCO",
"zip": "94111",
"state": "CA"
}
},
{
"arcs": [
[
33,
34,
35,
36,
37,
-31
]
],
"type": "Polygon",
"properties": {
"name": "SAN FRANCISCO",
"zip": "94112",
"state": "CA"
}
},
{
"arcs": [
[
38,
39,
-6,
-28
]
],
"type": "Polygon",
"properties": {
"name": "SAN FRANCISCO",
"zip": "94114",
"state": "CA"
}
},
{
"arcs": [
[
40,
41,
42,
43,
-23,
-3
]
],
"type": "Polygon",
"properties": {
"name": "SAN FRANCISCO",
"zip": "94115",
"state": "CA"
}
},
{
"arcs": [
[
44,
45,
46,
47,
48
]
],
"type": "Polygon",
"properties": {
"name": "SAN FRANCISCO",
"zip": "94116",
"state": "CA"
}
},
{
"arcs": [
[
49,
50,
-41,
-2,
-40,
51
]
],
"type": "Polygon",
"properties": {
"name": "SAN FRANCISCO",
"zip": "94117",
"state": "CA"
}
},
{
"arcs": [
[
52,
53,
54,
-42,
-51
]
],
"type": "Polygon",
"properties": {
"name": "SAN FRANCISCO",
"zip": "94118",
"state": "CA"
}
},
{
"arcs": [
[
55,
56,
57,
-54
]
],
"type": "Polygon",
"properties": {
"name": "SAN FRANCISCO",
"zip": "94121",
"state": "CA"
}
},
{
"arcs": [
[
58,
-45,
59,
-56,
-53,
-50
]
],
"type": "Polygon",
"properties": {
"name": "SAN FRANCISCO",
"zip": "94122",
"state": "CA"
}
},
{
"arcs": [
[
60,
61,
-24,
-44
]
],
"type": "Polygon",
"properties": {
"name": "SAN FRANCISCO",
"zip": "94123",
"state": "CA"
}
},
{
"arcs": [
[
62,
-29,
-17,
63
]
],
"type": "Polygon",
"properties": {
"name": "SAN FRANCISCO",
"zip": "94124",
"state": "CA"
}
},
{
"arcs": [
[
64,
-47,
65,
-37
]
],
"type": "Polygon",
"properties": {
"name": "SAN FRANCISCO",
"zip": "94127",
"state": "CA"
}
},
{
"arcs": [
[
-61,
-43,
-55,
-58,
66
]
],
"type": "Polygon",
"properties": {
"name": "SAN FRANCISCO",
"zip": "94129",
"state": "CA"
}
},
{
"arcs": [
[
-38,
-66,
-46,
-59,
-52,
-39,
-27
]
],
"type": "Polygon",
"properties": {
"name": "SAN FRANCISCO",
"zip": "94131",
"state": "CA"
}
},
{
"arcs": [
[
67,
-48,
-65,
-36,
68
]
],
"type": "Polygon",
"properties": {
"name": "SAN FRANCISCO",
"zip": "94132",
"state": "CA"
}
},
{
"arcs": [
[
-32,
-21,
-26,
69
]
],
"type": "Polygon",
"properties": {
"name": "SAN FRANCISCO",
"zip": "94133",
"state": "CA"
}
},
{
"arcs": [
[
-30,
-63,
70,
-34
]
],
"type": "Polygon",
"properties": {
"name": "SAN FRANCISCO",
"zip": "94134",
"state": "CA"
}
}
]
}
},
"transform": {
"scale": [
0.023470183168141,
0.018473853226367964
],
"translate": [
0,
0
]
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment