Skip to main content
SimilarExport ZIP
100%

ICE-6.1

✓ Published0🌍 Public
AABCDB15
Last edited Mar 6, 2022
Created on Mar 5, 2022
Forked from HTML Starter

This bar chart displays the top 10 car models by selling price, sourced from a CSV file fetched via D3's `csv` function. Using React with D3 v5, the code maps car names to a band scale and prices to a linear scale, rendering red horizontal bars. Axes are drawn with `scaleLinear` ticks and `scaleBand` domains, and the SVG output highlights the comparative pricing of each vehicle.

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:Sai Meghana

A bar chart displays the top 10 car prices from a CSV file, using a linear x-scale and a categorical y-scale. The chart visualizes the price of each car as a horizontal bar, with labels on the y-axis and tick marks on the x-axis. Built with React and D3 v5, it uses `d3.csv` to fetch data, `d3.scaleBand` for the categorical axis, and `d3.scaleLinear` for the numeric axis, rendering as SVG.

Eeravellisaimeghana
90% match
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
89% match
Loading thumbnail…

Fork of ICE 6 Data Visualization

This bar chart displays the sales units for the top ten car models, ranked by name along the vertical axis. The visualization is built with React and D3 v5, using `scaleBand` and `scaleLinear` for axes, and SVG `rect` elements for bars. Data is loaded from a CSV file via `d3.csv` and rendered with a margin-based layout featuring a blue axis grid.

MMalempatiSaranya
89% match
Loading thumbnail…

ICE-6

This bar chart visualizes the cost of cars by year, showing the price range for 15 selected model years from a CSV dataset. Purple horizontal bars are rendered as SVG rectangles within a React component using D3 scales (`scaleBand`, `scaleLinear`). The chart includes custom axes with blue gridlines and tick labels, with data loaded asynchronously via `d3.csv`. The visualization uses D3 v5 and React hooks (`useState`, `useEffect`) to manage state and rendering.

Ppethavenu
89% match
Loading thumbnail…

ICE-6 Assignment Sheshidhar reddy shaga

A horizontal bar chart displays the top 20 car models by price, sorted by an unspecified categorical variable. The visualization uses D3's `scaleBand` and `scaleLinear` to map car names to the y-axis and price values to the x-axis, with red gridlines and green bars rendered as SVG rectangles. Built with React and D3 v5 within a ReactDOM-rendered SVG, data is fetched from a CSV file provided via a Gist URL, and axis tick labels are generated using `xScale.ticks()`.

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

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

This visualization displays the top 10 vehicle selling prices as a horizontal bar chart, with car names on the y-axis and price on the x-axis. Built using React and D3 v5, it loads CSV data via d3.csv, then uses d3.scaleBand and d3.scaleLinear to position bars and axis ticks rendered as SVG elements. The chart includes custom grid lines and tick labels, with all marks generated declaratively through React components.

KKishen Patel
88% match
Loading thumbnail…

ICE6-BarGraph

This bar chart from the D3.js and React gallery displays average car prices grouped by brand, using data loaded from a CSV file via `d3.csv`. The visualization uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the x-axis, rendering the bars as SVG `rect` elements within a React component. Gridlines and axis tick labels are generated using the scales' `.ticks()` and `.domain()` methods, presenting an interactive, data-driven view of pricing trends across automobile manufacturers.

Mmukundakrishna.r@gmail.com
88% match