smokbel/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    This is a map of Qubec in response to Stackoverflow question.  The gist is based on Let's Make a Map.
forked from phil-pedruco's block: Topojson-Ontario
forked from smokbel's block: Topojson-Ontario

  
## index.html
<!DOCTYPE html>
<html>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/3.0.2/topojson.js"></script>
<style>
  #ont {
    fill: lightGrey;
    stroke: grey;

  }
</style>
<body>
<div id="map"></div>
<script>
var width = 960, height = 700;
var svg = d3.select('#map').append('svg')
  .attr('width', width)
  .attr('height', height)
d3.json('qc-map.json', function(error, CensusSubDiv) {
  if (error) return console.error(error);
  var featureCollection = topojson.feature(CensusSubDiv, CensusSubDiv.objects.CensusSubDivision)

  var projection = d3.geoIdentity()
	.reflectY(true)
    .fitSize([width,height],featureCollection)


  svg.append('path')
  .datum(featureCollection)
  .attr('d', d3.geoPath().projection(projection))
  .attr('id', 'ont');

});

</script>

## qc-map.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              qc-map.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.
	<!DOCTYPE html>
	<html>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/3.0.2/topojson.js"></script>
	<style>
	#ont {
	fill: lightGrey;
	stroke: grey;

	}
	</style>
	<body>
	<div id="map"></div>
	<script>
	var width = 960, height = 700;
	var svg = d3.select('#map').append('svg')
	.attr('width', width)
	.attr('height', height)
	d3.json('qc-map.json', function(error, CensusSubDiv) {
	if (error) return console.error(error);
	var featureCollection = topojson.feature(CensusSubDiv, CensusSubDiv.objects.CensusSubDivision)

	var projection = d3.geoIdentity()
	.reflectY(true)
	.fitSize([width,height],featureCollection)



	svg.append('path')
	.datum(featureCollection)
	.attr('d', d3.geoPath().projection(projection))
	.attr('id', 'ont');

	});

	</script>
No results found