46321f953839ef2c058d by majomo

index.html

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

<style>
    @import url(mapStyle.css);


</style>

<script src="//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 //public.johnnyotoole.fastmail.fm/county_map.html 
// Based on //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 (//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>

mapStyle.css

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;
   }

regDistBC.csv

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

regDistBC2.csv

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

regDistBC3.csv

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