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.

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

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

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.11/crossfilter.js