Tag: histogram

Visualising Solar Generation Data in a Custom Histogram using D3.js

Using the “brush” feature of the D3 Javascript library again proves handy for creating an interactive, animated histogram.  This type of visualisation helps to analyse and explore the distribution of time-series data.

For this demo, home solar PV generation data has been obtained from United Energy’s Energy Easy portal in CSV format.  For the sake of convenience in dealing with the raw data which usually comes in half-hourly intervals, this data has been loaded in to a Pentaho data warehouse instance (more details in a later post, perhaps!) and converted to day-by-day figures.

D3 - Interactive Histogram - Preparing Solar PV generation data with Saiku
Preparing Solar PV generation data with Saiku

Analysis can help explore whether solar panels are getting less efficient over time, or even determine what a “good” day of production is like in summer vs winter (by looking at the relevant frequency of each in the histogram).

Features:

  • Drag and scroll date region which affects histogram above:
    D3 - Interactive Histogram - Selectable Date Range
  • Changeable histogram buckets:
    D3 - Interactive Histogram - Adjustable Buckets
  • Snap-shotting of one selected date range for visual comparison with another (e.g. summer vs winter comparison):
    D3 - Interactive Histogram - Summer vs Winter Comparison

Key techniques – how it’s achieved:

  1. Data is embedded into the HTML page:

    <pre id=”csvdata”>
    Day,Quantity
    2013-01-01,9.288
    2013-01-02,10.494
    2013-01-03,7.376
    …
    2014-12-29,3.832
    2014-12-30,7.752
    2014-12-31,7.212
    </pre>

    It’s hidden visually using the CSS display:none directive…

    #csvdata {
    display: none;
    }

    …and then read into a Javascript variable for display and computation via D3.

    var raw = d3.select(“#csvdata”).text();
    var dataset_copy = d3.csv.parse(raw);

  2. Maximum value is found in the selected region of the dataset:

    max = d3.max(dataset, function (d) {    return +d.Quantity;});

    …histogram is created based on maximum value:

    // Generate a histogram using uniformly-spaced bins.
    datasetHist = d3.layout.histogram()
    .frequency(false)

    .range([0, max])
    .bins(buckets)
    (dataset.map(function (d) {

    return d.Quantity;
    }));

  3. An HTML form input slider is used for selection of number of buckets:

        240px; text-align: right; font-size: 10px;font-family: sans-serif;”>Number of buckets: 10

    </label>
    nBuckets”>

    Value of slider is passed into Javascript (to variable “buckets”) via this code:

    d3.select(“#nBuckets”).on(“input”, function () {
    buckets = +this.value;
    d3.select(“#nBuckets-value”).text(+this.value);
    clearSnapshot();
    render();
    });

Demo / code:

Try out the demo and check out the code here:
http://jsfiddle.net/hzmj24d1/

Advertisement