Fork of Area Chart ice-7

100%

Fork of Area Chart ice-7

✓ Published0🌍 Public

Last edited Oct 25, 2025

Created on Oct 25, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

85% match

Loading thumbnail…

Fork of D3 Starter - line chart

This line chart visualizes the relationship between horsepower and miles per gallon (MPG) for a dataset of cars, revealing the general trend of decreasing fuel efficiency as engine power increases. Sorted by horsepower, the data is plotted as a single smooth line using D3's `d3.line` generator, with scales defined by `d3.scaleLinear` and axes rendered via `d3.axisBottom` and `d3.axisLeft`. The CSV data is loaded asynchronously from a GitHub repository and drawn as an SVG within a styled container. The chart includes labeled axes for horsepower and MPG, with the line styled in a teal color.

Ssowjanya

84% match

Loading thumbnail…

activity7.1-2

This chart displays the relationship between car horsepower and highway miles per gallon as a filled area. The code loads CSV data from a GitHub repository and parses the numeric fields. It uses D3.js v7 to create an SVG, applying a linear scale for both axes and the d3.area generator to construct the area path. Axis labels are added using d3.axisBottom and d3.axisLeft, with the chart rendered on a white, rounded background.

DDeekshitha Annreddy

84% match

Loading thumbnail…

Fork of Cars Scatter Plot

This scatter plot displays the relationship between horsepower and weight for a collection of cars. The visualization uses red semi-transparent circles to represent individual data points, with axis labels and a title clarifying the chart’s purpose. The code loads data from the Auto MPG Data Set via `d3.csv`, then renders the chart as an SVG using D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` APIs. Styling is applied through external CSS, and the axes include custom tick formatting and gridlines.

NNALLANATHAN

81% match

Loading thumbnail…

Fork of Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the Auto MPG dataset, with each red circle representing a vehicle. The chart uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` to construct axes, while circles are appended via `selectAll` and `enter`. Data is loaded as CSV and parsed with numeric conversions. The SVG rendering includes custom axis labels and a title, styled through CSS with opacity and tick formatting.

GGerasimos Katsagannis

81% match

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

81% match

Loading thumbnail…

Fork of cars scatter plot II

This scatter plot visualizes the relationship between horsepower and acceleration for a dataset of cars sourced from the UCI Machine Learning Repository’s Auto MPG Data Set. Each green, semi-transparent circle represents a car, with its horizontal position determined by horsepower and vertical position by acceleration. The visualization uses D3 v6 APIs including `select`, `csv`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the chart. The SVG rendering includes styled grid lines, axis labels, and a title, with data loaded asynchronously from a CSV file.

Nnexus1058

81% match