d3noob/.block

## .block
license: mit

## README.md

      
    Raw
  

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

  
## cities.csv

          
            code
            city
            country
            lat
            lon

            
              ZNZ
              ZANZIBAR
              TANZANIA
              -6.13
              39.31

            
              TYO
              TOKYO
              JAPAN
              35.68
              139.76

            
              AKL
              AUCKLAND
              NEW ZEALAND
              -36.85
              174.78

            
              BKK
              BANGKOK
              THAILAND
              13.75
              100.48

            
              DEL
              DELHI
              INDIA
              29.01
              77.38

            
              SIN
              SINGAPORE
              SINGAPOR
              1.36
              103.75

            
              BSB
              BRASILIA
              BRAZIL
              -15.67
              -47.43

            
              RIO
              RIO DE JANEIRO
              BRAZIL
              -22.90
              -43.24

            
              YTO
              TORONTO
              CANADA
              43.64
              -79.40

            
              IPC
              EASTER ISLAND
              CHILE
              -27.11
              -109.36

            
              SEA
              SEATTLE
              USA
              47.61
              -122.33

## 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);

    // load and display the cities
    d3.csv("cities.csv").then(function(data) {
        g.selectAll("circle")
           .data(data)
           .enter()
           .append("a")
			    	  .attr("xlink:href", function(d) {
				    	  return "https://www.google.com/search?q="+d.city;}
		    		  )
           .append("circle")
           .attr("cx", function(d) {
                   return projection([d.lon, d.lat])[0];
           })
           .attr("cy", function(d) {
                   return projection([d.lon, d.lat])[1];
           })
           .attr("r", 5)
           .style("fill", "red");

      g.selectAll("text")
           .data(data)
           .enter()
         .append("text") // append text
           .attr("x", function(d) {
                   return projection([d.lon, d.lat])[0];
           })
           .attr("y", function(d) {
                   return projection([d.lon, d.lat])[1];
           })
           .attr("dy", -7) // set y position of bottom of text
           .style("fill", "black") // fill the text with the colour black
           .attr("text-anchor", "middle") // set anchor y justification
           .text(function(d) {return d.city;}); // define the text to display
    });
});

var zoom = d3.zoom()
      .scaleExtent([1, 8])
      .on('zoom', function() {
          g.selectAll('path')
           .attr('transform', d3.event.transform);
          g.selectAll("circle")
           .attr('transform', d3.event.transform);
          g.selectAll("text")
           .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
            
          
      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.
code	city	country	lat	lon
ZNZ	ZANZIBAR	TANZANIA	-6.13	39.31
TYO	TOKYO	JAPAN	35.68	139.76
AKL	AUCKLAND	NEW ZEALAND	-36.85	174.78
BKK	BANGKOK	THAILAND	13.75	100.48
DEL	DELHI	INDIA	29.01	77.38
SIN	SINGAPORE	SINGAPOR	1.36	103.75
BSB	BRASILIA	BRAZIL	-15.67	-47.43
RIO	RIO DE JANEIRO	BRAZIL	-22.90	-43.24
YTO	TORONTO	CANADA	43.64	-79.40
IPC	EASTER ISLAND	CHILE	-27.11	-109.36
SEA	SEATTLE	USA	47.61	-122.33
	<!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);

	// load and display the cities
	d3.csv("cities.csv").then(function(data) {
	g.selectAll("circle")
	.data(data)
	.enter()
	.append("a")
	.attr("xlink:href", function(d) {
	return "https://www.google.com/search?q="+d.city;}
	)
	.append("circle")
	.attr("cx", function(d) {
	return projection([d.lon, d.lat])[0];
	})
	.attr("cy", function(d) {
	return projection([d.lon, d.lat])[1];
	})
	.attr("r", 5)
	.style("fill", "red");

	g.selectAll("text")
	.data(data)
	.enter()
	.append("text") // append text
	.attr("x", function(d) {
	return projection([d.lon, d.lat])[0];
	})
	.attr("y", function(d) {
	return projection([d.lon, d.lat])[1];
	})
	.attr("dy", -7) // set y position of bottom of text
	.style("fill", "black") // fill the text with the colour black
	.attr("text-anchor", "middle") // set anchor y justification
	.text(function(d) {return d.city;}); // define the text to display
	});
	});

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

	svg.call(zoom);

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