Skip to main content
SimilarExport ZIP
100%

Cali map

✓ Published0🌍 Public
AAnthony Ynami
Last edited Apr 1, 2021
Created on Apr 1, 2021

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.

AI-generated description

A Scatter Plot of the Data Canvas Sesnse Your City Dataset

MIT Licensed

Similar vizzes

Loading thumbnail…

California Map

This example renders a map of California using D3.js and TopoJSON data from the US Atlas. The code loads the states-10m.json file, filters the TopoJSON to extract the California geometry, and applies a d3.geoAlbersUsa projection fit to the state’s bounds. A d3.geoPath generator then draws the resulting SVG path element, displaying the state’s outline at a 960×500 resolution. The visualization demonstrates importing D3 via UNPKG and using topojson-client to convert geographic features.

Aaniteshterala2000
80% match
Loading thumbnail…

Cali map json

This interactive visualization maps cumulative COVID-19 deaths across California counties, combining a bubble map with a brushable time-series histogram. The map projects county centroids using `d3.geoMercator`, while circle radii scale with total deaths via `d3.scaleSqrt`. The linked histogram aggregates daily deaths into monthly bins using `d3.histogram` and `d3.timeMonths`, with `d3.brushX` enabling temporal filtering that updates the map’s displayed bubbles. Data comes from a JHU CSSE time-series CSV and county boundaries from a TopoJSON file, rendered as SVG with React.

AAnthony Ynami
79% match
Loading thumbnail…

San Francisco County Map

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`.

AAndre J Denais
76% match
Loading thumbnail…

Projected TopoJSON

A California county map is drawn from projected TopoJSON data, where coordinates are pre-converted to screen space so the geometry can be rendered without a geographic projection. The example uses `d3.geoPath` with a null projection and a Canvas 2D context to fill counties in light gray and stroke the mesh boundaries between distinct polygons with dark gray. The TopoJSON file was preprocessed with command-line tools like `ogr2ogr` and `topojson`, including simplification, while the rendering code loads the local `ca.json` file directly.

Mmbostock
75% 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
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…

Custom Projection

This example displays a map of California counties and their boundaries, rendered with a custom 2D affine transform instead of a standard geographic projection. The `d3.geoPath` and `d3.geoTransform` APIs apply a matrix operation that flips the y-axis, allowing pre-projected TopoJSON data to be correctly positioned within the SVG viewport. The map uses gray fills and strokes, with counties and boundary lines drawn as separate SVG paths.

Mmbostock
75% match
Loading thumbnail…

Untitled

This choropleth map shows population density per square mile across California counties, using a sequential orange-red color scale with a threshold legend. The visualization loads GeoJSON topology data and renders county boundaries as SVG paths via `d3.geoPath`. Colors are assigned by county ID using `d3.schemeOrRd[9]`, while the legend uses `d3.scaleThreshold` and `d3.axisBottom` to display the value ranges. County outlines are drawn from a separate topology object with a semi-transparent black stroke.

AAlice Hua
75% match