Skip to main content
SimilarExport ZIP
100%

ICE-6 Yearly Sales Scatter Plot

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

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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

Scatter Plot - ICE6

This scatter plot shows car sales in 2019 against 2021, with each circle representing a car model type. It reveals a positive trend, as most points cluster above the diagonal, indicating higher sales in 2021. The visualization loads CSV data from a GitHub gist using D3’s `csv` parser, then uses `scaleLinear` and `axisBottom`/`axisLeft` to render the axes. React manages the component state, while D3 selects and updates the SVG circles via `join('circle')`. The chart is drawn with D3 v5 and rendered through React 16.

RRahulbelede97@gmail.com
84% match
Loading thumbnail…

ICE-6

This scatter plot visualizes the relationship between sales in North America and product ratings, using a dataset loaded from a CSV file via `d3.csv`. The visualization shows individual data points as navy blue circles, with sales figures mapped to the x-axis and ratings constrained to a fixed domain of 7 to 10 on the y-axis. The chart is rendered as an SVG using D3 v6, with linear scales (`scaleLinear`), axes generated via `axisLeft` and `axisBottom`, and data points positioned using the `extent` function to determine the x-domain. The plot is titled and styled directly in the HTML document.

Ssatishnarne99@gmail.com
83% match
Loading thumbnail…

ICE-6 Scatter Plot 11554625

This scatter plot visualizes video game sales data from a CSV file, plotting North American sales on the x-axis against release year on the y-axis. Each circle represents a game, colored by genre using a custom `marker` function that maps genre names to specific colors (blue, yellow, or red). The visualization uses D3 v6 APIs including `csv` for data loading, `scaleLinear` for axes, and `axisLeft`/`axisBottom` for rendering scales. The SVG rendering fills the full browser window with a heading and styled tick labels.

MManohar Kowthavarapu
83% match
Loading thumbnail…

ICE-6

This bar chart displays total sales values by year, with each year’s revenue encoded as a bar’s height and a dollar-formatted y-axis for reference. Built with D3 v4, it loads CSV data from a GitHub gist via `d3.csv`, scales the x-axis with `d3.scaleBand` and the y-axis with `d3.scaleLinear`, and renders SVG rectangles. Axis labels for “Year” and “Total Sales Value” are appended directly to the generated axes.

Kkartik900
83% match
Loading thumbnail…

Fork of ICE7 Reusable Scatter

This example visualizes PS4 game sales data as an animated scatter plot, showing global sales against release year across product categories. The visualization cycles the x-axis between Year and North American sales every few seconds. Built with D3 v6 and React, it uses `scaleLinear`, `axisLeft`, and `axisBottom` for axes, renders circles as SVG marks, and includes a hand-coded legend with color-coded categories. Data loads from a CSV via `d3.csv`, with axis transitions driven by `setInterval`.

Mmaheganesh
83% 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
82% match