Skip to main content
SimilarExport ZIP
100%

ice7

✓ Published0🌍 Public
Sshyamraghav12@gmail.com
Last edited Mar 30, 2026
Created on Mar 30, 2026
Forked from assignment 6

This example shows a scatter plot of revenue versus profit from a CSV dataset of 200 rows. The plot is built with a reusable D3 module called `scatterPlot`, which uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to map and render the axes. Circles are appended with `d3.selectAll` and `join`, using a fixed radius and a steelblue fill. The data is loaded asynchronously with `d3.csv` and parsed to remove currency symbols, while the SVG fills the entire browser window.

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

ICE7

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.

Ssrinathkarumuru@my.unt.edu
86% 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
85% match
Loading thumbnail…

Ice7

This example presents a reusable scatter plot that visualizes the relationship between petal width and sepal length from a dataset loaded via `d3.csv`. The SVG visualization, rendered through a custom `scatterPlot` module, uses `scaleLinear` for axis scaling and `axisLeft`/`axisBottom` for tick marks. Data points are drawn as circles with configurable radius, and the plot adapts to the full browser window dimensions. The code leverages D3's `select` and `join` operations for efficient element creation.

Sshyamraghav12@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
84% 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
83% match
Loading thumbnail…

1 ice7

This area chart visualizes revenue by category from a provided CSV dataset. It aggregates revenue values using `d3.rollup` and renders the result with an area path, an overlaid line, and black circular points. The chart uses a point scale for the x-axis and a linear scale for the y-axis, with axes drawn via `d3.axisBottom` and `d3.axisLeft`. The visualization is built using D3 v7, with SVG rendering and title and axis labels.

SSai Vamshi B
83% match