cities.csv

## readme.md

      
        

          Raw
        
        
          
            
          
          
            
              readme.md
            
          
        
      
    
  
    This small example was made to answer a quesition on the d3noob.org blog about how to add the names of the cities beside the dots.

  

  

## 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="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
<script>
var width = 960,
    height = 500;

var projection = d3.geo.mercator()
    .center([0, 5 ])
    .scale(200)
    .rotate([-180,0]);

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

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

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

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

// load and display the cities
d3.csv("cities.csv", function(error, 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

});

g.selectAll("path")
      .data(topojson.object(topology, topology.objects.countries)
          .geometries)
    .enter()
      .append("path")
      .attr("d", path)
});

// zoom and pan
var zoom = d3.behavior.zoom()
    .on("zoom",function() {
        g.attr("transform","translate("+
            d3.event.translate.join(",")+")scale("+d3.event.scale+")");
        g.selectAll("circle")
            .attr("d", path.projection(projection));
        g.selectAll("path")
            .attr("d", path.projection(projection));

  });

svg.call(zoom)

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

## thumbnail.png

      
        

          Raw
        
        
          
            
          
          
            
              thumbnail.png
            
          
        
      
    

  
      
          
      
  

  

## world-110m2.json

      
        
            
              
              
            

          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.