Fork of ICE-5: The Shapes of Data

100%

Fork of ICE-5: The Shapes of Data

✓ Published1🌍 Public

Last edited Feb 28, 2026

Created on Feb 28, 2026

Built with D3 v7 and React, this example presents an interactive bar chart that displays labeled and measured fields from a dataset. Users select which data columns to visualize through dropdown menus and can toggle descending sort order. The chart renders as SVG with hover tooltips showing values, while summary cards update to reflect aggregate statistics. The fork is based on an original work by ICE-5.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Barchart_ICE-6

This example shows an interactive bar chart rendered as SVG via D3 v5 within a React framework. The chart visualizes categorical data with vertical bars, featuring hover interactions and tooltips that display values. The graphic includes a stylized decorative header illustration with abstract curves and shapes, and a complex y-axis with value labels. The visualization uses a clean, minimal design with gray tones and orange highlights for the bars, with axes and labels clearly delineated.

86% match

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This example demonstrates how to build interactive charts by combining React and D3 v7. It renders a bar chart and accompanying line series using SVG, where user-driven selections update the displayed marks and channels. The visualization highlights how D3's data-join and scales work with React's component model to produce declarative, reusable chart elements.

Mmanthenasirisha06@gmail.com

84% match

Loading thumbnail…

Fork of Fork of ICE-6: Rendering Marks and Channels with React & D3

This interactive bar chart displays student statistics by area, using an SVG visualization rendered through React and D3. The chart loads data from a CSV file via `d3.csv`, then maps area names to horizontal bars using `d3.scaleBand` and `d3.scaleLinear` for axes. Tick marks and labels are generated with `d3.axisLeft` and `d3.axisBottom` equivalents, while React components manage the rendering pipeline. The visualization uses `d3.max` and `d3.format` for scaling and number formatting, with the top 15 records shown.

SSaiipriiya

83% match

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This fork of ICE-6 combines React with D3 v5 to render a bar chart exploring Netflix subscription costs across countries, using data from a gist-hosted CSV. The chart visualizes four measurement categories—sepal length, sepal width, petal length, and petal width—for three Iris flower species. React manages the UI state while D3's `scaleBand`, `scaleLinear`, `select`, and `axisLeft`/`axisBottom` handle scaled axes and rendering. The example demonstrates how D3's low-level API can integrate with React components to produce an interactive, data-driven visualization without relying on abstraction layers.

Bbhanuteja1807@gmail.com

83% match

Loading thumbnail…

Fork of Fork of ICE-6: Rendering Marks and Channels with React & D3

This example shows a horizontal bar chart of office supply sales, displaying the top 15 items with their unit counts. The visualization uses React to manage the component state and render the SVG elements, while D3 provides the data-loading and scaling utilities, including `csv`, `scaleBand`, and `scaleLinear`. The data is fetched from a GitHub Gist URL, and the bars are drawn as SVG `<rect>` elements with custom tick marks and labels for both axes.

SSaiipriiya

83% match

Loading thumbnail…

Fork of Fork of ICE-6: Rendering Marks and Channels with React & D3

This bar chart displays the best-selling books data from a CSV file, showing book categories and their population values. The visualization uses React with hooks for state management and data loading via D3’s `csv` function, then renders bars as SVG rectangles using D3’s `scaleBand` and `scaleLinear` for axes and positioning. Tick marks, axis lines, and labels are manually generated in JSX, with D3’s `max` and `format` utilities supporting the scale domain calculations.

AArefa Patwary

83% match

Loading thumbnail…

Fork of Fork of ICE6

This example displays a horizontal bar chart comparing the population of ten countries. D3.js loads the data from a remote CSV file, and React renders the visualization as SVG elements. The chart uses D3's scale functions to map data values to pixel coordinates, with axis ticks generated from the linear scale. Bars are drawn as SVG rectangles, showcasing how D3 and React can be combined for data-driven graphics.

Hharika-1929

83% 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

82% match