D3 reusable scatter plot

Q1. Reusable D3 Scatter Plot

This interactive scatter plot visualizes car sales data, showing the relationship between price and various numerical attributes. The visualization cycles through three different x-axis variables—Horsepower, Mileage, and Year—every two seconds, keeping price on the y-axis. Built with D3.js (v6.7.0), the reusable `scatterPlot` module creates an SVG chart with animated transitions, axes, and a grid. Data is loaded from a CSV file using `d3.csv` and displayed as circles with a consistent fill color, with detected numeric columns automatically selected for the axes.

90% match

Q1_Reusable D3 Scatter Plot

This reusable scatter plot visualizes car sales data, showing the relationship between horsepower and price, with color encoding car make and bubble size representing mileage. The chart includes interactive tooltips that display detailed values on hover. Built with D3 v7, it uses `d3.scaleLinear` for axes, `d3.scaleSqrt` for bubble size, and `d3.scaleOrdinal` with `schemeTableau10` for categorical colors. Data comes from a Kaggle CSV loaded via `d3.csv`, rendered as SVG elements within a reusable component function.

89% match

Cars - ScatterPlot

This interactive scatter plot explores car sales data, letting viewers compare any two numeric variables on the X and Y axes while optionally coloring points by a categorical field. The visualization uses D3.js v7 with a CSV data source, and automatically detects whether columns are numeric or categorical to populate the dropdown controls. It renders data points as SVG circles with smooth transitions when changing axes, includes grid lines and axis labels, and displays a tooltip with details on hover.

87% match

Fork of Reusable D3 Scatter Plot

A reusable D3 scatter plot cycles through four numeric car-sales variables—mileage, engine size, year of manufacture, and price—on the x-axis while price stays on the y-axis, updating every 2.5 seconds with an animated transition. Built using `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom`, it renders SVG circles from a Kaggle CSV and re-invokes the chart function to swap axes. The code demonstrates a modular `scatterPlot` factory pattern with setter methods for width, height, data, and accessors.

85% match

Scatter Plot

This scatter plot visualizes a car dataset, showing fuel efficiency versus price with points colored by car type. Built as a reusable D3.js chart function, it uses `d3.scaleLinear` for both axes, `d3.scaleOrdinal` with `d3.schemeSet2` for categorical colors, and SVG circles with hover tooltips. The data is loaded from a CSV file via `d3.csv` with `d3.autoType`, and rendered in an SVG container with axes generated using `d3.axisLeft` and `d3.axisBottom`.

RRamdas Dheeraj

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

Fork of Reusable D3 Scatter Plot

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.

ICE-reusable scatter

This example demonstrates a reusable scatter plot implemented with D3.js, visualizing a used car dataset. It plots selling price against various attributes—max power, kilometers driven, mileage, or selling price—which rotate automatically every two seconds. Each point is color-coded by car status (sold in green, unsold in red) with a legend. The chart leverages D3’s `scaleLinear`, `axisLeft`, `axisBottom`, and `csv` APIs, and uses SVG rendering with animated transitions between attribute axes.

RRaajithaSabbineni