A D3 Map, points plotted with canvas instead of SVG

100%

A D3 Map, points plotted with canvas instead of SVG

✓ Published0🌍 Public

Last edited Jun 5, 2021

Created on Jun 5, 2021

This example shows a zoomable map of Manhattan with tree locations from a CSV file, plotted as red circles. It uses D3 v3 for map tile fetching and projection, while rendering the points onto a Canvas 2D context instead of SVG for performance. The code demonstrates a hybrid approach where D3's `d3.geo.tile` and `d3.geo.mercator` handle geographic transforms, and the canvas context draws arcs at projected coordinates. Zooming and panning trigger redraws, and the mouse position is displayed with latitude/longitude.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Points on a Map - React, D3

This example displays a world map with city points, using a natural Earth projection to render country boundaries, graticules, and interior borders from World Atlas TopoJSON data. City locations are plotted as semi-transparent circles based on latitude and longitude coordinates loaded from a CSV file. The visualization is built with React for component structure and D3 v5’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule` for map geometry, rendered as SVG elements.

NNelson M

79% match

Loading thumbnail…

Map Zooming III

A map of the United States is drawn with canvas, and moving the mouse horizontally smoothly interpolates between three zoom levels centered on San Francisco, New Orleans, and New York. The example uses a linear scale with `d3.interpolateZoom` to map mouse position to a zooming transform, and `d3.geo.transform` for simplification. It renders TopoJSON state boundaries clipped by `d3.geo.clipExtent`, using D3 v3’s `d3.geo.path` with a canvas context.

Mmbostock

79% match

Loading thumbnail…

Making a world map with city points React and D3

This example displays a world map with city points sized by population, built using React and D3. It shows countries with interior boundaries, a graticule, and a sphere background, with city circles projected using the d3.geoNaturalEarth1 projection. The map uses d3.json to load the world-atlas TopoJSON, d3.csv for city data, and d3.geoPath with d3.geoGraticule for rendering. City radii are scaled using d3.scaleSqrt, while d3.max determines the scale domain. The visualization is rendered as an SVG within a React component, using React hooks to manage asynchronous data loading.

Bblackbottt

78% match

Loading thumbnail…

Fork of Map using Canvas

This example renders a map of India using D3's `d3.geoMercator` projection and `d3.geoPath` with a Canvas 2D context. It draws the GeoJSON boundaries of Indian states with white fill and black strokes onto an 890×430 canvas. The code loads the geographic data from a remote GeoJSON file and also references the `random-points-on-polygon` library, though it does not explicitly generate points in the visible script. The map is centered on coordinates [80, 22.9] and uses a mercator projection scaled to the canvas width.

SShweta-tech

78% match

Loading thumbnail…

Points on a Map

This example renders a natural Earth projection map with graticules, country borders, and shaded landmasses using SVG. It loads world atlas TopoJSON data via `d3.json` and topojson’s `feature` and `mesh` functions, then draws paths with `d3.geoPath`. The map displays city points from a CSV dataset loaded with `d3.csv`, converted to numeric coordinates, though the points themselves are not yet drawn. React manages loading states for both datasets through custom hooks.

Yyejichun@naver.com

78% match

Loading thumbnail…

Points on a ma

This example displays a world map with country boundaries and graticules, overlaid with circular points representing cities. The map is rendered using SVG paths generated with d3.geoPath and the geoNaturalEarth1 projection, while the city locations are projected onto the map and drawn as circles. The visualization uses React to manage the data loading and rendering, with d3.csv fetching city data from a remote source and topojson processing the world atlas topology. The map is styled with a subtle color palette for land, interiors, and graticules.

SShantanu

78% match

Loading thumbnail…

My map

This map displays global cities as labeled points overlaid on a Mercator-projected world map. It uses d3.geoPath to render country boundaries from a GeoJSON file and d3.geoMercator to project coordinates. City data from a CSV file is plotted with SVG circles and text labels. The visualization is built with React, uses SVG rendering, and loads both datasets via Promise.all.

VVineel Gannu

78% match

Loading thumbnail…

Document

This example shows an interactive world map rendered on a Canvas element, with a red landmass silhouette. It demonstrates how to synchronize a custom map projection with the D3 zoom behavior, so that panning and zooming directly manipulate the projection’s translate and scale values. The code uses `d3.geoMercator` and `d3.geoPath` to draw the map, while a topojson mesh is fetched from a remote URL and rendered as filled paths. A zoom handler clears and redraws the canvas on each transform, and the projection is initially fitted to a simple LineString feature using `fitExtent`.

PPhilippe Rivière

77% match