Area chart

100%

✓ Published0🌍 Public

Last edited Oct 28, 2025

Created on Oct 28, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Area chart ice 7

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.

SSreedevi Itta

87% match

Loading thumbnail…

Line chart

This line chart visualizes the average fuel efficiency (MPG) of automobiles by model year, using data from the auto-mpg.csv dataset. The visualization aggregates individual car records into yearly averages, with each year represented as an orange dot connected by a blue line. The chart is rendered as an SVG using D3.js v7, employing d3.csv for data loading, d3.rollups for aggregation, d3.mean for calculating averages, d3.scaleLinear for both axes, and d3.line for the path generation.

KKOLLIPATI NIKHIL

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

84% match

Loading thumbnail…

Area Chart

This area chart visualizes the relationship between fuel efficiency (in miles per gallon) and engine size (in liters) for a sample of cars. A single blue, semi-transparent filled area rises to show engine size across the fuel-efficiency range, overlaid with axes and labels. The visualization is built with D3 v6, using `d3.area` to generate the area shape, `d3.csv` to load data from a GitHub Gist, and `d3.axisBottom` and `d3.axisLeft` for the axes. The chart is rendered as an SVG element.

RRamdas Dheeraj

82% match

Loading thumbnail…

Activity7_q2

This area chart shows the average fuel efficiency (MPG) of cars over model years, separated into three regions: the USA, Europe, and Asia. Each region is represented by a semi-transparent filled area with a smooth curve, using a color scale and a legend to distinguish them. The visualization aggregates data from a CSV file using d3.groups and d3.mean, then renders the areas with d3.area, d3.curveCatmullRom, and d3.axisBottom/axisLeft for the axes.

FFayezuddin Mohammed Khan

82% match

Loading thumbnail…

A4-D3-BarChart

This bar chart displays the average city fuel efficiency (MPG) of cars across different model years, with each bar representing a year’s mean value and labeled with its numeric result. The visualization uses D3.js v7 to load CSV data, aggregate it with `d3.rollups`, and render an SVG with `d3.axisBottom` and `d3.axisLeft` for axes. Bars are drawn as `rect` elements scaled by `d3.scaleBand` and `d3.scaleLinear`, with the dataset sourced from a GitHub-hosted cars.csv file.

SSukhraj Singh

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

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

81% match