Skip to content

Instantly share code, notes, and snippets.

@KatiRG

KatiRG/index.html

Last active February 21, 2020 18:29
Show Gist options
  • Save KatiRG/aabde984b80df599041b4e7691c6d963 to your computer and use it in GitHub Desktop.
Save KatiRG/aabde984b80df599041b4e7691c6d963 to your computer and use it in GitHub Desktop.
Download ZIP
Demonstrate d3 enter-update-exit pattern for divs
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 16px sans-serif;
margin: 50px;
}
#pudomap-legend {
margin-top: 30px;
}
.legend-pu {
border: 1px solid #000;
background-color: #e66101;
}
.legend-do {
border: 1px solid #808080;
background-color: #5e3c99;
}
.legend-puMax {
border: 1px solid #747474;
background-color: #fdb863;
}
.legend-puMid {
border: 1px solid #747474;
background-color: #f7f7f7;
}
.legend-puMin {
border: 1px solid #747474;
background-color: #b2abd2;
}
.legend div span {
border-radius: 50%;
display: inline-block;
height: 12px;
margin-right: 5px;
width: 12px;
}
</style>
<body>
<div class="row">
<div role="region" class="menu" id="for-type" aria-live="polite">
<label for="tod"></label>
<select id="pudo-menu" class="form-control">
<option value="pudo" selected="selected">Pick-ups & Drop-offs</option>
<option value="pu">Pick-ups</option>
<option value="do">Drop-offs</option>
</select>
</div>
</div>
<div class="row">
<div id="pudomap-legend" class="legend">
</div>
</div>
<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
const legendTexts = {
"pu": [
{id: 1, text: "Pick-ups only", span:"legend-pu"}
],
"do": [
{id: 5, text: "Drop-offs only", span:"legend-do"}
],
"pudo": [
{id: 1, text: "Pick-ups only", span:"legend-pu"},
{id: 2, text: "Pick-ups > 55%", span:"legend-puMax"},
{id: 3, text: "Pick-ups 45&ndash;55%", span:"legend-puMid"},
{id: 4, text: "Pick-ups < 45%", span:"legend-puMin"},
{id: 5, text: "Drop-offs only", span:"legend-do"}
]
}
plotPudoLegend = function(data) {
const dataLayer = d3.select("#pudomap-legend");
let root = dataLayer
.selectAll(".levels", function(d) {
return d.id; // Binds data by id
})
.data(data);
// Add div nodes
const newGroup = root
.enter()
.append("div")
.attr("class", "levels")
.attr("id", function(d, i) {
return `lev${i}`;
});
// Add span under each div node
newGroup
.append("span")
.attr("class", function(d, i) {
return d.span;
});
// Add text for each NEW div
newGroup
.append("text")
.html(function(d) {
return d.text;
});
// Update span class of EXISTING div
root.select("span")
.attr("class", function(d) {
return d.span;
});
// Update text of EXISTING div
root.select("text")
.html(function(d) {
return d.text;
});
root.exit().remove();
}
// -----------------------------------------------------------------------------
function uiHandler(event) {
if (event.target.id === "pudo-menu") {
whichPUDO = event.target.value; // "pudos" initially
plotPudoLegend(legendTexts[whichPUDO]); // Update map legend
}
}
plotPudoLegend(legendTexts["pudo"]);
$(document).on("change", uiHandler);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment