Fork of ICE -6 (Scatter Plot)

100%

Fork of ICE -6 (Scatter Plot)

✓ Published0🌍 Public

Last edited Oct 18, 2025

Created on Oct 18, 2025

This scatter plot visualizes BMW car sales by comparing car models against fuel types, with each point colored by sales classification (blue for low, orange for high). The visualization uses React with hooks to load CSV data via `d3.csv`, then renders an SVG with D3 scales including `scaleBand` for both axes. Axis labels are rotated for model names, and hover tooltips display detailed model, fuel type, and sales information for each data point.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE-6 (Multi series chart)

This fork of ICE-6 displays BMW car sales data as a multi-series chart combining bar and line representations. The teal bars show average car price per year (rotated labels display values), while a red line with dots shows average mileage per year on a secondary right axis. The code loads CSV data from a GitHub gist, processes it in React state, then renders SVG using D3 v6 scales, axes, line generator, and selection APIs, with React managing the rendering lifecycle.

Sskmriyaz0786@gmail.com

88% match

Loading thumbnail…

Fork of ICE-6_fork

This horizontal bar chart shows the top five BMW car models ranked by sales volume, with each bar color-coded and labeled with its sales figure. The chart loads CSV data from a GitHub Gist using d3.csv, then sorts and slices the dataset to display only the leading models. React manages the interactive tooltip that appears on hover, while D3’s scaleBand and scaleLinear handle the axis mappings. SVG rendering, combined with custom gridlines and value annotations, highlights the highest-selling model.

Sskmriyaz0786@gmail.com

87% match

Loading thumbnail…

Fork of ICE -6 (Bar Chart)

This horizontal bar chart shows the top 15 BMW car models ranked by sales volume, with each bar colored using a pastel ordinal scale from d3.scaleOrdinal. The data is loaded from a CSV file and sorted in descending order before display. Built with React and D3 v5, the visualization uses d3.scaleBand for the y-axis, d3.scaleLinear for the x-axis, and SVG elements for rendering bars with hover effects and tooltips.

Sskmriyaz0786@gmail.com

85% match

Loading thumbnail…

Fork of Reusable Scatter Plot (ICE-7)

This animated scatter plot explores BMW car sales data by cycling through four quantitative variables—engine size, mileage, price, and sales volume—on the x-axis every three seconds. Using D3.js v6 modules such as `scaleLinear`, `scaleOrdinal`, and `axisBottom`, each vehicle is rendered as a symbol based on fuel type, colored via `schemeCategory10`. The code constructs a reusable `scatterPlot` component with getter-setter methods, and the animation is driven by `setInterval` calling the SVG selection’s `.call()` method.

Sskmriyaz0786@gmail.com

85% match

Loading thumbnail…

Fork of Fork of ICE-6 (Multi series chart)

This interactive SVG visualization compares the average price and average mileage of BMW cars by year, using a dual-axis design. A teal bar chart represents average price in US dollars on the left axis, while a red line with dots shows average mileage on the right axis, with data labels and rotated text inside each bar for clarity. The visualization is built using React and D3 v6, employing D3 scales, axes, line generators, and data processing functions to aggregate a CSV dataset from GitHub. The chart is rendered with React's declarative structure and D3's imperative SVG manipulation, featuring grid lines, custom styling, and hover effects.

Ssrinath

83% match

Loading thumbnail…

Fork of ICE 6 Scatter Plot (Sai Kaushik Ganji)

This scatter plot visualizes the relationship between vehicle horsepower and price, using point size to encode sales volume and color to distinguish vehicle type. Built with D3.js v7, the visualization renders data from a bundled Car_sales.csv file as an SVG. The plot includes labeled axes, a hover tooltip for detailed inspection, and separate legends for the color-coded vehicle categories and size-scaled sales figures. The implementation uses D3's selection and scale APIs to map the dataset fields to visual encodings.

Kkhushburajan2015@gmail.com

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…

Scatter Plot - ICE6

This scatter plot shows car sales in 2019 against 2021, with each circle representing a car model type. It reveals a positive trend, as most points cluster above the diagonal, indicating higher sales in 2021. The visualization loads CSV data from a GitHub gist using D3’s `csv` parser, then uses `scaleLinear` and `axisBottom`/`axisLeft` to render the axes. React manages the component state, while D3 selects and updates the SVG circles via `join('circle')`. The chart is drawn with D3 v5 and rendered through React 16.

RRahulbelede97@gmail.com

82% match