D3 Examples - Circular Brush 3

Circular Brush 3

An example of d3.svg.circularBrush that allows you to select a range of months, days of the week and/or hours.

A circular brush may seem like a novelty, but the reality is that we deal with cyclical data all the time, and traditional linear selectors are ill-suited for that kind of data. You can't select winter on a linear brush with January on the left and December on the right, nor could you select commonplace things like "nighttime" or "three day weekend" on default linear brushes.

There are other cyclical datatypes besides time, but they make for good examples. I guess the Mayans were right.

xxxxxxxxxx
 
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
  <title>Circular Brush Selecting Months, Days, Hours</title>
  <meta charset="utf-8" />
</head>
<style>
​
  #viz, svg {
    width: 1000px;
    height: 1000px;
  }
​
  #info {
    position: absolute;
    left:20px;
    top:0px;
  }
​
  .resize {
    fill-opacity: .5;
    cursor: move;
    stroke: black;
    stroke-width: 1px;
  }
​
  .extent {
    fill-opacity: .25;
    fill: rgb(205,130,42);
    cursor: hand;
    stroke: black;
    stroke-width: 1px;
  }
​
  .e {
    fill: rgb(111,111,111);
    cursor: move;
  }
​
  .w {
    fill: rgb(169,169,169);
    cursor: move;
  }
​
  path.piehours {
      fill: rgb(246,139,51);
    stroke: black;
    stroke-width: 1px;
  }
​
  g.hoursbrush .extent {
    fill: rgb(225,50,42);
  }
​
  g.monthsbrush .extent {
    fill: rgb(185,200,42);
  }
​
  p {
    font-weight: 900;
    font-family: helvetica, sans;
    pointer-events: none;
  }
  
</style>
<script>
​
​
function makeViz() {
​
  days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
  months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
​
  hours = function(rawHours) {
    var _suffix = "AM";
    if (rawHours > 12) {
      rawHours = rawHours - 12;
      _suffix = "PM"
    }
    return rawHours + _suffix
  }
​
  hoursbrush = d3.svg.circularbrush()
  .range([1,24])
  .innerRadius(20)
  .outerRadius(60)
  .on("brush", pieBrush);
​
  daysbrush = d3.svg.circularbrush()
  .range([0,6])
  .innerRadius(80)
  .outerRadius(120)
  .on("brush", pieBrush);
​
  monthsbrush = d3.svg.circularbrush()
  .range([0,11])
  .innerRadius(140)
  .outerRadius(180)
  .on("brush", pieBrush);
​
  d3.select("svg")
  .append("g")
  .attr("class", "hoursbrush")
  .attr("transform", "translate(250,250)")
  .call(hoursbrush);
​
  d3.select("svg")
  .append("g")
  .attr("class", "daysbrush")
  .attr("transform", "translate(250,250)")
  .call(daysbrush);
​
  d3.select("svg")
  .append("g")
  .attr("class", "monthsbrush")
  .attr("transform", "translate(250,250)")
  .call(monthsbrush);
​
  function pieBrush() {
    var _h = hoursbrush.extent();
    var _d = daysbrush.extent();
    var _m = monthsbrush.extent();
​
    d3.select("#hours")
    .html("Between " + hours(Math.round(_h[0])) + " and " + hours(Math.round(_h[1])) + "")
​
    d3.select("#days")
    .html("" + days[Math.round(_d[0])] + " through " + days[Math.round(_d[1])] + "")
​
    d3.select("#months")
    .html("From " + months[Math.round(_m[0])] + " till " + months[Math.round(_m[1])] + "")
  }
​
​
​
}
​
</script>
<body onload="makeViz()">
<div id="viz"><svg></svg><div id="info"><p id="hours">Between 1AM and Midnight</p><p id="days">Between Monday and Sunday</p><p id="months"></p></div></div>
<footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="d3.svg.circularbrush.js" charset="utf-8" type="text/javascript"></script>
</footer>
</body>
</html>
    