ice-3-scatterplot

100%

ice-3-scatterplot

✓ Published0🌍 Public

HHariniPotla@my.unt.edu

Last edited Mar 6, 2026

Created on Mar 6, 2026

This scatter plot visualizes the relationship between visitors and sales, with each orange circle positioned according to its data values. The chart uses D3.js version 7 to load CSV data, applies linear scales for both axes, and renders SVG circles. The code explicitly converts visitor and sales values to numeric types, adds axis tick marks using `d3.axisBottom` and `d3.axisLeft`, and includes a title text element at the top of the visualization.

AI-generated description

MIT Licensed

Similar vizzes

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

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

79% match

Loading thumbnail…

Reusable scatter plot_ICE7

This reusable D3 scatter plot visualizes tourist visit data across three years (2019–2021) for various places, showing the relationship between 2021 and 2019 visitor numbers. The chart animates every two seconds, cycling the x-axis through each year's data while the y-axis remains fixed on 2019. Built with D3 v6, it uses `scaleLinear`, `extent`, and axis functions (`axisLeft`, `axisBottom`) within a custom `scatterPlot` function. SVG circles represent data points, with margins and radius configurable. Data loads from a CSV file parsed by `csv`, and the animation uses `setInterval` to update the x-value accessor and re-render.

Ssridhardubala106@gmail.com

79% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents a reusable scatter plot that maps daily visitors on the x-axis against sales on the y-axis, with each point sized by a fixed radius. The visualization loads CSV data from a GitHub gist, parsing numeric fields for day, sales, profit, orders, and visitors. Built with D3 v6, the code uses scaleLinear for axes, extent to compute domains, and axisLeft/axisBottom for rendering ticks. The scatterPlot function follows a reusable pattern, making it configurable via method chaining for width, height, margins, and data accessors, while SVG circles are joined to the DOM using selectAll and data.

HHariniPotla@my.unt.edu

79% match

Loading thumbnail…

ICE-6 Yearly Sales Scatter Plot

A scatter plot displays yearly sales data as steelblue circles, with orange highlighting on hover. The chart maps the Year and Sales fields from a CSV file onto linear scales, with axes labeled accordingly. Built with D3 v7 in a React environment, the visualization uses `d3.csv` to load data, `scaleLinear` and `extent` for scaling, and `axisBottom`/`axisLeft` for axis generation, rendered as SVG circles sized at a fixed radius.

Aarchanagoli@my.unt.edu

79% match

Loading thumbnail…

ICE-6 Scatter Plot

This scatter plot visualizes store sales data, showing the relationship between sales and the number of orders for products across multiple categories, with each category assigned a distinct color. The visualization uses D3 v6’s `csv` loader to fetch data from a GitHub gist, then applies `scaleLinear` and `extent` to map the axes, with `axisLeft`, `axisBottom`, and SVG circles rendering the points. Axis labels are styled via CSS and SVG text elements.

Llibramanju

79% match

Loading thumbnail…

ScatterPlot_Ice6

This scatter plot visualizes Amazon sales data, showing the relationship between Total Revenue and Total Profit. Each circle represents a country, positioned by revenue and profit, with its size encoding Units Sold and its color encoding the sales Region. The D3.js code loads a remote CSV, uses `d3.scaleLinear` for axes and `d3.scaleSqrt` for sizing, and renders interactive tooltips on mouseover. A legend and animated hover transitions enhance the presentation.

SSaiSriSuryaBandaru@my.unt.edu

78% match

Loading thumbnail…

Scatter Plot

This interactive scatter plot displays daily signups against revenue from the ICE.csv dataset, with each circle representing a single day's metrics. The visualization automatically detects numeric columns from the CSV and plots the first two found on linear axes with tick marks and gridlines. Built with D3 v7, the code uses `d3.csv` for data loading, `d3.scaleLinear` for coordinate mapping, and `d3.axisBottom`/`d3.axisLeft` for generating axes. Custom styling includes a lightgrey SVG background, rounded points rendered as teal circles with 75% opacity, and title and axis labels formatted with the Share Tech font.

Mmaddulanagasanjana@gmail.com

78% match