Skip to content

Instantly share code, notes, and snippets.

@kaezarrex

kaezarrex/README.md

Last active November 26, 2019 00:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save kaezarrex/11016980 to your computer and use it in GitHub Desktop.
Save kaezarrex/11016980 to your computer and use it in GitHub Desktop.
Download ZIP
Park walk
Raw
README.md

Auto-centering and auto-scaling topojson data with an inkpen-style drawing animation.

Raw
index.html
<!DOCTYPE html>
<head>
<meta charset='utf-8'>
<style>
path {
fill: none;
stroke: #D7181E;
stroke-opacity: 0.8;
stroke-linecap: round;
stroke-linejoin: round;
}
</style>
</head>
<body>
<script src='http://d3js.org/d3.v3.min.js'></script>
<script src='http://d3js.org/topojson.v1.min.js'></script>
<script>
var width = 960;
var height = 500;
var margin = 20;
var pathWidths = [1, 2, 3, 4, 5];
var svg = d3.select('body').append('svg')
.attr('width', width)
.attr('height', height);
width = width - 2*margin;
height = height - 2*margin;
d3.json('map.json', function(error, map) {
var feature = topojson.feature(map, map.objects.collection).features[0];
var center = d3.geo.centroid(feature);
var scale = 150;
var offset = [width/2, height/2];
var projection = d3.geo.mercator()
.scale(scale)
.center(center)
.translate(offset);
var path = d3.geo.path().projection(projection);
var bounds = path.bounds(feature);
var hscale = scale * width / (bounds[1][0] - bounds[0][0]);
var vscale = scale * height / (bounds[1][1] - bounds[0][1]);
var scale = (hscale < vscale) ? hscale : vscale;
projection = d3.geo.mercator()
.scale(scale)
.center(center);
path = d3.geo.path()
.projection(projection);
var group = svg.selectAll('g')
.data(topojson.feature(map, map.objects.collection).features)
group.enter().append('g')
.each(function(data) {
d3.select(this).selectAll('path')
.data(pathWidths).enter()
.append('path')
.attr('d', function() { return path(data); })
.style('stroke-width', function(d) { return d; })
.style('stroke-dasharray', '0,10000')
.transition()
.delay(function(d, i) { return i * 50 + 500; })
.duration(5000)
.ease('linear')
.style('stroke-dasharray', '2000,10000');
});
});
</script>
</body>
Display the source blob
Display the rendered blob
Raw
map.json
{
"type":"Topology",
"objects":{
"collection":{
"type":"GeometryCollection",
"geometries":[
{
"type":"LineString",
"properties":{
"name":"Park Walk",
"time":"2014-04-16"
},
"arcs":[
0
]
}
]
}
},
"arcs":[
[
[
380,
9846,
82.9
],
[
134,
123
],
[
-31,
30
],
[
165,
-71
],
[
127,
41
],
[
33,
-116
],
[
-15,
-59
],
[
83,
-37
],
[
130,
-105
],
[
512,
-524
],
[
158,
-69
],
[
445,
-227
],
[
216,
-100
],
[
33,
-21
],
[
195,
-266
],
[
121,
-109
],
[
127,
-21
],
[
233,
-35
],
[
42,
-75
],
[
92,
-87
],
[
224,
-84
],
[
226,
-48
],
[
154,
-21
],
[
130,
-40
],
[
162,
-47
],
[
213,
-55
],
[
94,
-24
],
[
194,
-31
],
[
94,
-14
],
[
136,
-34
],
[
112,
-25
],
[
224,
-61
],
[
139,
-31
],
[
186,
-43
],
[
64,
-29
],
[
169,
-94
],
[
27,
-6
],
[
-36,
-140
],
[
3,
-8
],
[
-58,
-132
],
[
-21,
-11
],
[
0,
-77
],
[
-433,
-2094
],
[
-292,
590
],
[
165,
-105
],
[
30,
-2
],
[
92,
-121
],
[
-4,
-20
],
[
-59,
-84
],
[
-64,
-48
],
[
-92,
-82
],
[
-97,
-87
],
[
-162,
-59
],
[
-125,
-44
],
[
-216,
-17
],
[
-156,
-13
],
[
-213,
-71
],
[
-13,
2
],
[
-180,
-10
],
[
-116,
12
],
[
-231,
-33
],
[
-37,
1
],
[
-196,
10
],
[
-79,
4
],
[
-195,
5
],
[
-59,
-5
],
[
-216,
3
],
[
-30,
2
],
[
-220,
-14
],
[
-44,
-9
],
[
-171,
-46
],
[
-82,
-32
],
[
-210,
-72
],
[
-16,
0
],
[
-200,
-82
],
[
-41,
-17
],
[
-134,
-51
],
[
-576,
-928
],
[
-213,
-31
],
[
-28,
-15
],
[
-46,
-143
],
[
26,
-15
],
[
198,
-83
],
[
-3,
-23
],
[
-94,
-130
],
[
-15,
-27
],
[
-99,
-129
],
[
-16,
-23
],
[
-127,
-97
],
[
-26,
-20
],
[
-132,
-122
],
[
-15,
-21
],
[
-86,
-115
],
[
-18,
-21
],
[
-118,
-129
],
[
-29,
-16
],
[
-96,
-133
],
[
-7,
-8
],
[
953,
-456
],
[
154,
-62
],
[
64,
-16
],
[
188,
-43
],
[
60,
-10
],
[
35,
-18
],
[
902,
-227
],
[
187,
-67
],
[
22,
-20
],
[
176,
-62
],
[
52,
-15
],
[
211,
-33
],
[
66,
-13
],
[
191,
-87
],
[
27,
-25
],
[
85,
-75
],
[
64,
-63
],
[
132,
-532
],
[
-167,
-106
],
[
-18,
-18
],
[
152,
-60
],
[
-319,
-133
],
[
172,
-102
],
[
6,
-2
],
[
198,
53
],
[
24,
13
],
[
180,
87
],
[
24,
13
],
[
139,
105
],
[
2,
17
],
[
81,
128
],
[
13,
15
],
[
213,
52
],
[
24,
12
],
[
150,
108
],
[
24,
15
],
[
116,
115
],
[
29,
18
],
[
129,
97
],
[
31,
18
],
[
154,
97
],
[
20,
11
],
[
145,
101
],
[
17,
24
],
[
108,
115
],
[
28,
9
],
[
163,
97
],
[
17,
16
],
[
134,
115
],
[
27,
18
],
[
173,
90
],
[
16,
10
],
[
94,
-21
],
[
136,
-48
],
[
226,
33
],
[
16,
-3
],
[
184,
79
],
[
42,
26
],
[
46,
25
],
[
202,
82
],
[
196,
72
],
[
59,
8
],
[
-2,
-19
],
[
1807,
933
],
[
114,
100
],
[
27,
22
],
[
182,
95
],
[
22,
13
],
[
99,
133
],
[
-20,
13
],
[
149,
59
],
[
95,
-59
],
[
235,
23
],
[
35,
56
],
[
70,
91
],
[
5,
116
],
[
13,
120
],
[
193,
204
],
[
-178,
18
],
[
-81,
-2
],
[
-79,
35
],
[
-883,
488
],
[
-198,
-28
],
[
-50,
-8
],
[
-224,
-27
],
[
-57,
-1
],
[
-211,
-22
],
[
-57,
-6
],
[
-143,
0
],
[
-217,
51
],
[
-145,
34
],
[
-119,
12
],
[
-149,
11
],
[
-136,
25
],
[
-1509,
-35
],
[
-139,
97
],
[
-17,
20
],
[
-119,
104
],
[
-50,
9
],
[
-66,
20
],
[
160,
564
],
[
-154,
-33
],
[
-428,
690
],
[
-143,
86
],
[
-30,
19
],
[
-204,
214
],
[
204,
54
],
[
28,
-2
],
[
233,
20
],
[
42,
18
],
[
158,
91
],
[
35,
23
],
[
88,
113
],
[
-26,
273
],
[
-55,
245
],
[
-336,
337
],
[
-71,
60
],
[
-68,
81
],
[
-70,
77
],
[
-674,
-84
],
[
-176,
71
],
[
-39,
20
],
[
-134,
90
],
[
-38,
20
],
[
-8,
141
],
[
-73,
133
],
[
-101,
156
],
[
-112,
71
],
[
-136,
61
],
[
-130,
95
],
[
-700,
187
],
[
-132,
97
],
[
-37,
15
],
[
-86,
64
],
[
-707,
526
],
[
-139,
102
],
[
-24,
23
],
[
-129,
110
],
[
-49,
21
],
[
-125,
106
],
[
-20,
19
],
[
-72,
107
],
[
31,
164
],
[
0,
83
]
]
],
"bbox":[
-78.657132,
35.78423,
-78.652579,
35.790315
],
"transform":{
"scale":[
4.553455345535915e-7,
6.085608560854871e-7
],
"translate":[
-78.657132,
35.78423
]
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment