Skip to main content
SimilarExport ZIP
100%

California Counties

✓ Published0🌍 Public
MMTClass
Last edited May 20, 2017
Created on May 20, 2017

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

NY Counties

This visualization displays California counties using a conic conformal projection, with population data shown interactively on mouseover. The map initially outlines the entire United States, then focuses on California counties filled in white. The example uses d3.geoConicConformal for projection, d3.geoPath for rendering, and topojson-client to process county boundaries from a GitHub-hosted TopoJSON file. Population values come from a separate JSON dataset matched by FIPS code, displayed with d3.format. Hovering highlights counties in yellow and shows the county name with its population.

MMTClass
87% match
Loading thumbnail…

NY Counties

This example visualizes earthquake epicenters overlaid on California county boundaries. Red points mark quake locations; a tooltip shows each event's magnitude and place name, while a yellow highlight appears on hover. The visualization uses a conic conformal projection and plots California counties from a TopoJSON file, with earthquake data pulled from the USGS GeoJSON feed. The code employs d3.geoPath for map rendering, d3.json for loading both datasets, and mouseover/mouseout events for interactivity.

MMTClass
85% match
Loading thumbnail…

California Earthquakes

This visualization maps California earthquakes from the USGS live GeoJSON feed onto a state map. Red dots mark earthquake epicenters, sized by magnitude, with hover interactions showing details in a corner panel. The map uses a conic conformal projection for California state plane coordinates, rendered with D3 v4 and default SVG paths via the `d3.geoPath` API. County and state boundaries come from a TopoJSON source, processed using the TopoJSON client library, while the earthquake layer is drawn after the map is projected.

MMTClass
84% match
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
83% 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
82% 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
80% 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
79% match
Loading thumbnail…

US Counties

This map of US counties displays all county boundaries with a subtle drop-shadow effect. The code uses D3 v4’s `d3.geoAlbersUsa` projection and `d3.geoPath` to render geographic features. It loads TopoJSON from a local `counties.json` file and converts it to GeoJSON via `topojson.feature` and `topojson.mesh`. The visualization plots state borders as a separate mesh, overlays white and blurred nation outlines for depth, and draws each county as an outlined SVG path with thin gray strokes.

MMTClass
79% match