0

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
Dharman
  • 30,962
  • 25
  • 85
  • 135
sckull
  • 33
  • 1
  • 5
  • 1
    This post seems to have solved the marker issue: https://stackoverflow.com/questions/26769083/add-static-lines-on-d3-map-between-latitude-and-longitude-points – Tore Oct 20 '20 at 04:17
  • 2
    Something like [this](https://stackoverflow.com/q/20987535/7106086) or [this](https://stackoverflow.com/q/21397608/7106086) should also be useful – Andrew Reid Oct 20 '20 at 04:28
  • [this](https://stackoverflow.com/a/20992563/8872132) worked, Thanks! :D – sckull Oct 20 '20 at 08:15
  • Does this answer your question? [Plotting points on a map with D3](https://stackoverflow.com/questions/20987535/plotting-points-on-a-map-with-d3) - this is an autimatically generated comment for voting to close this answer – Ruben Helsloot Oct 20 '20 at 09:56

0 Answers0