D3 Examples - Radial Boxplot

Radial Boxplot

Boxplots are a great way to quickly summarize probability distributions using a high data-ink ratio.

At LiquidLandscape, we toyed around with the idea of a boxplot for continuous data, in particular, cyclical data. We came up with a natural extension, the radial boxplot. It's easy to imagine how one would look once you hear its name.

Notes

Sample data from the Data Canvas - Sense Your City project. Taken from San Francisco between 1/1/15 and 4/1/15.

rbox.js uses a crossfilter.

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
    body {
      font: 10px sans-serif;
    }
​
    .axis line {
      stroke: #000;
    }
​
    .axis path {
      fill: none;
      stroke: #000;
    }
​
    .layer {
      stroke: black;
      fill: none;
    }
​
    .outlier {
      stroke: black;
      fill: none;
      opacity: 0.3;
    }
​
    .axis + .axis g text {
      display: none;
    }
​
</style>
<body>
    <div id="rbox1" class="rbox"></div>
​
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.11/crossfilter.js"></script>
    <script src="rbox.js"></script>
    <script>
        var formatDate = d3.time.format("%a"),
            formatDay = function(d) { return formatDate(new Date(2007, 0, d)); },
            formatHourX = d3.time.format("%H"),
            formatHour = function(d) { return formatHourX(new Date(2007, 0, 0, d)); }
        ;
​
​
        d3.csv("san-francisco.csv", toType, function(error, csv) {
            var metric = "temperature",
                xf = toXf(csv, metric);
​
            var rbox1 = rbox()
                .width(500).height(500)
                .dimension(xf.day).group(xf.days)
                .axisText(formatDay)
                .label("SF Temp 1/1/15~4/1/15")
                .scaleOverride([5,35]);
​
            var chart = d3.selectAll("#rbox1").call(rbox1);
            console.log("should be done");
        });
​
        function toXf(csv, metric) {
            var data = crossfilter(csv),
                all = data.groupAll(),
                hour = data.dimension(function(d) { return Math.floor((d.day % 1) * 24); }),
                hours = setReduceStats(hour.group(Object), metric),
                day = data.dimension(function(d) { return d.day; }),
                days = setReduceStats(day.group(Object), metric),
                date = data.dimension(function(d) { return d.date; }),
                dates = date.group(d3.time.day);
            return {all:all, hour:hour, hours:hours, day:day, days:days, date:date, dates:dates};
        }
​
        function toType(d) {
            var date = new Date(Date.parse(d.timestamp));
            d.day = (date.getDay() + date.getHours() / 24) % 7; // [0, 7)
            d.date = date;
            d.longitude = +d.longitude;
            d.latitude = +d.latitude;
            d.temperature = +d.temperature;
            d.humidity = +d.humidity;
            d.light = +d.light;
            d.dust = +d.dust;
            d.airquality_raw = +d.airquality_raw;
            return d;
        }
​
    </script>
​
</body>
​
    