Skip to main content
SimilarExport ZIP
100%

Reusable Scatter Plot with d3.js

✓ Published0🌍 Public
VVinay Vemuri
Last edited Jul 23, 2023
Created on Jul 23, 2023
Forked from Hello VizHub

This example creates a reusable scatter plot of sample car data, showing each vehicle’s horsepower against its miles per gallon via colored SVG circles. The visualization uses d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft for gridlines, and d3.selectAll with data binding to append circles. A color map assigns distinct hues per car make, and each circle includes a title element for hover tooltips. The chart is generated by a configurable createScatterPlot function that accepts container, dimensions, and data keys as options.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Reusable Scatter plot

This reusable scatter plot visualizes car horsepower, miles per gallon, cylinder count, and displacement from a CSV dataset, animating through these columns every second. Built with D3 v6, it uses a custom `scatterPlot` function with `scaleLinear`, `scaleOrdinal`, `axisLeft`, and `axisBottom` to render SVG marks. Data points appear as distinct symbols and colors, with axes and labels updating dynamically via `setInterval` and the `svg.call(plot)` pattern.

NNanditha Reddy
89% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

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.

Rreddysushma994@gmail.com
87% match
Loading thumbnail…

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
86% match
Loading thumbnail…

Cars Scatter Plot with D3.js

This example visualizes the relationship between horsepower and weight for a dataset of cars, with each vehicle represented by a semi-transparent red circle. The code uses D3.js v5's `csv` method to load data from a remote file, `scaleLinear` to map data values to pixel coordinates, and `axisBottom` and `axisLeft` to render axes with grid lines. The scatter plot is drawn as an SVG, and the chart includes labeled axes and a title, with margins and padding handled manually.

HHwl98
86% match
Loading thumbnail…

Cars Scatter Plot with D3.js

This example visualizes the relationship between horsepower and weight for various car models using a scatter plot. Each circle represents a car, with its position determined by the horsepower and weight values from the auto-mpg dataset. The code uses D3.js v5, specifically leveraging `scaleLinear` for scaling, `axisLeft` and `axisBottom` for axes, and `append` to create the SVG circles. The axes include labels and grid lines, while the circles are semi-transparent red, and the plot is rendered within an SVG canvas.

DDaniel Rivera
86% match
Loading thumbnail…

Scatter Plot

This scatter plot displays the relationship between miles per gallon and horsepower for various car models, with each point representing a vehicle. The visualization uses D3.js v6 within a React framework to scale and position circles on an SVG canvas. The code employs `scaleLinear`, `axisLeft`, and `axisBottom` to construct axes and plot the data, which is loaded from a CSV file. The visualization also includes axis labels, a title, and a semi-transparent steelblue fill for the circles.

Nnsadath
85% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes vintage car data, mapping engine size against horsepower with D3’s `scaleLinear`, `axisLeft`, and `axisBottom`. The visualization animates by cycling through four variables—car age, mileage, engine size, and horsepower—on the x-axis every two seconds using `setInterval`. Each point is rendered as an SVG circle with a fixed radius, and the chart updates the x-axis domain and circles accordingly. Data is loaded asynchronously from a CSV via `d3.csv` and parsed into numeric values.

MM
85% match
Loading thumbnail…

Cars Scatter Plot.js

This example displays a scatter plot of automobile data, mapping horsepower on the x-axis against weight on the y-axis. Each point represents a car model, rendered as a translucent blue circle with a fixed radius. The visualization uses D3.js v5, employing `scaleLinear` for both axes and `extent` to compute the domains. The SVG output includes gridlines generated by `axisLeft` and `axisBottom`, with the resulting data loaded from a local CSV file (auto-mpg.csv) covering vehicle specifications.

Dddperdue
85% match