Skip to main content
SimilarExport ZIP
100%

HTML Starter

✓ Published0🌍 Public
Llittle-face
Last edited Dec 5, 2020
Created on Dec 5, 2020
Forked from HTML Starter

This example presents a choropleth map of board game ratings by country, with a dropdown to switch between games. Built with React and SVG, it uses D3.js modules like `d3.geoPath` and `d3.geoNaturalEarth1` for map projections, `d3.scaleQuantile` for color encoding, and `d3.nest` for hierarchical data aggregation. The map renders from `world_countries.json` and `ratings-by-country.csv` data, with tooltips on each country.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

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
82% 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
81% 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
79% 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
79% match
Loading thumbnail…

HTML Starter

This example displays a world map using the geoMercator projection, with country boundaries rendered as SVG paths. The map is generated from the world-atlas countries-110m GeoJSON dataset, loaded via d3.json. The code imports d3.geoPath and d3.geoMercator from d3.v5, and topojson’s feature function to extract country features. The resulting paths are appended to an SVG canvas of 960 by 500 pixels, demonstrating a minimal HTML setup with inline styling.

PPaul Chen
78% match
Loading thumbnail…

HTML Starter

A bare HTML page with a single SVG element is the foundation of this starter example. The JavaScript uses D3's `select`, `csv`, `scaleLinear`, `max`, and `scaleBand` functions to load population data for 22 countries from `data.csv`. The chart is intended to render horizontal bars with country names on the y-axis and population on a linear scale, though the current code only appends static 300-pixel squares. The example demonstrates a minimal D3 setup within a React environment, serving as a template for more complex visualizations.

Mmatt-godfrey
78% match
Loading thumbnail…

Fork of HTML Starter

This visualization shows a world map with countries colored by population using a threshold scale, rendered as SVG paths via `d3.geoPath` with a Mercator projection. The choropleth uses a quantized color range from light to dark blue, and hover interactions trigger tooltips built with `d3-tip`, displaying each country’s name and population. Data comes from a TopoJSON file and a TSV of population figures, both loaded asynchronously with the queue library.

Ddaniel
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