forked from bricedev's block: Traffic flow London
Last active
January 11, 2017 12:08
-
-
Save Saminu/63d299a3cc506075d105a1ea28494523 to your computer and use it in GitHub Desktop.
Understanding the Impact of the TFL Strike
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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); } | |
.highlight{ | |
fill: black!important; | |
opacity: .8; | |
-webkit-opacity: 0.8; | |
-moz-opacity: 0.8; | |
filter:alpha(opacity=0); | |
} | |
#tooltip { | |
position: absolute; | |
width: 200px; | |
height: auto; | |
padding: 5px; | |
background-color: black; | |
-webkit-border-radius: 5px; | |
-moz-border-radius: 5px; | |
border-radius: 5px; | |
pointer-events: none; | |
color: white; | |
} | |
#tooltip.hidden { | |
display: none; | |
} | |
#tooltip p { | |
margin: 0; | |
font-family: sans-serif; | |
font-size: 16px; | |
line-height: 20px; | |
} | |
</style> | |
<body> | |
<div id="tooltip" class="hidden"> | |
<p id="averageTraffic"></p> | |
</div> | |
<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) | |
.on("mouseover", function(d){ | |
var coordinates = d3.mouse(this); | |
d3.select(this).classed("highlight", true); | |
d3.select("#tooltip") | |
.style({ | |
"left": coordinates[0] - 100 + "px", | |
"top": coordinates[1] + "px" | |
}) | |
.classed("hidden",false) | |
.select("#averageTraffic") | |
.append("text") | |
.classed("hidden",false) | |
.text(function(){ | |
return d.properties.name; | |
}) | |
}) | |
.on("mouseout", function(){ | |
d3.select(this).classed("highlight", false); | |
d3.select("#averageTraffic text").remove(); | |
d3.select("#tooltip").classed("hidden",true) | |
}) | |
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> |
topojson
--width 960
--height 500
--margin 20
--properties name=NAME
--properties code=GSS_CODE
-o borough.json
-- borough=London_Borough_Excluding_MHW.shp
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment