Skip to main content
100%

Point on a map D3

✓ Published0🌍 Public
VVictorHom
Last edited May 16, 2018
Created on May 16, 2018

A map of the United States displays two red circular markers in the San Francisco area, specifically in the northwest and central parts of the city. The visualization uses D3 v4 with a `d3.geoMercator` projection and `d3.geoPath` to render state boundaries from a TopoJSON file (`us.json`), with state polygons filled in steel blue and inter-state borders drawn as a mesh. The marker coordinates are projected through the same projection function to place the circles, which are appended as SVG `<circle>` elements with a fixed radius of 8 pixels.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Point on a map D3

A map of Japan rendered in SVG displays a single point in the north-west part of San Francisco, using a Mercator projection. The code loads TopoJSON data and draws the geographic features with `d3.geoPath`. The point is positioned via the projection’s translate and scale values, though the circle-drawing code is commented out. Built with D3 v5 and React.

RRobinFrugte97
79% match
Loading thumbnail…

map with points

This visualization displays a map of the United States with a circle for each city, sized by population using a square-root scale to reduce visual disparity. It shows the geographic distribution of populated areas across the country. The code uses React to manage state and rendering, while D3 v5’s geoAlbersUsa and geoPath project and draw state boundaries and interior borders from TopoJSON data. City coordinates are projected from longitude and latitude, and circles are rendered as SVG elements with opacity.

CChase Hall
79% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows a simple interactive map of the United States, with each state rendered as a light green shape that turns red on hover. It uses D3 v5’s `geoAlbersUsa` projection and `geoPath` to draw the geography, while TopoJSON’s `feature` extracts state boundaries from the us-atlas counties-10m dataset. The SVG paths are selected and appended via `selectAll` and `data`, with styling handled in CSS. The map is static apart from the hover effect, with no zoom or pan interactions.

Mmikezy
76% match
Loading thumbnail…

Red Dots On A Map

This visualization renders a map of the United States covered in red dots, with the number of dots dynamically displayed in the corner. It uses Poisson-disc sampling to distribute non-overlapping dots across landmasses, refined by a point-in-polygon test to ensure dots remain within state boundaries. The code relies on d3.geo.albersUsa for projection, d3.geo.path for drawing geographic features, and a Canvas context for rendering. The user can adjust the dot radius using a mousewheel or the dat.GUI slider, which triggers redraws.

FFrissAnalytics
76% match
Loading thumbnail…

Map D3

This map displays the counties of the United States using a natural Earth projection. The visualization draws each county as a separate SVG path, with white fill and black borders. The code loads TopoJSON data from a remote source, converts it to GeoJSON using the `topojson.feature` API, and renders it with `d3.geoPath` and `d3.geoNaturalEarth1`. It utilizes the D3 v5 library and appends all shapes within a single SVG container.

CChristopher Repka
76% match
Loading thumbnail…

[Working with spatial data](https://github.com/enjalot/wwsd)

This example demonstrates how to map geospatial data using d3.js projections. It renders a world map with a custom cylindrical projection and highlights two points with red circles, including one at San Francisco’s coordinates. The code uses `d3.geo.projection`, `d3.geo.path`, and `d3.geo.mercator`, along with TopoJSON to load world-110m GeoJSON data. The map and points are drawn as SVG elements, with the projection scale and translation set explicitly.

KKristinHenry
76% match
Loading thumbnail…

Let's make a US map with D3.js!

This example renders a map of the United States using state boundaries. The map is drawn as black paths with white strokes on an SVG canvas. The code loads GeoJSON state outlines from the `us-atlas` package, converts them into topological features with the `topojson` library, and projects them using `d3.geoAlbers` with `d3.geoPath` for rendering. The visualization demonstrates a basic choropleth-ready framework without additional data encoding.

Ddaigokawabe
76% match
Loading thumbnail…

map us 1

This map of the United States displays cities as red circles, overlaid on a gray state map. It uses D3’s `geoAlbersUsa` projection and `geoPath` to render the states, and plots city coordinates from `citydata.csv`. Clicking a city draws black lines to all other cities, with line thickness proportional to the clicked city’s `flow` value, and hover transitions enlarge and recolor the selected circle.

PPeiyang Li
76% match