majomo/bcGeo.json

## bcGeo.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              bcGeo.json
            
          
      Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## index.html
<!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>

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