Skip to main content
SimilarExport ZIP
100%

ICE-6 Sheshidhar reddy cars

✓ Published3🌍 Public
SSheshidharreddy
Last edited Mar 8, 2022
Created on Mar 8, 2022

This visualization displays the top 10 car models by sales units using a horizontal bar chart. The bars are rendered as SVG rectangles within a React component, with scales created using d3.scaleBand for the y-axis and d3.scaleLinear for the x-axis. Data is loaded asynchronously from a CSV file using d3.csv, which parses the numeric units field. The chart includes custom axis ticks and gridlines drawn with SVG line and text elements, while all layout and margin calculations are handled manually in the React render method.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE-6 Sheshidhar reddy cars

This bar chart shows the top 10 car models by unit sales, with each bar's length proportionally scaled to the number of units sold. The visualization uses React and D3 v5, with the `csv` function fetching data from a GitHub-hosted CSV file and `scaleBand` and `scaleLinear` mapping the categorical car names and numeric unit counts to pixel coordinates. The SVG rendering draws blue rectangle bars, axis ticks, and labels, while the `max` function determines the x-axis domain. The page title "Top car sales" frames the chart for the viewer.

SSheshidharreddy
94% match
Loading thumbnail…

Fork of ICE-6 Sheshidhar reddy cars

This bar chart shows the top 10 car models by unit sales, with each bar's length proportionally scaled to the number of units sold. The visualization uses React and D3 v5, with the `csv` function fetching data from a GitHub-hosted CSV file and `scaleBand` and `scaleLinear` mapping the categorical car names and numeric unit counts to pixel coordinates. The SVG rendering draws blue rectangle bars, axis ticks, and labels, while the `max` function determines the x-axis domain. The page title "Top car sales" frames the chart for the viewer.

SSheshidharreddy
94% match
Loading thumbnail…

Fork of ICE-6 Sheshidhar reddy cars

This bar chart shows the top 10 car models by unit sales, with each bar's length proportionally scaled to the number of units sold. The visualization uses React and D3 v5, with the `csv` function fetching data from a GitHub-hosted CSV file and `scaleBand` and `scaleLinear` mapping the categorical car names and numeric unit counts to pixel coordinates. The SVG rendering draws blue rectangle bars, axis ticks, and labels, while the `max` function determines the x-axis domain. The page title "Top car sales" frames the chart for the viewer.

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

Data Visuliazation ICE-6

This example shows the top 10 car models by sales in thousands, rendered as a horizontal bar chart. The visualization loads CSV data from a GitHub gist, slices the first 10 rows, and maps the `Sales_in_thousands` field to bar widths using `d3.scaleLinear`, while `d3.scaleBand` positions the model names along the y-axis. React hooks (`useState`, `useEffect`) manage the asynchronous data loading, and the SVG elements (rectangles, axes, and tick labels) are generated declaratively within a React component, with styling controlled by inline attributes and CSS.

Aachalasam
87% 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
86% match