Area chart ice 7

100%

Area chart ice 7

✓ Published2🌍 Public

Last edited Oct 27, 2025

Created on Oct 27, 2025

This area chart displays the average MPG for vehicles by model year, spanning 1970 to 1982, based on the Auto MPG dataset loaded via `d3.csv`. The chart uses `d3.rollup` and `d3.mean` to aggregate the data, then renders a filled SVG path with `d3.area`, where the baseline sits at the bottom of the plot and the upper edge follows the calculated yearly averages. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while `d3.scaleLinear` maps the year and MPG values to the chart’s coordinates. A subtle blue fill with a matching stroke highlights the trend in fuel efficiency over time.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Area chart

This area chart shows the average fuel efficiency (MPG) of cars by model year, using data from the auto-mpg.csv dataset. The code loads the CSV with d3.csv, filters out invalid entries, aggregates averages with d3.rollups, and renders a smooth, semi-transparent blue area using d3.area with curveMonotoneX. Axes are drawn with d3.axisBottom and d3.axisLeft, and the chart is built in SVG.

KKOLLIPATI NIKHIL

87% 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…

Area Chart

This area chart displays highway fuel efficiency (MPG) by vehicle make, with a skyblue filled path showing the value distribution. The chart uses D3.js v7 with an SVG rendering approach, scaling categorical makes on the x-axis via `d3.scaleBand` and numeric MPG on a linear y-axis. The `d3.area` generator constructs the path, while rotated axis labels and `d3.axisBottom` and `d3.axisLeft` provide clear reading of the data, which is loaded asynchronously from a CSV file using `d3.csv`.

MMonish Galla

86% match

Loading thumbnail…

Area_Chart

This area chart displays vehicle fuel consumption by vehicle make for the year 2000, with the x-axis showing the make and the y-axis representing fuel consumption in liters per 100 kilometers. The chart uses the D3.js version 6 library, specifically leveraging `d3.csv` to load data from a remote GitHub CSV file, `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the continuous y-axis, and `d3.area` to generate the filled area path. The rendered visualization is an SVG element with labeled axes and a title, styled through attributes set on SVG text elements.

Vvemurisuchitha@gmail.com

82% match

Loading thumbnail…

Fork of Area Chart ice-7

This area chart displays the relationship between horsepower and miles per gallon for a set of cars, with a filled green region showing how MPG decreases as horsepower increases. The visualization loads a CSV file from GitHub using `d3.csv`, converts the numeric fields, and sorts the data by horsepower. It uses `d3.scaleLinear` for both axes, `d3.area` to generate the filled path, and `d3.axisBottom` and `d3.axisLeft` to render the coordinate axes. The SVG output is styled with CSS for a clean presentation.

Ssowjanya

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

80% match

Loading thumbnail…

Fork of ICE 7 Area Chart

This fork of the ICE 7 Area Chart displays miles per gallon (mpg) for various car models using a line chart with a smooth basis curve. The SVG visualization uses D3 v5’s `scaleBand` and `scaleLinear` to map car models and mpg values, with axes labeled and styled via CSS. The line generator, `d3.line` with `curveBasis`, connects data points, while the dataset is loaded as CSV from a GitHub gist. The chart lacks a filled area, despite its title, focusing instead on the trend line.

NNanditha Reddy

80% match

Loading thumbnail…

Areachart

This area chart visualizes the relationship between fuel efficiency and engine size for a car dataset loaded from a GitHub-hosted CSV file. The chart uses `d3.area` to generate a filled path, with `d3.scaleLinear` for both axes and `d3.axisBottom`/`d3.axisLeft` for tick marks. The SVG rendering displays a semi-transparent steelblue region, with labeled axes for "Fuel Efficiency" and "Engine Size". Data values are parsed from strings to numbers before domain scaling, and the area’s baseline is set to the chart’s height.

GGorantla Vishnusai

78% match