Get started with d3-geo CDN

BSD-3-Clause licensed

D3-geo: GeoJSON library for geospatial data manipulation in D3.js.

Tags:
  • d3
  • d3-module
  • geo
  • maps
  • cartography

Stable version

Copied!

How to start using d3-geo CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with d3-geo CDN - cdnhub.io</title>
  <style>
    svg {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <script src="https://d3js.org/d3.v6.min.js"></script>
  <script src="https://cdn.cdnhub.io/d3-geo/3.1.1/d3-geo.min.js"></script>
  <script>
    const svg = d3.select("body")
      .append("svg")
      .attr("width", 500)
      .attr("height", 500);

    const projection = d3.geoMercator()
      .translate([250, 250])
      .scale(150);

    const path = d3.geoPath()
      .projection(projection);

    d3.json("https://raw.githubusercontent.com/d3js/d3-geo-json/v3.1.1/geojson/world.json")
      .then(data => {
        svg.selectAll("path")
          .data(data.features)
          .enter()
          .append("path")
          .attr("d", path)
          .attr("fill", "#007bff")
          .attr("stroke", "#004a60")
          .attr("stroke-width", 0.5);
      });
  </script>
</body>
</html>

All versions