This is in answer to the Stack Overflow question Show info when hovering over voronoi polygons (in D3.js). In this example the title attribute has been used for the ‘tooltip’ but there are better alternatives around. This example uses an accessor function to specify the x and y for the Voronoi polygons and created an object locCities to store the descriptive variables, although the conversion of co-ordinates using the projection function could have been done in the accessor function and the orginal data used i.e. the cities variable. Also, note that an old version of d3 has been used due to some change in the Albers Usa projection.
forked from phil-pedruco‘s block: Map with Voronio Polygons for Tooltip
<html>
<head>
<style type="text/css">
#states {
fill: #aaa;
}
</style>
<script src="d3.min3.1.5.js"></script>
</head>
<body>
</body>
<script type="text/javascript">
var width = 960,
height = 500;
var projection = d3.geo.albersUsa();
var path = d3.geo.path()
.projection(projection);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var map = svg.append("g").attr("id", "states");
var points = svg.append("g").attr("id", "circles");
var vor = svg.append("g").attr("id", "paths");
var voronoi = d3.geom.voronoi()
.x(function(d) { return (d.coords[0]); })
.y(function(d) { return (d.coords[1]); });
d3.csv("us-cities1.csv", function (cities) {
d3.json("us-states.json", function(error, states) {
var locCities = [];
// create array of co-ordinates for Voronoi
cities.forEach(function (d,i) {
var element = {
coords: projection([+d.lon, +d.lat]),
place: d.place,
rank: d.rank,
population: d.population
};
locCities.push(element);
});
// Create map using geojson
map.selectAll("path")
.data(states.features)
.enter().append("path")
.attr("d", path);
// Place circles on map for reference
points.selectAll("circle")
.data(locCities).enter()
.append("circle")
.attr("id", function (d,i) { return d.place; }) // to confirm correct city allocated to title (note the csv file seems to have some dodgy co-ordinates)
.attr("cx", function (d,i) { return d.coords[0]; })
.attr("cy", function (d,i) { return d.coords[1]; })
.attr("r", "6px")
.style("fill", "red");
// Code based on //bl.ocks.org/njvack/1405439
// Create Voronoi polygons and add title attribute for tooltip
vor.selectAll("path")
.data(voronoi(locCities))
.enter().append("path")
.attr("d", function(d) { return "M" + d.join(",") + "Z"; })
.style("fill", "white") // polygons need a fill so the titles work
.style('fill-opacity', 0) // set to 0 to 'hide' from view
.style("stroke", "none") // set to none to 'hide' from view
.append("title") // using titles instead of tooltips
.text(function (d,i) { return d.point.place + " ranked " + d.point.rank; });
});
});
</script>
</html>rank,place,population,lat,lon
14,San Francisco city,805235,28.371795,-82.187909
13,Austin city,790390,28.973405,-95.961284
36,Long Beach city,462257,29.748022,-94.827603
11,Jacksonville city,821784,30.2887,-81.391794
38,Mesa city,439041,30.686452,-97.700842
6,Phoenix city,1445632,32.46764,-85.000823
23,Denver city,600158,32.96438,-102.829919
2,Los Angeles city,3792621,34.05349,-118.245323
32,Albuquerque city,545852,35.084179,-106.648643
20,Memphis city,646889,35.149681,-90.04892
47,Cleveland city,396815,36.640475,-82.582569
39,Virginia Beach city,437994,36.767408,-76.047707
5,Philadelphia city,1526006,37.15477,-94.486114
49,Wichita city,382368,37.686981,-97.335579
40,Atlanta city,420003,37.691375,-122.454979
16,Fort Worth city,741206,38.0016,-89.066334
46,Oakland city,390724,38.334108,-87.345139
34,Fresno city,494665,38.645741,-77.321863
25,Washington city,601723,38.899101,-77.028999
35,Sacramento city,466488,38.915291,-121.594651
45,Tulsa city,391906,39.095215,-121.613384
17,Charlotte city,731424,39.09931,-76.817799
24,Baltimore city,620961,39.284664,-76.62022
12,Indianapolis city (balance),820445,39.766911,-86.149963
41,Colorado Springs city,416427,40.17676,-75.547839
31,Las Vegas city,583756,40.4879,-85.609999
9,Dallas city,1197816,40.636,-91.168309
1,New York city,8175133,40.71455,-74.007124
42,Raleigh city,403892,41.132609,-73.977405
43,Omaha city,408958,41.260689,-95.94059
50,Arlington city,365438,41.29525,-88.25278
4,Houston city,2099451,41.337462,-75.733627
18,Detroit city,713777,42.408871,-83.002647
28,Milwaukee city,594833,43.041809,-87.906837
48,Minneapolis city,382578,44.979031,-93.264931
3,Chicago city,2695598,45.37399,-92.888759