Skip to main content
SimilarExport ZIP
100%

MOULI ICE-6

✓ Published0🌍 Public
Ddmouli369@gmail.com
Last edited Mar 21, 2024
Created on Mar 21, 2024

This example uses D3.js v6 to render a responsive scatter plot of product data loaded from a CSV file, showing Price on the x-axis and Product_ID on the y-axis. It highlights how individual products are distributed across price levels, with each circle colored by its category using a categorical color scale. The visualization employs an ordinal band scale for the y-axis and a linear scale for the x-axis, with axes generated via `d3.axisLeft` and `d3.axisBottom`. Circle positions are computed from the parsed data and rendered as SVG elements, with the chart filling the full browser window.

AI-generated description

A responsive bar chart.

MIT Licensed

Similar vizzes

Loading thumbnail…

MOULI ICE-6

MOULI ICE-6 displays a responsive scatter plot that encodes product prices as horizontal bars sorted in ascending order, with a light-to-dark blue color gradient mapping price magnitude. The visualization uses React for component state management and D3.js v5 for data loading and scales, specifically `scaleBand` for product categories and `scaleLinear` for price values. The data comes from a CSV file loaded via D3’s `csv` method, and the rendering is done entirely in SVG. The chart includes labeled axes and gridlines, with product names placed along the vertical axis and price values on the horizontal axis.

Ddmouli369@gmail.com
92% match
Loading thumbnail…

mouli ice-5

The example displays a static product inventory summary alongside a stylized mobile phone illustration, with keypad buttons rendered as SVG rectangles and text. It loads product data from a CSV file via `d3.csv`, then computes and displays file size, row count, and column count in a `<pre>` element. The phone graphic is drawn entirely with D3 v7, using chained `.append()` calls for shapes, and the page styling applies a cyan background with centered text via CSS. No interactive behavior is implemented beyond the initial data load and render.

Ddmouli369@gmail.com
78% 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
76% 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
74% match
Loading thumbnail…

Re-usable Scatter Plot

This reusable scatter plot visualizes the relationship between product quantity and price from a CSV inventory dataset. It uses D3 v6 to load the data, map the numeric fields to linear scales, and render circles with fixed radius on an SVG canvas. The code demonstrates a modular chart-building pattern with explicit margins, axis generation via `d3.axisBottom` and `d3.axisLeft`, and a consistent steelblue fill for all data points. The chart is embedded in a centered, styled layout.

Vvishnupriya eupuri
74% 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
74% match
Loading thumbnail…

ice7 part4

This interactive area chart visualizes monthly sales data for a product category, with a gradient-filled area beneath a smoothed line and circular markers for each data point. Hovering over a point reveals a tooltip displaying the month and sales value. Built with D3.js v7, it uses `d3.area` and `d3.line` generators with `d3.scaleBand` and `d3.scaleLinear` for axes, rendered as SVG. The code defines a linear gradient via `linearGradient` and attaches mouseover/mouseout handlers for interactivity.

Jjammigumpula.priyanka193@gmail.com
74% 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
74% match