Hex map

world map

This example displays a world map rendered as an SVG using React. Countries are filled with turquoise against a darker teal ocean, projected using the equal Earth projection from d3.geoGeoEqualEarth and d3.geoPath. The map visualizes geographic boundaries from the World Atlas TopoJSON dataset, loaded via d3.json and converted with topojson.feature. The code imports d3 functions directly and uses React hooks (useState, useEffect) to fetch and manage the data.

Hhung2606

World Map

This example shows a world map rendered as an SVG using React and D3 v6. The map displays land masses in teal, with country borders drawn as interior lines, overlaid on graticules and a light sphere background. It loads geographic data from the world-atlas TopoJSON file, using `d3.json` to fetch the data and the TopoJSON `feature` and `mesh` functions to extract land and interior boundaries. The `d3.geoNaturalEarth1` projection and `d3.geoPath` generate the map paths, while the `BackgroundCircle` component draws a yellow circle behind the map.

RRMartins11

Fork of Hello VizHub

This example displays a grid of hexagonal bins overlaid with a dashed boundary rectangle and indexed labels. It renders an SVG scene using React, with D3’s `hexbin` API generating the mesh and center points. The code also imports a local ES6 module and loads libraries via CDN, demonstrating modular code organization and library integration in VizHub.

Hhyeongseok9

World Map

This example shows a world map rendered as an SVG using React and D3. The map displays land masses in blue, interiors in a lighter stroke, and a graticule grid over a pale sphere. It sources TopoJSON country data from the world-atlas package, then uses d3.geoPath with a geoNaturalEarth1 projection to draw the features. The visualization highlights the contrast between land areas, interior boundaries, and the graticule lines, creating a clean, stylized representation of the Earth.

SShuyu Zheng

World Map with React & D3

This example renders a stylized world map using React and D3 v7, displaying landmasses, graticules, and country interiors in a warm color palette. It uses the `d3.geoEqualEarth` projection with `d3.geoPath` to draw SVG paths for geographic features, while country boundaries come from a TopoJSON world atlas (countries-50m.json) processed via `topojson.feature` and `topojson.mesh`. The visualization appears centered with interactive loading states managed through React hooks.

MManon ROMAIN

world map

This example displays a world map showing country boundaries and land masses, with a focus on geographic layout rather than quantitative data. The map renders an equal Earth projection using `d3.geoEqualEarth`, with graticule lines and a styled sphere background. Country polygons are drawn via `d3.geoPath`, while interior borders are generated from TopoJSON mesh data loaded from the world-atlas dataset. The visualization uses React for component structure and SVG for rendering, with CSS controlling the color scheme for countries, borders, and the surrounding ocean.

MMATTE-blz

World Map

This example presents a stylized world map rendered as an SVG. It displays country boundaries, graticules, and the Earth’s sphere, with city locations plotted as translucent points. The visualization uses the D3.js `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` APIs, along with React for component management. Geographic data is sourced from the World Atlas TopoJSON, and city coordinates are loaded from a CSV file. The map is styled with a clean, minimal aesthetic, highlighting land masses and interiors.

RRay Yang

World Map

This example renders a world map using SVG, displaying country boundaries as paths. The visualization uses the D3 library's geoEqualEarth projection and geoPath to convert geographic data into SVG paths, with React managing the component state. The map draws a semi-transparent background sphere and country outlines in a teal color scheme. The data comes from the world-atlas TopoJSON file, which is fetched and converted to GeoJSON features using the topojson library.

NNika