Skip to content

Commit 37c278f

Browse files
SiggyFSiggyF
authored
Merge pull request #12 from Deltares/legend
Legend
2 parents 6dbbb25 + b8c6fd0 commit 37c278f

File tree

6 files changed

+261
-18
lines changed

6 files changed

+261
-18
lines changed

‎app/static/scripts/main.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@ ee.initialize(null, null, function () {
140140
queryMap = true;
141141
});
142142

143-
$('#info-close-button').click(function () {
143+
$('.info-close-button').click(function () {
144144
$('#info-box').transition('slide right');
145145
//$('#twitter-timeline-box').transition('slide right');
146146
$('#info-button').toggleClass('active');

‎app/static/scripts/script.js‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -236,7 +236,21 @@ function clickShorelineProfile(pt) {
236236
var feature = featureProxy.getInfo();
237237
// d is lost in translation
238238
var id = _.get(feature, 'properties.transect_i');
239-
console.log('show info for', feature.properties);
239+
if (_.isNil(id)) {
240+
return;
241+
}
242+
243+
var url = 'https://storage.googleapis.com/shoreline-monitor/features/030/000/BOX_030_000.json';
244+
$.getJSON(url, function(data) {
245+
console.log('data', data);
246+
var feature = _.first(_.filter(data.features, function(feature) {
247+
return _.get(feature, 'properties.transect_id', id);
248+
}));
249+
createShoreChart(feature);
250+
$('#chart-modal')
251+
.show();
252+
});
253+
console.log('id', id);
240254
return id;
241255
}
242256

@@ -762,6 +776,7 @@ function initializeMap() {
762776

763777
// hide all boxes
764778
$('#info-box .info-text').hide();
779+
$('#info-box .extra.content').hide();
765780
// show the relevant ones
766781
_.each(datasets || ['surface-water'], function(dataset) {
767782
$('*[data-dataset=' + '"' + dataset + '"' + ']').show();

‎app/static/scripts/shore-chart.js‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
function createShoreChart(json) {
2+
3+
var elementId = 'chart-modal' ;
4+
5+
// data from global shore json file (single location)
6+
var props = json.properties;
7+
var intercept = props.intercept;
8+
var dt = props.dt;
9+
var dist = props.distances;
10+
11+
var data = [];
12+
$.each(dist, function( index, value ) {
13+
var item = {};
14+
item.value = dist[index] - intercept;
15+
item.date = new Date(1984 + dt[index], 0, 1);
16+
if (dist[index] === -999) {
17+
return;
18+
}
19+
data.push(item);
20+
});
21+
22+
// D3js time series chart
23+
var margin = {top: 20, right: 20, bottom: 20, left: 40},
24+
width = 600 - margin.left - margin.right,
25+
height = 400 - margin.top - margin.bottom;
26+
27+
// Set the ranges
28+
var x = d3.time.scale().range([0, width]);
29+
var y = d3.scale.linear().range([height, 0]);
30+
31+
// Define the axes
32+
var xAxis = d3.svg.axis().scale(x)
33+
.orient("bottom").ticks(10);
34+
35+
var yAxis = d3.svg.axis().scale(y)
36+
.orient("left").ticks(5);
37+
38+
// Define the line
39+
var valueline = d3.svg.line()
40+
.x(function (d) {
41+
return x((d.date));
42+
})
43+
.y(function (d) {
44+
return y(d.value);
45+
});
46+
47+
// clear content
48+
d3.select('#' + elementId)
49+
.selectAll('*')
50+
.remove();
51+
52+
// Adds the svg canvas
53+
var svg = d3.select("#"+ elementId)
54+
.append("svg")
55+
.classed({'query-chart': true})
56+
.attr("width", width + margin.left + margin.right)
57+
.attr("height", height + margin.top + margin.bottom)
58+
.append("g")
59+
.attr("transform",
60+
"translate(" + margin.left + "," + margin.top + ")");
61+
62+
// var tip = d3.tip()
63+
// .attr('class', 'd3-tip')
64+
// .offset([-10, 0])
65+
// .html(function (d) {
66+
// return 'Date: ' + formatDate(d.date) + ', Value: ' + d.value;
67+
// });
68+
69+
// svg.call(tip);
70+
71+
var lineSvg = svg.append("g");
72+
73+
var focus = svg.append("g")
74+
.style("display", "none");
75+
76+
// Scale the range of the data
77+
x.domain(d3.extent(data, function (d) {
78+
return d.date;
79+
}));
80+
y.domain(d3.extent(data, function (d) {
81+
return d.value;
82+
}));
83+
84+
// Add the dotsh.
85+
svg.append("g")
86+
.attr("class", "dots")
87+
.selectAll("path")
88+
.data(data)
89+
.enter().append("path")
90+
.attr("transform", function(d) { return "translate(" + x(d.date) + "," + y(d.value) + ")"; })
91+
.attr("d", d3.svg.symbol()
92+
.size(40));
93+
94+
95+
// Add the X Axis
96+
svg.append("g")
97+
.attr("class", "x axis")
98+
.attr("transform", "translate(0," + height + ")")
99+
.call(xAxis);
100+
101+
// Add the Y Axis
102+
svg.append("g")
103+
.attr("class", "y axis")
104+
.call(yAxis);
105+
106+
// append the x line
107+
focus.append("line")
108+
.attr("class", "x")
109+
.style("stroke", "blue")
110+
.style("stroke-dasharray", "3,3")
111+
.style("opacity", 0.5)
112+
.attr("y1", 0)
113+
.attr("y2", height);
114+
115+
// append the y line
116+
focus.append("line")
117+
.attr("class", "y")
118+
.style("stroke", "blue")
119+
.style("stroke-dasharray", "3,3")
120+
.style("opacity", 0.5)
121+
.attr("x1", width)
122+
.attr("x2", width);
123+
}

‎app/static/styles/colormaps.scss‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
.legend-box {
2+
width: 1em;
3+
min-width: 10px;
4+
}
5+
.legend {
6+
display: flex;
7+
margin-top: 12px;
8+
margin-bottom: 12px;
9+
}
10+
.RdYlGn {
11+
.q0-5{
12+
fill: rgb(215,25,28);
13+
background-color: rgb(215,25,28);
14+
}
15+
.q1-5{
16+
fill: rgb(253,174,97);
17+
background-color: rgb(253,174,97);
18+
}
19+
.q2-5{
20+
fill: rgb(255,255,191);
21+
background-color: rgb(255,255,191);
22+
}
23+
.q3-5{
24+
fill: rgb(166,217,106);
25+
background-color: rgb(166,217,106);
26+
}
27+
.q4-5 {
28+
fill: rgb(26,150,65);
29+
background-color: rgb(26,150,65);
30+
}
31+
}

‎app/static/styles/main.scss‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ $button-shadow: rgba($black, .3) 0 1px 4px -1px;
77
// bower:scss
88
// endbower
99

10+
1011
#map .gm-style {
1112
// OverlayMapPanes for these layers
1213
div:first-child > div:first-child {
@@ -215,7 +216,7 @@ $button-shadow: rgba($black, .3) 0 1px 4px -1px;
215216
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
216217
border-radius: 2px;
217218

218-
#info-close-button {
219+
.info-close-button {
219220
background: transparent;
220221
position: absolute;
221222
right: 0px;
@@ -504,3 +505,8 @@ $button-shadow: rgba($black, .3) 0 1px 4px -1px;
504505
font-size: 11px;
505506
text-shadow: 1px 1px 0px black, -1px -1px 0px black, 1px -1px 0px black, -1px 1px 0px black;
506507
}
508+
509+
510+
#chart-modal.ui.modal {
511+
top: 20%;
512+
}

‎app/templates/index.html‎

Lines changed: 83 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,7 @@
2424

2525
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
2626

27-
{#
2827
<script src="http://d3js.org/d3.v3.min.js"></script>
29-
#}
3028

3129
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
3230

@@ -41,6 +39,7 @@
4139

4240
<link rel="stylesheet" href="static/libs/normalize.css"/>
4341

42+
<link rel="stylesheet" href="static/styles/colormaps.css">
4443
<link rel="stylesheet" href="static/styles/chart.css">
4544
<link rel="stylesheet" href="static/styles/time-selector.css">
4645
<link rel="stylesheet" href="static/styles/searchbox.css">
@@ -231,15 +230,74 @@
231230
<div id="info-box" class="ui card">
232231
<div class="content info-text" data-dataset="shoreline">
233232
<h2>
234-
Shoreline changes (1985-2016)
233+
Long-term Shoreline Changes (1984-2016)
235234
</h2>
236235

237236
<p>
238-
Red and green colors represent sandy coastlines where erosion occured during the last 30 years.
239-
Yellow coasts represent sandy coastlines without erosion.
240-
The results of the analysis are published in: <br><br><a href="http://www.nature.com"><strong>Luijendijk et.al, 2018, Nature Scientific Reports</strong></a>
237+
The bars represent the erosion/accretion along sandy coasts, every 500m, over the period 1984-2016.
238+
Green bars indicate where shoreline accretion has occurred (natural accretion, land reclamation, nourishments).
239+
Red bars indicate erosive shorelines.
240+
</p>
241+
<div class="RdYlGn legend">
242+
<span>-10m/yr&nbsp;</span>
243+
<div class="legend-box q0-5" title="-10">&nbsp;</div>
244+
<div class="legend-box q1-5" title="-5">&nbsp;</div>
245+
<div class="legend-box q2-5" title="0">&nbsp;</div>
246+
<div class="legend-box q3-5" title="5">&nbsp;</div>
247+
<div class="legend-box q4-5" title="10">&nbsp;</div>
248+
<span>&nbsp;10m/yr</span>
249+
</div>
250+
<p>
251+
252+
<!-- The heatmap shows the hotspots of erosive (red) and accretive (green) shorelines in the world. -->
253+
254+
The results of the global analysis and methods can be found in:
255+
<a href="https://www.nature.com/articles/s41598-018-24630-6">Luijendijk et al., 2018, Scientific Reports</a>
256+
257+
<br>
258+
For inquiries please fill in this <a href="https://docs.google.com/forms/d/e/1FAIpQLSfd6VpTH5WPaHrUm1ZQfN2FQ6az77Wd7BykEt-orWMMpIVYFA/viewform">form</a>.
241259
</p>
242260
</div>
261+
262+
<div class="extra content info-buttons-content" data-dataset="shoreline">
263+
<div class="left floated like">
264+
<div>
265+
<a class="ui small primary button"
266+
href="https://twitter.com/beachmonitor" title="Follow on Twitter">
267+
<i class="twitter icon"></i>
268+
</a>
269+
</div>
270+
271+
<div>
272+
<a class="ui small primary button" id="github-button"
273+
href="https://github.com/deltares/aqua-monitor" title="Fork or Follow me on GitHub">
274+
<i class="github icon"></i>
275+
</a>
276+
</div>
277+
278+
<div>
279+
<a class="ui small button"
280+
href="mailto:arjen.luijendijk@deltares.nl?subject=Shoreline Monitor Feedback" title="Get in touch!">
281+
<i class="mail icon"></i>
282+
</a>
283+
</div>
284+
285+
<div>
286+
<a class="ui small button" id="terms-button" href="https://www.deltares.nl/en/disclaimer/"
287+
title="Terms of Use">
288+
<i class="copyright icon"></i>
289+
</a>
290+
</div>
291+
</div>
292+
293+
<div class="right floated star">
294+
<a class="ui small button info-close-button">
295+
<i class="close icon"></i>
296+
</a>
297+
</div>
298+
</div>
299+
300+
243301
<div class="content info-text" data-dataset="surface-water">
244302
<h2>
245303
Surface water changes (1985-2016)
@@ -258,30 +316,30 @@ <h2>
258316
</p>
259317
</div>
260318

261-
<div class="extra content info-buttons-content">
262-
<div class="left floated like" id="info-buttons">
263-
<div id="twitter-div">
264-
<a class="ui small primary button" id="twitter-button"
319+
<div class="extra content info-buttons-content" data-dataset="surface-water">
320+
<div class="left floated like">
321+
<div>
322+
<a class="ui small primary button"
265323
href="https://twitter.com/aqua_monitor" title="Follow on Twitter">
266324
<i class="twitter icon"></i>
267325
</a>
268326
</div>
269327

270-
<div id="github-div">
328+
<div>
271329
<a class="ui small primary button" id="github-button"
272330
href="https://github.com/deltares/aqua-monitor" title="Fork or Follow me on GitHub">
273331
<i class="github icon"></i>
274332
</a>
275333
</div>
276334

277-
<div id="contact-div">
278-
<a class="ui small button" id="contact-button"
335+
<div>
336+
<a class="ui small button"
279337
href="mailto:gennadii.donchyts@deltares.nl?subject=Aqua Monitor Feedback" title="Get in touch!">
280338
<i class="mail icon"></i>
281339
</a>
282340
</div>
283341

284-
<div id="terms-div">
342+
<div>
285343
<a class="ui small button" id="terms-button" href="https://www.deltares.nl/en/disclaimer/"
286344
title="Terms of Use">
287345
<i class="copyright icon"></i>
@@ -290,13 +348,22 @@ <h2>
290348
</div>
291349

292350
<div class="right floated star">
293-
<a class="ui small button" id="info-close-button">
351+
<a class="ui small button info-close-button">
294352
<i class="close icon"></i>
295353
</a>
296354
</div>
297355
</div>
298356
</div>
299357

358+
<!-- Modal windows -->
359+
360+
<div class="ui modal" id="chart-modal">
361+
<div class="right floated star">
362+
<a class="ui small button info-close-button">
363+
<i class="close icon"></i>
364+
</a>
365+
</div>
366+
</div>
300367
<!--
301368
<div id="slider-div-morph">
302369
<input id="slider-morph" data-slider-tooltip="hide" type="text"/>
@@ -414,6 +481,7 @@ <h2>
414481
<script src="static/scripts/script.js"></script>
415482
<script src="static/scripts/time-selector.js"></script>
416483
<script src="static/scripts/query-chart.js"></script>
484+
<script src="static/scripts/shore-chart.js"></script>
417485
<script src="static/scripts/main.js"></script>
418486
<!-- build:js static/scripts/all.js -->
419487
<!-- endbuild -->

0 commit comments

Comments
 (0)