Old school D3 from simpler times

All examples By author By category About

trianah

Full window Github gist

Travel map

Built with blockbuilder.org

<!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: #fff;
}
.hidden {
      display: none;
}
div.tooltip {
      color: #555;
  	font-family: Helvetica;
  	font-size: 12px;
      background: #fff; 
      border-radius: 3px; 
      box-shadow: 0px 0px 2px 0px #a6a6a6; 
      padding: .2em 0.4em; 
      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.geoMercator() 
                   .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");

var countryVals = [];
  
d3.tsv("travel.tsv", function(data){
  data.forEach(d => {
    // console.log(d["Country"])
    if (!countryVals.includes(d["Country"])) {
      countryVals.push(d["Country"])
    }
  })
});

console.log(countryVals)

var colourScale = d3.scaleOrdinal()
                 .domain(countryVals)
                 .range(d3.schemeCategory10);
  
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","#fff")
			.attr("stroke-width",1)
            .attr("fill", d => countryVals.includes(d.name) ? colourScale(d.name): '#eee')
			.attr("d", path )
// 			.on("mouseover",function(d,i){
//                 d3.select(this).attr("fill","#bbb").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","#eee").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