4

I am using D3.js to draw the geographical map of USA using Mercator projection. The map represents the population in each city across the USA. The population data is stored in the following file:

https://gist.githubusercontent.com/d3byex/65a128a9a499f7f0b37d/raw/176771c2f08dbd3431009ae27bef9b2f2fb56e36/us-cities.csv

Circles denoting the location of cities are displayed in the map.

The code is pasted below:

<!DOCTYPE html>
<html>
<head>
    <meta name="description" content="D3byEX 12.18" />
    <meta charset="utf-8">
</head>
<body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>
    <script>

        var width = 1000, height = 500;
        var svg = d3.select('body')
            .append('svg')
            .attr({
                width: width,
                height: height
            });

        var usDataUrl = 'https://gist.githubusercontent.com/d3byex/65a128a9a499f7f0b37d/raw/176771c2f08dbd3431009ae27bef9b2f2fb56e36/us-states.json',
            citiesDataUrl = 'https://gist.githubusercontent.com/d3byex/65a128a9a499f7f0b37d/raw/176771c2f08dbd3431009ae27bef9b2f2fb56e36/us-cities.csv';

        queue()
            .defer(d3.json, usDataUrl)
            .defer(d3.csv, citiesDataUrl)
            .await(function (error, states, cities) {
                var path = d3.geo.path();
                var projection = d3.geo.albersUsa()
                    .translate([width / 2, height / 2])
                    .scale([1000]);
                path.projection(projection);

                svg.selectAll('path')
                    .data(states.features)
                    .enter()
                    .append('path')
                    .attr('d', path)
                    .style({
                        fill: 'none',
                        stroke: 'black'
                    });

                svg.selectAll('circle')
                          .data(cities)
                          .enter()
                          .append('circle')
                          .each(function (d) {
                              var location = projection([d.longitude, d.latitude]);
                              d3.select(this).attr({
                                  cx: location[0], cy: location[1],
                                  r: Math.sqrt(+d.population * 0.00004)
                              });
                          })
                          .style({
                              fill: 'blue',
                              opacity: 0.75
                          });
            });
    </script>
</body>
</html>



But how to add labels of city names to those circles while hovering over them ?

User456898
  • 5,704
  • 5
  • 21
  • 37

1 Answers1

4

The most basic (and ugly) method of creating a tooltip is using <title>:

svg.selectAll('circle')
    .data(cities)
    .enter()
    .append('circle')
    .each(function (d) {
            var location = projection([d.longitude, d.latitude]);
            d3.select(this).attr({
            cx: location[0], cy: location[1],
            r: Math.sqrt(+d.population * 0.00004)
            });
     })
    .style({
           fill: 'blue',
           opacity: 0.75
     })
    .append("title")
    .text(d=>d.name);
Gerardo Furtado
  • 100,839
  • 9
  • 121
  • 171
  • Before .append("title") the semi-colon should be removed. – User456898 Nov 30 '16 at 09:54
  • @Laurel thanks, that's because I copied/pasted your code without paying attention. I have to say that titles are to basic! There are better alternatives, check my answer here: http://stackoverflow.com/a/35665974/5768908 – Gerardo Furtado Nov 30 '16 at 09:55