D3 Examples - Average private rents, London 2012 and 2013

Average private rents, London 2012 and 2013

Pick a year, and the rental data as well as the map colours are updated.

##Sources:

Rental data
London Datastore (london.gov.uk): Average Private Rents, Borough. Select gross monthly data - 12 months to Q3 2012 and 2013 - is used.

Map data
londonBoroughs.json is based on John Sandall's maps of UK Council boundaries.

Colors
Greys were generated by Cynthia Brewer's Color Brewer project.

Inspired by this post by Stephen Whitworth and borrowing his application of a center to the map projection.

xxxxxxxxxx
 
<!doctype html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <link rel="stylesheet" href="style.css">
    <title>Average rent by London borough, 2012 and 2013</title>
</head>
<body>
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="jquery-2.0.3.min.js"></script>
    <script src="map.js"></script>
​
    <article>
        <div id="tooltip" class="hidden">
         <p id="averageRent"></p>
        </div>
        
    </article>
    <select id="yearSelect">
          <optgroup label="Select a year">
            <option value="twentytwelve">Average rent, 12 months to Q3 2012</option>
            <option value="twentythirteen">Average rent, 12 months to Q3 2013</option>
          </optgroup>
    </select>     
</body>
​
    