carbrandsales

100%

✓ Published0🌍 Public

Last edited Mar 7, 2022

Created on Mar 7, 2022

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

This horizontal bar chart displays the top ten car brands by 2016 sales, using React to render SVG elements and D3 scales for layout. The visualization loads CSV data via `d3.csv`, applies a linear scale for sales values, and a band scale for brand names. Orange rectangles represent each brand’s sales figures, with gridlines and tick labels generated from the x-axis scale. The chart focuses on comparing relative sales performance across brands in a single year.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Car Sales Bar Chart

This visualization displays car sales figures as a bar chart, with each brand represented by a vertical bar showing its last-year sales count on a linear scale. The chart includes rotated x-axis labels for readability and uses a teal color scheme for the bars. Built with D3.js v4 and React, the visualization creates an SVG graphic, using `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` for tick marks. Data is loaded from a CSV file containing brand and sales information.

MManideeprenikindi

89% match

Loading thumbnail…

car sales in the year 2014

This example shows a horizontal bar chart ranking the top 10 car manufacturers by total sales in 2014. The chart uses blue, rectangular bars on a pink background, with manufacturer names listed along the vertical axis and sales values on the horizontal axis. The data comes from a CSV file, and the chart is rendered as an SVG using React and D3’s `scaleBand`, `scaleLinear`, `csv`, and `max` functions within a React component.

Aabhi051197

86% match

Loading thumbnail…

Yearwise Car Sales Bar Chart

This D3.js v5 bar chart visualizes car sales figures for the year 1980 across different car makes, using a horizontal bar layout encoded with SVG rectangles. The chart employs `scaleBand` for the categorical y-axis of car brands and `scaleLinear` for the numeric x-axis of sales values, with sales data loaded from a CSV file hosted on GitHub. React manages the rendering pipeline, while the visualization includes formatted tick labels (using `format` to abbreviate large numbers) and tooltips that display the precise sales amount for each bar. The data is processed through a custom `useData` hook that converts the CSV's "1970" column into sales numbers.

HHemanthh81

84% 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

83% match

Loading thumbnail…

Yearwise Car Sales Bar Chart

This bar chart displays 1980 car sales figures for various automobile makes, with each car brand listed along the y-axis and its corresponding sales value represented by the horizontal bar length. The visualization uses React with D3 v5, employing `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and custom axis components for rendering ticks and labels. Data is loaded asynchronously via `d3.csv` from a GitHub-hosted CSV file, and SVG rectangles with tooltips display the values.

HHemanthh81

83% 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

83% match

Loading thumbnail…

Rendering Marks and Channels with React & D3 by Avinash

This interactive bar chart displays the top 10 car manufacturers and their January sales figures. The chart uses a horizontal bar layout with axes and tick labels, rendered as an SVG graphic. The visualization is built using React and D3 v5, leveraging D3's `scaleBand`, `scaleLinear`, and `csv` utilities for data loading and scaling. Data is fetched from a remote CSV file, and the chart is updated reactively.

Aavinash021997

82% match

Loading thumbnail…

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

This interactive bar chart displays top-selling car brands based on price data loaded from a CSV file. The visualization uses React for component structure and D3.js v7 for scaling and axis rendering. The code leverages `d3.csv`, `scaleBand`, `scaleLinear`, `axisBottom`, `axisLeft`, and SVG `rect` elements to draw bars. The chart renders in a browser with a title, showing each model's price on the y-axis and model names on the x-axis.

Mmanthenasirisha06@gmail.com

82% match