Skip to main content
SimilarExport ZIP
100%

Data Visuliazation ICE-6

✓ Published0🌍 Public
Aachalasam
Last edited Jun 26, 2022
Created on Jun 26, 2022
Forked from HTML Starter

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.

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

ICE-6 Sheshidhar reddy cars

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.

SSheshidharreddy
87% match
Loading thumbnail…

ICE-6.1

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.

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