CS360 - A10 — VizHub

100%

CS360 - A10

✓ Published0🌍 Public

Last edited Apr 24, 2022

Created on Apr 24, 2022

This visualization shows the population growth rate from 2010 to 2019 for each U.S. state (aggregated from county-level data in CSV form). It uses a horizontally-oriented bar chart where green bars represent states with positive growth and crimson bars indicate population declines, sorted from highest to lowest growth rate. The chart utilizes d3.scaleLinear for the x-axis (formatted as percentages), d3.scaleBand for the y-axis, and d3.axisBottom and d3.axisLeft for the axes. A d3.legendColor legend distinguishes between increase and decrease, with data processed by aggregating county populations per state.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

A6 - Diverging Bar Chart

This diverging bar chart visualizes the change in state population from 2020 to 2023, using a diverging color scale to distinguish growth (steelblue) from decline (lightpink). The chart renders the top ten states by population change, with bars extending from a central zero axis. Built with d3.js, it employs `d3.scaleLinear` for the numeric axis, `d3.scaleBand` for categorical states, and `d3.legendColor` for the legend, while an axis is drawn using `d3.axisBottom` and `d3.axisLeft`.

RRavneet Singh Bhatia

79% match

Loading thumbnail…

Untitled

This visualization displays the population growth of California, Michigan, and Texas from 1910 to 2010 using multi-line charts. Each state is represented by a colored line with a corresponding label at the right edge. Using d3.line, d3.scaleLinear, and d3.axisBottom/axisLeft, the SVG renders population trends. A mouseover tooltip reveals yearly totals and ranks states by population, with a vertical guide line using d3.mouse and d3.event. Data comes from the state-populations.json file.

Ssitaramchallapalli

77% match

Loading thumbnail…

Population

This bar chart displays the population of 20 U.S. states ranked along the vertical axis. Each horizontal bar’s length corresponds to the state’s population value. Built with React and D3 v5, it uses `d3.csv` to load data, `scaleBand` for the categorical y-axis, and `scaleLinear` for the numeric x-axis. SVG rectangles represent bars, with manual tick rendering via `.ticks()` and gridlines. The chart includes labeled axes and a blue gridline accent.

KKolliTeja

76% match

Loading thumbnail…

Diverging Bar chart in D3

This diverging bar chart visualizes population percent changes across U.S. states between April 2020 and July 2019, using horizontal bars that extend left or right from a central zero axis. The visualization first loads CSV data via `d3.csv`, then applies `d3.scaleLinear` for axes and bar lengths, `d3.scaleBand` for the categorical y-axis, and `d3.scaleSequential` with an `interpolateRdBu` color scheme. A color legend is generated using `d3.legendColor` from the d3-legend plugin, while bars are rendered as SVG `<rect>` elements. The chart includes axis labels, a title, and subtitle, all styled with D3 v7.

EEunice Tu

76% match

Loading thumbnail…

Diverging Bar chart in D3

A diverging bar chart displays the population percent change across U.S. states, using the State Demographic dataset from the U.S. Census Bureau. The chart shows each state’s population change from April 1, 2020 to July 1, 2019, with positive changes extending right and negative changes extending left from a central zero axis. D3 v7’s `scaleLinear`, `scaleBand`, and `scaleSequential` with an `interpolateRdBu` color scheme map values to positions and colors, while the `d3.legend` plugin adds a color legend. Data is loaded as CSV via `d3.csv` and rendered as SVG rectangles.

EEunice Tu

76% match

Loading thumbnail…

Bar Chart

This bar chart displays 2018 state population data from datausa.com. It uses D3 v5 with an SVG rendering approach, mapping population values to horizontal bar lengths against state labels. The code employs `d3.csv`, `scaleLinear`, and `scaleBand` to process the data and position the bars, with `axisLeft` and `axisBottom` generating the chart’s axes. Each state’s population is represented by a steel-blue rectangle, sorted alphabetically along the vertical axis.

PPerry

75% match

Loading thumbnail…

Interactive bar chart based on categorical data

This interactive bar chart displays GDP growth rates for ten U.S. states, ordered from highest to lowest. The chart uses D3.js v5 within a React framework to render SVG bars, axes, and labels. The value on the y-axis represents GDP growth percentage, while the x-axis lists state names. The visualization includes a hover interaction: mousing over a bar highlights it and draws a horizontal dashed line at that bar's value, while showing divergence percentages between the hovered state and all others. A CSS grid and source line complete the presentation.

AAAL FORHAD

75% match

Loading thumbnail…

Population and age

This visualization shows the U.S. population distribution across age groups from 2010 to 2019, using a slider to animate between years. It renders an SVG bar chart with D3 v4, where each bar’s height and color encode population size via `d3.scaleLinear` and `d3.scaleQuantile`. Transitions smoothly update bars and axes over two seconds. Data is loaded from ten CSV files using `d3.queue` and `d3.csv`. The code relies on D3’s `scaleBand`, `axisBottom`, `axisLeft`, and `transition` APIs.

Hhamzavg

75% match