Skip to main content
SimilarExport ZIP
100%

Reusable Scatterplot

✓ Published0🌍 Public
Ttelkapallyrekha@gmail.com
Last edited Mar 28, 2024
Created on Mar 27, 2024

This scatter plot visualizes the relationship between units sold and sales revenue for mobile devices, with data points colored by brand. The implementation uses a reusable `scatterPlot` module built with D3 v6, employing `scaleLinear` and `scaleOrdinal` for axes and color encoding, alongside `axisLeft` and `axisBottom` for chart annotations. The visualization cycles between two halves of the dataset every five seconds, fetched from a CSV via `d3.csv`, and renders as an interactive SVG with a 12-pixel font for labels.

AI-generated description

The code presents a reusable scatter plot representation of sales data for mobile devices, showing how sales and units sold relate to one another. It offers a straightforward and interactive method for evaluating and contrasting sales results across various goods.

MIT Licensed

Similar vizzes

Loading thumbnail…

RK7_reusable scatter plot

This example displays a reusable scatter plot of mobile phone data, showing units sold against price. It fetches a CSV file from a GitHub gist, parses the data, and renders the visualization using either Chart.js on a canvas element in the HTML version or a custom D3 module in the JavaScript version, which appends an SVG to the body. Both approaches map price to the x-axis and units sold to the y-axis, with the D3 version utilizing the `scatterPlot` module and CSV parsing functions from the D3 library.

Ttelkapallyrekha@gmail.com
82% match
Loading thumbnail…

Reusable D3 Scatter

This example presents a reusable scatter plot that visualizes retail sales data from a supermarket dataset. The plot animates by cycling between two variables—Quantity and Price—on the x-axis every four seconds, while the y-axis remains Price. Data points are colored by product category (blue for Clothing, purple for Gadgets, orange for Appliances). Built using D3 v6, it leverages scaleLinear, axisLeft, axisBottom, and csv loading, with SVG circles for rendering and a setInterval-driven animation.

Pprashanth yamala
79% match
Loading thumbnail…

Re-usable Scatter Plot

This reusable scatter plot visualizes the relationship between product quantity and price from a CSV inventory dataset. It uses D3 v6 to load the data, map the numeric fields to linear scales, and render circles with fixed radius on an SVG canvas. The code demonstrates a modular chart-building pattern with explicit margins, axis generation via `d3.axisBottom` and `d3.axisLeft`, and a consistent steelblue fill for all data points. The chart is embedded in a centered, styled layout.

Vvishnupriya eupuri
79% match
Loading thumbnail…

pp Scatter Plot

This animated scatter plot visualizes the relationship between sales volume and either price or another numeric attribute for phone data, toggling the x-axis variable every two seconds. Built with D3 v7, it uses `d3.scaleLinear` for both axes and `d3.axisBottom`/`d3.axisLeft` for tick marks. The `setInterval` function re-binds the data, updating circle positions via `attr('cx')`. Data loads asynchronously from a CSV via `d3.csv`, rendered as an SVG with steelblue circles.

Ssaisathyapriya097@gmail.com
78% match
Loading thumbnail…

Reusable Scatter Plot

This reusable scatter plot visualizes retail store data from a CSV source, mapping store attributes like area and items available. The visualization cycles through different data columns every two seconds, updating the x-axis mapping for each view. Built with D3.js, it uses `selectAll` and `join` for SVG circle rendering, along with `scaleLinear`, `extent`, and axis functions to create a dynamic, animated chart.

RRohithNaiduDevareddy@my.unt.edu
77% match
Loading thumbnail…

Reusable_Scatter Plot

This example shows how sales in 2019 relate to sales in 2021 for different car types, with each circle’s position encoding the two years’ values. The chart animates every two seconds, cycling the x-axis through 2019, 2020, and 2021 sales while keeping the y-axis fixed on 2019. The reusable scatter plot is built with D3 v6, using `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes, and SVG circles with a radius of 5 pixels. Data is loaded from a CSV via `d3.csv`, and the plot’s dimensions adapt to the window size.

RRahulbelede97@gmail.com
77% match
Loading thumbnail…

Beauty Product Sales Scatter Plot

This scatter plot visualizes the relationship between units sold and revenue for various beauty products, with each point labeled by product name. The chart uses D3 v5 to load the CSV data, scale linear axes, and render SVG circles and text labels. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while points are positioned using the `xScale` and `yScale` functions. The visualization highlights trends between sales volume and revenue, such as higher-revenue products not always having the highest units sold.

NNukaShravanKumar
77% match
Loading thumbnail…

scatterplot2

This animated scatter plot displays phone data, alternating the x-axis between Price and SalesVolume every two seconds to reveal different relationships in the dataset. Built with D3.js v7, it uses SVG circles with a fixed radius and steelblue fill, positioned via linear scales derived from the CSV data. The chart is constructed through a custom `createScatterPlot` function that leverages D3's `selectAll` and `join` for efficient DOM updates, while `setInterval` drives the periodic column switching animation.

Ppilliprathimarani@my.unt.edu
77% match