HTML Starter

100%

✓ Published0🌍 Public

Last edited Apr 21, 2020

Created on Apr 21, 2020

This example displays a map of China rendered as an SVG path filled with lavender and outlined in dark grey, centered on the country using a Mercator projection. It loads GeoJSON data from `data/china.json` via `d3.json` and draws it with `d3.geoPath`, configuring the projection through `d3.geoMercator` with specified center, scale, and translation. The visualization is built with React, though the core rendering relies on D3’s SVG manipulation to append the path to the page.

AI-generated description

A bare minimum HTML page.

Similar vizzes

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

84% 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

82% 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

81% match

Loading thumbnail…

CHINA MAP

This example displays a choropleth map of China’s administrative regions, rendered as brown filled paths with white borders on a light yellow background. The visualization loads GeoJSON data for Chinese provinces and projects it using the equirectangular projection from `d3.geoEquirectangular`, with path generation handled by `d3.geoPath`. Users can pan and zoom the map via `d3.zoom`, which transforms the SVG group containing the state paths. The code integrates React, TopoJSON for feature extraction, and D3’s `scaleOrdinal` and `schemeCategory10` for potential color encoding.

AAISWARYAMARAPATLA1999

80% 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

80% match

Loading thumbnail…

HTML Starter

This example shows a minimal HTML page that loads D3 v5 and TopoJSON from a CDN, with a commented-out map projection setup for rendering geographic data. The code creates an SVG canvas and uses `d3.json` to fetch world-atlas data, logging the result to the console. While the map rendering logic using `geoMercator` and `geoPath` is present but inactive, the starter demonstrates the basic structure for building a data visualization with external libraries in a plain HTML context.

GGiovanniD_

79% match

Loading thumbnail…

Project Algernon - Drawing a map

A choropleth-style map of China rendered with React and D3.v7 draws each land feature as an SVG path, filled with a solid green hue. Using a GeoJSON topology from a GitHub-hosted file, the code relies on `d3.geoMercator` for projection, `d3.geoPath` for converting features to path data, and `topojson.feature` to transform the topology. The map is scaled and translated to fit the 960-by-500 viewport, displaying the country's shape without additional styling.

JJames Rhodes

79% match

Loading thumbnail…

visualizing the China map

This example visualizes the country map of China using a D3.js v4 geo projection. The map renders administrative regions as SVG paths, colored green with aquamarine strokes, beneath a purple header. It uses topojson.presimplify and topojson.feature to process geographic data from a GitHub-hosted JSON file. The visualization applies a d3.geoMercator projection fitted to the SVG dimensions via d3.geoPath, and it dynamically redraws the map on window resize using the draw function. The map’s boundaries are simplified based on a threshold within the d3.geoTransform, though the threshold remains at zero, showing all geographic details. The code relies on d3.select, d3.json, and d3.geoTransform to manage the SVG element and projection.

PPrathyusha Jampala

78% match