Skip to content

Commit 0d3e8a6

Browse files
johnwalleyjohnwalley
authored
Merge pull request #30 from johnwalley/london-tube
Add example based on real London tube map
2 parents bb2a845 + 227f310 commit 0d3e8a6

File tree

2 files changed

+266
-0
lines changed

2 files changed

+266
-0
lines changed

‎example/london-tube.html‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<html>
2+
<head>
3+
<link rel="stylesheet" href="./tubeMap.css" />
4+
<script src="https://d3js.org/d3.v5.js"></script>
5+
<script src="../dist/d3-tube-map.js"></script>
6+
<link
7+
href="https://fonts.googleapis.com/css?family=Hammersmith+One"
8+
rel="stylesheet"
9+
type="text/css"
10+
/>
11+
</head>
12+
13+
<body>
14+
<div id="tube-map"></div>
15+
<script>
16+
var container = d3.select('#tube-map');
17+
var width = 1600;
18+
var height = 1000;
19+
20+
var map = d3
21+
.tubeMap()
22+
.width(width)
23+
.height(height)
24+
.margin({
25+
top: 20,
26+
right: 20,
27+
bottom: 40,
28+
left: 100,
29+
})
30+
.on('click', function(name) {
31+
console.log(name);
32+
});
33+
34+
d3.json('./london-tube.json').then(function(data) {
35+
container.datum(data).call(map);
36+
37+
var svg = container.select('svg');
38+
39+
zoom = d3
40+
.zoom()
41+
.scaleExtent([0.1, 6])
42+
.on('zoom', zoomed);
43+
44+
var zoomContainer = svg.call(zoom);
45+
var initialScale = 0.5;
46+
var initialTranslate = [-1000, -600];
47+
48+
zoom.scaleTo(zoomContainer, initialScale);
49+
zoom.translateTo(
50+
zoomContainer,
51+
initialTranslate[0],
52+
initialTranslate[1]
53+
);
54+
55+
function zoomed() {
56+
svg.select('g').attr('transform', d3.event.transform.toString());
57+
}
58+
});
59+
</script>
60+
</body>
61+
</html>

‎example/london-tube.json‎

Lines changed: 205 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,205 @@
1+
{
2+
"stations": {
3+
"Brixton": {
4+
"name": "Brixton",
5+
"label": "Brixton"
6+
},
7+
"BlackhorseRoad": {
8+
"name": "BlackhorseRoad",
9+
"label": "Blackhorse\nRoad"
10+
},
11+
"FinsburyPark": {
12+
"name": "FinsburyPark",
13+
"label": "Finsbury\nPark"
14+
},
15+
"GreenPark": {
16+
"name": "GreenPark",
17+
"label": "Green Park"
18+
},
19+
"HighburyIslington": {
20+
"name": "HighburyIslington",
21+
"label": "Highbury &\nIslington"
22+
},
23+
"KingsCrossStPancras": {
24+
"name": "KingsCrossStPancras",
25+
"label": "King's Cross\nSt. Pancras"
26+
},
27+
"OxfordCircus": {
28+
"name": "OxfordCircus",
29+
"label": "Oxford Circus"
30+
},
31+
"Pimlico": {
32+
"name": "Pimlico",
33+
"label": "Pimlico"
34+
},
35+
"SevenSisters": {
36+
"name": "SevenSisters",
37+
"label": "Seven\nSisters"
38+
},
39+
"Stockwell": {
40+
"name": "Stockwell",
41+
"label": "Stockwell"
42+
},
43+
"TottenhamHale": {
44+
"name": "TottenhamHale",
45+
"label": "Tottenham\nHale"
46+
},
47+
"Vauxhall": {
48+
"name": "Vauxhall",
49+
"label": "Vauxhall"
50+
},
51+
"Victoria": {
52+
"name": "Victoria",
53+
"label": "Victoria"
54+
},
55+
"WalthamstowCentral": {
56+
"name": "WalthamstowCentral",
57+
"label": "Walthamstow\nCentral"
58+
},
59+
"WarrenStreet": {
60+
"name": "WarrenStreet",
61+
"label": "Warren\nStreet"
62+
}
63+
},
64+
"lines": [
65+
{
66+
"name": "Victoria",
67+
"label": "Victoria",
68+
"color": "#2B8DBF",
69+
"shiftCoords": [0, 0],
70+
"nodes": [
71+
{
72+
"coords": [0, -20],
73+
"name": "Brixton",
74+
"labelPos": "SW"
75+
},
76+
{
77+
"coords": [-4, -16],
78+
"name": "Stockwell",
79+
"marker": "interchange",
80+
"labelPos": "E"
81+
},
82+
{
83+
"coords": [-8, -12],
84+
"name": "Vauxhall",
85+
"marker": "interchange",
86+
"labelPos": "NE"
87+
},
88+
{
89+
"coords": [-9, -10]
90+
},
91+
{
92+
"coords": [-9, -2]
93+
},
94+
{
95+
"coords": [-9, -3],
96+
"name": "Pimlico",
97+
"labelPos": "W"
98+
},
99+
{
100+
"coords": [-9, 1],
101+
"name": "Victoria",
102+
"marker": "interchange",
103+
"labelPos": "NW"
104+
},
105+
{
106+
"coords": [-9, 5],
107+
"name": "GreenPark",
108+
"marker": "interchange",
109+
"labelPos": "NE"
110+
},
111+
{
112+
"coords": [-9, 6]
113+
},
114+
{
115+
"coords": [-8, 8]
116+
},
117+
{
118+
"coords": [-6, 10]
119+
},
120+
{
121+
"coords": [-4, 12],
122+
"name": "OxfordCircus",
123+
"marker": "interchange",
124+
"labelPos": "NW"
125+
},
126+
{
127+
"coords": [0, 16],
128+
"name": "WarrenStreet",
129+
"marker": "interchange",
130+
"labelPos": "E"
131+
},
132+
{
133+
"coords": [4, 20]
134+
},
135+
{
136+
"coords": [6, 21]
137+
},
138+
{
139+
"coords": [9, 21],
140+
"name": "KingsCrossStPancras",
141+
"marker": "interchange",
142+
"labelPos": "N"
143+
},
144+
{
145+
"coords": [16, 21]
146+
},
147+
{
148+
"coords": [17, 22],
149+
"dir": "E"
150+
},
151+
{
152+
"coords": [17, 30]
153+
},
154+
{
155+
"coords": [17, 31],
156+
"name": "HighburyIslington",
157+
"marker": "interchange",
158+
"labelPos": "NW"
159+
},
160+
{
161+
"coords": [17, 34]
162+
},
163+
{
164+
"coords": [18, 36]
165+
},
166+
{
167+
"coords": [22, 40],
168+
"name": "FinsburyPark",
169+
"marker": "interchange",
170+
"labelPos": "SE"
171+
},
172+
{
173+
"coords": [26, 44]
174+
},
175+
{
176+
"coords": [28, 45]
177+
},
178+
{
179+
"coords": [32, 45],
180+
"name": "SevenSisters",
181+
"marker": "interchange",
182+
"labelPos": "N"
183+
},
184+
{
185+
"coords": [36, 45],
186+
"name": "TottenhamHale",
187+
"marker": "interchange",
188+
"labelPos": "S"
189+
},
190+
{
191+
"coords": [40, 45],
192+
"name": "BlackhorseRoad",
193+
"marker": "interchange",
194+
"labelPos": "N"
195+
},
196+
{
197+
"coords": [46, 45],
198+
"name": "WalthamstowCentral",
199+
"marker": "interchange",
200+
"labelPos": "E"
201+
}
202+
]
203+
}
204+
]
205+
}

0 commit comments

Comments
 (0)