Skip to content

Instantly share code, notes, and snippets.

@bricedev
Last active January 8, 2020 02:25
  • Star 1 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save bricedev/c98a80a2638ae35e1257 to your computer and use it in GitHub Desktop.
Traffic flow London
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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
<!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>

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