hlkyt

@hlkyt·3 public vizzes

My map

This map displays European and North African cities as dark dots on a light landmass, with each city labeled by name. The visualization uses D3.js v5 to load geographic data from a GeoJSON file and city coordinates from a CSV file. It renders the map by applying the Mercator projection through `d3.geoMercator` and drawing paths with `d3.geoPath`, while circles and text elements are positioned using the same projection function.

Jun 9, 2020

Loading thumbnail…

Let's make a map with D3.js!

A world map drawn with D3.js shows country boundaries as SVG paths projected with the Natural Earth projection, with a dark sphere as the background. The visualization loads geographic data from the world-atlas TopoJSON file and renders each country as a filled path. Interactive mouseover and mouseout events change the fill color and stroke width of individual countries, providing immediate visual feedback. The code uses D3 v5 functions such as `geoPath`, `geoNaturalEarth1`, and `select` alongside the TopoJSON `feature` API.

Jun 7, 2020

Loading thumbnail…

World Map

This example displays a world map rendered as SVG paths, with countries filled in light gray and outlined in black. It overlays a graticule grid and a foreground border, and also draws country borders in blue. The visualization uses the `d3.geoNaturalEarth1` projection and `d3.geoPath` to render geographic features from TopoJSON data loaded from the world-atlas package. Additionally, `d3.geoGraticule` generates the latitude and longitude grid lines, while the code includes a commented alternative to switch to a higher-resolution 50m dataset.

Jun 6, 2020