Untitled

Untitled

This scatterplot uses the D3.js library to visualize the relationship between horsepower and weight for a collection of cars from the UCI Machine Learning Repository’s Auto MPG data set. Each red, semi-transparent circle represents a single car model. The D3 code loads the CSV data, applies linear scales to both axes, and renders the points within an SVG, while also adding labeled axes and a title to the chart.

Jjhcliu19

Basic Scatter Plot

This example shows a scatter plot of car weight against horsepower, with each circle representing a vehicle and axes labeled accordingly. The visualization uses D3 v5's `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` APIs to map data values to SVG coordinates, while `csv` loads the auto-mpg dataset from a remote URL. Gridlines are drawn via tick sizes, and axes labels and a title are appended as SVG text elements.

Ggmille22

Untitled

This scatter plot visualizes the relationship between vehicle weight and horsepower, with each circle representing a car from the auto-mpg dataset. The visualization uses d3.scaleLinear for both axes, d3.axisLeft and d3.axisBottom for tick marks, and d3.format for axis labels, rendered as SVG. The chart includes axis labels, a title, and grid lines created via tickSize, with data loaded asynchronously from a CSV file.

RReekMajumder

Untitled

This interactive scatterplot displays the relationship between horsepower and weight for cars, with circles colored in a semi-transparent blue. Users can toggle checkboxes to switch the x-axis mapping from horsepower to a separate origin scale. The visualization uses D3.js v5 for data binding, scales, and axes, with data loaded from a CSV file via `d3.csv()`. The SVG rendering includes gridlines and axis labels, and jQuery handles the checkbox interactions that reassign the circle positions.

PPuja Maharjan

Making a Bar Chart

This example shows a scatterplot of automobile data, mapping each car’s horsepower on the x-axis and its weight on the y-axis, with a title and labeled axes. It uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` APIs, loading CSV data via `d3.csv` from a VizHub dataset. The SVG render draws red, semi-transparent circles for each car, with margins, tick marks, and custom text labels styled via CSS. The code explicitly parses numeric columns before rendering.

BBraja Gopal Das

Scatter Plot

This example shows a scatter plot of car horsepower versus weight, with each circle representing a vehicle and axes labeled accordingly. The visualization uses D3 v5’s `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` APIs within an SVG container, loading data from a CSV via `d3.csv`. Circles are rendered with purple fill and opacity, while grid lines from tick marks and styled axis labels enhance readability. The code dynamically maps data domains to pixel ranges and applies margins for layout.

Eexchoco

Making a scatterplot

This example shows a scatterplot of cars with weight on the x-axis and horsepower on the y-axis, with each point representing a vehicle and a title reading “Cars.” The visualization uses D3 v5’s `csv` to load auto-mpg data, `scaleLinear` and `extent` to map values, and `axisBottom` and `axisLeft` to draw custom axes with removed domain lines. Circles are appended to an SVG container, with axis labels and a title added as text elements, styled using CSS classes for ticks, labels, and overall layout.

VVinh H. Le

Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset, with each circle representing a vehicle. The chart uses red, semi-transparent circles to show data density, and includes labeled axes and a title. Built with D3 v5, the code loads CSV data, applies linear scales via `scaleLinear`, and renders axes using `axisBottom` and `axisLeft`. The SVG output includes grid lines and custom styling from the accompanying stylesheet.

Kkshethia12