Fork of D3 Starter

100%

Fork of D3 Starter

✓ Published0🌍 Public

Last edited Apr 1, 2025

Created on Apr 1, 2025

This example displays a scatter plot of automobile data, plotting engine horsepower against model year for a dataset of vehicles. The visualization uses an SVG rendering approach, with D3 version 3’s `scaleLinear` and `d3.extent` to map the year and horsepower values to pixel coordinates. Circles represent individual data points, with axes generated via `d3.axisBottom` and `d3.axisLeft`, and the chart includes labeled axes for both variables. The code structures the plot within a reusable `scatterPlot` function, called with the dataset directly on the body element.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 Starter

This example shows a scatter plot of automobile data, mapping cylinders to the x-axis and horsepower to the y-axis, with each car represented as a semi-transparent circle. The visualization is built using D3 v7, loading data from a CSV file via `d3.csv` and rendering SVG elements with `scaleLinear`, `axisBottom`, and `axisLeft`. Axis labels are added with rotated text, while margins define the chart’s inner dimensions. The code demonstrates a basic D3 starter template, including data type conversion and appended circle elements.

Ssplit56

89% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot displays the relationship between model year and horsepower for a small set of cars, using steel-blue circles on a linear scale. Built as a reusable D3 chart function, it creates an SVG with axes labeled "Year" and "Horsepower", and the code employs `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` to map data ranges. A dataset of five car entries, including years 2021–2023, is rendered with the chart function called on the document body, while a separate module offers a configurable version with setters for dimensions and margins.

Nnishanththouta16@gmail.com

87% match

Loading thumbnail…

Fork of D3 Starter

This scatterplot compares vehicle horsepower and weight using data from the auto-mpg dataset, loading CSV data via `d3.csv` and rendering with SVG circles. The chart uses `d3.scaleLinear` for both axes, `d3.extent` to set domains, and `d3.axisLeft`/`d3.axisBottom` with gridlines. The title and axis labels are added as SVG text elements, and the visualization is built with D3 v6 in a simple HTML page.

NNikhil Prakash

86% 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.

85% match

Loading thumbnail…

Fork of D3 Starter - line chart

This line chart visualizes the relationship between horsepower and miles per gallon (MPG) for a dataset of cars, revealing the general trend of decreasing fuel efficiency as engine power increases. Sorted by horsepower, the data is plotted as a single smooth line using D3's `d3.line` generator, with scales defined by `d3.scaleLinear` and axes rendered via `d3.axisBottom` and `d3.axisLeft`. The CSV data is loaded asynchronously from a GitHub repository and drawn as an SVG within a styled container. The chart includes labeled axes for horsepower and MPG, with the line styled in a teal color.

Ssowjanya

83% match

Loading thumbnail…

Fork of Fork of Fork of Fork of reusable scatter plot

This example shows a reusable D3.js scatter plot of a small car dataset, comparing horsepower and miles per gallon. A controller module updates the chart every two seconds, automatically swapping which attribute appears on the x- and y-axes. The visualization uses a modular `scatterPlot()` component with getter-setters, building an SVG with `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`. Data loads from a local CSV via `d3.csv`, and each point is rendered as a circle with an opacity of 0.8.

119h61a05c9@cvsr.ac.in

83% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes relationships in automobile performance data, comparing miles per gallon against vehicle attributes including weight, horsepower, displacement, and acceleration. Each point is colored using a plasma interpolator based on horsepower, and the x-axis automatically cycles through different attribute comparisons every three seconds. The visualization uses the reusable chart pattern from D3 v6, combining scaleLinear, extent, axisBottom, axisLeft, and transition-based animation. Data comes from a CarPerformance CSV dataset hosted on raw GitHub.

Ssowjanya

83% match

Loading thumbnail…

D3 Starter - Creating Cars scatterplot

This scatterplot charts car weight against horsepower, with each car represented as a translucent red circle. The data is loaded from the Plotly auto-mpg dataset and parsed as numeric values before rendering. The visualization uses D3 v5’s `select`, `csv`, `scaleLinear`, `axisLeft`, `axisBottom`, `format`, and `extent` APIs to construct the SVG chart, including labeled axes and a title. Axis grids and tick marks are styled via CSS, while the plot area is sized using computed margins.

Mmaxthamt

82% match