Skip to main content
SimilarExport ZIP
100%

ICE--7

✓ Published0🌍 Public
Aashishkommanaveni05@gmail.com
Last edited Mar 30, 2026
Created on Mar 30, 2026
Forked from Line Chart - Trend

This example visualizes the average vehicle fuel efficiency by year using a line chart with red data points and labeled values. The chart is built with D3 v7, loading CSV data from a cars dataset and parsing it with `d3.csvParseRows`. The code groups the data by year and calculates the mean mileage using `d3.rollup` and `d3.mean`, then renders the trend with a line generator and axes. The visualization is rendered as an SVG, showing how average MPG varies across model years.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE--7

This area chart displays the average fuel mileage (MPG) of cars grouped by model year, using a dataset of 30 vehicles parsed from a CSV file. The visualization aggregates individual car records by year, then draws a steel-blue filled area with a darkblue boundary line, red circular data points, and numeric value labels. Built with D3 v7, the code uses `d3.csvParseRows` to clean the data, `d3.rollup` with `d3.mean` for aggregation, and `d3.area()` along with `d3.line()` generators to render the SVG paths.

Aashishkommanaveni05@gmail.com
91% match
Loading thumbnail…

Line chart ice 7

This chart displays the average fuel efficiency, measured in miles per gallon, for vehicles across different model years, spanning from 1970 to 1982. The data is aggregated by year, with each point representing the mean MPG for that year, and the line connects these points to show the overall trend. Built using D3 v7, the visualization uses `csv` for data loading, `rollup` and `mean` for aggregation, and `scaleLinear`, `axisBottom`, and `axisLeft` for axes and gridlines. The `line` generator draws the path, while `join` appends circles for each data point. The data comes from a gist CSV file.

SSreedevi Itta
86% match
Loading thumbnail…

ICE--7

This scatter plot visualizes the relationship between engine size and fuel mileage for 30 cars from a dataset, with points colored by fuel type. The visualization uses D3 v7 with an SVG rendering approach, implementing a reusable scatter plot function that reads the CSV data manually. It uses `d3.scaleLinear` for both axes, `d3.scaleOrdinal` with `d3.schemeTableau10` for color encoding, and `d3.axisBottom` and `d3.axisLeft` for tick marks, with a legend showing fuel type categories.

Aashishkommanaveni05@gmail.com
83% match
Loading thumbnail…

ICE 6 BAR + LINE

This example shows a combined bar and line chart of average car sales versus fuel efficiency by year from 2015 to 2024. Blue bars represent average sales in thousands on the left axis, while an orange line with dots tracks average MPG on the right axis. The visualization uses d3.csv to load data, d3.rollups for yearly aggregation, and scales including d3.scaleBand and d3.scaleLinear. It renders via an SVG combo chart with d3.axisBottom, d3.axisLeft, and d3.axisRight, and draws the line with d3.line and curveMonotoneX, refreshing data from a GitHub gist.

Uuguggila@gitam.in
83% match
Loading thumbnail…

ICE--7

This visualization displays the distribution of fuel types among 30 cars, using a pie chart generated from a CSV dataset. The chart shows the proportional share of each category, such as Gas, Electric, Hybrid, and Diesel, with a legend providing counts. It is built with D3 v7, using `d3.csvParseRows` to load and parse the data, `d3.rollups` to count occurrences, and `d3.pie` and `d3.arc` to construct the slices and labels. The SVG is rendered with a Tableau10 color scheme, and the chart is positioned on an 850x500 pixel canvas.

Aashishkommanaveni05@gmail.com
83% match
Loading thumbnail…

ICE7-3

This area chart visualizes the relationship between horsepower and fuel efficiency (MPG) for a sample of 50 cars from a CSV dataset. It uses D3.js v7 to render an SVG graphic, with a monotone cubic curve (`d3.curveMonotoneX`) forming the filled area and overlaid blue circles for individual data points. Tooltips on hover display the car name, horsepower, and MPG. Axes are labeled for 'Horsepower' and 'Miles per Gallon (MPG)', with the chart title indicating the dataset's scope.

SSainathreddypotu@gmail.com
82% match
Loading thumbnail…

ICE 7 Sharanya 3Q

This visualization shows how the average electric vehicle range changes by model year, using a line chart that aggregates data points through D3’s `d3.rollups` and `d3.mean` functions. The chart loads CSV data via `d3.csv`, then applies `d3.scaleLinear` for both axes and generates a smooth monotone curve with `d3.line` and `d3.curveMonotoneX`. The SVG rendering includes labeled axes, a title, and a blue stroke path, all styled through D3 v7’s selection and axis APIs.

Cchengalvasharanya@gmail.com
82% match
Loading thumbnail…

ICE7-2

This pie chart visualizes the average miles per gallon (MPG) for cars, aggregated by their country of origin. It displays the resulting proportions as colored arcs with labels and a legend, using a tooltip to reveal exact average MPG values on hover. The visualization is built with D3.js v7, loading data from a CSV file and using the `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` APIs to compute and render the chart. The code also employs `d3.rollups` to group and calculate the mean MPG per origin. The chart is rendered as an SVG, with interaction handled via mouse events.

SSainathreddypotu@gmail.com
82% match