Skip to content

Commit

Permalink
Merge pull request #12 from Deltares/legend
Browse files Browse the repository at this point in the history 
Legend
  • Loading branch information
@SiggyF
SiggyF authored Apr 26, 2018
2 parents 6dbbb25 + b8c6fd0 commit 37c278f
Show file tree
Hide file tree
Showing 6 changed files with 261 additions and 18 deletions.
2 changes: 1 addition & 1 deletion app/static/scripts/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@ ee.initialize(null, null, function () {
queryMap = true;
});

$('#info-close-button').click(function () {
$('.info-close-button').click(function () {
$('#info-box').transition('slide right');
//$('#twitter-timeline-box').transition('slide right');
$('#info-button').toggleClass('active');
Expand Down
17 changes: 16 additions & 1 deletion app/static/scripts/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -236,7 +236,21 @@ function clickShorelineProfile(pt) {
var feature = featureProxy.getInfo();
// d is lost in translation
var id = _.get(feature, 'properties.transect_i');
console.log('show info for', feature.properties);
if (_.isNil(id)) {
return;
}

var url = 'https://storage.googleapis.com/shoreline-monitor/features/030/000/BOX_030_000.json';
$.getJSON(url, function(data) {
console.log('data', data);
var feature = _.first(_.filter(data.features, function(feature) {
return _.get(feature, 'properties.transect_id', id);
}));
createShoreChart(feature);
$('#chart-modal')
.show();
});
console.log('id', id);
return id;
}

Expand Down Expand Up @@ -762,6 +776,7 @@ function initializeMap() {

// hide all boxes
$('#info-box .info-text').hide();
$('#info-box .extra.content').hide();
// show the relevant ones
_.each(datasets || ['surface-water'], function(dataset) {
$('*[data-dataset=' + '"' + dataset + '"' + ']').show();
Expand Down
123 changes: 123 additions & 0 deletions app/static/scripts/shore-chart.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
function createShoreChart(json) {

var elementId = 'chart-modal' ;

// data from global shore json file (single location)
var props = json.properties;
var intercept = props.intercept;
var dt = props.dt;
var dist = props.distances;

var data = [];
$.each(dist, function( index, value ) {
var item = {};
item.value = dist[index] - intercept;
item.date = new Date(1984 + dt[index], 0, 1);
if (dist[index] === -999) {
return;
}
data.push(item);
});

// D3js time series chart
var margin = {top: 20, right: 20, bottom: 20, left: 40},
width = 600 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;

// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);

// Define the axes
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(10);

var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(5);

// Define the line
var valueline = d3.svg.line()
.x(function (d) {
return x((d.date));
})
.y(function (d) {
return y(d.value);
});

// clear content
d3.select('#' + elementId)
.selectAll('*')
.remove();

// Adds the svg canvas
var svg = d3.select("#"+ elementId)
.append("svg")
.classed({'query-chart': true})
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");

// var tip = d3.tip()
// .attr('class', 'd3-tip')
// .offset([-10, 0])
// .html(function (d) {
// return 'Date: ' + formatDate(d.date) + ', Value: ' + d.value;
// });

// svg.call(tip);

var lineSvg = svg.append("g");

var focus = svg.append("g")
.style("display", "none");

// Scale the range of the data
x.domain(d3.extent(data, function (d) {
return d.date;
}));
y.domain(d3.extent(data, function (d) {
return d.value;
}));

// Add the dotsh.
svg.append("g")
.attr("class", "dots")
.selectAll("path")
.data(data)
.enter().append("path")
.attr("transform", function(d) { return "translate(" + x(d.date) + "," + y(d.value) + ")"; })
.attr("d", d3.svg.symbol()
.size(40));


// Add the X Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);

// Add the Y Axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);

// append the x line
focus.append("line")
.attr("class", "x")
.style("stroke", "blue")
.style("stroke-dasharray", "3,3")
.style("opacity", 0.5)
.attr("y1", 0)
.attr("y2", height);

// append the y line
focus.append("line")
.attr("class", "y")
.style("stroke", "blue")
.style("stroke-dasharray", "3,3")
.style("opacity", 0.5)
.attr("x1", width)
.attr("x2", width);
}
31 changes: 31 additions & 0 deletions app/static/styles/colormaps.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
.legend-box {
width: 1em;
min-width: 10px;
}
.legend {
display: flex;
margin-top: 12px;
margin-bottom: 12px;
}
.RdYlGn {
.q0-5{
fill: rgb(215,25,28);
background-color: rgb(215,25,28);
}
.q1-5{
fill: rgb(253,174,97);
background-color: rgb(253,174,97);
}
.q2-5{
fill: rgb(255,255,191);
background-color: rgb(255,255,191);
}
.q3-5{
fill: rgb(166,217,106);
background-color: rgb(166,217,106);
}
.q4-5 {
fill: rgb(26,150,65);
background-color: rgb(26,150,65);
}
}
8 changes: 7 additions & 1 deletion app/static/styles/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ $button-shadow: rgba($black, .3) 0 1px 4px -1px;
// bower:scss
// endbower


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

#info-close-button {
.info-close-button {
background: transparent;
position: absolute;
right: 0px;
Expand Down Expand Up @@ -504,3 +505,8 @@ $button-shadow: rgba($black, .3) 0 1px 4px -1px;
font-size: 11px;
text-shadow: 1px 1px 0px black, -1px -1px 0px black, 1px -1px 0px black, -1px 1px 0px black;
}


#chart-modal.ui.modal {
top: 20%;
}
98 changes: 83 additions & 15 deletions app/templates/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,7 @@

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

{#
<script src="http://d3js.org/d3.v3.min.js"></script>
#}

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

Expand All @@ -41,6 +39,7 @@

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

<link rel="stylesheet" href="static/styles/colormaps.css">
<link rel="stylesheet" href="static/styles/chart.css">
<link rel="stylesheet" href="static/styles/time-selector.css">
<link rel="stylesheet" href="static/styles/searchbox.css">
Expand Down Expand Up @@ -231,15 +230,74 @@
<div id="info-box" class="ui card">
<div class="content info-text" data-dataset="shoreline">
<h2>
Shoreline changes (1985-2016)
Long-term Shoreline Changes (1984-2016)
</h2>

<p>
Red and green colors represent sandy coastlines where erosion occured during the last 30 years.
Yellow coasts represent sandy coastlines without erosion.
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>
The bars represent the erosion/accretion along sandy coasts, every 500m, over the period 1984-2016.
Green bars indicate where shoreline accretion has occurred (natural accretion, land reclamation, nourishments).
Red bars indicate erosive shorelines.
</p>
<div class="RdYlGn legend">
<span>-10m/yr&nbsp;</span>
<div class="legend-box q0-5" title="-10">&nbsp;</div>
<div class="legend-box q1-5" title="-5">&nbsp;</div>
<div class="legend-box q2-5" title="0">&nbsp;</div>
<div class="legend-box q3-5" title="5">&nbsp;</div>
<div class="legend-box q4-5" title="10">&nbsp;</div>
<span>&nbsp;10m/yr</span>
</div>
<p>

<!-- The heatmap shows the hotspots of erosive (red) and accretive (green) shorelines in the world. -->

The results of the global analysis and methods can be found in:
<a href="https://www.nature.com/articles/s41598-018-24630-6">Luijendijk et al., 2018, Scientific Reports</a>

<br>
For inquiries please fill in this <a href="https://docs.google.com/forms/d/e/1FAIpQLSfd6VpTH5WPaHrUm1ZQfN2FQ6az77Wd7BykEt-orWMMpIVYFA/viewform">form</a>.
</p>
</div>

<div class="extra content info-buttons-content" data-dataset="shoreline">
<div class="left floated like">
<div>
<a class="ui small primary button"
href="https://twitter.com/beachmonitor" title="Follow on Twitter">
<i class="twitter icon"></i>
</a>
</div>

<div>
<a class="ui small primary button" id="github-button"
href="https://github.com/deltares/aqua-monitor" title="Fork or Follow me on GitHub">
<i class="github icon"></i>
</a>
</div>

<div>
<a class="ui small button"
href="mailto:[email protected]?subject=Shoreline Monitor Feedback" title="Get in touch!">
<i class="mail icon"></i>
</a>
</div>

<div>
<a class="ui small button" id="terms-button" href="https://www.deltares.nl/en/disclaimer/"
title="Terms of Use">
<i class="copyright icon"></i>
</a>
</div>
</div>

<div class="right floated star">
<a class="ui small button info-close-button">
<i class="close icon"></i>
</a>
</div>
</div>


<div class="content info-text" data-dataset="surface-water">
<h2>
Surface water changes (1985-2016)
Expand All @@ -258,30 +316,30 @@ <h2>
</p>
</div>

<div class="extra content info-buttons-content">
<div class="left floated like" id="info-buttons">
<div id="twitter-div">
<a class="ui small primary button" id="twitter-button"
<div class="extra content info-buttons-content" data-dataset="surface-water">
<div class="left floated like">
<div>
<a class="ui small primary button"
href="https://twitter.com/aqua_monitor" title="Follow on Twitter">
<i class="twitter icon"></i>
</a>
</div>

<div id="github-div">
<div>
<a class="ui small primary button" id="github-button"
href="https://github.com/deltares/aqua-monitor" title="Fork or Follow me on GitHub">
<i class="github icon"></i>
</a>
</div>

<div id="contact-div">
<a class="ui small button" id="contact-button"
<div>
<a class="ui small button"
href="mailto:[email protected]?subject=Aqua Monitor Feedback" title="Get in touch!">
<i class="mail icon"></i>
</a>
</div>

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

<div class="right floated star">
<a class="ui small button" id="info-close-button">
<a class="ui small button info-close-button">
<i class="close icon"></i>
</a>
</div>
</div>
</div>

<!-- Modal windows -->

<div class="ui modal" id="chart-modal">
<div class="right floated star">
<a class="ui small button info-close-button">
<i class="close icon"></i>
</a>
</div>
</div>
<!--
<div id="slider-div-morph">
<input id="slider-morph" data-slider-tooltip="hide" type="text"/>
Expand Down Expand Up @@ -414,6 +481,7 @@ <h2>
<script src="static/scripts/script.js"></script>
<script src="static/scripts/time-selector.js"></script>
<script src="static/scripts/query-chart.js"></script>
<script src="static/scripts/shore-chart.js"></script>
<script src="static/scripts/main.js"></script>
<!-- build:js static/scripts/all.js -->
<!-- endbuild -->
Expand Down

0 comments on commit 37c278f

Please sign in to comment.