Month selector demo

<!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>

#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>

<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>

// 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>

Modified http://mbostock.github.com/d3/d3.js to a secure url

https://mbostock.github.com/d3/d3.js