Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published1🌍 Public
AAbhiram-Janagama
Last edited Mar 9, 2026
Created on Mar 9, 2026
Forked from 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.

AI-generated description
MIT Licensed

Similar vizzes

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

Fork of HTML Starter

This example visualizes miles per gallon for various motorcycle models as a horizontal bar chart, sourced from the mtcars dataset. It shows the ranking of each model’s fuel efficiency. The code uses React for component rendering, D3 v5’s `scaleBand` and `scaleLinear` for scales, and `csv` to load the data. Bars are drawn as SVG `rect` elements, with axis ticks and grid lines generated using D3’s `ticks` method. The chart displays values up to the maximum mpg, with a light green page background.

NNanditha Reddy
83% match
Loading thumbnail…

Fork of Fork of t4

This visualization shows the correlation between average horsepower, torque, and highway MPG for various car makes, using a bubble chart where circle size encodes MPG and color differentiates manufacturers. D3 v7 reads the data from a CSV file and renders the chart as SVG with interactive tooltips on hover. The code uses `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.interpolateTurbo` for scales, with event handlers for mouseover, mousemove, and mouseleave to show tooltips.

Aamshureddy13@gmail.com
82% match
Loading thumbnail…

Fork of Fork of Fork of Hello VizHub

This bubble chart explores the correlation between average horsepower, torque, and highway MPG for various car makes, sourced from a CSV file. Using D3 v5, the visualization plots horsepower on the x-axis and torque on the y-axis, with bubble size representing MPG and color differentiating car brands via a turbo color scale. The SVG rendering includes interactive tooltips that appear on mouseover, displaying the specific car make. The chart is built with `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.scaleOrdinal`, and it leverages `d3.csv` to load data and `d3.interpolateTurbo` for color mapping. This example demonstrates how to combine multiple quantitative and categorical variables in a single animated, interactive graphic.

Hharinimoorthi05@gmail.com
81% match
Loading thumbnail…

Fork of Hello VizHub

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. Using D3.js, it plots horsepower on the x-axis, torque on the y-axis, and scales bubble radius by MPG, with color encoding by make. The code loads data from a CSV via `d3.csv`, uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` for colors, and renders SVG circles with hover tooltips showing each make's name.

Ppraneeth7222@gmail.com
81% match
Loading thumbnail…

Fork of Fork of Fork of t4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes, with circle size representing fuel efficiency and color mapping to the car manufacturer. Built with D3.js v7, it uses `d3.scaleLinear` for axes and bubble radius, `d3.scaleOrdinal` for categorical colors via `d3.interpolateTurbo`, and `.on("mouseover")` event handlers for tooltip display. The SVG output includes axis labels, a size legend for MPG values, and animated transitions on hover.

Aamshureddy13@gmail.com
81% 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
80% match
Loading thumbnail…

Fork of Activity6_tutorial2

This visualization displays the distribution of horsepower percentages across different car models using a stacked horizontal bar chart. Each bar represents a car model, with colored segments corresponding to horsepower ranges. The chart uses D3.js v7’s `d3.stack`, `d3.scaleOrdinal`, `d3.scaleLinear`, and `d3.scaleBand` to compute and render stacked segments as SVG rectangles. Interactive tooltips, styled via CSS, reveal the exact percentage for each range on hover. Data originates from the included `data.csv`, read as a static D3 dataset.

Yyadlapallisaisathvik@gmail.com
80% match