score:0

Accepted answer

in case you wondered I managed to fix the issues based on the comments in my question, here is the final code corrected

<!DOCTYPE html>
<meta charset="utf-8">
<style>
    div.tooltip {   
        position: absolute;         
        text-align: center;         
        width: 60px;                    
        height: 28px;                   
        padding: 2px;               
        font: 12px sans-serif;      
        background: lightsteelblue; 
        border: 10px;
        border-color: black;
        border-radius: 8px;         
        pointer-events: none;           
    }
</style>

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.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>

<!-- Create an element where the map will take place -->

<svg id="my_dataviz" width="1000" height="500" padding = "0px"></svg>
<script>

// Define the div for the tooltip
var div = d3.select("body").append("div")   
    .attr("class", "tooltip")               
    .style("opacity", 0);

// The svg
var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    overflow = 'hidden';

// Map and projection
var projection = d3.geoAitoff()
    .scale(width / (1.6*Math.PI))
    .translate([width / 2-60, height / 2])

//Zoom the map
/*
svg.call(d3.zoom().on("zoom", function () {
    svg.attr("transform", d3.event.transform)
}))
*/

svg.style("border","10px");

// Load external data and boot
d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson", function(data){


    // Draw the map
    svg.append("g")
        .selectAll("path")
        .data(data.features)
        .enter().append("path")
            .attr("fill", "#737CA1")
            .attr("d", d3.geoPath()
                .projection(projection)
            )
        .on("mouseover", function(d) {      
            div.transition()        
                .duration(200)      
                .style("opacity", .9);      
            div.html(d.properties.name+"<br/>")
                .style("left", (d3.event.pageX) + "px")     
                .style("top", (d3.event.pageY - 28) + "px");    
                })                  
            .on("mouseout", function(d) {       
                div.transition()        
                    .duration(500)  
                .style("stroke", "#fff")
            })
            
})


 d3.csv("/test.csv",function(d) {
      console.log(d);
      svg.selectAll(".pin")
      .data(d)
      .enter()
      .append("circle", ".pin")
      .attr("r", 2)
      .raise()
      .attr("transform", function(d) {
        return "translate(" + projection([
          +d.Longitude,
          +d.Latitude
        ]) + ")";
      });

  });


</script>

I'll create a git project and put the link here once I get to it so you can test it with the data as well


Related Query

More Query from same tag