Published
Edited
Jan 30, 2019
2 forks
1 star
html`
<div id="sliderContainer">
<input id="timeslide" type="range" min="0" max="11" value="0" step="1"/><br>
<span id="range">January</span>
</div>
`
html`
<style>
#label {
position: absolute;
left: 10px;
font-weight: 100;
font-family: "Proxima Nova", "Montserrat", sans-serif;
}
.hover {
fill: yellow;
}
#sliderContainer {
text-align: center;
top: 600px;
}
</style>
`
month = ["January","February","March","April","May","June","July","August","September","October","November","December"];
inputValue = null;
{
// when the input range changes update the value
d3.select("#timeslide").on("input", function() {
update(+this.value);
});
// update the fill of each SVG of class "incident" with value
function update(value) {
document.getElementById("range").innerHTML=month[value];
let inputValue = month[value];
d3.selectAll(".incident")
.attr("fill", dateMatch);
}
}
function dateMatch(data, value) {
var d = new Date(data.properties.OPEN_DT);
var m = month[d.getMonth()];
if (inputValue == m) {
this.parentElement.appendChild(this);
return "red";
} else {
return "#999";
};
}
function initialDate(d,i){
var d = new Date(d.properties.OPEN_DT);
var m = month[d.getMonth()];
if (m == "January") {
this.parentElement.appendChild(this);
return "red";
} else {
return "#999";
};
}
{
rodents.selectAll( "path" )
.data( rodentData.features )
.enter()
.append( "path" )
.attr("fill", initialDate)
.attr("stroke", "#ccc")
.attr("d", bos_geoPath)
.attr("class","incident")
.on("mouseover", function(d){
d3.select("h2").text(d.properties.LOCATION_STREET_NAME);
d3.select(this).attr("class","incident hover");
})
.on("mouseout", function(d){
d3.select("h2").text("");
d3.select(this).attr("class","incident");
});
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
