Multi connection map in d3.js

Steps:

First of all, learn how to build a basic background map.

Then create a path generator called path. Basically, give it 2 set of coordinates and it will return a list of coordinates all along the great circle between them.

If you're not sure, try to add console.log(path(link)) and you will see the svg path that has been generated.

Finally it is easy to append a path calling this generator.

Try to play with the input data to understand how the great circle shape changes.

<!DOCTYPE html>
<meta charset="utf-8">

<!-- 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="440" height="300"></svg>

<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>

<!-- Create an element where the map will take place -->
<svg id="my_dataviz" width="440" height="300"></svg>

<script>

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

// Map and projection
var projection = d3.geoMercator()
    .scale(85)
    .translate([width/2, height/2*1.3])

// Create data: coordinates of start and end
var link = [
  {type: "LineString", coordinates: [[100, 60], [-60, -30]]},
  {type: "LineString", coordinates: [[10, -20], [-60, -30]]},
  {type: "LineString", coordinates: [[10, -20], [130, -30]]}
]

// A path generator
var path = d3.geoPath()
    .projection(projection)

// Load world shape
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", "#b8b8b8")
            .attr("d", d3.geoPath()
                .projection(projection)
            )
            .style("stroke", "#fff")
            .style("stroke-width", 0)

    // Add the path
    svg.selectAll("myPath")
      .data(link)
      .enter()
      .append("path")
        .attr("d", function(d){ return path(d)})
        .style("fill", "none")
        .style("stroke", "orange")
        .style("stroke-width", 7)

})

</script>

<script>

// The svg
const svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

// Map and projection
const projection = d3.geoMercator()
    .scale(85)
    .translate([width/2, height/2*1.3])

// Create data: coordinates of start and end
const link = [
  {type: "LineString", coordinates: [[100, 60], [-60, -30]]},
  {type: "LineString", coordinates: [[10, -20], [-60, -30]]},
  {type: "LineString", coordinates: [[10, -20], [130, -30]]}
]

// A path generator
const path = d3.geoPath()
    .projection(projection)

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

    // Draw the map
    svg.append("g")
        .selectAll("path")
        .data(data.features)
        .join("path")
            .attr("fill", "#b8b8b8")
            .attr("d", path)
            .style("stroke", "#fff")
            .style("stroke-width", 0)

    // Add the path
    svg.selectAll("myPath")
      .data(link)
      .join("path")
        .attr("d", function(d){ return path(d)})
        .style("fill", "none")
        .style("stroke", "orange")
        .style("stroke-width", 7)

})
</script>

Multi connection map in d3.js

Steps:

Related blocks →

Dataviz decision tree