-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
95 lines (91 loc) · 3.35 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
<!-- Inspiration: http://www.datavis.fr/index.php?page=map-firststep -->
<html>
<head>
<meta charset="utf-8" />
<title>Detection faune Finistere</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
<style type="text/css">
div.tooltip {
color: black;
width: 300px;
height: 450px;
padding: 2px;
font: 12px sans-serif;
background: grey;
border: 0px;
}
</style>
</head>
<body>
<center>
<h2>Detection faune Finistere</h2>
<table><tr>
<td><div id="map"></div></td>
<td><div id="info" class="tooltip"><div></td>
</tr></table>
</center>
<script type="text/javascript">
var width = 500, height = 500;
var path = d3.geoPath();
var projection = d3.geoConicConformal()
.center([-4.076408, 48.282123])
.scale(20000)
.translate([width / 2, height / 2]);
path.projection(projection);
var svg = d3.select('#map').append("svg")
.attr("id", "svg")
.attr("width", width)
.attr("height", height);
var dep = svg.append("g");
dep.style("fill", "#42d9f4")
var d29_json_url = 'https://bitbucket.org/!api/2.0/snippets/Ixio/B5bMdj/3b6af32193eb1d0105177d5d2972300bf1402504/files/d29.json';
d3.json(d29_json_url, function(req, geojson) {
dep.selectAll("path")
.data(geojson.features)
.enter()
.append("path")
.attr("d", path);
});
var div = d3.select("#info");
var curr_dot = null;
var infodots = null;
var flickr_csv_url = "https://bitbucket.org/!api/2.0/snippets/Ixio/44zGby/7c11897c55b88c53817be317e6df24a849ed8211/files/flickr_dauphins_bretagne.csv";
d3.csv(flickr_csv_url,
function(row) {
return { 'lon': row.longitude,
'lat': row.latitude,
'title': row.title,
'url': row.url,
'date': row.date,
'place': [row.locality, row.county, row.region, row.country]
}
},
function(infdts) {
infodots = infdts;
for (var i = 0; i < infodots.length; i++) {
infodot = infodots[i]
var coordinates = projection([ infodot['lon'], infodot['lat'] ]);
if (!(isNaN(coordinates[0]) || isNaN(coordinates[1]))) {
svg.append("circle")
.attr("id", i)
.attr("cx", coordinates[0])
.attr("cy", coordinates[1])
.attr("r", 5)
.style("fill", "black")
.on("mouseover", function(d) {
infodot = infodots[this.id]
if (curr_dot != null) { curr_dot.style("fill", "black") };
curr_dot = d3.select(this);
d3.select(this).style("fill", "blue");
div.html("<b>Photo Flickr:</b>"
+ "<br>" + infodot['title']
+ "<br><a href='" + infodot['url'] + "'>" + infodot['url'] + "</a>"
+ "<br><b>Date:</b> " + infodot['date']
+ "<br><b>Coordinates:</b><br>Latitude: " + infodot['lat']
+ "<br>Longitude: " + infodot['lon']
+ "<br>" + infodot['place'])
});
}}});
</script>
</body>
</html>