scatterplot2

100%

✓ Published0🌍 Public

Ppilliprathimarani@my.unt.edu

Last edited Mar 28, 2024

Created on Mar 28, 2024

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.

AI-generated description

MIT Licensed

Similar vizzes

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

91% 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…

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

78% match

Loading thumbnail…

Fork of Circles with D3

This interactive scatter plot animates store sales data, cycling the y-axis between metrics like Store_Sales, Daily_Customer_Count, and Items_Available every two seconds. Built with D3 v7, it loads CSV data via `d3.csv`, uses `d3.scaleLinear` and `d3.axisBottom`/`axisLeft` for axes, and renders SVG circles with a reusable `scatterPlot` function. The y-axis label updates dynamically as the plot re-renders.

RRohithNaiduDevareddy@my.unt.edu

78% match

Loading thumbnail…

Reusable Scatterplot

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.

Ttelkapallyrekha@gmail.com

77% match

Loading thumbnail…

Reusable for Assignment 7

This animated scatter plot uses a reusable D3 function to visualize product data, cycling through three quantitative x-axis variables—discount, unit cost, and unit price—against order quantity. The SVG visualization updates every two seconds, smoothly re-scaling the x-axis as new data is plotted. Built with D3 v6, it leverages `scaleLinear`, `extent`, and `axisBottom` for axes, while circles are rendered via data joins. Data is loaded from a CSV file using `csv` and parsed to convert numeric fields. The scatter plot is fully responsive, filling the entire viewport with configurable margins and point radius.

BBlueT

77% 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

77% match

Loading thumbnail…

RT15

This scatter plot visualizes the relationship between mobile phone price, sales, and rating, with each circle representing a phone. The x-axis shows price, the y-axis shows sales, and color encodes rating, ranging from yellow to blue. Built with D3 v7, it uses `d3.csvParse` to load data from a GitHub gist, `scaleLinear` for axes and color, and appends SVG circles. Axis labels are added via `d3.axisBottom` and `d3.axisLeft`.

Ttelkapallyrekha@gmail.com

76% match