100%

Fork of HTML Starter

✓ Published0🌍 Public

Last edited Oct 1, 2026

Created on Oct 1, 2026

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.

AI-generated description

HW5 — Marks and Channels

A D3.js visualization exploring the relationship between vehicle horsepower and torque, with data encoding using multiple visual channels.

Improvements Made

Fixed Encoding Violations

Categorical Color: Changed from sequential blue scale to proper categorical palette (Tableau10)
Removed Shape Encoding: Eliminated confusing shape-based quantitative encoding

Enhanced Q1 Data Summary

Added mean and median calculations for both X and Y axes
Improved layout with structured summary rows
Clear formatting with proper number formatting

Additional Enhancements

Added interactive tooltips showing detailed data on hover
Improved legend with separate sections for categories and size
Better visual hierarchy and styling
Hover effects for better interactivity
Proper sorting to prevent large circles from occluding smaller ones

MIT Licensed

Similar vizzes

Loading thumbnail…

(Q3)

This example visualizes a car dataset as a scatter plot of horsepower against torque, with each point colored by the car’s make and an opacity of 0.7. It uses D3.js v7 (loaded via UNPKG) to fetch a CSV from a GitHub repository, then employs `d3.scaleLinear` for both axes, `d3.extent` for domains, and `d3.scaleOrdinal` with `d3.schemeCategory10` for colors. SVG rendering is used for circles, axis labels via `d3.axisBottom` and `d3.axisLeft`, and a legend built with `selectAll` and `append`.

Rreddyswethuvahana@gmail.com

84% match

Loading thumbnail…

Q3

This is a scatter plot that visualizes the relationship between horsepower and torque for vehicles, with each point colored by the car’s make. The data is loaded from a remote CSV file, and the chart uses linear scales for both axes with ordinal color mapping. It is rendered as SVG using D3 v7, featuring axes with labels, semi-transparent circles, and a legend showing the color categories. The code calls d3.csv, d3.scaleLinear, d3.scaleOrdinal, d3.axisBottom, and d3.axisLeft.

Nnsairitwikreddy@gmail.com

84% match

Loading thumbnail…

Fork of Activity6_Q3

This interactive scatter plot visualizes the relationship between horsepower and torque for various car models, using distinct D3 symbols to differentiate vehicle makes. The visualization employs scales from d3.scale, including scaleLinear for axes and scaleOrdinal with symbolsFill to map makes to shapes. Data is loaded asynchronously via d3.csvParse from a GitHub-hosted dataset, with axes and a custom shape legend rendered through modular functions. The chart updates dynamically when new data arrives, displaying a color-coded legend for categorical identification.

Aaashrithas2000@gmail.com

84% match

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

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

84% match

Loading thumbnail…

HTML Starter

This example visualizes automobile data by plotting a scatterplot of weight against horsepower, with each vehicle represented by a semi-transparent red circle rendered in SVG. The chart uses D3 v5 scales, axes, and the `csv` loader to fetch and parse the auto-mpg dataset from an external URL. It applies linear scales for both variables, adds gridlines via tick sizing, and includes a title within the chart area. The visualization is built within a React and D3 framework.

CChika

83% match

Loading thumbnail…

Fork of Activity6_Task3.6

This scatter plot shows the relationship between horsepower and torque for vehicles, with each point colored by vehicle make. The code loads data from a CSV file hosted on GitHub and uses D3 v6’s `scaleLinear`, `axisBottom`, `axisLeft`, and `scaleOrdinal` with `schemeCategory10` to position circles and create a color-coded legend. The visualization renders as an SVG, sized to the browser window, with labeled axes for horsepower and torque.

MMallikarjun Narra

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

83% match