Skip to main content
SimilarExport ZIP
100%

Fixed projection for US States

✓ Published1🌍 Public
Jjons288
Last edited Oct 23, 2018
Created on Oct 23, 2018

This example displays a map of US states colored in green, with red dots marking the geographic centroid of each state based on avocado sales data from January 15, 2017, loaded from a CSV file. The visualization uses d3.geoPath with the geoAlbersUsa projection to render the TopoJSON state boundaries, while d3.geoCentroid calculates the center points for the circles. The map is rendered as SVG and includes d3.zoom functionality for interactive panning and scaling, with state features merged from the TopoJSON data and augmented with CSV attributes.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fixed projection for US States

This example displays a fixed projection of US states using d3.geoAlbersUsa and d3.geoPath, with red circles marking the geographic centroid of each state. It loads avocado sales data from a CSV and merges it with TopoJSON state boundaries using topojson.feature. The visualization renders state shapes as SVG paths, with color-coded regional groupings (Northeast, Midwest, South, West) defined via d3.set filters, though the primary rendering shows all states in green with red centroid markers. The code uses d3.csv, d3.json, and d3.geoCentroid to process and position the data.

Jjons288
95% match
Loading thumbnail…

Fixed projection for US States

This example visualizes US states using a fixed Albers USA projection, plotting avocado sales data from a CSV dataset for January 15, 2017. State boundaries are rendered as SVG paths via d3.geoPath and topojson.feature, with red circles marking each state’s centroid using d3.geoCentroid. The map supports pan and zoom through d3.zoom, while color-coded regions (Northeast, Midwest, South, West) are defined in CSS but remain commented out in the active code.

Jjons288
93% match
Loading thumbnail…

Fixed projection for US States

This example displays a choropleth map of US states using D3 v5 and the TopoJSON us-10m dataset, where each state is drawn as an SVG path with d3.geoPath. The map is projected using d3.geoAlbersUsa. Avocado sales data from a CSV file (specifically for January 15, 2017) is joined to state features. Red circles are placed at each state’s centroid (via d3.geoCentroid) to indicate data points, while CSS classes define region-specific fill colors for the Northeast, Midwest, South, and West, although region merging is commented out.

Jjons288
92% match
Loading thumbnail…

Fixed projection for US States

This example visualizes avocado sales volume across US states using a fixed Albers USA projection. Red circles sized by a square-root scale mark each state’s centroid, with circle radius proportional to total volume from the January 15, 2017 dataset. The map uses `d3.geoAlbersUsa` and `d3.geoPath` to render state boundaries from TopoJSON, while `d3.zoom` enables panning and zooming. State data is joined from CSV and TopoJSON via `d3.csv` and `d3.json`.

Jjons288
90% match
Loading thumbnail…

Fixed projection for US States

This example visualizes US states colored by region, using sales data from an avocado dataset filtered to a single date. The map renders geographic boundaries and circles representing data points through an SVG. It processes TopoJSON and CSV data with `d3.json` and `d3.csv`, merges them via `topojson.feature`, and applies static regional color fills for the Northeast, Midwest, South, and West. The `d3.geoPath` API generates the state outlines, while CSS classes define each region’s fill color.

Jjons288
90% match
Loading thumbnail…

Fixed projection for US States

A fixed US map, projected with `geoAlbersUsa`, draws all state boundaries as SVG paths. Red circles mark the geographic centroid of each state, using `geoCentroid` and the same projection to position them. The map supports zooming via an event-driven `zoom` interaction that applies a transform to the grouped SVG elements. State boundaries are generated from TopoJSON data merged with CSV sales records for a single date, though the sales values themselves are not visualized.

Jjons288
87% match
Loading thumbnail…

Fixed projection for US States

This example displays a choropleth map of US states, with most states colored gray, a subset of states highlighted in orange, and one state (likely Alaska) highlighted in yellow. The map is rendered as SVG using d3.geoPath with no explicit projection, leaving the raw coordinates intact. It loads data from the us-10m.v1.json TopoJSON file and converts it to GeoJSON using topojson.feature. The visualization uses d3.select and d3.json to fetch and bind the data, and d3.set to identify selected state IDs.

Bbootshine2
83% match
Loading thumbnail…

Avocado Sales US States

This visualization displays avocado sales volumes across US states for the week of January 15, 2017, using a choropleth-style map where states with sales appear in pink and states without data are gray. Circles sized by total sales volume are overlaid at each state’s centroid, using `d3.geoAlbersUsa` projection and `d3.geoPath` for state boundaries. The code loads data from a CSV via `d3.csv` and merges it with TopoJSON state geometries using TopoJSON’s `feature` function, then applies `d3.scaleSqrt` to scale circle radii. Interactivity includes zoom via `d3.zoom` and hover effects that highlight states in red.

Jjons288
83% match