Skip to main content
SimilarExport ZIP
100%

ICE - 6 Scatter Plot

✓ Published0🌍 Public
NNaveed945
Last edited Jun 26, 2022
Created on Jun 25, 2022

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.

AI-generated description

A vanilla HTML implementation of a D3 scatter plot. Shows the Iris Dataset.

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

ICE-6 DV

This visualization displays the profit earned by the top 11 grocery products, rendered as a horizontal bar chart using React and D3 v5. The chart uses `scaleBand` for the product categories on the y-axis and `scaleLinear` for profit values on the x-axis, with purple bars showing relative profitability. Data is loaded from a CSV file via `d3.csv` and simple SVG `<rect>` elements are generated for each bar, accompanied by axis labels and tick marks drawn with SVG primitives.

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

ICE-6:

This visualization displays the profit for the top 12 grocery products using a horizontal bar chart rendered as SVG through React. The code uses React hooks (useState, useEffect, useCallback) to load CSV data via d3.csv, then constructs scales with d3.scaleBand and d3.scaleLinear to map product names and profit values. Profit bars are drawn as SVG rect elements, with gridlines and tick labels generated manually from scale ticks. The data comes from a GitHub-hosted Grocery.csv file, and the chart title appears above the visualization.

NNaveed945
81% match
Loading thumbnail…

ICE-6

This example renders a minimalist bar chart of grocery product profits using React and D3 v5. It loads CSV data via `d3.csv` and displays only the first two records. The visualization uses `scaleBand` for the y-axis positions and `scaleLinear` for x-axis widths, with profit values mapped to rectangle widths inside an SVG. The chart intentionally lacks axes or labels, and the data comes from a GitHub-hosted grocery dataset rather than the UN population data mentioned in the README.

NNaveed945
79% 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
78% 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
78% match