Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
NNigel
Last edited Dec 15, 2022
Created on Dec 15, 2022
Forked from HTML Starter

This example demonstrates a minimal geographic map rendered as an SVG, showing a single red point at the center of a Mercator projection. The visualization uses d3.geoMercator to project coordinates, d3.geoPath to generate the SVG path for the point, and appends the resulting shape to an SVG element created with d3.select. The code sets the projection’s center, scale, and translation to position the map, and styles the point with a red fill and black stroke, providing a simple foundation for geographic data display.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This example displays a world map rendered as SVG paths, colored grey with thin white stroke lines separating countries. The map uses the Mercator projection, centered on the prime meridian and rotated to show the eastern hemisphere. Users can pan and zoom interactively via a d3.zoom handler, which applies a transform to the grouped country paths during the zoom event. The geographic data comes from a TopoJSON file loaded with d3.json, and the features are extracted using topojson.feature before being drawn with d3.geoPath. The projection is configured with d3.geoMercator, and the zoom scale is restricted to a range of 1 to 8.

NNatalija Jansone
83% match
Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal geographic visualization using D3 v7, rendering a red point at coordinates [0,0] on a Mercator-projected map. It creates an SVG canvas, applies `d3.geoMercator` for projection and `d3.geoPath` to generate the path data for the point. The circle is drawn as a single SVG path with a red fill and black stroke. The code highlights the basic setup for projecting geographic coordinates into SVG paths using the D3 library.

NNigel
83% match
Loading thumbnail…

Untitled

This example displays a small, empty SVG canvas with a fixed height of 75 pixels, embedded in an HTML page. The code sets up a D3.js geographic projection using `d3.geoConicConformal()` centered on France, along with a `d3.geoPath()` object, but the SVG group for departments is appended without any geographic data being drawn. The visualization shows only a blank map area, as the data source and rendering steps are not implemented in the provided files. It demonstrates the initial setup for a React-based SVG visualization using D3 v5.

AArthyMcFly
80% match
Loading thumbnail…

Untitled

This example displays a map of New York State, rendering its geographic boundaries as steel-blue shapes on an SVG canvas. It loads GeoJSON data from a remote GitHub gist using `d3.json` and projects the coordinates with `d3.geoAlbersUsa`. The code uses `d3.geo.path()` to convert the projected features into SVG path data, appending each region as a `<path>` element within grouped `<g>` elements. The visualization relies on D3 v5 and React, with the final output showing a simple, unadorned state outline.

Llupica.matthew@gmail.com
80% match
Loading thumbnail…

Untitled

This example displays a world map rendered as SVG paths, with each country filled in grey and stroked with white. The visualization uses a Mercator projection centered on the equator, configured via `d3.geoMercator` with a custom scale and rotation. The code loads US Atlas topology data from a remote JSON file and uses `topojson.feature` to extract country boundaries, which are then drawn with `d3.geoPath`. The SVG container is created using `d3.select` and appended to the document body.

Sspace-captain96
80% match
Loading thumbnail…

Untitled

This example displays a choropleth-style map of the United States using SVG paths. It renders state boundaries and fills each state as a separate path, with a hover effect that turns states red via CSS. The visualization loads TopoJSON data from a remote URL and converts it to GeoJSON using the `topojson.feature` and `topojson.mesh` APIs. It relies on `d3.geoPath` to project and draw the geographic shapes, while `d3.json` fetches the data asynchronously. State borders are drawn as a white stroke overlay for visual separation.

MMina Rezaei
79% match
Loading thumbnail…

Map

This example displays a world map rendered with SVG paths, using a Mercator projection. It loads geographic data from a GeoJSON file and draws each country as a path element. The code uses D3 v5’s `d3.json`, `d3.geoMercator`, and `d3.geoPath` to project and trace the map, within a fixed 1400×700 viewBox. No interactions or styling are applied beyond the static continent paths, making it a minimal, barebones geographic visualization.

SShweta-tech
79% match
Loading thumbnail…

Untitled

This example displays a world map colored by continent, with each landmass labeled at its geographic centroid. It uses a Natural Earth projection with a slight rotation, rendered as SVG paths. The code loads TopoJSON data, converts it to GeoJSON features via `topojson.feature`, and projects centroids using `d3.geoCentroid` and `d3.geoPath`. Continent colors are assigned from a hardcoded array, and labels are appended as SVG `<text>` elements. The visualization relies on d3.v4, topojson.v2, and d3-geo-projection.

RRoyCsuka
78% match