HTML Starter

100%

✓ Published0🌍 Public

Last edited Mar 16, 2020

Created on Mar 16, 2020

This example visualizes asylum seekers departing from countries worldwide, with a choropleth map coloring each nation by the number of departures for a selected year. It uses a natural Earth projection via `d3.geoPath` and `d3.geoNaturalEarth1`, with data loaded from a TopoJSON world atlas and a local asylum JSON file. A threshold color scale and `d3.legendColor` display the legend, while a slider updates the displayed year and re-renders the map with `d3.queue`.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

HTML Starter

This example displays an interactive world map with countries colored according to their numeric ID modulo 10, using a spectral color scale to distinguish the resulting categories. The visualization uses D3 v5 with a Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, while loading country boundaries from a topojson file. A custom color legend with circles and text labels is built using D3 selections and scales, and the map supports panning and zooming through `d3.zoom`. Population data from a CSV file is not directly displayed; instead, country names and their category values appear as tooltips on click.

Kkasalwelengwe@gmail.com

80% match

Loading thumbnail…

Arc Generator

This visualization displays asylum-seeking flows between countries on a world map using curved arcs that connect country centroids. When hovering over a country, arcs appear linking it to several pre-selected destinations, though the data shown represents a small sample rather than the full asylum.json dataset. The visualization uses an SVG rendering approach with D3 v5's geoNaturalEarth1 projection and geoPath to draw country boundaries, while custom arc-generating logic creates the connecting paths. The style.css file defines the map aesthetics, including light green country fills and red arcs.

Aankita1mit

78% match

Loading thumbnail…

HTML Starter

A world map rendered with SVG using D3.js v5 and the topojson library displays country boundaries via a Natural Earth projection. Each country is colored with a categorical ordinal color scale based on the result of its numeric ID modulo 10, which is also shown in a tooltip on hover. The map supports zooming through D3’s zoom behavior, and hovering highlights a country in red. A color legend, built from the ordinal scale’s domain, is positioned at the top right.

Kkasalwelengwe@gmail.com

78% match

Loading thumbnail…

HTML Starter

This example demonstrates a world map rendered as an SVG using the natural Earth projection, with countries filled in light green and the ocean shown as a translucent blue sphere. It employs D3 v5’s `geoNaturalEarth1` and `geoPath` to project geographic data, and TopoJSON’s `feature` to extract country polygons from the world-atlas dataset. The map is drawn by appending a sphere path and then binding country features to new SVG path elements through D3’s data join. Styling is applied via CSS classes for the sphere and country boundaries.

EEmma

77% match

Loading thumbnail…

A D3 map

This visualization combines a D3 natural Earth projection map with a time-series histogram. The map displays circles sized by migrant death tolls using `geoNaturalEarth1` and `geoPath`, while the histogram bins reported dates into monthly intervals using `d3.histogram` and `scaleTime`. The React app loads country boundaries from World Atlas TopoJSON and migrant data from a CSV, rendering all elements as SVG.

Mmaavwin6

77% match

Loading thumbnail…

HTML Starter

This example shows a world map rendered with D3’s Mercator projection, displaying country boundaries as SVG paths. The code loads GeoJSON country features from the world-atlas TopoJSON file via `topojson.feature`, then appends each country as a `<path>` using `d3.geoPath`. The accompanying `data.csv` includes population figures, but the current script does not encode population visually—only the geographic outlines appear. The map is drawn inside a fixed 960×600 SVG, with CSS styling for tick lines, though no axes or scales are currently applied to the map itself.

NNebotXavi

77% match

Loading thumbnail…

Untitled

This visualization displays a world map with asylum seeker data, highlighting the flow of refugees from various countries to Canada over time. Using D3 version 3, the map employs a geographic equirectangular projection with graticules, land boundaries, and a red arc connecting two specific locations. The code loads TopoJSON world data to render land masses and country borders, while the asylum data is loaded from an external CSV file. The visualization demonstrates how geographic and temporal asylum patterns can be represented through interactive map-based data visualization.

Aankita1mit

77% match

Loading thumbnail…

HTML Starter

This example displays a basic world map by loading TopoJSON country boundaries and rendering them as SVG paths. The map uses a Mercator projection via `d3.geoMercator` and `d3.geoPath` to convert geographic coordinates into SVG path data. The code fetches the world-atlas dataset from a CDN, transforms it into GeoJSON using `topojson.feature`, and appends a `path` element for each country. The visualization is minimal, with no styling or interaction, serving as a starter template for geographic data exploration with React.

PPaul Chen

76% match