harrisoncramer/.block

## .block
license: gpl-3.0

## README.md

      
    Raw
  

              README.md
            
          
    Build converting Natural Earth shapefiles into a geoJSON format, then projecting that with a D3 identity projection, fitting the projection to my SVG file.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<style>

  path {
    fill: none;
    stroke: black;
    stroke-width: .7px;
  }
</style>
<body>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script>

var width = 960;
var height = 600;
var margin = {top: 0, bottom: 0, left: 0, right: 0}

d3.queue()
    .defer(d3.json, "world.json")
    .await(ready)

function ready(error, world) {
  var projection = d3.geoIdentity().reflectY(true).fitSize([width,height],world)
  var path = d3.geoPath().projection(projection) // Geopath generator
  var zoomExtent = d3.zoom().scaleExtent([1, 20]);

  function zoom() {
    g.attr("transform", d3.event.transform)
  }

  var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.bottom + margin.top)
    .style("background-color","lightgrey")
    .call(zoomExtent
        .on("zoom", zoom))

  var g = svg.append("g")
      .attr("class", "mapInformation")
      .attr("transform",`translate(8,${margin.top})`)

  var paths = g.selectAll("path")
      .data(world.geometries)
      .enter()
      .append("path")
      .attr("d", path)

}
</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
            
          
## world.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              world.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>
	<meta charset="utf-8">
	<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
	<style>

	path {
	fill: none;
	stroke: black;
	stroke-width: .7px;
	}
	</style>
	<body>
	</body>
	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://d3js.org/topojson.v2.min.js"></script>
	<script>

	var width = 960;
	var height = 600;
	var margin = {top: 0, bottom: 0, left: 0, right: 0}

	d3.queue()
	.defer(d3.json, "world.json")
	.await(ready)

	function ready(error, world) {
	var projection = d3.geoIdentity().reflectY(true).fitSize([width,height],world)
	var path = d3.geoPath().projection(projection) // Geopath generator
	var zoomExtent = d3.zoom().scaleExtent([1, 20]);

	function zoom() {
	g.attr("transform", d3.event.transform)
	}

	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.bottom + margin.top)
	.style("background-color","lightgrey")
	.call(zoomExtent
	.on("zoom", zoom))

	var g = svg.append("g")
	.attr("class", "mapInformation")
	.attr("transform",`translate(8,${margin.top})`)

	var paths = g.selectAll("path")
	.data(world.geometries)
	.enter()
	.append("path")
	.attr("d", path)

	}
	</script>