Skip to main content
SimilarExport ZIP
100%

[A6] Vehicle Power vs. MPG (Scatter Plot With Qualitative Color Scale)

✓ Published0🌍 Public
Cctan13@dons.usfca.edu
Last edited Mar 15, 2024
Created on Mar 4, 2024
Forked from HTML Starter

This scatter plot compares vehicle torque and horsepower, with each point’s size encoding MPG. The chart uses a qualitative color scale to distinguish car makes—Audi in blue, Chevrolet in red, and Volvo in green—via `d3.scaleOrdinal` and a `d3.legendColor` legend. Data from a CSV file is loaded with `d3.csv`, parsed, and mapped to linear scales for the x- and y-axes, while circle radii are scaled by MPG using `d3.scaleLinear`. The SVG rendering is handled by D3 v7, with axes, labels, and a triangular-symbol legend drawn programmatically.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

[A5] Vehicle Power vs. MPG (Bubble Chart)

This bubble chart visualizes the relationship between vehicle torque (x-axis), horsepower (y-axis), and fuel efficiency (bubble size) for Audi, Chevrolet, and Volvo cars, with color encoding by make. Hovering over a bubble highlights it in orange and displays a tooltip with exact values. The visualization uses D3 v7’s `d3.csv`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and SVG circles, with data loaded from a CSV file and rendered in a React-compatible HTML page.

Cctan13@dons.usfca.edu
88% match
Loading thumbnail…

[A4] MPG vs. Horsepower (Scatter Plot)

This scatter plot visualizes the relationship between fuel efficiency (MPG) and horsepower for a dataset of vehicles, with each gray circle representing a data point. Hovering over a point highlights it in orange and displays a tooltip showing its exact MPG and horsepower values. The visualization uses D3.js v7’s scaleLinear and axisBottom/axisLeft to map the data and render axes, while the SVG circles respond to mouseover and mouseout events. Data is loaded asynchronously via d3.csv from a remote GitHub gist.

Cctan13@dons.usfca.edu
84% match
Loading thumbnail…

Scatter plot

This scatter plot visualizes the relationship between MPG and horsepower using the auto-mpg dataset. Each circle represents a vehicle, positioned by linear scales created with `d3.scaleLinear` and `d3.extent`, with axes generated via `d3.axisBottom` and `d3.axisLeft`. The SVG chart animates circle appearance using `d3.transition` with easeLinear. Data is loaded as CSV and parsed into numbers, with axis labels and gridlines styled through CSS classes.

CChris Mora
83% match
Loading thumbnail…

Activity_6_Q3.6

A scatter plot displays the relationship between horsepower and torque for vehicle data, with points colored by manufacturer. The chart uses D3 v6 to load CSV data from GitHub, create linear scales, and render circles in an SVG. Axis labels and tick marks are styled with green text, while scales and axis generators like `scaleLinear`, `axisLeft`, and `axisBottom` handle the graphical mapping.

Pparvathi829790@gmail.com
83% match
Loading thumbnail…

Scatter plot

This scatter plot visualizes the relationship between horsepower and miles per gallon for various car models, sourced from the auto-mpg dataset. The D3 v6 code loads CSV data, maps horsepower to the x-axis and mpg to the y-axis using linear scales, and renders semi-transparent pink circles for each car. Axis tick marks extend across the plot, and both axes are labeled. The SVG output includes a title and uses Roboto Mono typography for all text elements.

RRodolfo Viana
83% match
Loading thumbnail…

Assignment 6 -- Scatter plot with a qualitative color scale

This scatter plot shows the relationship between average horsepower and average torque for various car makes, with each point colored by the manufacturer using a qualitative color scale. The visualization uses D3.js v4 to render an SVG chart, employing `d3.scaleLinear` for both axes and `d3.scaleOrdinal` with `d3.schemeCategory10` for the categorical colors. Tooltips display the make and exact values on hover, while a legend identifies the color mapping. The data is loaded from an external CSV file (`stripechart1.csv`) containing average engine statistics.

Vvishusikka
83% match
Loading thumbnail…

Q3

This scatter plot visualizes the relationship between horsepower and torque for various car makes, using color to distinguish different manufacturers. The D3.js code loads a CSV dataset from a GitHub URL, maps the data points to SVG circles, and applies a linear scale to the x and y axes. It uses `d3.scaleLinear`, `d3.extent`, `d3.scaleOrdinal`, and `d3.schemeCategory10` to handle scaling and coloring. The chart includes labeled axes for Horsepower and Torque, plus a legend showing the color-coded makes.

Rreddyswethuvahana@gmail.com
82% match
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between miles per gallon (MPG) and horsepower for a dataset of cars, with each circle representing a vehicle. The chart uses color to differentiate individual data points, while axes are labeled and scaled using D3's `scaleLinear` and `scaleBand` functions. Built with D3 v5, the visualization renders as an SVG and reads its data from an external CSV file. The code employs D3's `axisLeft`, `axisBottom`, `extent`, and `format` APIs to construct the axes and tick marks.

EEdward-Elric233
82% match