San Francisco County Map

100%

San Francisco County Map

✓ Published0🌍 Public

Last edited Jul 25, 2021

Created on Jul 24, 2021

This map shows the geographic boundaries of San Francisco County as an SVG-rendered chloropleth, with county shapes drawn from a TopoJSON source loaded via `d3.json`. The visualization uses `feature` from topojson to extract GeoJSON data and `d3.geoPath` with an `geoEqualEarth` projection to render each county outline as a path. The React-based component, `Marks.js`, maps over the GeoJSON features to generate the SVG paths, while the map initially displays a "Loading..." state until the asynchronous data fetch completes via `useEffect`.

AI-generated description

Just trying to make a map of San Francisco County.

MIT Licensed

Similar vizzes

Loading thumbnail…

California Counties

This example visualizes California counties with a map rendered using SVG and the D3.js v4 library. It loads county boundaries from a TopoJSON file and an earthquake feed from USGS, though only the county boundaries are drawn. The map uses a conic conformal projection via `d3.geoConicConformal` and `d3.geoPath`, with the projection fit to the state’s extent. Hovering over a county highlights it in crimson and displays its name and population in an overlay, using a mouseover event and the `d3.format` API.

MMTClass

78% match

Loading thumbnail…

map

This example displays a map of U.S. counties as unfilled, stroked polygons on a blank background, all rendered as SVG paths. The map shows the geographic boundaries without additional fill or data encoding. The code uses React with D3 v5 functions including `d3.geoAlbersUsa` for the projection, `d3.geoPath` to generate the path data, and TopoJSON's `feature` function to convert topojson data into GeoJSON features. Data loads asynchronously via `d3.json` from a remote URL, and each feature is mapped to an SVG `<path>` element with a thin teal stroke.

CChase Hall

78% match

Loading thumbnail…

Cali map

This map of California counties uses a Mercator projection from d3-geo to render land area and interior borders. The visualization displays county boundaries derived from a TopoJSON dataset of California, with the d3.geoPath and d3.geoMercator APIs converting geographic coordinates into SVG paths. React manages the component structure while d3.json and topojson's feature and mesh functions process the raw data, filling land masses in teal and stroke interiors in a lighter contrasting color.

AAnthony Ynami

76% match

Loading thumbnail…

US Map

This interactive visualization displays all US counties as a choropleth-style map rendered with a natural Earth projection using d3.geoPath. The map is drawn with SVG elements, featuring graticules and a sphere outline to provide geographic context. County boundaries come from a TopoJSON file loaded asynchronously and converted to GeoJSON features. Built with React and D3 v7, the visualization dynamically fills the browser window and uses the Poppins font for its minimal interface.

JJohn Lewis

76% match

Loading thumbnail…

World Map

This visualization displays a world map using geographic data, rendering country boundaries as black strokes. The map is constructed with React and D3, utilizing the `d3.json` loader to fetch TopoJSON data from the `world-atlas` package, then converting it to GeoJSON features via the `topojson` `feature` API. The `Marks` component draws the map paths using D3’s `line` generator with the `curveNatural` interpolation, while also placing circular markers at data points from the SF temperature dataset. The SVG output is styled with a teal color scheme and Poppins font.

AAhmad Butt

75% match

Loading thumbnail…

US Map practice

This example shows a static map of US counties and state boundaries rendered in SVG, with each county path filled in grey and state interior borders drawn in a distinct teal color. The visualization uses D3 v5’s `geoPath` with a `geoIdentity` projection that applies `reflectY(true)` to flip the map vertically. React components load TopoJSON from the US Atlas package (`counties-albers-10m.json`), converting it to GeoJSON features via `feature` and `mesh` from TopoJSON, then fitting the projection to a 960×500 viewport with `fitExtent`. The map includes county polygons and state outline meshes, with styling defined in an external CSS file.

AAndre J Denais

75% match

Loading thumbnail…

s map

This map of Swedish counties visualizes administrative boundaries using a geoMercator projection fitted to the extent of the geographic features. Built with React and D3 v5, the code loads TopoJSON data from a GitHub gist and converts it to GeoJSON using `topojson.feature` and `topojson.mesh`. The `d3.geoPath` generator renders both county outlines (`feature`) and interior borders, with styling defined in CSS that fills each county in teal and strokes boundaries in contrasting colors. The visualization presents the simplified county geometry as an interactive SVG graphic.

SSaahithi49

75% match

Loading thumbnail…

Swedish map

This visualization displays the counties of Sweden using a geographic map rendered with SVG. The map fills the entire viewport via a Mercator projection fit to the data extent, with each county filled red and internal boundaries highlighted in purple. The implementation uses d3-geo’s `geoMercator`, `geoPath`, and `fitExtent` to project GeoJSON features derived from a TopoJSON source via topojson’s `feature` and `mesh` functions. React manages the component state and renders the paths, while data is loaded asynchronously with `d3.json`.

RRakshithaRao27

74% match