Skip to main content
SimilarExport ZIP
100%

ICE-6 Assignment : Car makes vs average selling price

✓ Published0🌍 Public
Vvinodreddysagam929@gmail.com
Last edited Mar 27, 2024
Created on Mar 15, 2024
Forked from D3 Sunbrust graph

This visualization shows the average selling price of cars grouped by make, using a horizontal bar chart where each bar’s length encodes price and its color denotes the car make. The chart, built with React and D3 v5, loads CSV data from a GitHub gist, aggregates the selling prices by make, and renders the result as SVG. It employs D3’s `scaleBand`, `scaleLinear`, `scaleOrdinal`, `axisBottom`, and `axisLeft` APIs to construct the axes and color encoding.

AI-generated description
MIT Licensed

Similar vizzes

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

ICE5

This interactive bar chart displays average retail prices for car brands, with data loaded from a GitHub Gist CSV and rendered as a React component. The visualization uses D3 v5 scales (`scaleBand`, `scaleLinear`) to map brand names and price values, while `axisBottom` and `axisLeft` generate labeled axes with rotated x-axis text. Rounded blue rectangles represent individual prices, with SVG dimensions fixed at 960×500 pixels and margins defined for the chart area. React hooks (`useState`, `useEffect`, `useRef`) manage the asynchronous data loading and axis updates after the dataset arrives.

Hhalinswaroopch@gmail.com
83% 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
83% 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
83% match
Loading thumbnail…

ICE6

A horizontal bar chart ranks the top 10 car brands by mean price, using 150 synthetic records from Automobiles.csv. Brand names label the y-axis, while price in dollars spans the x-axis. The React app loads the CSV with d3.csv, computes averages with d3.rollups, and renders rounded rectangles whose widths map to average price. Axes are drawn with d3.axisBottom and d3.axisLeft. Hovering reveals a tooltip with the brand and exact average price.

Mmendemrudula@gmail.com
82% match
Loading thumbnail…

3.Combined chart ICE-6

This combined chart displays the average car price as teal bars and average horsepower as a magenta line and dots, grouped by cylinder count, with labels for the bar values. The visualization uses React hooks to load and aggregate CSV data with d3.csv and d3.rollup, then renders an SVG via D3 v6 scales, axes, and a line generator. Grid lines, a dual y-axis, and hover effects on bars and dots are included in the dark-themed layout.

AAbhiramPudi@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