How can i add a marker in each country using the longitude and latitude and show the total
or name
value?
var markers = [
{long: -90.598317, lat: 14.734777, name: "Guatemala"},
];
This is the code that shows the map below:
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.js"></script>
<svg width="960" height="600"></svg>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var path = d3.geoPath();
var projection = d3.geoMercator()
.center([-85, 13])
.scale(2900)
.translate([ width/2, height/2 ])
var path = d3.geoPath()
.projection(projection);
// https://github.com/d3/d3-scale-chromatic
var data = d3.map();
var colorScheme = d3.schemeOrRd[6];
colorScheme.unshift("#eee")
var colorScale = d3.scaleThreshold()
.domain([2, 6, 11, 45, 101, 1001])
.range(colorScheme);
// Legend
var g = svg.append("g")
.attr("class", "legendThreshold")
.attr("transform", "translate(20,20)");
g.append("text")
.attr("class", "caption")
.attr("x", 0)
.attr("y", -6)
.text("Data");
var labels = ['0', '1-5', '6-10', '11-25', '26-100', '101-1000', '> 1000'];
var legend = d3.legendColor()
.labels(function (d) { return labels[d.i]; })
.shapePadding(4)
.scale(colorScale);
svg.select(".legendThreshold")
.call(legend)
d3.queue()
.defer(d3.json, "ca.json")
.defer(d3.csv, "data.csv", function(d) {
data.set(d.code, +d.total)
})
.await(ready);
function ready(error, topo) {
if (error) throw error;
svg.append("g")
.attr("class", "countries")
.selectAll("path")
.data(topo.features)
.enter().append("path")
.attr("fill", function (d){
// Data - Country
d.total = data.get(d.id) || 0;
// Color
return colorScale(d.total);
})
.attr("d", path);
}
</script>
The map i have:

What i want:

The .csv im using
name,total,code
Belize,20,BLZ
Costa Rica,40,CRI
El Salvador,80,SLV
Guatemala,120,GTM
Honduras,640,HND
Nicaragua,1280,NIC
Panama,2560,PAN