Cars Scatter Plot

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset. Each red circle represents a vehicle, with its position determined by d3.scaleLinear functions mapping the data to SVG coordinates. The visualization includes labeled axes with tick marks, a custom x-axis title, and gridlines created using d3.axisBottom and d3.axisLeft. The data is loaded via d3.csv and parsed to numeric values before rendering.

NNoWizards

Cars Scatter Plot

This scatter plot displays the relationship between horsepower and weight for cars from the auto-mpg dataset, with each circle representing a vehicle. The visualization uses D3 v5’s scaleLinear, axisLeft, and axisBottom to construct axes with grid lines, while the data is loaded via csv() and parsed into numeric values. Circles are rendered as SVG elements with a fixed radius, purple fill, and partial opacity, emphasizing data density in the lower-left region.

WWhitney Hung

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars in the auto-mpg dataset, with each circle representing a car. It uses d3.scaleLinear to map data values to screen coordinates and d3.axisBottom and d3.axisLeft to render labeled axes with gridlines. The SVG rendering applies a semi-transparent red fill to circles, while a title and axis labels are added as text elements. Data is loaded from a CSV file and parsed into numeric values before plotting.

KKaleb LaBarrie

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the Auto MPG Data Set, sourced from the UCI Machine Learning Repository. Each red circle represents a car, positioned by its horsepower and weight values. The visualization uses d3.csv to load the data, d3.scaleLinear for both axes, and d3.axisBottom and d3.axisLeft to render tick marks and labels. The SVG rendering includes axis labels and a title, with circles styled via CSS for opacity.

Vveagy

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset, with each red circle representing a vehicle. The visualization uses d3.csv to load the data, d3.scaleLinear for both axes, and d3.axisBottom and d3.axisLeft to render the tick marks and labels. The SVG rendering includes axis labels, a title, and grid lines created by extending ticks across the plot area, with data points displayed at 10-pixel radius and 30% opacity.

JJuyeonee

Cars Scatter Plot

This scatter plot compares car horsepower and weight using red, semi-transparent circles from the Auto MPG dataset. The visualization arranges circles along linear scales, with axes labeled "Horsepower" and "Weight," and includes a title. Built with D3 v5, it uses `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom` to render the plot as SVG, with data loaded via `d3.csv`.

Jjane-heff

Cars Scatter Plot

A scatter plot displays the relationship between horsepower and weight for cars from the auto-mpg dataset. Each red circle represents an individual car, positioned along the x-axis by horsepower and the y-axis by weight, with both axes using linear scales. The visualization is rendered as an SVG using D3 v5, leveraging the `scaleLinear`, `axisBottom`, and `axisLeft` APIs to construct the plot. Data is loaded asynchronously from a CSV file via `csv`, and numeric fields are parsed before rendering.

RRoger Yu-Hsiang Lo

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset. The visualization uses D3.js v5 with SVG rendering and linear scales to map the data points, which are displayed as semi-transparent circles. The chart includes labeled axes, tick marks, and a title, with the y-axis rotated for readability. Data is loaded from a CSV file and parsed before being bound to the SVG circles.

TTsing