Project Algernon - Drawing a map

100%

Project Algernon - Drawing a map

✓ Published1🌍 Public

Last edited Apr 14, 2022

Created on Apr 14, 2022

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.

AI-generated description

Project Algernon - mapping China

MIT Licensed

Similar vizzes

Loading thumbnail…

HTML Starter

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.

LLittledevil7

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

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

Loading thumbnail…

Alankruth

This example displays a choropleth map of India, rendering the country’s state boundaries as red-stroked SVG paths. It uses the `geoMercator` projection and `geoPath` from D3 v5 to project geographic coordinates, while React components manage the data loading and SVG rendering. The TopoJSON source is fetched from a GitHub gist, and the `feature` function from topojson converts the topology into GeoJSON features for drawing.

AAlankruthSai

77% match

Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a map visualization using D3.js, rendering geographical features as green shapes with black strokes on a blue background. It showcases a basic choropleth-style map by loading GeoJSON data from an external URL and projecting it using the `geoAlbers` projection. The code employs `d3.json` to fetch the data and `d3.geoPath` with the projection to generate SVG paths for each feature, while `topojson.feature` converts the data into GeoJSON format. The visualization is rendered entirely as SVG within an HTML page, making it a simple, self-contained map example.

Cchaimmaeee

76% match

Loading thumbnail…

CHINA MAP

This example displays a map of China, highlighting its administrative regions in green with yellow borders. Users can pan and zoom the map using mouse interactions, which are enabled through D3's `zoom` behavior. The visualization is rendered as SVG, with geographic paths generated using `d3.geoPath` and a `geoEquirectangular` projection. It loads TopoJSON data from a GitHub gist and uses `topojson.feature` to extract the regions, while D3's `scaleOrdinal` assigns colors from the `schemeCategory10` palette.

SSravani93-creater

76% match

Loading thumbnail…

中国地图

A choropleth map of China renders each province as an SVG path using a Mercator projection centered on the country. The D3.js code loads GeoJSON map data and applies a categorical color scale, with provinces highlighted yellow on mouseover. Province names are positioned using projected centroid coordinates, with a vertical offset applied to prevent overlap between Macau and Hong Kong labels. The visualization demonstrates D3’s geographic path generator (`d3.geoPath`) and projection utilities.

Zzhuomo-maker

76% match

Loading thumbnail…

USA Country Map

This example renders a choropleth-style USA map using SVG, showing state boundaries and filled land areas in orange. It uses D3’s `geoPath` and the `geo-albers-usa-territories` projection, with React managing the component structure. TopoJSON data is loaded via `d3.json`, and state outlines are drawn using `feature` and `mesh` from the `topojson` library. The map highlights territorial inclusion through the custom projection, while the `styles.css` defines the land fill and interior stroke.

KKiran3295

76% match