ICE61MD

100%

✓ Published1🌍 Public

Last edited Oct 19, 2025

Created on Oct 19, 2025

This bar chart displays the population growth percentage of 100 US cities from 2020 to 2024, using a dataset loaded from `city_population_growth.csv`. The visualization, rendered as SVG, sorts cities by growth in descending order and caps extreme values at 200% for clarity. It uses D3.js v7 (`d3.select`, `d3.scaleBand`, `d3.scaleLinear`) with interactive tooltips on hover, showing each city’s name and exact growth percentage. The axes are generated with `d3.axisBottom` and `d3.axisLeft`.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Ice 6 bar

This bar chart displays population values for 100 synthetic cities, with each bar’s height representing the population count and hover tooltips revealing exact figures. The visualization uses D3.js v7 to load CSV data via `d3.csv`, scale the values with `scaleBand` and `scaleLinear`, and render the chart as SVG. Horizontal grid lines created with `axisLeft` improve readability, while the x-axis labels are rotated to accommodate the many city names.

HHarshithaDontha@my.unt.edu

80% match

Loading thumbnail…

Ice 6 bar

A bar chart visualizes population counts for a list of cities, with each bar's height proportional to its population value. The chart uses an SVG renderer with D3 v7 to load CSV data, construct linear and band scales, and draw grid lines, axes, and labeled tooltips via appended `title` elements. Axis ticks are filtered to show every tenth city, and city labels are rotated for readability.

HHarshithaDontha@my.unt.edu

79% match

Loading thumbnail…

ICE_6

This horizontal bar chart displays population estimates for a subset of US states using React and D3 v5. The visualization maps state names to the y-axis and population values to scaled bar widths on the x-axis. Population data is loaded from a CSV file via `d3.csv`, parsed with `parseInt`, and sliced to 11 records. The chart uses `d3.scaleBand` for categorical y-positions and `d3.scaleLinear` for quantitative scaling, with SVG `rect` marks for bars and manual axis tick rendering via `xScale.ticks()`.

Cchilukuritagore1427@gmail.com

78% match

Loading thumbnail…

ICE - 6 Bar Graph

The visualization displays a bar chart comparing the population of U.S. states, sourced from a CSV file. It uses React with D3 v5 to render SVG bars, where each bar’s height and color vary by population value. The code employs `d3.scaleBand` and `d3.scaleLinear` for axes, with `d3.axisBottom` and `d3.axisLeft` to generate the scales, and formats population values by stripping commas.

78% match

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels (Bar Chart)

This visualization displays the 2022 population growth rates of five countries as a horizontal bar chart, with the title “2022 Population of RICH.” The bars encode growth rate via length, while country names appear on the y-axis. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to position marks, and renders axes and rectangles as SVG elements. Data is loaded asynchronously from a CSV file via `d3.csv` and filtered to the first five rows.

Mmanishcheruku

78% match

Loading thumbnail…

ICE-6: Rendering Marks and Channels with D3.js and SVG

A horizontal bar chart displays the 30 most populated cities, ranking them by their 2022 population figures. The visualization uses D3.js scales and SVG `<rect>` elements, with the x-axis employing a linear scale and the y-axis a band scale to position each bar. City names appear on the y-axis with a green fill, while a blue tick grid and pink bars encode the population values. React manages the component state, loading the city dataset asynchronously via D3’s `csv` parser.

KKrishnaPriyaKurra

78% match

Loading thumbnail…

ICE-6

This visualization displays the population growth rankings of Indian states in 2018 as a horizontal bar chart. It shows the top 20 states from a CSV dataset, with bar lengths representing the numeric ranking values on a linear scale. The React-based application loads data with `d3.csv`, slices the first 20 rows, and renders SVG rectangles using `d3.scaleBand` for the state categories and `d3.scaleLinear` for the ranking axis. Axis tick marks and labels are generated manually from the scales, with styling controlled by the accompanying CSS file.

RRamch16

77% match

Loading thumbnail…

ICE-6 Dv

This bar chart displays the top 10 U.S. states by population from the year 2000, using data loaded from a CSV file via `d3.csv`. The visualization, built with React hooks and D3, renders an SVG bar chart where each state’s population is positioned using `scaleBand` and `scaleLinear`, with axes labels and red gridlines generated from scale ticks.

Ssowmyanagula@my.unt.edu

77% match