HQ — VizHub

100%

HQ

✓ Published2🌍 Public

Last edited Jun 17, 2024

Created on Jan 19, 2024

This chart visualizes changes in population and income inequality across U.S. metropolitan areas from 1980 to 2015. It uses a logarithmic x-axis for population and a reversed y-axis for inequality, with arrows indicating the direction of change for each metro, colored by the magnitude of inequality shift. Built with D3.js v5 and the Observable Plot API, the visualization encodes data from the `metros.csv` file, with labels for select metros and a color legend for inequality change.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Fork of Observable Plot Starter

This example uses Observable Plot to visualize changes in income inequality and population across 59 US metro areas from 1980 to 2015. It renders a scatter plot with logarithmic x-axis, where each city is an arrow mark showing the shift from its historical to current values. A color legend encodes the change in inequality, and labels highlight select metropolitan areas. The chart is built with `Plot.plot`, `Plot.arrow`, and `Plot.text`, reading data from a CSV file, with margins explicitly set for the `figure` element and dimensions computed from the container for responsive refreshing.

RRenato Hermoza Aragonés

73% match

Loading thumbnail…

Observable Plot Starter

An Observable Plot starter demonstrates how to build an arrow variation chart, tracking changes in population and income inequality across U.S. metropolitan areas from 1980 to 2015. The `@observablehq/plot` library renders logarithmic x-axes, a color legend, and curved arrows whose stroke color encodes inequality shifts. It loads CSV data with `metros.csv`, converts strings to numbers, and dynamically sizes the plot to the container via `container.clientWidth` and `container.clientHeight`. The code includes hot-reloading support by replacing the container's first child on each run.

CCurran Kelleher

69% match

Loading thumbnail…

Metropolitan Unemployment

This visualization shows the distribution of unemployment rates across 380 U.S. metropolitan areas from January 2000 to December 2012. Using a time-series heatmap, it displays monthly unemployment rate bins as colored rectangles, with darker purple indicating higher numbers of areas within a given rate range. The code uses D3 v3’s `d3.time.scale`, `d3.svg.axis`, and `d3.interpolateLab` for color interpolation. Data from the Bureau of Labor Statistics is loaded via `d3.json` and rendered as SVG rectangles.

Mmbostock

68% match

Loading thumbnail…

Fork of Axes with React & D3

This example displays the top 10 most populous metropolitan areas by their 2020 cost of living, shown as a horizontal bar chart. It uses React for component state and rendering, while D3 v5's `scaleBand` and `scaleLinear` handle the axis scales and `max` determines the domain. The SVG chart includes a labeled x-axis with ticks and a y-axis of metro names. Data is loaded from a CSV via `d3.csv`, and the code combines React hooks like `useState` and `useEffect` with D3's functional APIs.

NNikhilchiguru-8

66% match

Loading thumbnail…

#5 G. Riha Air Pollution and Income

This interactive scatter plot explores the relationship between PM2.5 air pollution levels and various socioeconomic indicators across Los Angeles, Orange County, and the San Francisco Bay Area. The visualization uses dropdown menus to let viewers switch which region and which income, health insurance, or poverty metric is displayed on the y-axis. Built with D3 v5, the plot uses `scaleLinear`, `axisLeft`, and `axisBottom` for axes, while a transition with a duration of 900 milliseconds and staggered delays animates each circle from the center to its final position. The SVG rendering uses semi-transparent teal circles.

Ggarrettriha

65% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays U.S. Metro Areas violent crime data, letting users select which attribute to plot on each axis via dropdown menus. The visualization uses React for component-based rendering and d3.scaleLinear for axis scales, with SVG circles representing data points. Users can compare metrics including violent crime, homicides, robberies, and total population across metro areas. The chart includes axis labels, formatted tick values using d3.format, and a color legend with hover interactions that fade non-hovered categories. Data is loaded from a CSV file using d3.csv.

Yyyaaa1

65% match

Loading thumbnail…

U.S. Metro Areas Violent Crime Rates

This visualization stacks area marks to show U.S. metro area violent crime rates per 100,000 people from 1975 to 2015, with each department colored distinctly. It uses the vega-lite-api to define the area chart, while vega and vega-lite handle rendering, and vega-tooltip provides interactive hover details. The fork deliberately applies stacking, revealing potential data errors in the source CSV. The code loads data via d3.csv and customizes axis and label styling through a config object.

CCurran Kelleher

65% match

Loading thumbnail…

Untitled

This chart displays the population distribution across six U.S. states, broken down by seven age brackets. Each state’s data is shown as a group of colored bars, with a legend that allows users to click on age categories to filter which bars remain visible. The visualization uses D3 v5 with a band scale for grouping, a linear scale for the y-axis, and an ordinal scale for colors. It is rendered as an SVG, and clicking a legend item triggers a transition that updates the visible bars and rescales the axes.

RRamon96

64% match