Fork of Reusable D3 Scatter Plot

100%

Fork of Reusable D3 Scatter Plot

✓ Published0🌍 Public

Last edited Mar 28, 2024

Created on Mar 28, 2024

This scatter plot visualizes the relationship between horsepower and weight using a dataset of car names loaded from a CSV file. The chart renders as an SVG with D3.js v7, mapping horsepower to the x-axis and weight to the y-axis using linear scales. Each data point is drawn as a circle with a fixed radius, and axis labels are appended to clarify the variables. The visualization employs D3's `scaleLinear`, `axisBottom`, and `axisLeft` APIs to construct the plot, with margins and dimensions set programmatically to produce a clean, reusable layout.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Cars Scatter Plot

This scatter plot displays the relationship between horsepower and weight for a collection of cars. The visualization uses red semi-transparent circles to represent individual data points, with axis labels and a title clarifying the chart’s purpose. The code loads data from the Auto MPG Data Set via `d3.csv`, then renders the chart as an SVG using D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` APIs. Styling is applied through external CSS, and the axes include custom tick formatting and gridlines.

NNALLANATHAN

90% match

Loading thumbnail…

Fork of 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 chart uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` to construct axes, while circles are appended via `selectAll` and `enter`. Data is loaded as CSV and parsed with numeric conversions. The SVG rendering includes custom axis labels and a title, styled through CSS with opacity and tick formatting.

GGerasimos Katsagannis

89% match

Loading thumbnail…

Fork of Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars, with each red semi-transparent circle representing a vehicle. The code uses D3 v5’s `csv`, `scaleLinear`, `axisBottom`, and `axisLeft` to load data from the UCI Auto MPG dataset and render an SVG chart. Axes include tick marks and labels, while a title and rotated y-axis label are manually positioned. Filtering and data type conversion occur before rendering, matching the original example’s styling and layout.

AAlexandre Pinho

89% match

Loading thumbnail…

D3-3: Scatterplot

This scatterplot visualizes the relationship between horsepower and weight for a dataset of automobiles. The SVG rendering uses D3 v7’s `scaleLinear`, `axisBottom`, and `axisLeft` to map the numeric values and draw labeled axes with grid lines. Data is loaded from a CSV file via D3’s `csv` method, with all values converted to numbers before plotting circles at each point. The chart applies a fixed margin and uses `selectAll` and `enter` to bind data to the SVG circle elements.

Bbkopruluoglu3

89% match

Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between horsepower and weight for a dataset of cars, with each point representing an individual vehicle. The visualization uses D3 v5 to load CSV data and render an SVG with linear scales, axes, and semi-transparent red circles. It applies `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.extent` to map values, while axis labels and a title are added via SVG text elements. The chart employs a clean grid layout with margins and tick styling from the accompanying stylesheet.

MMichał Szumnarski

89% match

Loading thumbnail…

Fork of Cars Scatter Plot

This fork of the cars scatter plot visualizes the relationship between horsepower and weight using data from the UCI Machine Learning Repository’s Auto MPG dataset. Each red, semi-transparent circle represents a car, positioned by its horsepower and weight values, with axes labeled accordingly. The code uses d3.csv to load the data, d3.scaleLinear for both scales, and d3.axisLeft and d3.axisBottom to render the axes with gridlines. The SVG canvas is 960 by 500 pixels, with a 60-pixel top margin for the title and a 150-pixel left margin for the y-axis label.

EEthan-Wu-juniper

89% match

Loading thumbnail…

Fork of Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Auto MPG dataset. The code uses D3 v5 to load CSV data, create linear scales for both axes, and render red, semi-transparent circles for each car. The chart includes labeled axes and a title, with gridlines and tick marks styled via CSS. The visualization demonstrates a straightforward data exploration using D3's `scaleLinear`, `axisBottom`, `axisLeft`, and SVG rendering.

Ppinlin0816157

89% match

Loading thumbnail…

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's `scaleLinear` for axis scaling and `extent` to compute data domains, rendered as SVG circles with semi-transparent steelblue fill. Axes are generated using `axisLeft` and `axisBottom` with tick lines and labels, and the plot includes labeled axis titles and a main title. The data is loaded from a CSV file and parsed into numeric values before rendering.

Bbrett@cloudaccelerator.co

89% match