Step 13: Declare sources and show instructions again¶
In this step, we are going to declare the sources we used for the map and add the possibility to return to the instructions after showing the details of a feature.
Contents
Return to instructions¶
Right now the instructions are only visible when the page is first loaded. After clicking on a feature the instructions are hidden and there is no way to bring them back.
We will now add a button to close the details and bring back the initial instructions.
First, we create a button as part of the Mustache template for the details of a feature. To do this, we reduce the number of columns the table is using up from 6 to 5. This makes room for one single column after the table which contains the button. Notice the column
class name for single column (as opposed to columns
for multiple columns).
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 | <!-- ... -->
<!-- Mustache template, rendered later to show the details of a feature -->
<script id="template" type="x-tmpl-mustache">
<h3 class="six columns">{{ name }}</h3>
<table class="five columns">
<tr>
<th>Total area:</th>
<td>{{ area }} km²</td>
</tr>
<tr>
<th>Urban area:</th>
<td>{{ urban }} %</td>
</tr>
<tr>
<th>Agricultural area:</th>
<td>{{ agriculture }} %</td>
</tr>
<tr>
<th>Forest area:</th>
<td>{{ forest }} %</td>
</tr>
<tr>
<th>Unproductive area:</th>
<td>{{ unproductive }} %</td>
</tr>
</table>
<a href="#" id="close-details" class="one column" onclick="hideDetails(); return false;">❌</a>
</script>
<!-- ... -->
|
Now we need to define the function hideDetails()
which will hide the details container and show the initial instructions container again.
158 159 160 161 162 163 164 165 166 167 168 169 170 | // ...
/**
* Hide the details <div> container and show the initial content instead.
*/
function hideDetails() {
// Hide the details
d3.select('#details').classed("hidden", true);
// Show the initial content
d3.select('#initial').classed("hidden", false);
}
// ...
|
Lastly, we apply some styling to the button.
47 48 49 50 51 52 53 54 55 56 57 58 59 60 | /* ... */
#close-details {
color: #FA5858;
text-decoration: none;
font-size: 4rem;
text-align: right;
line-height: 4.5rem;
}
#close-details:hover {
color: red;
}
/* ... */
|
Next
Proceed to Step 14: Map legend.
Code¶
- For reference, the file
index.html
after step 13: https://github.com/lvonlanthen/data-map-d3/blob/step-13/index.html
- For reference, the file
- For reference, the file
style.css
after step 13: https://github.com/lvonlanthen/data-map-d3/blob/step-13/style.css
- For reference, the file
- For reference, the file
map.js
after step 13: https://github.com/lvonlanthen/data-map-d3/blob/step-13/map.js
- For reference, the file
- The diff view of step 12 and step 13:
https://github.com/lvonlanthen/data-map-d3/compare/step-12...step-13?diff=split