D3 Examples - Month selector demo

xxxxxxxxxx
 
<!DOCTYPE html>
<html><head>
<title>Month control</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.10.3/d3.v2.js"></script>
<script type="text/javascript" src="month-selector.js"></script>
​
<style type="text/css">
​
#monthControl { font: 16px sans-serif; }
#monthControl g.month { cursor: pointer; }
#monthControl g.month>path { fill: #ccc; stroke: black; stroke-width: 0.5px;}
#monthControl g.month>path.selected { fill: #ee3; }
#monthControl circle.center { fill: white; }
#monthControl g.month>text { text-anchor: middle; fill: #666; }
#monthControl circle.backdrop { fill: black; }
​
body { font-family: Helvetica, Arial, sans-serif;  }
#display { font: 16px; font-family: Monaco, monospace; }
</style></head>
​
<body>
​
<div id="monthControlDiv"></div>
​
<div id="display"></div>
​
<div style="width: 15em;">
​
<p>A month selector control in D3, inspired by the 
<a href="https://oakland.crimespotting.org/">CrimeSpotting</a> hour of day control.
Click each wedge to toggle the selection for that month.
Click the center to start playback.</p>
​
<p>By <a href="https://www.somebits.com/weblog/">Nelson Minar</a></p></div>
​
<script type="text/javascript">
​
// Hacky demo function for displaying the selection
function displaySelection(months) {
    var t = "";
    for (var i = 0; i < months.length; i++) {
        t += months[i] ? "JFMAMJJASOND"[i] : "-";
    }
    d3.select("#display").text(t);
}
​
// Create the control
var control = new monthControl(displaySelection);
​
// And initialize our display to what is selected
displaySelection(control.selected());
​
// Install the control
control.install("#monthControlDiv");
​
</script>
​
</body></html>
​
    