block by bricedev c98a80a2638ae35e1257

Traffic flow London

Full Screen

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
}

.year {
  font: 500 196px "Helvetica Neue";
  fill: #aaa;
}

.overlay {
  fill: none;
  pointer-events: all;
  cursor: ew-resize;
}

.q0-9 { fill:rgb(247,251,255); }
.q1-9 { fill:rgb(222,235,247); }
.q2-9 { fill:rgb(198,219,239); }
.q3-9 { fill:rgb(158,202,225); }
.q4-9 { fill:rgb(107,174,214); }
.q5-9 { fill:rgb(66,146,198); }
.q6-9 { fill:rgb(33,113,181); }
.q7-9 { fill:rgb(8,81,156); }
.q8-9 { fill:rgb(8,48,107); }

</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
<script>

var width = 960,
    height = 700;

var quantile = d3.scale.quantile()
    .range(d3.range(9).map(function(i) { return "q" + i + "-9"; }));

var path = d3.geo.path()
    .projection(null);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var label = svg.append("text")
    .attr("class", "year")
    .attr("text-anchor", "middle")
    .attr("y", height - 24)
    .attr("x", width/2)
    .text(1993);

var box = label.node().getBBox();

var yearScale = d3.scale.linear()
    .domain([1993,2014])
    .range([box.x + 10, box.x + box.width - 10])
    .clamp(true);
var yearDomain = d3.range(1993,2014);

queue()
    .defer(d3.json, "borough.json")
    .defer(d3.csv, "flows.csv")
    .await(ready);

function ready(error, borough,flows) {
  if (error) throw error;
  
  quantileDomain = [];
  flows.forEach(function(d){ 
    yearDomain.forEach(function (year) { 
      quantileDomain.push(+d[year]); 
    });
  });
  quantileDomain.sort(d3.ascending);
  quantile.domain(quantileDomain);

  var borough = svg.append("g")
    .selectAll("path")
      .attr("class", "borough")
      .data(topojson.feature(borough, borough.objects.borough).features)
    .enter().append("path")
      .attr("class", function(d) { return quantile(flows.filter(function(flows) { return d.properties.code===flows["LA Code"]; })[0]["1993"]); })
      .style("stroke","black")
      .style("stroke-width",".5px")
      .attr("d", path)
    
  borough.append("title")
      .text(function(d) { return d.properties.name; });

  var overlay = svg.append("rect")
      .attr("class", "overlay")
      .attr("x", box.x)
      .attr("y", box.y)
      .attr("width", box.width)
      .attr("height", box.height)
      .on("mouseover", enableInteraction);

  svg.transition()
      .duration(15000)
      .ease("linear")
      .tween("year", tweenYear)
      .each("end", enableInteraction);

  function tweenYear() {
    var year = d3.interpolateNumber(1993, 2014);
    return function(t) { displayYear(year(t)); };
  };

  function displayYear(year) {
    label.text(Math.round(year));
    borough.attr("class",function(d) { return quantile(flows.filter(function(flows) { return d.properties.code===flows["LA Code"]; })[0][Math.round(year)]); })
  };

  function enableInteraction() {
    svg.transition().duration(0);
    overlay
      .on("mousemove", mousemove)
      .on("touchmove", mousemove);
    function mousemove() {
      displayYear(Math.round(yearScale.invert(d3.mouse(this)[0])));
    }
  };

};

d3.select(self.frameElement).style("height", height + "px");

</script>

flows.csv

LA Code,Local Authority,1993,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014
E09000001,City of London,200,203,204,209,213,217,216,211,204,195,193,198,193,196,192,177,169,166,162,157,156,160
E09000002,Barking and Dagenham,552,558,552,551,547,544,574,562,560,558,557,551,595,624,611,568,599,586,584,557,581,600
E09000003,Barnet,1548,1578,1577,1606,1633,1630,1668,1634,1645,1640,1653,1622,1634,1660,1641,1688,1639,1673,1587,1630,1648,1666
E09000004,Bexley,870,882,876,903,914,922,936,965,981,970,983,1004,997,979,968,951,950,929,902,900,886,910
E09000005,Brent,909,921,913,937,933,957,979,980,965,984,984,977,973,964,942,872,857,903,873,872,846,875
E09000006,Bromley,1264,1265,1263,1284,1296,1312,1326,1326,1346,1335,1340,1333,1315,1308,1282,1253,1236,1206,1200,1194,1197,1215
E09000007,Camden,619,624,627,623,625,628,635,612,605,595,593,574,510,512,512,495,498,478,466,445,443,450
E09000008,Croydon,1321,1339,1331,1339,1342,1353,1377,1349,1350,1338,1333,1311,1284,1280,1278,1212,1187,1156,1153,1147,1152,1166
E09000009,Ealing,1265,1279,1264,1286,1285,1288,1381,1381,1376,1372,1374,1343,1325,1321,1255,1244,1240,1217,1215,1172,1245,1215
E09000010,Enfield,1436,1472,1483,1515,1545,1547,1556,1579,1522,1535,1586,1559,1538,1601,1597,1543,1553,1582,1479,1561,1512,1577
E09000011,Greenwich,1081,1098,1093,1089,1102,1113,1143,1125,1128,1141,1151,1172,1159,1144,1133,1090,1082,1064,1079,1046,1037,1051
E09000012,Hackney,527,533,538,541,532,525,540,556,555,561,551,533,523,543,540,527,514,507,482,471,457,464
E09000013,Hammersmith and Fulham,579,579,587,595,580,582,585,590,600,602,599,600,579,594,591,562,567,554,531,500,513,506
E09000014,Haringey,618,623,626,627,627,627,637,625,619,615,619,601,601,603,602,572,554,544,539,532,530,538
E09000015,Harrow,592,602,600,606,609,621,636,627,628,653,639,636,627,620,608,597,581,565,569,579,569,573
E09000016,Havering,1360,1392,1407,1433,1450,1464,1532,1515,1507,1527,1434,1429,1465,1539,1502,1486,1521,1473,1480,1474,1510,1545
E09000017,Hillingdon,2051,2093,2107,2143,2197,2267,2306,2286,2238,2258,2215,2194,2170,2159,2127,2135,2164,2076,2036,2093,2129,2183
E09000018,Hounslow,1591,1622,1620,1652,1677,1697,1733,1687,1662,1657,1641,1647,1591,1616,1550,1535,1533,1491,1499,1500,1506,1525
E09000019,Islington,485,489,493,483,486,483,494,483,479,475,475,454,446,451,449,437,427,416,409,400,391,396
E09000020,Kensington and Chelsea,570,578,585,588,592,591,599,588,584,580,569,563,558,569,546,530,528,525,520,494,487,503
E09000021,Kingston upon Thames,983,996,986,1003,1001,1013,1025,1024,1002,986,988,982,971,940,949,925,925,978,901,898,890,889
E09000022,Lambeth,909,917,924,932,929,924,950,928,924,907,887,855,835,832,832,807,781,756,746,718,704,716
E09000023,Lewisham,850,859,864,869,870,874,890,884,883,879,873,848,835,831,830,809,793,775,772,753,734,744
E09000024,Merton,655,664,660,671,669,673,683,681,683,672,657,653,645,639,637,621,609,599,584,581,576,575
E09000025,Newham,857,863,868,874,894,886,927,908,893,877,882,901,931,960,970,951,975,944,904,886,834,889
E09000026,Redbridge,943,959,953,948,958,959,1030,1037,1053,1034,1021,1008,1061,1085,1079,1024,1028,1033,1106,1089,1084,1102
E09000027,Richmond upon Thames,884,895,887,894,898,904,922,905,902,899,892,880,860,847,845,816,798,778,766,781,772,778
E09000028,Southwark,850,859,867,864,870,868,893,874,877,867,849,827,820,819,832,794,784,762,751,715,698,708
E09000029,Sutton,697,706,704,703,709,715,735,720,722,721,715,702,700,687,692,640,639,615,612,609,605,615
E09000030,Tower Hamlets,895,901,906,901,916,911,927,954,947,953,964,948,936,970,980,944,943,950,904,864,863,857
E09000031,Waltham Forest,709,720,713,718,712,707,737,747,771,750,763,723,749,741,727,696,692,704,651,663,684,747
E09000032,Wandsworth,990,997,1002,1006,1020,1017,1039,1015,1016,993,974,954,935,837,891,863,828,836,795,787,763,751
E09000033,Westminster,1056,1075,1078,1069,1061,1078,1083,1067,1033,1009,992,1013,1016,1019,965,910,880,863,846,829,817,846

makefile.md

topojson \
    --width 960 \
    --height 500 \
    --margin 20 \
    --properties name=NAME \
    --properties code=GSS_CODE \
    -o borough.json \
    -- borough=London_Borough_Excluding_MHW.shp