Skip to main content
SimilarExport ZIP
100%

Line Chart

✓ Published1🌍 Public
RRamdas Dheeraj
Last edited Oct 25, 2025
Created on Oct 23, 2025
Forked from HTML Starter

This line chart visualizes the relationship between engine size and average vehicle price using a sampled car dataset. The chart aggregates raw CSV data with `d3.rollup` to compute mean prices per engine size, then renders a monotone-smoothed path with `d3.line` and SVG circles for each data point. Axes use `d3.axisBottom` and `d3.axisLeft`, with price formatting as currency. Interactive hover tooltips display exact values via mouse events, all styled with a dark theme.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

vehicles Line Chart

This line chart shows the average price of vehicles across different years, highlighting overall price trends over time. The visualization uses a blue monotone curve with circular markers for each year's data point, and hovering over a point reveals the exact year and average price in a tooltip. Built with D3.js (v7.8.5), it loads CSV data from a GitHub gist, groups and aggregates entries by year using `d3.rollup` and `d3.mean`, and renders the result as an SVG with axes using `d3.axisBottom` and `d3.axisLeft`. Grid lines and formatted y-axis labels (in thousands) help contextualize the price values.

Ssaisathwikaguntupalli@gmail.com
84% match
Loading thumbnail…

piechart_linechart

This example shows a line chart depicting the relationship between fuel efficiency and engine size for a car dataset. The SVG visualization uses D3.js v6 to load CSV data from a GitHub gist, parse numeric values, and render a single blue line path via `d3.line()`. Linear scales (`d3.scaleLinear`) map the fixed domains for fuel efficiency and engine size, while axes are generated with `d3.axisBottom()` and `d3.axisLeft()`. The chart includes labeled axes for fuel efficiency and engine size, with margins and dimensions set explicitly in the code.

GGorantla Vishnusai
79% match
Loading thumbnail…

ice7_task2_2

This line chart visualizes the average car price per year, using data from a CSV file loaded via `d3.csv`. The code groups the data by year using `d3.rollups` and computes the mean price, then renders a monotone-curved line via `d3.line` with `d3.curveMonotoneX`. Orange dots mark each year’s average, with hover tooltips. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, and the SVG chart includes labeled axes for year and average price in USD.

Kkmohithkumar7@gmail.com
78% match
Loading thumbnail…

Vehicles Area chart

This area chart shows the average vehicle price by year, with a green shaded region rising and falling across the time series. The visualization uses D3.js to load CSV data from a GitHub gist, aggregate prices per year with `d3.rollup`, and render the area using `d3.area()` with a monotone curve. Axes, gridlines, and labels are created via D3’s axis APIs, while the SVG output is styled with CSS for a clean presentation.

Ssaisathwikaguntupalli@gmail.com
78% 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
78% match
Loading thumbnail…

sketch with D3

This scatter plot visualizes the relationship between car price and mileage, with each circle representing a vehicle and its color indicating fuel type (Petrol, Diesel, Hybrid, or Electric). Using D3 v7, the code loads data from an external CSV file, converts numeric fields, and renders an SVG with linear scales for both axes. The visualization includes labeled axes, a title, and a custom legend built from the distinct fuel types. d3.csv fetches the data, while d3.scaleLinear and d3.scaleOrdinal handle the positional encoding and categorical color mapping respectively, with d3.axisBottom and d3.axisLeft generating the tick marks.

BBismark Kofi Owusu Sarfo
77% match
Loading thumbnail…

A5-Line Chart

This line chart displays the average horsepower of cars over time, with each point representing the mean value for a given year. The data is loaded from a CSV file hosted on GitHub Gist using `d3.csv`. The visualization uses D3 v6's `scaleLinear` for both axes, applies a monotone curve to smooth the line, and renders the chart as an SVG. Axis labels and a title are added with standard D3 axis functions.

SSukhraj Singh
77% match
Loading thumbnail…

Scatterplot

This scatterplot visualizes the relationship between fuel efficiency and engine size for a dataset of cars, with each point’s radius representing horsepower and its opacity representing price. The chart uses D3 v6 to load CSV data from a GitHub gist, apply linear scales for the axes and point attributes, and render circles in an SVG. Color encodes car type (Sedan, Coupe, SUV, Truck) via `d3.scaleOrdinal`, with a legend included. Axes are drawn using `d3.axisBottom` and `d3.axisLeft`.

GGorantla Vishnusai
77% match