ICE_5

100%

✓ Published0🌍 Public

Last edited Feb 26, 2026

Created on Feb 26, 2026

This example presents a bar chart of National Park visitor numbers for 2023, sourced from a remote CSV file. The visualization summarizes the data file’s size, row count, and column count in a text box, then sorts parks by visitor totals for the chart. Using D3 v7, it fetches the data, parses it with `d3.csvParse`, scales axes with `scaleBand` and `scaleLinear`, and renders the bars and axes as SVG elements.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-6

This example displays a horizontal bar chart of the ten highest national populations in 2019, using annual ticket sales data from a CSV file. The visualization is built with React and D3 v5, leveraging `scaleBand` and `scaleLinear` for the axes, while `csv` loads the dataset. Rendered as SVG, the chart includes blue bars, gridlines, and axis labels, with the title "highest population" shown above the graphic.

DDeegutla123

79% match

Loading thumbnail…

Fork of Fork of Fork of ICE-5: Loading and Parsing CSV Data with D3.js

This visualization demonstrates how to load and parse CSV data with D3.js, displaying a bar chart of population figures for the top ten countries from a GitHub-hosted ICE-5 dataset. It uses `d3.csv` to fetch and parse the data, `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and SVG `rect` elements for rendering bars. The page also includes a text overlay reporting file size, row count, and column count.

Bbindhureddy98

78% match

Loading thumbnail…

ICE5

This example shows an interactive bar chart of letter frequencies, where clicking a bar highlights it and dims the others, with a title reading "Data Visualization" above the plot. Built with React and D3 v7, it uses `d3.scaleBand` and `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for gridlines and labels, and a `ResizeObserver` to adapt the SVG to its container. Data loads from a local CSV file via `d3.csv`, and bar styling transitions smoothly on hover and selection.

Ssrinathkarumuru@my.unt.edu

78% match

Loading thumbnail…

ICE 5

This example displays a dataset summary alongside a static SVG composition of colored circles. It loads a hosted CSV file of global economy data and computes basic statistics for numeric columns, including row count, min, max, and mean. The visualization renders a 3-by-10 grid of circles using D3 v7’s selection and data-joining methods, applying a Tableau color scheme and decorative opacity. The code uses `d3.csv` for parsing and `d3.min`, `d3.max`, and `d3.mean` for summary calculations, with all output drawn as SVG elements.

CCharith Kapuluru

78% match

Loading thumbnail…

ICE-5: The Shapes of Data

This example loads a CSV dataset on study focus logs via `fetch` and `d3.csvParse`, then displays summary statistics including file size, row count, and column count. It renders a small SVG visualization using D3 v7, where the first ten rows are represented as horizontal bars whose widths increase with row index, alongside row labels. The page is styled with basic HTML and CSS, and the data URL is displayed for reference.

Ppvvaishnavi93@gmail.com

78% match

Loading thumbnail…

Fork of ICE-5: The Shapes of Data

This example, titled "ICE-5: The Shapes of Data," summarizes a CSV dataset by displaying its file size, row count, and column count. It fetches a remote CSV file using `fetch` and parses it with `d3.csvParse`, which returns a table object. The visualization renders a simple SVG bar chart where each bar’s width corresponds to its row index, using D3’s `select` and `join` APIs. The bars are drawn as rectangles, with row labels added as text elements, offering a basic overview of the dataset's structure.

Ppvvaishnavi93@gmail.com

77% match

Loading thumbnail…

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

This example renders a horizontal bar chart using React and D3 v5, displaying the 2022 population for three countries from a CSV dataset. The visualization uses SVG marks and channels, with `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. React state manages the asynchronous CSV loading via D3’s `csv` function, while the code manually draws axis ticks, gridlines, and colored rectangles. The chart includes a purple vertical grid and labeled axes, with data filtered to the first three rows of the source CSV.

Ggeethikal

77% match

Loading thumbnail…

ICE6-BarChart

This bar chart displays the sum of a numeric column aggregated by a categorical column from a CSV file, automatically detecting the appropriate columns and sorting categories in descending order. Built with D3 v7, the visualization uses `d3.csv` to load data, `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.rollup` with `d3.sum` for aggregation. Bars are rendered as SVG rectangles with tooltips showing category and value, while grid lines and axis labels aid readability.

Ssahasrakaturi91@gmail.com

77% match