Skip to main content
SimilarExport ZIP
100%

ICE-6 Scatter Plot

✓ Published1🌍 Public
Llibramanju
Last edited Mar 11, 2023
Created on Mar 11, 2023

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE7 Reusable Scatter

This interactive scatterplot visualizes sales data, showing the relationship between the number of orders placed by customers, available stock, and sales revenue for different product categories. The visualization uses D3.js (v6) with SVG rendering to display colored circles representing product categories, with an animation that periodically switches the x-axis between 'Number of Orders' and 'Available in Stock' using `setInterval`. A legend with category colors and axis labels enhances readability, while the reusable `scatterPlot` module handles axis scaling and circle positioning.

Llibramanju
88% 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
88% match
Loading thumbnail…

ICE6 Bar Plot

This example visualizes total sales for five items using a horizontal bar plot rendered as SVG. The React component fetches data from a CSV file via `d3.csv`, then uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis. D3's axis utilities generate tick marks and labels for both scales. The bars themselves are plain SVG `<rect>` elements, with their widths proportional to the sales values, and the chart includes a title and loading state.

PPlatoch
84% match
Loading thumbnail…

ICE7 Reusable Scatter

This interactive scatter plot uses D3 v6 to visualize restaurant menu data, showing Total Sales against Orders Count with points colored by Menu Category. The visualization animates the X-axis, periodically toggling between Orders Count and Stock Availability using setInterval. Built with React-compatible reusable chart components, the example imports scatterPlot.js and the d3 csv, scaleLinear, axisLeft, and axisBottom APIs. SVG circles render with custom colors for Main Course, Beverages, Desserts, and Appetizers, alongside a manually constructed legend and axis labels.

MMahendraGullinkala
84% match
Loading thumbnail…

ICE - 6 Scatter Plot

This interactive D3.js scatter plot visualizes grocery store data, plotting Cost Price on the x-axis against Profit on the y-axis. Points are colored by product category (Grocery, Produce, or other) and sized with additional attributes for Selling Price and Quantity. The visualization uses D3's `csv` loader to fetch data, `scaleLinear` for axis scaling, and `axisLeft` and `axisBottom` for rendering axes. The chart spans the full browser window and applies a custom margin, with data-driven circles drawn via SVG joins.

NNaveed945
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
84% match
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
84% match
Loading thumbnail…

ICE6 - Scatter Plot

This scatter plot visualizes the correlation between sales and profit using a dataset from a public GitHub repository. The visualization displays individual data points as circles, with sales on the x-axis and profit on the y-axis. The code uses d3.csv to load and parse the data, d3.scaleLinear to map the data values to pixel coordinates, and d3.axisLeft and d3.axisBottom to render the axes. The chart renders as SVG, with each data point represented by a circle of radius 5, and includes axis labels for both dimensions.

Kkuraakhila9@gmail.com
83% match