-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmap_c.html
77 lines (66 loc) · 2.65 KB
/
map_c.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>From (red) to London</title>
</head>
<body>
<script src="./js/d3.js" charset="utf-8"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js"></script>
<script>
var width = 960,
height = 1160;
var svg = d3.select('body').append('svg')
.attr('width', width)
.attr('height', height);
var color = d3.scaleLinear()
.domain([0,1700])
.range(['#fff', '#ff0000']);
queue()
.defer(d3.json, './json/topo_lad.json')
.defer(d3.csv, './data/departures.csv')
.await(function(error, uk, change){
var lad = topojson.feature(uk, uk.objects.lad);
var projection = d3.geoAlbers()
.rotate([0,0])
.scale(5000)
.translate([700, 1900]);
var path = d3.geoPath()
.projection(projection);
svg.selectAll('.lad')
.data(lad.features)
.enter().append('path')
.attr('class', function(d) { return 'lad ' + d.id; })
.attr('d', path)
.attr('fill', '#e7e7e7');
var length = change.length
for(i=0; i<length; i++){
var x = change[i].code;
var net = change[i].number;
var area = d3.select('.' + x)
.datum(net);
area.attr('fill', function(d,i){
console.log(d)
return color(d);
});
}
});
// d3.json('./json/topo_lad.json', function(error, uk){
// if (error) return console.error(error);
// var lad = topojson.feature(uk, uk.objects.lad);
// var projection = d3.geoAlbers()
// .rotate([0,0])
// .scale(5000)
// .translate([700, 1900]);
// var path = d3.geoPath()
// .projection(projection);
// svg.selectAll('.lad')
// .data(lad.features)
// .enter().append('path')
// .attr('class', function(d) { return 'lad ' + d.id; })
// .attr('d', path);
// });
</script>
</body>
</html>