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

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.

AI-generated description

A responsive scatter plot.

MIT Licensed

Similar vizzes

Loading thumbnail…

MOULI ICE-6

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.

Ddmouli369@gmail.com
92% match
Loading thumbnail…

ICE-6: Marks and Channels

This example displays product costs as a horizontal bar chart using React and D3 v5. The visualization maps product names to the y-axis with a band scale and costs to the x-axis with a linear scale, rendering blue rectangles with yellow strokes. The component loads CSV data from a GitHub gist, slices it to the first ten items, and uses D3’s `csv`, `scaleBand`, `scaleLinear`, and `max` functions within a React functional component with hooks. Custom tick marks and gridlines are drawn manually rather than using axis generators.

PPrasanth Damarla
77% match
Loading thumbnail…

ICE-6 Rendering Marks and Channels with React & D3

A horizontal bar chart displays revenue for ten cosmetic products, with purple bars and blue axes on an SVG canvas. React manages the state and rendering loop, while D3 v5 functions (`csv`, `scaleBand`, `scaleLinear`, `max`) load the CSV data and compute scales. D3's `csv` fetches the data from a GitHub Gist URL, and the chart maps product names to y-axis positions and revenue values to bar widths.

SShishiraRudrabhatla
76% match
Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This example shows the price of products across different subcategories for a single country, displayed as horizontal bars on an SVG chart. It loads data from a CSV file, sorts it to show the top 15 entries, and uses React state to manage the asynchronous data loading. Rendering combines React components for structure with D3 scales (`d3.scaleBand`, `d3.scaleLinear`) and axes for positioning and tick generation. The code uses `d3.csv` to parse the data, `d3.max` to compute the domain, and manual SVG elements for the gridlines and labels.

Aavvarijayakrishna99@gmail.com
76% 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
76% 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…

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

ICE-6

This bar chart displays sales data for various items, with horizontal bars showing the sale amount for each item. The visualization uses React and D3 v5, loading CSV data via `d3.csv` and rendering SVG elements with `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Gridlines and axis labels are generated manually using `xScale.ticks()`, while the data values are encoded as rectangle widths.

HHARSHA BUDDANA
75% match