Skip to main content
SimilarExport ZIP
100%

Fork of Reusable D3 Scatter Plot

✓ Published0🌍 Public
MM
Last edited Mar 28, 2024
Created on Mar 28, 2024

This fork of a reusable D3 scatter plot visualizes car specifications from a CSV dataset, plotting engine size against horsepower with circle size encoding mileage and color encoding car age using `d3.scaleOrdinal` and `d3.schemeCategory10`. The chart is constructed with `d3.scaleLinear` for x and y axes, `d3.axisBottom` and `d3.axisLeft` for scales, and `d3.csv` for asynchronous data loading. A separate `scatterPlot.js` module defines a reusable chart factory with configurable accessors for dimensions, margins, and radius, following the "Towards Reusable Charts" pattern.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

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
91% 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…

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

Reusable Scatter Plot with d3.js

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.

VVinay Vemuri
84% match
Loading thumbnail…

Fork of Scatter Plot

This fork of a scatter plot displays data on cars from the UCI Machine Learning Repository’s Auto MPG dataset, plotting horsepower against weight as red, semi-transparent circles. The visualization uses D3 v5 with the `select`, `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to parse the CSV, compute scales, and render SVG axes and circles. A title labels the chart as an “HK Temperature Heatmap,” while grid lines and rotated axis labels structure the layout.

Nnoah-lichtenberg
83% match
Loading thumbnail…

Fork of Fork of Scatter Plot with D3.js!

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset, displaying each vehicle as a semi-transparent black circle. The D3.js v6 code uses `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` to construct the axes with grid lines and labels, while `csv` loads the remote dataset. The SVG rendering applies a light gray background and custom styling for ticks and titles.

Aannadehtiarova
82% match
Loading thumbnail…

Fork of Cars Scatter Plot

This fork of a cars scatter plot visualizes the relationship between horsepower and weight for a dataset of automobiles. The code uses d3.csv to load the auto-mpg dataset, d3.scaleLinear for both axes, and d3.axisBottom with d3.axisLeft to render the chart, with circles drawn in SVG. The styling, including tick labels and axis labels, is defined in an external stylesheet, and the visualization includes grid lines generated through tickSize properties.

KKHUN LOUN ZAI
82% match
Loading thumbnail…

Fork of Scatter Plot with Shape

This example visualizes automobile data from a CSV file, plotting Horsepower against Mileage with points colored by vehicle Make using distinct shapes. The scatter plot uses D3 scales for axes and an ordinal scale mapped to symbol types via `symbolsFill`. A custom shape legend explains the mapping. The code demonstrates D3 v7 modular imports, including `scaleLinear`, `scaleOrdinal`, `symbol`, and `axisLeft`/`axisBottom`, while handling data loading asynchronously through `d3.csv` and updating the visualization via a state-based render loop.

Bbogasamudramvamsikrishnareddy
82% match