Skip to main content
SimilarExport ZIP
100%

Reusable ScatterPlot of the dataset

✓ Published0🌍 Public
Ttejasviteegala@my.unt.edu
Last edited Mar 27, 2024
Created on Mar 27, 2024
Forked from HTML Starter

This interactive scatter plot visualizes the relationship between the year and sales figures of various chocolate products, with a focus on Snickers bars, using D3.js. The visualization cycles through four different product categories—Kinder Joy, Twix, Cadbury, and Snickers—updating the y-axis every 3 seconds while maintaining the year on the x-axis. Rendered as an animated SVG, the chart features a clean, dark-themed design with clearly labeled axes and a dynamic title that updates to reflect the currently displayed product. The reusable chart function allows for flexible data binding and transitions, making it easy to adapt to similar datasets.

AI-generated description

Reusable scatterplot has been constructed for the dataset using html,css,d3.js.

MIT Licensed

Similar vizzes

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
78% 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
76% 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
75% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes Walmart sales data, plotting temperature against sales year with draggable, animated transitions. Every two seconds, the x-axis automatically cycles through different data columns—year, temperature, weekly sales, and fuel price—updating the circles’ positions accordingly. Built with D3 v6, the visualization uses scaleLinear, axisLeft, axisBottom, and a reusable scatterPlot factory function to manage state. Data loads from a CSV via d3.csv, and the SVG renders with a custom Share Tech font, creating a dynamic exploration of retail metrics.

Mmahee0725
74% match
Loading thumbnail…

Reusable Scatter plot Presentation

This example demonstrates a reusable scatter plot visualization that animates through different cereal data attributes on the x-axis, including cups, sugars, sodium, and fat. The visualization loads data from a CSV file using D3's `csv` function and employs a custom ES6 module (`scatterPlot.js`) that uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs. The scatter plot displays circles colored by rating values (red, orange, green) to indicate low, average, and good ratings, with an animated `setInterval` updating the x-axis attribute every few seconds. The SVG rendering includes custom legends, axis labels, and a title styled with Google Fonts.

Ppjdhungana@gmail.com
74% 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
74% 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
74% 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
73% match