Skip to main content
SimilarExport ZIP
100%

ICE6

✓ Published0🌍 Public
Aakhila157
Last edited Mar 12, 2023
Created on Mar 7, 2023
Forked from ICE6

This bar chart displays the average star ratings for fifteen books, using data loaded from a CSV file via `d3.csv`. The visualization uses React hooks (`useState`, `useEffect`) to manage the data, while D3 v5 APIs construct the scales and axes: `scaleBand` for the book names on the y-axis, `scaleLinear` for the ratings on the x-axis, and `axisBottom`/`axisLeft` for ticks. Each book’s rating is rendered as an SVG `<rect>` within a `<g>` group, with grid lines and tick labels drawn manually using D3 selections. The chart is embedded in an HTML page that loads React and D3 from CDN.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-6

A horizontal bar chart displays the top 20 rated anime, with each bar’s length proportional to its rating. The visualization loads CSV data via `d3.csv`, sorts by rating, and renders SVG bars, axes, and labels using React components. It uses D3 scales (`scaleBand`, `scaleLinear`), axis ticks, and text elements for annotation. The chart is styled with CSS in the HTML file, and the React app updates state after data retrieval.

RRaajithaSabbineni
85% match
Loading thumbnail…

ICE-6 Dv

This visualization displays the top-selling books by population data from a CSV file, rendered as a horizontal bar chart. The code uses React hooks like `useState` and `useEffect` to load and manage data, while D3's `scaleBand`, `scaleLinear`, and `max` functions handle axes scaling and extents. SVG rectangles represent each book's population value, with axis ticks generated via `xScale.ticks()`. The example demonstrates a React-D3 integration pattern using d3.v5.

Ssowmyanagula@my.unt.edu
85% match
Loading thumbnail…

ICE-6 Dv

This visualization displays the top-selling books by population data from a CSV file, rendered as a horizontal bar chart. The code uses React hooks like `useState` and `useEffect` to load and manage data, while D3's `scaleBand`, `scaleLinear`, and `max` functions handle axes scaling and extents. SVG rectangles represent each book's population value, with axis ticks generated via `xScale.ticks()`. The example demonstrates a React-D3 integration pattern using d3.v5.

Ssowmyanagula@my.unt.edu
85% match
Loading thumbnail…

ICE-6: Rendering Marks and Channels with React & D3 by Arefa

This bar chart displays the top 11 best-selling books from an 1890 dataset, showing each book’s population-related value as a horizontal bar. The visualization uses React hooks like `useState` and `useEffect` to load CSV data with `d3.csv`, then renders SVG rectangles scaled using `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. Orange gridlines and text labels are generated from `xScale.ticks()`, with the chart styled by CSS.

AArefa Patwary
83% match
Loading thumbnail…

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

This bar chart displays the titles and ratings of 15 movies, fetched from a remote CSV file. Built with React and D3 v5, it renders an SVG with horizontal bars and axes. The code uses `d3.csv` to load and parse data, `d3.scaleBand` for the y-axis, `d3.scaleLinear` for the x-axis, and maps data to SVG `rect` elements for the bars.

AAISWARYAMARAPATLA1999
83% 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
82% match
Loading thumbnail…

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

A bar chart displays the top 20 cosmetic products by revenue, using horizontal bars to compare product ratings against their identifiers. The visualization splits responsibilities between React state management and D3 scales, with `scaleBand` mapping ratings to the y-axis and `scaleLinear` mapping anime IDs to bar widths. SVG rendering handles all marks and channels, while custom axis ticks are generated manually through React components rather than D3 axis helpers. Data loads asynchronously from a CSV file via `d3.csv`.

Sskambhore04
82% match
Loading thumbnail…

ICE-6 DV

This visualization displays a bar chart of the top 20 anime entries from a CSV dataset, ranking them by rating on the y-axis and their anime IDs on the x-axis. The React application uses d3.csv to load the data, then constructs SVG bars with d3.scaleBand and d3.scaleLinear, including axis tick marks and labels. The bars are rendered as blue-striped rectangles, with the chart sized to a 960×500 viewport and a left margin for country names.

Ssowmyanagula@my.unt.edu
82% match