reusable scatter plot likitha

100%

reusable scatter plot likitha

✓ Published0🌍 Public

Last edited Mar 25, 2026

Created on Mar 25, 2026

Forked from Fork of Fork of Fork of Reusable D3 Scatter Plot

This reusable scatter plot displays sales trends over time, rendering day and sales data from a CSV file as red circles on a steelblue line chart. Built with D3.js v6, the visualization uses `d3.csv` to load the dataset, `scaleLinear` for both axes, and `axisBottom`/`axisLeft` for tick marks. The line is generated with a `d3.line` path, while the scatterPlot function exposes setters for width, height, data, and radius, making the chart customizable. SVG output is styled with the Share Tech font.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot displays sales data over time, with a line connecting red circular markers on a steelblue stroke. The code uses the D3.js v6 API, including `d3.csv`, `d3.scaleLinear`, `d3.extent`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line`, to load CSV data and render an SVG. It includes axis labels and a custom Share Tech font. A separate `scatterPlot.js` module defines a reusable chart function with setters for configuration.

HHariniPotla@my.unt.edu

84% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents a reusable scatter plot that maps daily visitors on the x-axis against sales on the y-axis, with each point sized by a fixed radius. The visualization loads CSV data from a GitHub gist, parsing numeric fields for day, sales, profit, orders, and visitors. Built with D3 v6, the code uses scaleLinear for axes, extent to compute domains, and axisLeft/axisBottom for rendering ticks. The scatterPlot function follows a reusable pattern, making it configurable via method chaining for width, height, margins, and data accessors, while SVG circles are joined to the DOM using selectAll and data.

HHariniPotla@my.unt.edu

82% match

Loading thumbnail…

Fork of Fork of Fork of Fork of Reusable D3 Scatter Plot

This example shows a scatter plot of daily sales data, with light blue area fill beneath the points and red circles marking each data value. It loads CSV data from a GitHub gist via `d3.csv`, converts the fields to numbers, and uses `d3.scaleLinear` for both axes with `d3.axisBottom` and `d3.axisLeft` for tick marks. The reusable `scatterPlot` module defines configurable accessors for width, height, margins, and radius, though the main script directly builds a static SVG area chart.

HHariniPotla@my.unt.edu

81% match

Loading thumbnail…

D3 reusable scatter plot

This interactive scatter plot visualizes car sales data loaded from a CSV file, letting users select which columns drive the x and y positions, point size, and color. The reusable chart component, built with D3 v7, exposes getter-setters for its scales, axes, and tooltip formatter. It applies d3.scaleLinear, d3.scaleSqrt, and either d3.scaleSequential or d3.scaleOrdinal for encoding, while cleaning numeric values to handle currency, percentages, and parentheses. Rendering is SVG-based, with interactive hover tooltips.

Mmaddineni2112@gmail.com

81% match

Loading thumbnail…

resuable scatter plot

This interactive scatter plot visualizes supermarket sales data, plotting Quantity on the x-axis and Price on the y-axis, with points colored by product list category. It demonstrates a reusable chart pattern, using d3.csv to load the dataset and d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom to render axes. An animated loop using setInterval toggles the x-value mapping between Quantity and Price every two seconds, redrawing the chart with smooth SVG transitions. The code follows the “Towards Reusable Charts” methodology, exposing configuration methods like .width, .height, .data, and .radius for flexible customization.

Pprashanth yamala

81% match

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This scatter plot displays monthly sales figures across six retail categories, with each circle’s horizontal position encoding the month, vertical position encoding sales amount, and color distinguishing product types. The visualization uses a reusable custom D3 module that employs `scaleOrdinal` for the categorical x-axis and legend colors, `scaleLinear` for the sales axis, and `axisLeft`/`axisBottom` for tick labels. The SVG output is generated from hardcoded data via the provided `index.js` and `scatterPlot.js` files.

UUday Kiran

80% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example demonstrates a reusable scatter plot visualization of laptop sales data, showing the relationship between cost and quantity sold. It uses a D3.js module pattern to create a configurable chart component, with the `scatterPlot` function accepting setters for dimensions, margins, and data accessors. The data is loaded from a remote CSV file via `d3.csv()`, then parsed and rendered using `scaleLinear` for axes and `axisLeft`/`axisBottom` for tick marks. The implementation includes TODO notes about making the chart idempotent, and the page uses custom styling with the Share Tech font.

Kkruthanreddy812@gmail.com

80% match

Loading thumbnail…

Scatter Plot

This example shows a reusable scatter plot of monthly sales versus profit, with each circle representing a month’s data from a CSV file. The visualization uses D3 v7 to load the data via `d3.csv`, then builds a linear scale for both axes with `d3.scaleLinear`. Axes are rendered using `d3.axisBottom` and `d3.axisLeft`, while circles are appended to an SVG container with fixed radii and a steelblue fill. The chart includes labeled axes and a title, all styled through CSS classes.

Ppvvaishnavi93@gmail.com

80% match