100%

ice7 part1

✓ Published0🌍 Public

Last edited Mar 28, 2024

Created on Mar 28, 2024

This interactive scatter plot visualizes the relationship between horsepower and MPG for a sample of cars from the Cars dataset, encoding each vehicle’s weight through circle radius and origin through color (USA, Japan, Europe). Using D3.js v7, the code builds SVG axes and circles, mapping quantitative scales for horsepower, MPG, and weight, while color categories are hardcoded. Hovering a circle reveals a tooltip with the car’s specific measurements, implemented via D3’s event handling and the `d3.select` API.

AI-generated description

Enhanced Scatter Plot

This HTML file creates an interactive scatter plot using D3.js library to visualize data points from the Cars dataset. It displays the relationship between horsepower and MPG (miles per gallon) of cars, with additional information such as origin and weight. Each data point is represented by a circle, with size corresponding to weight, and color indicating the origin of the car (USA, Japan, or Europe).

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE7-1-VarshaG

This interactive scatter plot explores the relationship between fuel efficiency (mpg) and horsepower across vehicles, with color mapped to origin and point size to weight. It renders the 398 cars from the UCI Auto MPG dataset using the vega-lite-api library, building a single circle mark with tooltips for names. The visualization adapts to the full viewport, and the accompanying vega-tooltip handler displays each vehicle's details on hover.

VVReddy913

86% match

Loading thumbnail…

ICE 7

This visualization displays a scatter plot of automobile data from the UCI Auto MPG dataset, mapping miles per gallon against horsepower. Points are colored by origin, with point size encoding vehicle weight, and hovering reveals the car name via tooltip. Built with the vega-lite-api and D3’s csv loader, it renders using vega-lite’s markCircle, with axes customized to remove domain lines and configure tick and label styling.

MMalempatiSaranya

85% match

Loading thumbnail…

Cars Scatter Plot with D3.js

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset, with each circle representing a vehicle. The SVG rendering uses D3.js v5 scaleLinear functions to map data values to screen coordinates, while axisBottom and axisLeft generate the labeled axes with custom tick formatting. Data loads asynchronously via csv(), with a brief transition from the same library’s styling. The chart encodes the two continuous variables directly, using opacity-red circles to reveal density patterns.

Ssiddharth171

84% match

Loading thumbnail…

Cars Scatter Plots

This interactive scatter plot visualizes the relationship between horsepower and weight for a dataset of cars from the UCI Machine Learning Repository’s Auto MPG Data Set. It uses D3.js v5 with SVG rendering, mapping each car to a semi-transparent red circle positioned via `d3.scaleLinear` and `d3.extent`. The axes are generated with `d3.axisLeft` and `d3.axisBottom`, featuring custom tick sizes and labels. Data is loaded as CSV and parsed for numeric fields before rendering.

EecoBela

84% match

Loading thumbnail…

Cars Scatter Plot w/ D3

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Auto MPG dataset. Each red, semi-transparent circle represents a car, with positions determined by d3.scaleLinear domains and ranges. The visualization uses D3 v7 to load CSV data, render SVG circles, and generate axes with grid lines via d3.axisLeft and d3.axisBottom, complete with custom axis labels and a title.

GGabe Nascimento

84% match

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars, with each point representing a vehicle. The visualization uses D3.js v7 to load data from a CSV file and render an SVG with scaled axes and semi-transparent red circles. The code implements linear scales, axis generators with grid lines, and custom labels, with data parsed from the auto-mpg dataset.

黃黃歆善

84% match

Loading thumbnail…

VarshaICE7

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository Auto MPG dataset. Each red semi-transparent circle represents a car, with the title clearly stating the variables being compared. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for both axes, `axisLeft` and `axisBottom` for tick marks, and `extent` to compute domains. Axis labels and a title are added via appended text elements, while gridlines are generated through tick size adjustments.

VVReddy913

84% match

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset, with each red semi-transparent circle representing a vehicle. The visualization uses D3 v7’s `scaleLinear`, `axisLeft`, and `axisBottom` to map the data, with gridlines and axis labels generated via the `tickSize` and `tickPadding` options. The code loads CSV data asynchronously, converts numeric fields, and renders the SVG circles with opacity to show density. Titles and axis annotations are added as SVG text elements, while the axes’ domain lines are removed for a cleaner presentation.

Xxychen0612.cs09@nycu.edu.tw

84% match