Skip to main content
SimilarExport ZIP
100%

Kumar-Reusable-Scatter

✓ Published0🌍 Public
KKumar Danam
Last edited Oct 27, 2025
Created on Oct 27, 2025

This reusable scatter plot displays the relationship between horsepower and miles per gallon for ten car models, using orange-red circles positioned by linear scales. Built with d3.v7 and the reusable chart pattern, the module encapsulates configurable accessor functions, axis labels, dimensions, and color through chainable setters. The visualization loads car_performance.csv via d3.csv with d3.autoType, filters for valid numeric values, and renders an SVG with d3.axisBottom and d3.axisLeft, updating circles through the join pattern.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Kumar Danam Reusable scatter plot

This example demonstrates a reusable scatter plot of car data from a CSV file, showing horsepower and miles per gallon. It renders SVG circles with axes and labels, with the visualization automatically alternating the x- and y-axis assignments every two seconds. The code uses d3.csv for data loading, d3.scaleLinear for scaling, d3.axisBottom and d3.axisLeft for axes, and the scatterPlot function pattern for reusability in D3 v6.

KKumar Danam
90% match
Loading thumbnail…

Fork of Fork of reusable scatter plot kumar danam

This reusable scatter plot visualizes the relationship between horsepower and miles per gallon using a dataset of cars. Written with d3.v6, the component maps the data to circular SVG elements, with axes and labels generated via d3.axisBottom and d3.axisLeft. The visualization alternately swaps the x and y axes every three seconds, animating how the data can be interpreted from different perspectives.

KKumar Danam
86% match
Loading thumbnail…

reusable scatter plot

This reusable scatter plot displays the relationship between horsepower and miles per gallon for a small car dataset, with each point representing a vehicle. The D3.js v6 code defines a configurable `scatterPlot()` function with getter-setters for dimensions and data mappings. It loads the comma-separated values file using `d3.csv()`, converts numeric fields, and renders an SVG chart with `d3.scaleLinear` extents, `d3.axisBottom`, `d3.axisLeft`, and labeled axes. Circle elements include interactive tooltips via SVG `title` elements, with styling for opacity and color.

119h61a05c9@cvsr.ac.in
85% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes 50 rows of real car data, mapping horsepower on the x-axis and miles per gallon on the y-axis, with points colored and shaped by the car’s origin using `d3.scaleOrdinal` with `d3.schemeTableau10` and `d3.symbol` types. Built with D3 v7, it renders an SVG with axes, labels, and a legend, loading data via `d3.csv` from a GitHub gist. The reusable chart pattern exposes setter methods for configurable dimensions and accessor functions.

SSainathreddypotu@gmail.com
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…

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

Reusable Scatter plot

A reusable scatter plot displays the relationship between horsepower and miles per gallon for the Auto MPG dataset, filtering out records with missing values. The D3 v7 component uses a configurable factory pattern with getter-setter methods for width, height, margins, radius, and fill color, applied via selection.call(). Linear scales map the data extent to the SVG canvas, with circles rendered through a data join and axes drawn using axisLeft and axisBottom. The chart includes textual labels for both axes and a title.

SSreedevi Itta
82% match