Skip to main content
SimilarExport ZIP
100%

ICE 6-1

✓ Published0🌍 Public
Ssaidhiraj16
Last edited Mar 6, 2022
Created on Mar 6, 2022

A horizontal bar chart displays the protein content in grams for ten cereals, ranked by name along the vertical axis. The code uses React with hooks (`useState`, `useEffect`) to fetch CSV data via `d3.csv` and renders the visualization as SVG. D3 scales (`scaleBand`, `scaleLinear`) position bars and axes, with custom tick rendering for gridlines and labels.

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-1

This visualization displays a bar chart of protein content in grams for ten breakfast cereals, sorted alphabetically by cereal name. Built with React hooks and D3 v5, the chart uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Cereal data is loaded from a CSV file via `d3.csv`, with each bar rendered as an SVG `<rect>` element. The code manually draws grid lines and axis tick labels using `xScale.ticks()`, and all styling is applied via CSS, including the green rect fill and red grid lines.

NNikhilMakkena
92% match
Loading thumbnail…

ICE-6 Bar Chart Cereals and their calories

This bar chart displays the calorie content of 77 cereals, using green vertical bars sorted by cereal name along the x-axis and calorie values on the y-axis. The visualization loads CSV data from a GitHub gist via d3.csv, then uses React hooks (useState, useEffect) to manage asynchronous data loading and rendering. The chart employs d3.scaleBand for categorical x-axis positioning, d3.scaleLinear for the continuous y-axis, and d3.max to compute the domain. SVG rendering occurs through React components, with rotated x-axis labels for readability and horizontal gridlines generated from y-axis ticks.

Ssreeramyamini@gmail.com
84% 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

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

ICE-6 Marks and Channels

A horizontal bar chart ranks the top ten food-producing countries by million tons, using bar length to encode quantities and the y-axis for country names. Filtered from a CSV file of global food production data, the visualization uses React for the user interface and a D3 SVG rendering pipeline, with `scaleBand` for categorical axes and `scaleLinear` for the quantitative scale.

Bbharathsivakumar07
81% match
Loading thumbnail…

Scientific Data Visualization ICE-6: Marks and Channels

This bar chart displays the calorie counts of the first 20 cereal products from a CSV dataset, using horizontal rectangles to encode values. The visualization employs React for structure and the d3 library's `scaleBand` and `scaleLinear` for axis mapping, with SVG for rendering. The code loads data via `d3.csv` from a gist URL, and the chart includes custom tick labels for both axes.

Ppravalika.thogaru10@gmail.com
81% match
Loading thumbnail…

ICE-6

This example renders a minimalist bar chart of grocery product profits using React and D3 v5. It loads CSV data via `d3.csv` and displays only the first two records. The visualization uses `scaleBand` for the y-axis positions and `scaleLinear` for x-axis widths, with profit values mapped to rectangle widths inside an SVG. The chart intentionally lacks axes or labels, and the data comes from a GitHub-hosted grocery dataset rather than the UN population data mentioned in the README.

NNaveed945
81% match
Loading thumbnail…

ICE-6

This horizontal bar chart visualizes the relationship between age and BMI for insured individuals, displaying the first 15 records from a CSV dataset. Built with React and D3 v5, it uses `d3.csv` to load data, `d3.scaleBand` for the age categories on the y-axis, and `d3.scaleLinear` for the BMI values on the x-axis. The chart renders as an SVG, with red gridlines and text labels generated via D3’s axis utilities.

Vvagdevi-369
81% match