Skip to main content
SimilarExport ZIP
100%

ICE6-SDV

✓ Published0🌍 Public
Aashishkommanaveni05@gmail.com
Last edited Mar 9, 2026
Created on Mar 9, 2026
Forked from Fork of ICE6

The ICE6-SDV visualization displays three time-series trends derived from a cars dataset, comparing average price, mileage, and engine size by model year. The multi-series line chart uses a normalized 0–100 scale to make the disparate metrics visually comparable. Built with React and D3 v7, the code parses a CSV file, aggregates data with `d3.rollup`, and renders separate line paths using `d3.line` and `d3.scaleLinear`. The same SVG canvas contains all visualization elements, including gridlines, axes, and a legend.

AI-generated description
MIT Licensed

Similar vizzes

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

ICE6

This bar chart shows the average car price by brand using D3.js within a React application. The code uses `d3.text` to load the CSV file, `d3.csvParse` to parse the data, and `d3.rollup` to calculate the mean `PriceUSD` for each brand. Bars are rendered with `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with axis labels generated via `d3.axisBottom` and `d3.axisLeft`.

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

This example presents a reusable scatter plot built with D3.js v7 inside a React application, using the SVG rendering approach. It visualizes a car dataset, plotting engine size against fuel mileage, with each dot representing a vehicle. The chart leverages D3 scales and axes for positioning, and custom styling with hover effects. Based on index.html, the code parses a CSV file with d3.csv and constructs a scatter plot demonstrating the relationship between car engine capacity and efficiency.

Aashishkommanaveni05@gmail.com
82% match
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
82% match
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
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
81% match
Loading thumbnail…

ICE - 7 Line Chart

This chart visualizes monthly car sales trends over time, plotting total sales amounts against sale dates. The visualization uses React with D3 v7 to fetch and parse CSV data, then renders an SVG line chart with a smooth curved line via `curveBasis`. Axes are generated using D3 scales (`scaleTime` and `scaleLinear`), with custom tick components for x and y grids. The x-axis labels months, while the y-axis displays sales amounts, and axis titles clarify the variables. The chart’s styling includes red line strokes, grey gridlines, and green axis labels, with the data sourced from a remote GitHub CSV file.

66264kusuma@gmail.com
81% match