ICE7

100%

✓ Published0🌍 Public

Ssrinathkarumuru@my.unt.edu

Last edited Oct 27, 2025

Created on Oct 27, 2025

This interactive scatter plot visualizes the relationship between sales and profit using a cleaned sales dataset loaded via D3’s `csv` method. It uses `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and renders circles with SVG. A custom tooltip displays category, sales, and profit values on mouseover. The chart includes axis labels and a title, with data cleaning applied to handle formatting and invalid entries.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE7 - Scatter Plot

A reusable scatter plot built with D3.js 6.7.0 visualizes sales, profit, and discount data from a remote CSV file. The plot displays circles for each data point, with axes and labels, and each circle is rendered with a white stroke and black fill. Every two seconds, the plot cycles the x-axis between the Profit, Discount, and Sales columns, updating the axis labels and re-rendering the points accordingly. The implementation uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scaling and axis generation.

Kkuraakhila9@gmail.com

89% match

Loading thumbnail…

ICE 7

This example shows a reusable D3 scatter plot of product sales versus profit, with each circle representing an item and axes scaled to the data. It fetches CSV data from a GitHub Gist, falling back to embedded data if the request fails. The visualization is built with `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom`, and drawn as SVG circles. The plot is sized to the window and styled with the Share Tech font, using a minimal, full-screen layout.

Ssarasaketh3@gmail.com

87% match

Loading thumbnail…

Ice7Q1

This interactive scatter plot visualizes Microsoft sales data, plotting revenue against profit for different product categories and scaling each point’s radius by order count. Hovering reveals a tooltip with category, revenue, and profit details. Built with D3.js v3, it uses `d3.svg.axis`, linear scales, and `d3.scale.category10` for coloring. Data loads from an external CSV file, and the chart is rendered as an SVG with mouseover transitions controlling tooltip opacity. The reusable `scatterPlot` function configures dimensions, margins, and accessor functions.

Ssrujana reddy

86% match

Loading thumbnail…

ICE7-Reusable storesales

This interactive scatterplot animates sales and profit data from a storesales CSV dataset, cycling through four axis configurations via `setInterval`. The visualization uses D3 v6 APIs including `scatterPlot`, `scaleLinear`, `axisLeft`, `axisBottom`, and `csv` for data loading, with SVG rendering. Data points are colored by category—Furniture, Office Supplies, and Technology—using hardcoded color markers, while a legend and rotating axis labels update dynamically. The reusable scatterplot module accepts configurable accessors for x/y values, margins, and radius, demonstrating a modular approach to animated data exploration.

AAnanyaSamala

85% match

Loading thumbnail…

ICE-7 SAKETH SARA

This scatter plot displays the relationship between sales and profit for a set of products. The visualization maps sales values along the horizontal axis and profit along the vertical axis using d3.scaleLinear and d3.axisBottom/axisLeft. Data is loaded asynchronously from a CSV file via d3.csv with d3.autoType. Each product is rendered as an SVG circle with fill color #2563eb, and hovering reveals a custom tooltip showing the product name, sales, and profit values.

Ssarasaketh3@gmail.com

85% match

Loading thumbnail…

ICE7 - Reusable scatter plot

This interactive scatter plot visualizes Superstore sales data, plotting profit against sales to reveal performance trends. Reusable JavaScript module `scatterPlot` encapsulates chart configuration and rendering, with the D3 v6 API handling data loading via `csv`, linear scaling with `scaleLinear`, and axis generation through `axisLeft` and `axisBottom`. Points are rendered as SVG circles with animation, allowing flexible reconfiguration of dimensions, margins, and visual attributes.

Mmamathareddy1321@gmail.com

85% match

Loading thumbnail…

ICE - 7 Reusable D3 Scatter Plot

This example shows a reusable scatter plot that displays sales figures over time, with each circle representing a data point. It uses D3.js version 7 to render the visualization as SVG elements, with a band scale on the x-axis for categorical years and a linear scale on the y-axis for continuous sales values. The code leverages `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, while interactive tooltips appear on mouseover using D3 event handlers. Data is loaded from a CSV file using `d3.csv`, and the plot includes animated transitions for tooltip visibility.

Yyvarshachowdary@gmail.com

85% match

Loading thumbnail…

Fork of ICE-6(Scatter plot)

This scatter plot from the ICE-6 series visualizes monthly sales versus profit using D3 v7 with SVG rendering. Each circle encodes a month’s sales on the x-axis and profit on the y-axis, with a hover tooltip revealing exact values via mouse events. The chart includes gridlines, axis labels, and a legend, pulling data from a local CSV file. A title and caption provide context, while the dark theme and scaling functions (d3.scaleLinear, d3.extent) structure the visualization clearly.

Vvydeeshm@gmail.com

84% match