Skip to main content
SimilarExport ZIP
100%

Fork of D3 Starter - line chart

✓ Published0🌍 Public
Ssowjanya
Last edited Oct 25, 2025
Created on Oct 25, 2025

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This visualization combines bar charts and a line chart to show average MPG and average horsepower by model year from the `mpg.csv` dataset. It uses D3 v7 APIs such as `d3.csv`, `d3.rollup`, `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.line`. The SVG rendering displays skyblue bars for mean MPG and an orange line for mean horsepower, with axes, labels, a title, and a legend.

AAbhiram-Janagama
85% match
Loading thumbnail…

Fork of D3 Starter

This scatterplot compares vehicle horsepower and weight using data from the auto-mpg dataset, loading CSV data via `d3.csv` and rendering with SVG circles. The chart uses `d3.scaleLinear` for both axes, `d3.extent` to set domains, and `d3.axisLeft`/`d3.axisBottom` with gridlines. The title and axis labels are added as SVG text elements, and the visualization is built with D3 v6 in a simple HTML page.

NNikhil Prakash
85% 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
84% match
Loading thumbnail…

Fork of D3 Starter -(pie chart)

This pie chart visualizes the distribution of car horsepower into three ranges (Low ≤120 HP, Medium 121–160 HP, and High >160 HP) using data from a CarPerformance.csv dataset. The chart uses d3.csv to load the data, d3.scaleOrdinal for color encoding, and d3.pie with d3.arc to generate SVG path elements. Labels are positioned using arc centroid calculations, and a legend appears in the top-right corner. The visualization demonstrates how D3 v7 transforms tabular data into an interactive-free categorical pie chart with clean SVG rendering.

Ssowjanya
83% match
Loading thumbnail…

Fork of D3 Starter

This example displays a scatter plot of automobile data, plotting engine horsepower against model year for a dataset of vehicles. The visualization uses an SVG rendering approach, with D3 version 3’s `scaleLinear` and `d3.extent` to map the year and horsepower values to pixel coordinates. Circles represent individual data points, with axes generated via `d3.axisBottom` and `d3.axisLeft`, and the chart includes labeled axes for both variables. The code structures the plot within a reusable `scatterPlot` function, called with the dataset directly on the body element.

Nnishanththouta16@gmail.com
83% match
Loading thumbnail…

Fork of HTML Starter

This scatterplot visualizes the relationship between vehicle horsepower and torque for a dataset of cars, using circle position for the two quantitative axes, categorical color for engine layout, and circle size for MPG. A Nissan Skyline GT-R R34 is highlighted in orange. The D3.js v7 code loads CSV data, calculates mean and median summaries, and renders an SVG with d3.scaleLinear, d3.scaleOrdinal with Tableau10 colors, d3.scaleSqrt sizing, and interactive tooltips on hover.

Aanimillivenkataharithasaisri@gmail.com
83% match
Loading thumbnail…

Fork of Cars Scatter Plot

This fork of a cars scatter plot visualizes the relationship between horsepower and weight for a dataset of automobiles. The code uses d3.csv to load the auto-mpg dataset, d3.scaleLinear for both axes, and d3.axisBottom with d3.axisLeft to render the chart, with circles drawn in SVG. The styling, including tick labels and axis labels, is defined in an external stylesheet, and the visualization includes grid lines generated through tickSize properties.

KKHUN LOUN ZAI
82% 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
82% match