-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
95 lines (85 loc) · 3.85 KB
/
index.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
85
86
87
88
89
90
91
92
93
94
95
<!-- Code from d3-graph-gallery.com -->
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"></link>
<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<!-- Create an element where the map will take place -->
<body>
<div class="container-fluid h-100">
<div class="row justify-content-center h-60" >
<div class="col-sm-2" style="background-color: red; height: 100%;">
One of three columns
</div>
<div class="col-sm-7 d-flex justify-content-center" style="background-color: blue; height: 100%;">
<svg id="svg" viewBox="-160 -120 320 180"></svg>
</div>
<div id="tooltip" display="none" style="position: absolute; display: none;"></div>
<div class="col-sm-3" style="background-color: green; height: 100%;">
One of three columns
</div>
</div>
<div class="row justify-content-center h-40" >
<div class="col-sm-12" style="background-color: red; height: 100%;">
One of three columns
</div>
</div>
</div>
<!-- <div class="container">
<div id="canvas" style="width: 90%; height: 100vh; background-color: green;">
<svg id="svg"></svg>
</div>
<div id="country_display" style="width: 10%; height: 100vh; background-color: blueviolet;">
hola
</div>
<div id="tooltip" display="none" style="position: absolute; display: none;"></div>
<div> -->
<script>
// The svg
var svg = d3.select("svg")
width = +svg.attr("width");
height = +svg.attr("height");
// Map and projection
var projection = d3.geoMercator()
.center([0,0]) // GPS of location to zoom on
.scale(50) // This is like the zoom
.translate([ width/2, height/2 ])
// Load external data and boot
d3.json("https://raw.githubusercontent.com/ACosaLinan/ExampleViz/master/data/world.json", function(data){
// var data_germany = Object.assign({},data)
// var data_rest = Object.assign({},data)
// Filter data
// data_germany.features = data.features.filter(function(d){console.log(d.properties.name) ; return d.properties.name=="Germany"})
// data_rest.features = data.features.filter(function(d){console.log(d.properties.name) ; return d.properties.name!="Germany"})
// Draw the map
svg.append("g")
.selectAll("path")
.data(data.features)
.enter()
.append("path")
.attr("d", d3.geoPath()
.projection(projection)
)
.classed("svg-path", true)
.attr("id", function(d) { return d.id; })
.on("mouseover", function() {
if (event.clientX===undefined && event.clientY===undefined){
console.log(this.id)
}else{
console.log(this.id + ' ' + event.clientX.toString() + ' ' + event.clientY.toString())
let tooltip = document.getElementById("tooltip");
tooltip.innerHTML = this.__data__.properties.name;
tooltip.style.display = "block";
tooltip.style.left = event.clientX - 50 + 'px';
tooltip.style.top = event.clientY - 50 + 'px';
}
})
//.on("mouseout", function() {
// tooltip.style.display = "none";
//})
})
</script>
</body>