In this section, we will create a minimal web page that uses the windmill package. We begin by creating an empty directory, initializing the repository, and creating a README.md file. We create the bower.json file using bower init. We will install bootstrap to use it in our web page:

$ bower install --save bootstrap

This will download bootstrap and its dependencies to the bower_components directory. We will install the windmill library using the Git endpoint of the repository:

$ bower install --save https://github.com/pnavarrc/windmill.git

This will download the current version of windmill and the version of D3 on which windmill depends. The contents of the bower_components directory are as follows:

bower_components/
   bootstrap/
   d3/
   jquery/
   windmill/

In the index page, we will display the average wind speed in a certain city during 2013. We will store the data in the wind.csv file located in the data directory. The CSV file has three columns that display the data (MM/DD/YY), the hour of the measurement, and the average speed in meters per second:

Date,Hour,Speed
1/1/13,1,0.2554
1/1/13,2,0.1683
...

In the header of the index file, we include D3 and the windmill CSS and JavaScript files:

<link href="/bower_components/windmill/css/windmill.css" rel="stylesheet">

<script src="/bower_components/d3/d3.min.js" charset="utf-8"></script>
<script src="/bower_components/windmill/windmill.min.js"></script>

In the body of the page, we add the title and a container div:

<div class="container">
  <h1>Wind Speed</h1>
  <div id="chart01"></div>
</div>

We create and configure the chart and layout. We want to display the average wind speed by month and hour of the day. We set the rows to be the hours, the columns to return the month number, and the value to return the speed. We will use the average function to aggregate values with the same hour and month:

        // Aggregation function (average)
        function average(values) {
            var sum = 0;
            values.forEach(function(d) { sum += d; });
            return sum / values.length;
        }

        // Matrix Layout
        var matrix = windmill.layout.matrix()
            .row(function(d) { return +d.Hour; })
            .column(function(d) { return +d.Date.getMonth(); })
            .value(function(d) { return +d.Speed; })
            .aggregate(average);

We create and initialize the heat map chart, setting the width, height, and color extent of the chart:

        // Create and configure the heatmap chart
        var heatmap = windmill.chart.heatmap()
            .column(function(d) { return d.col; })
            .width(700)
            .height(350)
            .colorExtent(['#ccc', '#222']);

We load the data using d3.csv and parse the dates. We select the container div and bind the grouped data, as follows:

// Load the CSV data
d3.csv('/data/wind.csv', function(error, data) {

    // Handle errors getting or parsing the data
    if (error) { return error; }
        // Parse the dates
        data.forEach(function(d) {
            d.Date = new Date(d.Date);
        });

    // Create the heatmap chart in the container selection
    d3.select('div#chart01')
        .data([matrix(data)])
        .call(heatmap);
});

The resulting chart will display the variations of wind speed as a function of the hour of the day and the month. We can see that the wind is stronger between 2 pm and 8 pm and that it is weaker between March and September.

A heat map of the average wind speed by hour and month for 2013