topojson
--width 960
--height 500
--margin 20
--properties name=NAME
--properties code=GSS_CODE
-o borough.json
-- borough=London_Borough_Excluding_MHW.shp
Traffic flow London
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
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); } | |
</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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment