Cost of Excessive Alcohol Consumption by State

100%

Cost of Excessive Alcohol Consumption by State

✓ Published0🌍 Public

Last edited Dec 16, 2020

Created on Dec 10, 2020

A choropleth on a Natural Earth projection shows the cost of excessive alcohol consumption per capita by U.S. state, with circles sized by state population. The visualization uses React to render an SVG, importing `d3.geoEqualEarth`, `d3.geoPath`, and `d3.geoGraticule` for the map and graticule, while `d3.scaleSqrt` maps population to circle radius. State boundaries come from TopoJSON’s `states-10m.json`, and cost data is loaded via `d3.csv` from a GitHub gist. Land and sphere fills are styled in CSS, with semitransparent teal circles overlaid on the map.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Cost of Excessive Alcohol Consumption By State

This interactive scatterplot visualizes the cost of excessive alcohol consumption across U.S. states, sourced from NOAA data. Users can switch between three y-axis metrics—Cost Per Capita, Cost Per Drink, and Total Cost—via a dropdown menu built with React and the react-dropdown library. Each state is rendered as an SVG circle using D3 v6 scales and axes. Hovering over the legend highlights corresponding data points by adjusting circle opacity.

AAndre J Denais

86% match

Loading thumbnail…

Proportional Symbol Maps

This proportional symbol map displays transportation costs across U.S. states, with circles sized by cost and colored purple for the top 10 most expensive states or violet otherwise. Hovering reveals a tooltip with the state name and exact cost. Built with D3 v3, it uses d3.geo.path for map rendering, d3.scale.sqrt for circle radii, and topojson to draw state boundaries. The visualization includes a legend showing cost values and employs queue.js to load GeoJSON, centroid data, and a CSV of state costs.

PPranay Matalia

74% match

Loading thumbnail…

Proportional Symbols Map

This visualization shows a proportional symbols map of U.S. states, where circle size encodes each state’s cost index and the top nine highest-cost states appear in red. It uses D3 v7 with SVG rendering, a `d3.geoAlbersUsa` projection, and `d3.geoPath` for both state boundaries and symbol placement. A `d3.scaleSqrt` maps cost indices to circle radii. The code loads state polygons from us-states.json and point data from expensive-states.json, adding tooltips on mouse events.

Eeranyoung

74% match

Loading thumbnail…

Proportional symbols map

This proportional symbols map visualizes grocery costs across US states, with circles positioned at state centroids sized by cost and colored red for the most expensive states. The visualization is built with D3 v3, using `d3.geo.path` for the map, `d3.scale.sqrt` for circle sizing, and `d3.csv` to load the cost data. Interactive tooltips appear on mouseover, and a legend displays cost values. The SVG rendering includes animated opacity transitions for symbols and a static map base from topojson data.

Pprateekvasi

74% match

Loading thumbnail…

Proportional symbols map

This proportional symbols map overlays circles on a U.S. state map to visualize grocery cost indices, with the ten most expensive states highlighted in red and a legend showing cost values. The visualization uses D3 v3’s `d3.geo.path`, TopoJSON, and a queue to load map boundaries, state centroids, and cost data. Point radii are scaled with `d3.scale.sqrt`, and hovering a circle triggers a tooltip, dims other symbols, and uses an SVG transition for emphasis.

Vvishusikka

72% match

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

71% match

Loading thumbnail…

CS360 A10

A choropleth map of the United States visualizes the average monthly transportation cost by state, with a color scale from light yellow to dark red. The map is rendered using SVG paths projected with `d3.geoAlbersUsa` and `d3.geoPath`, with state boundaries drawn as black strokes. Fill colors are assigned based on the `transportationCost` field from the `StateExp.csv` dataset, mapped through a linear color scale. A horizontal `d3.legendColor` legend displays the cost range, and a hover interaction logs the corresponding state ID to the console.

Lleoframba

70% match

Loading thumbnail…

Centered US Choropleths Map

A choropleth map of US states displays state-level rates using a green color scale, with state boundaries from the US Atlas TopoJSON and state rate data from a TSV file. The visualization uses React with D3’s `geoAlbers` projection and `geoPath` to render SVG paths, applying a `d3.scaleThreshold` color lookup based on each state’s rate. The map includes a sphere background and interior state borders, with loading handled via `Promise.all` to fetch both TopoJSON and TSV data.

Wwenleicao

70% match