ICE 6 Bar Chart

100%

ICE 6 Bar Chart

✓ Published1🌍 Public

Ddiwashhumagain@my.unt.edu

Last edited Oct 19, 2025

Created on Oct 18, 2025

This bar chart visualizes the growth of the U.S. M2 money supply in billions of dollars over time, using a horizontal bar layout where each bar represents a year. The React-based example loads CSV data via `d3.csv` and employs `scaleBand` and `scaleLinear` from D3 v5 to position bars and axes, rendering everything as SVG. It features custom gridlines, formatted tick labels, and rounded bars with hover effects and drop shadows, all styled through CSS to create a clean, modern presentation.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE 6 Multi series Chart

This example uses D3 v5 APIs within a React component to render a multi-series chart combining bars and a line. D3’s `csv` loader, `scaleBand`, `scaleLinear`, `line`, and `curveMonotoneX` construct the visualization, which plots M2 Money Supply as bars and GDP as a line over time. The data comes from a remote CSV file, and the SVG rendering includes interactive features, tooltips, and hover effects with drop shadows. Axis ticks and labels are built via custom React components using D3 scales.

Ddiwashhumagain@my.unt.edu

84% match

Loading thumbnail…

ICE 6 Bar chart of US Economic indicators

This bar chart displays economic indicators for the United States, using a horizontal layout where each category is represented by a teal bar scaled to its quantitative value. Built with React and D3, the visualization loads CSV data from a GitHub gist and renders it as an SVG. The code leverages D3's `csv` parser, `scaleBand` for the categorical y-axis, and `scaleLinear` for the numeric x-axis, with custom tick marks and labels drawn for both axes. The chart includes a title and axis labels, showing up to ten data entries.

Ddiwashhumagain@my.unt.edu

84% 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.

82% match

Loading thumbnail…

ICE-6

This bar chart displays sales data for various items, with horizontal bars showing the sale amount for each item. The visualization uses React and D3 v5, loading CSV data via `d3.csv` and rendering SVG elements with `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Gridlines and axis labels are generated manually using `xScale.ticks()`, while the data values are encoded as rectangle widths.

HHARSHA BUDDANA

81% match

Loading thumbnail…

ICE-6

A bar chart displays yearly sales figures for a company from 2014 to 2021, with values in millions and axes labeled via `d3.axisBottom` and `d3.axisLeft`. The React-based app uses D3 v5 to render an SVG, mapping data onto a band scale and linear scale. It reads its data from a hardcoded array, not the external CSV, and renders black bars with a 0.2 padding.

KKiran Jyothi Bodduluri-11604571

80% match

Loading thumbnail…

ICE6

A React-based bar chart visualizes letter frequencies from a CSV dataset. Built with D3 v7, it uses `scaleBand` for the x-axis and `scaleLinear` for the y-axis, rendering bars with rounded corners and a teal fill. Clicking a bar toggles its selection, highlighting it while dimming others. The chart includes axes with gridlines, titles, and responsive sizing via a `ResizeObserver`.

PP Manisha

80% match

Loading thumbnail…

ICE-6 Bar Graph

This example displays a horizontal bar chart of total revenue for twelve countries, loaded from a CSV file. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. SVG rectangles are rendered for each bar, with gridlines and axis tick labels generated via `xScale.ticks()` and custom text elements. The data is fetched asynchronously using `d3.csv` and processed with a row function to convert revenue values to numbers.

Ggayathrikavya

80% match

Loading thumbnail…

ICE6 Bar Plot

This example visualizes total sales for five items using a horizontal bar plot rendered as SVG. The React component fetches data from a CSV file via `d3.csv`, then uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis. D3's axis utilities generate tick marks and labels for both scales. The bars themselves are plain SVG `<rect>` elements, with their widths proportional to the sales values, and the chart includes a title and loading state.

PPlatoch

79% match