d3noob/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    This is a simple map example with pan and zoom centered on the Pacific.
This graph is part of the code samples for the update to the book D3 Tips and Tricks to version 5 of d3.js.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
  stroke: white;
  stroke-width: 0.25px;
  fill: grey;
}
</style>
<body>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://unpkg.com/topojson@3"></script>
<script>
var width = 960,
    height = 500;

var projection = d3.geoMercator()
    .center([0, 5 ])
    .scale(150)
    .rotate([-180,0]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var path = d3.geoPath()
    .projection(projection);

var g = svg.append("g");

// load and display the World
d3.json("world-110m2.json").then(function(topology) {

    g.selectAll("path")
       .data(topojson.feature(topology, topology.objects.countries)
           .features)
       .enter().append("path")
       .attr("d", path);

});

var zoom = d3.zoom()
      .scaleExtent([1, 8])
      .on('zoom', function() {
          g.selectAll('path')
           .attr('transform', d3.event.transform);
});

svg.call(zoom);

</script>
</body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
            
          
## world-110m2.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              world-110m2.json
            
          
      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">
	<style>
	path {
	stroke: white;
	stroke-width: 0.25px;
	fill: grey;
	}
	</style>
	<body>
	<script src="https://d3js.org/d3.v5.min.js"></script>
	<script src="https://unpkg.com/topojson@3"></script>
	<script>
	var width = 960,
	height = 500;

	var projection = d3.geoMercator()
	.center([0, 5 ])
	.scale(150)
	.rotate([-180,0]);

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	var path = d3.geoPath()
	.projection(projection);

	var g = svg.append("g");

	// load and display the World
	d3.json("world-110m2.json").then(function(topology) {

	g.selectAll("path")
	.data(topojson.feature(topology, topology.objects.countries)
	.features)
	.enter().append("path")
	.attr("d", path);

	});

	var zoom = d3.zoom()
	.scaleExtent([1, 8])
	.on('zoom', function() {
	g.selectAll('path')
	.attr('transform', d3.event.transform);
	});

	svg.call(zoom);

	</script>
	</body>
	</html>