Last active
March 24, 2016 00:31
-
-
Save majomo/46321f953839ef2c058d to your computer and use it in GitHub Desktop.
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> | |
| @import url(mapStyle.css); | |
| </style> | |
| <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
| <body> | |
| <!-- Table to hold the Divs --> | |
| <table border="0" cellpadding="10" style="overflow-y: scroll;"> | |
| <tr> | |
| <td><div id="table_container" class="csvTable"></div></td> | |
| <td><div id="map_container"></div></td> | |
| </tr> | |
| <div class="styled-select"> | |
| <select id = "data_sources" name="data_sources">> | |
| <option value="regDistBC.csv">regDistBC 2001</option> | |
| <option value="regDistBC2.csv">regDistBC 2006</option> | |
| <option value="regDistBC3.csv">regDistBC 2011</option> | |
| <!-- and so on... --> | |
| </select></div> | |
| </table> | |
| <script> | |
| // Based on http://public.johnnyotoole.fastmail.fm/county_map.html | |
| // Based on http://bl.ocks.org/mbostock/4699541 | |
| //Width and height | |
| var w = 600; | |
| var h = 750; | |
| var active; | |
| var jsonOutside; | |
| //Define map projection NB change to albers and changed zoom etc | |
| var projection = d3.geo.albers() | |
| .center([-3.5, 43.4]) | |
| .rotate([121,-11]) | |
| .scale(2400) | |
| .translate([w / 2, h / 2]); | |
| //Define path generator | |
| var path = d3.geo.path() | |
| .projection(projection); | |
| //Create SVG element | |
| var svg = d3.select("#map_container") | |
| .append("svg") | |
| .attr("width", w) | |
| .attr("height", h); | |
| // from colorbrewer (http://colorbrewer2.org/) | |
| //var colours = ["#BAE4B3", "#74C476", "#31A354", "#006D2C"]; | |
| //var colours = ["#fef0d9", "#fdcc8a", "#fc8d59", "#d7301f"]; | |
| var colours = ['#f1eef6','#d0d1e6','#a6bddb','#74a9cf','#3690c0','#0570b0','#034e7b']; | |
| // setup colours for choropleth | |
| var colScale = d3.scale.quantile() | |
| .domain([30000,100000]) | |
| .range(colours); | |
| svg.append("rect") | |
| .attr("width", w) | |
| .attr("height", h) | |
| .on("click", reset); | |
| var g = svg.append("g"); | |
| //Load in CSV data | |
| d3.csv("regDistBC.csv", function (data) { | |
| //Load in GeoJSON data | |
| d3.json("bcGeo.json", function (json) { | |
| // join csv data with json data and create | |
| json.features.forEach(function (d,i) { | |
| data.forEach(function (e,j) { | |
| if (d.properties.CDNAME === e.Region) { | |
| d.properties.value = +e.Result; | |
| }; | |
| }) | |
| }) | |
| jsonOutside = json; // pass json to a global so tableRowClicked has access | |
| var columns = ["Region", "Result"]; | |
| var table = d3.select("#table_container").append("table"), | |
| thead = table.append("thead"), | |
| tbody = table.append("tbody"); | |
| // append the header row | |
| thead.append("tr") | |
| .selectAll("th") | |
| .data(columns) | |
| .enter() | |
| .append("th") | |
| .text(function (column) { return column; }); | |
| // create a row for each object in the data | |
| var rows = tbody.selectAll("tr") | |
| .data(data) | |
| .enter() | |
| .append("tr"); | |
| // create a cell in each row for each column | |
| var cells = rows.selectAll("td") | |
| .data(function (row) { | |
| return columns.map(function (column) { | |
| return { column: column, value: row[column] }; | |
| }); | |
| }) | |
| .enter() | |
| .append("td") | |
| .text(function (d) { return d.value; } | |
| ) | |
| .on("click", function (d) { tableRowClicked(d); }); // added on click eventto td element NB you need to click on the cell with the conuty name | |
| // add extents (max and min) from data results for choropleth | |
| colScale.domain(d3.extent(data, function (d) { return d.Result; } )); | |
| //Bind data and create one path per GeoJSON feature | |
| g.selectAll("path") | |
| .data(json.features) | |
| .enter() | |
| .append("path") | |
| .attr("d", path) | |
| .attr("class", "feature") | |
| .attr("id", function (d) { return d.properties.CDNAME; }) // added id so click could work on id which is common between the json and csv data | |
| .on("click", function (d) { click(d); }) | |
| .style("stroke", "#242426") | |
| .style("fill", function (d,i) { return colScale(d.properties.value); }); // fill based on colour scale | |
| g.append("path") | |
| .data(json.features) | |
| .enter() | |
| .append("path") | |
| .attr("class", "mesh") | |
| .attr("d", path); | |
| }); | |
| }); | |
| function click(d) { | |
| if (active === d) return reset(); | |
| g.selectAll(".active").classed("active", false); | |
| d3.select("#"+d.properties.CDNAME).classed("active", active = d); // changed selection to id | |
| var b = path.bounds(d); | |
| g.transition().duration(750).attr("transform", | |
| "translate(" + projection.translate() + ")" | |
| + "scale(" + .95 / Math.max((b[1][0] - b[0][0]) / w, (b[1][1] - b[0][1]) / h) + ")" | |
| + "translate(" + -(b[1][0] + b[0][0]) / 2 + "," + -(b[1][1] + b[0][1]) / 2 + ")") | |
| .style("stroke", "#fff"); | |
| } | |
| function reset() { | |
| g.selectAll(".active").classed("active", active = false); | |
| g.transition().duration(750).attr("transform", ""); | |
| } | |
| function tableRowClicked(x) { | |
| jsonOutside.features.forEach(function (d) { // loop through json data to match td entry | |
| if (x.value === d.properties.CDNAME) { | |
| var region = d; | |
| click(d); // pass json element that matches td data to click | |
| }; | |
| }) | |
| var quantize = d3.scale.quantize() | |
| .domain([ 0, 0.15 ]) | |
| .range(d3.range(9).map(function(i) { return "q" + i + "-9"; })); | |
| ////// | |
| ////// | |
| } | |
| </script> | |
| </body> | |
| </html> |
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
| rect { | |
| fill: none; | |
| cursor: pointer; | |
| } | |
| .feature { | |
| fill: #ccc; | |
| cursor: pointer; | |
| } | |
| .mesh { | |
| fill: none; | |
| stroke: #fff; | |
| stroke-width: .5px; | |
| stroke-linejoin: round; | |
| } | |
| .csvTable table { | |
| border-collapse: collapse; | |
| text-align: left; | |
| width: 100%; | |
| } | |
| .csvTable { | |
| font: normal 12px/150% Arial, Helvetica, sans-serif; | |
| background: #fff; | |
| overflow: hidden; | |
| border: 1px solid #069; | |
| -webkit-border-radius: 3px; | |
| -moz-border-radius: 3px; | |
| border-radius: 3px; | |
| } | |
| .csvTable table td, .csvTable table th { | |
| padding: 3px 10px; | |
| } | |
| .csvTable table thead th { | |
| background: 0; | |
| filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#006699',endColorstr='#00557F'); | |
| background-color: #006D2C; | |
| color: #FFF; | |
| font-size: 15px; | |
| font-weight: 700; | |
| border-left: 1px solid #0070A8; | |
| } | |
| .csvTable table thead th:first-child { | |
| border: none; | |
| } | |
| .csvTable table tbody td { | |
| color: #00496B; | |
| border-left: 1px solid #E1EEF4; | |
| font-size: 12px; | |
| border-bottom: 1px solid #E1EEF4; | |
| font-weight: 400; | |
| } | |
| .csvTable table tbody td:first-child { | |
| border-left: none; | |
| } | |
| .csvTable table tbody tr:last-child td { | |
| border-bottom: none; | |
| } | |
| .csvTable tr:hover td { | |
| background-color: #069; | |
| color: white; | |
| } | |
| .styled-select select { | |
| background: transparent; | |
| font: normal 12px/150% Arial, Helvetica, sans-serif; | |
| width: 268px; | |
| padding: 5px; | |
| font-size: 16px; | |
| line-height: 1; | |
| border: 0; | |
| border-radius: 0; | |
| height: 34px; | |
| -webkit-appearance: none; | |
| } | |
| .styled-select { | |
| width: 240px; | |
| height: 34px; | |
| padding: 5px; | |
| overflow: hidden; | |
| background: url(http://i62.tinypic.com/2e3ybe1.jpg) no-repeat right #ddd; | |
| border: 1px solid #069; | |
| } | |
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
| Region | Result | |
|---|---|---|
| Alberni-Clayoquot | 84758 | |
| Bulkley-Nechako | 90796 | |
| Capital | 79754 | |
| Cariboo | 61059 | |
| Central Coast | 33581 | |
| Central Kootenay | 31834 | |
| Central Okanagan | 38438 | |
| Columbia-Shuswap | 96989 | |
| Comox Valley | 50595 | |
| Cowichan Valley | 85454 | |
| East Kootenay | 94018 | |
| Fraser Valley | 59144 | |
| Fraser-Fort George | 86059 | |
| Greater Vancouver | 93352 | |
| Kitimat-Stikine | 54318 | |
| Kootenay Boundary | 81382 | |
| Mount Waddington | 88416 | |
| Nanaimo | 91641 | |
| North Okanagan | 90504 | |
| Northern Rockies | 34699 | |
| Okanagan-Similkameen | 57954 | |
| Peace River | 62061 | |
| Powell River | 83302 | |
| Skeena-Queen Charlotte | 94868 | |
| Squamish-Lillooet | 37318 | |
| Stikine | 59350 | |
| Strathcona | 70620 | |
| Sunshine Coast | 86508 | |
| Thompson-Nicola | 50339 |
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
| Region | Result | |
|---|---|---|
| Alberni-Clayoquot | 87689 | |
| Bulkley-Nechako | 36138 | |
| Capital | 87672 | |
| Cariboo | 53630 | |
| Central Coast | 52538 | |
| Central Kootenay | 36494 | |
| Central Okanagan | 51570 | |
| Columbia-Shuswap | 43593 | |
| Comox Valley | 32162 | |
| Cowichan Valley | 84967 | |
| East Kootenay | 75148 | |
| Fraser Valley | 55556 | |
| Fraser-Fort George | 71227 | |
| Greater Vancouver | 83120 | |
| Kitimat-Stikine | 52549 | |
| Kootenay Boundary | 71594 | |
| Mount Waddington | 92677 | |
| Nanaimo | 33533 | |
| North Okanagan | 79265 | |
| Northern Rockies | 96784 | |
| Okanagan-Similkameen | 37713 | |
| Peace River | 85008 | |
| Powell River | 82455 | |
| Skeena-Queen Charlotte | 82149 | |
| Squamish-Lillooet | 42151 | |
| Stikine | 30109 | |
| Strathcona | 63493 | |
| Sunshine Coast | 58792 | |
| Thompson-Nicola | 91764 |
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
| Region | Result | |
|---|---|---|
| Alberni-Clayoquot | 80726 | |
| Bulkley-Nechako | 63167 | |
| Capital | 38355 | |
| Cariboo | 54145 | |
| Central Coast | 57838 | |
| Central Kootenay | 93831 | |
| Central Okanagan | 87255 | |
| Columbia-Shuswap | 45420 | |
| Comox Valley | 36890 | |
| Cowichan Valley | 35960 | |
| East Kootenay | 31858 | |
| Fraser Valley | 64002 | |
| Fraser-Fort George | 67771 | |
| Greater Vancouver | 43034 | |
| Kitimat-Stikine | 95319 | |
| Kootenay Boundary | 39510 | |
| Mount Waddington | 58310 | |
| Nanaimo | 49211 | |
| North Okanagan | 64505 | |
| Northern Rockies | 39764 | |
| Okanagan-Similkameen | 92309 | |
| Peace River | 53770 | |
| Powell River | 78354 | |
| Skeena-Queen Charlotte | 92354 | |
| Squamish-Lillooet | 40520 | |
| Stikine | 32683 | |
| Strathcona | 87390 | |
| Sunshine Coast | 31963 | |
| Thompson-Nicola | 63131 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment