Beer / Wine Popularity Ratio - US Choropleth

100%

Beer / Wine Popularity Ratio - US Choropleth

✓ Published0🌍 Public

Last edited Aug 1, 2017

Created on Aug 1, 2017

This choropleth maps the ratio of beer to wine popularity across U.S. states, coloring each state on a continuous red-to-yellow scale from the loaded CSV data. Built with D3 v4, it uses `d3.geoAlbersUsa()` for projection and `d3.geoPath()` to render state boundaries from a GeoJSON file, while a linear color scale drives the fill. A gradient legend with an axis is appended to display the data range.

AI-generated description

A modular version of this excellent choropleth - will map any CSV statesdata.csv on a linear continuous value, using d3js v4.

Requirements for statesdata.csv:

state column with standard full-length state names
value column with any numeric values

Also, you can edit the color ramp using the lowColor and highColor variables.

forked from <a href='http://bl.ocks.org/wboykinm/'>wboykinm</a>'s block: <a href='http://bl.ocks.org/wboykinm/dbbe50d1023f90d4e241712395c27fb3'>Modular US State Choropleth</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Beer vs Wine - US

This choropleth map shows the ratio of wine to beer consumption by US state, with a color gradient from dark red (lower values) to yellow (higher values). The visualization uses a D3 Albers USA projection via `d3.geoAlbersUsa()` and `d3.geoPath()` to render state boundaries from the included GeoJSON, while integrating beerwine.csv data through `d3.csv()`. A linear color scale (`d3.scaleLinear()`) maps data values to the chosen palette, and a legend with a gradient swatch and axis (`d3.axisRight()`) displays the value range. The map is rendered as SVG paths.

LLichtphyz

92% match

Loading thumbnail…

Choropleth population map

A choropleth map of the United States displays state-level population counts from 1990, using a color gradient from light orange to dark red. The map is rendered as SVG with D3 v3, leveraging `d3.geo.path` and TopoJSON for state boundaries. Population data from a CSV file is joined to state IDs, and a custom `d3.scale.quantize` interpolates colors across 100 steps. Hovering over a state triggers a tooltip and animates opacity, while the legend and interactivity are built with jQuery and D3 transitions.

Vvishusikka

76% match

Loading thumbnail…

Choropleth population map

A choropleth map of the United States displays 1990 county-level population estimates from a CSV file, with counties shaded from light beige to dark red based on population. The map uses a blue-to-red sequential color scale, and hovering over a state dims others, highlights the selected one with a black stroke, and shows a tooltip with the state name and its population value. Built with D3.js (d3.v3), the visualization uses `d3.csv` to load data, `d3.geo.path` to render geographic features from a TopoJSON file, and `d3.mouse` events to manage tooltip positioning.

Pprateekvasi

75% match

Loading thumbnail…

USA state Map

A choropleth map of the United States colors states based on a numeric value from a CSV file, with a linear color scale mapping low values to light red and high values to dark red. The map is rendered as SVG using D3 v6 and topojson, with the `d3.geoPath` generator drawing state boundaries and `d3.scaleLinear` adjusting fill colors. States without matching data appear blue. The CSV is loaded via `d3.csv`, and state boundaries come from the us-10m.v1.json TopoJSON file.

VVinay Vemuri

74% match

Loading thumbnail…

Population Choropleth

A population choropleth of U.S. counties uses a logarithmic color scale to show population density, ranging from pale yellow to dark blue. The map projects counties with d3.geo.albersUsa() and renders them as SVG paths via d3.geo.path. Density is calculated by dividing each county’s population (from the 2010 Census shapefile, converted to TopoJSON) by its projected area, with the color domain set between the 1st and 99th percentiles. The topojson.feature API extracts county geometries for display.

Mmbostock

74% match

Loading thumbnail…

USA Map

This choropleth map of the United States colors each state according to a numeric value loaded from a CSV file, using a linear lightred-to-red scale. The SVG rendering is built with d3.geoPath, which projects the US states from a GeoJSON file, while topojson.feature extracts the state features. State FIPS codes from the CSV are matched against the GeoJSON IDs to assign fills, with gray as the default for missing data. The visualization relies on d3.select, d3.csv, and d3.json for data loading.

NNukaShravanKumar

74% match

Loading thumbnail…

Choropleth Map

A choropleth map of United States states renders geographic boundaries as SVG paths, colored light blue with black outlines and a red hover state. The map uses the topojson library to convert US Atlas TopoJSON data into GeoJSON features, then projects them with d3.geoAlbersUsa and renders them via d3.geoPath. Interactive zooming is enabled through a d3.zoom event that applies transform updates to the map group, while a categorical color legend displays the domain. State data loads from a remote US Atlas JSON file.

NNicholas Papacostas

74% match

Loading thumbnail…

Colm Lang | A9 Choropleth Map

This choropleth map displays U.S. state population estimates for 2020, with each state filled by a color from a five-step quantized scale. The visualization uses d3-geo with an Albers USA projection and d3.geoPath to render the states from a GeoJSON file, while population data is loaded from a CSV. A d3.legendColor legend, styled with ColorBrewer palettes, communicates the population ranges. Missing values render in light gray, and the SVG output includes a title for the legend.

CColm Lang

73% match