-
Notifications
You must be signed in to change notification settings - Fork 0
/
test_map3.html
84 lines (65 loc) · 2.31 KB
/
test_map3.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
78
79
80
81
82
83
84
<!DOCTYPE html>
<meta charset="utf-8">
<style>
/* CSS goes here. */
</style>
<body>
<script src="//d3js.org/d3.v3.min.js" charset="utf=8"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>
var width = 1000,
height = 500;
var svg = d3.select("body")
.append("svg")
.attr("width",width)
.attr("height",height);
var dataset; //Global dataset variable so we can call it outside the callback function
var latScale = d3.scale.linear();
var longScale = d3.scale.linear(); // This only works because mercator projection is linear
svg.append("image")
.attr("xlink:href","sandbox/woa_map.png") // If you adjust the map in matlab so that there are no margins it will fit. Maybe try to save it as an svg image. Alternatively shift the rectangles by the margins in your matlab image.
.attr("x",0)
.attr("y",0)
.attr("width",width)
.attr("height",height);
d3.json("woa_land.json", function(error, data){
if (error) return console.error(error);
dataset = topojson.feature(data, data.objects.woa).features
// console.log(dataset);
// svg.append("path")
// .datum(topojson.feature(data, data.objects.land))
// .attr("d", d3.geo.path().projection(d3.geo.mercator()));
// longScale.range([-10,width]).domain([-180,180]);
// latScale.range([height,-10]).domain([-90,90]);
longScale.range([0,width]).domain([-180,180]);
latScale.range([height,0]).domain([-90,90]);
var rect = svg.selectAll("rect")
.data(dataset).enter()
.append("rect")
.attr("x", function(d) {
// return longScale(d.geometry.coordinates[0]);
return longScale(d.geometry.coordinates[0])-7;
})
.attr("y", function(d) {
// return latScale(d.geometry.coordinates[1]);
return latScale(d.geometry.coordinates[1]+2.5)
})
.attr("width",width/(360/5))
.attr("height",height/(180/5))
.style("stroke", "none")
.style("stroke-width", 2)
.style("fill", "black")
.style("fill-opacity",0.2); //change opacity to see rectangles or make them disappear
rect.on({
"mouseover" : function(d) { d3.select(this).style("stroke", "white"); },
"mouseout" : function(d) { d3.select(this).style("stroke", "none"); },
"click" : function(d,i) {
d3.select(this).style("stroke", "black");
console.log(i);
console.log(d.geometry.coordinates[0]);
console.log(d.geometry.coordinates[1]);
console.log(this);
}
});
});
</script>