Skip to main content
SimilarExport ZIP
100%

ICE -6

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

This visualization shows 2018 car sales across northeastern United States, displaying the top 20 states in a horizontal bar chart with steel-blue rectangles. It loads CSV data from a GitHub gist, uses React for UI structure, and employs D3 version 5 APIs including `scaleBand`, `scaleLinear`, and `csv` for data fetching and rendering. The SVG visualization includes gridlines, axis ticks, and state 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_car_details

A horizontal bar chart displays the top ten car models by sales units, using skyblue rectangles scaled by a linear axis. The visualization loads CSV data from a GitHub gist, processes it with D3's `csv` method, and renders the chart in an SVG via React. D3's `scaleBand` and `scaleLinear` position the bars, while `axisBottom` tick marks are manually drawn with red lines. The React component manages state with `useState` and fetches data asynchronously using `useEffect`.

Nnikhilagopi
85% match
Loading thumbnail…

ICE6

This visualization shows the top 10 most populous US states as horizontal bars, with population values on the x-axis and state names on the y-axis. It uses React with hooks to manage state and D3’s `csv` to load data from a GitHub Gist. The bars and axes are rendered as SVG elements, with scales from `scaleBand` and `scaleLinear` positioning the rectangles, while custom tick marks and labels are drawn manually rather than using D3’s axis components.

SSai Bhavana Akkineni
83% match
Loading thumbnail…

ICE - 6 Marks and Channels (11508271)

A bar chart displays the top ten car models by first-quarter sales, ranked by year along the vertical axis and price along the horizontal axis. The visualization uses React state to load CSV data via `d3.csv`, then renders SVG rectangles with blue fills and yellow strokes. Scales are created with `d3.scaleBand` and `d3.scaleLinear`, while axis ticks and grid lines are generated manually using `xScale.ticks()` and SVG elements. The chart title appears above the visualization, and the y-axis labels show the year for each bar.

Aabdulmoin9624
82% match
Loading thumbnail…

ICE-6 DV

A horizontal bar chart displays the top 10 most populous US states, ranking them by their 2019 population values. The visualization loads data from a CSV file using `d3.csv`, then scales the bars with `d3.scaleBand` and `d3.scaleLinear`. The chart is built with React components and rendered as SVG, with axis ticks and grid lines generated manually from the scales. The interface includes a title and a loading state while data is being fetched.

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

ICE-6

This visualization displays car pricing data for fifteen countries, using horizontal bars to compare each country’s basic cost. The chart is built with React and D3 v5, loading CSV data via `d3.csv` and rendering an SVG. Scales are created with `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, with axes added using `axisLeft` and `axisBottom`.

Ppethavenu
82% match
Loading thumbnail…

ICE 6 (Marks and Channels) - Bar Graph

This bar graph visualizes sales figures for 30 US states from the Superstore dataset, with states on the y-axis and sales values on the x-axis. The React component loads data via d3.csv and renders SVG rectangles scaled by d3.scaleBand and d3.scaleLinear. Grid lines and tick marks are generated manually using d3.format, while axis labels are positioned from the scales' domain values. Each state’s bar length encodes its total sales, allowing quick comparison across the displayed subset.

NNaveen Kumar
82% 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.

MM
82% match
Loading thumbnail…

ICE-6 Dv

This bar chart displays the top 10 U.S. states by population from the year 2000, using data loaded from a CSV file via `d3.csv`. The visualization, built with React hooks and D3, renders an SVG bar chart where each state’s population is positioned using `scaleBand` and `scaleLinear`, with axes labels and red gridlines generated from scale ticks.

Ssowmyanagula@my.unt.edu
82% match