Old school D3 from simpler times

All examples By author By category About

trianah

Full window Github gist

World Map with Tooltip Country Name v4

Built with blockbuilder.org

forked from abrahamdu's block: World Map with Tooltip Country Name v4

forked from jinjin220's block: World Map with Tooltip Country Name v4

forked from jinjin220's block: World Map with Tooltip Country Name v4

forked from trianah's block: World Map with Tooltip Country Name v4

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/topojson.v2.min.js"></script>
  <script src="https://d3js.org/d3-queue.v3.min.js"></script>
  <style>
svg {
    width: 100%;
    height: 100%;
    position: center;
    background-color: #2B65EC;
}
.hidden {
      display: none;
}
div.tooltip {
      color: #222; 
      background: #fff; 
      border-radius: 3px; 
      box-shadow: 0px 0px 2px 0px #a6a6a6; 
      padding: .2em; 
      text-shadow: #f5f5f5 0 1px 0;
      opacity: 0.9; 
      position: absolute;
  </style>
</head>

<svg width="1200" height="900"></svg>
<div class="tooltip"></div>
<body>
<script>
var margin = {top: 10, right: 10, bottom: 10, left: 10};
var width = 960 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;
var projection = d3.geoNaturalEarth1()
                   .center([0, 15]) 
                   .rotate([-9,0])
                   .scale([1300/(2*Math.PI)]) 
                   .translate([450,300]);
var path = d3.geoPath()
             .projection(projection);
var svg = d3.select("svg")
            .append("g")
            .attr("width", width)
            .attr("height", height);
var tooltip = d3.select("div.tooltip");
d3.queue()
  .defer(d3.json, "world-110m.json")
  .defer(d3.csv, "world-country-names.csv")
  .await(ready);
function ready(error, world, names) {
  if (error) throw error;
  var countries1 = topojson.feature(world, world.objects.countries).features;
    countries = countries1.filter(function(d) {
    return names.some(function(n) {
      if (d.id == n.id) return d.name = n.name;
    })});
  svg.selectAll("path")
			.data(countries)
			.enter()
			.append("path")
			.attr("stroke","green")
			.attr("stroke-width",1)
            .attr("fill", "white")
			.attr("d", path )
			.on("mouseover",function(d,i){
                d3.select(this).attr("fill","grey").attr("stroke-width",2);
                return tooltip.style("hidden", false).html(d.name);
            })
            .on("mousemove",function(d){
                tooltip.classed("hidden", false)
                       .style("top", (d3.event.pageY) + "px")
                       .style("left", (d3.event.pageX + 10) + "px")
                       .html(d.name);
            })
            .on("mouseout",function(d,i){
                d3.select(this).attr("fill","white").attr("stroke-width",1);
                tooltip.classed("hidden", true);
            });
};

</script>
</body>

https://d3js.org/d3.v4.min.js

https://d3js.org/topojson.v2.min.js

https://d3js.org/d3-queue.v3.min.js