mouli ice-5

100%

✓ Published0🌍 Public

Last edited Mar 7, 2024

Created on Mar 7, 2024

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.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

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

78% match

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

76% match

Loading thumbnail…

Smartphone

This example demonstrates how to load and parse a CSV dataset using D3 v7, displaying basic file statistics in a styled HTML page. The code uses `d3.csv` to fetch the Smartphone dataset from a GitHub gist, then computes and presents the file size in kilobytes, row count, and column count inside a `<pre>` element. The page also includes an embedded SVG illustration of a smartphone and surrounding decorative elements, rendered as static markup. The example focuses on data loading and parsing rather than interactive visualization, with a simple message container updating via the DOM API.

Nnagarjuna1968

72% match

Loading thumbnail…

ICE 5

This example displays a static SVG graphic alongside a text summary of a remote CSV dataset. The page uses D3 v5’s `d3.csv` method to fetch the data and calculates the file size in kilobytes, row count, and column count, which are then displayed in a `<pre>` element. A fixed-size SVG placeholder and an embedded PNG image are shown, with page styling handled by CSS.

Cchandanagandla

72% match

Loading thumbnail…

ICE-5

This example combines a manually drawn SVG scene with a data-loading demonstration using D3 v7. The static illustration features a gradient sky, dark red panels, and black circles, while a heading and a preformatted text block display metadata about the loaded file. The code calls `d3.csv()` to fetch a remote CSV file, then uses `d3.csvFormat()` to compute its size, row count, and column count for display.

AAishwarya Manjunath

72% match

Loading thumbnail…

ICE5

This page displays metadata about an imaginary shop’s customer dataset, including file size, row count, and column count. A background image from an SVG file and CSS text shadows create a themed presentation. The code loads a CSV file from a GitHub gist using `d3.csv`, formats it with `d3.csvFormat`, and writes the computed statistics into a `<pre>` element via `textContent`. The page is styled with custom CSS and uses D3 v7 for data loading and formatting.

AAniv Chakravarty

71% match

Loading thumbnail…

ICE-5

This page displays metadata about an iPhone products dataset loaded from a CSV file hosted in a GitHub gist. It shows the data size in kilobytes, row count, and column count as plain text. The code uses D3.js v7’s `d3.csv` to asynchronously fetch and parse the dataset, then `d3.csvFormat` to compute the file size. A background SVG image of an Apple logo is applied via CSS, and the heading provides context about purchase links and specifications.

Mmosesimmanuelvemana@my.unt.edu

70% match

Loading thumbnail…

ICE5

This example presents a minimal web page that displays metadata about a product sales dataset. The page shows a title and a pre-formatted text block reporting the dataset’s approximate size in kilobytes, the number of rows, and the number of columns. It loads the CSV file from a remote GitHub gist using D3.js’s `d3.csv` function, then strings together the computed metadata into a plain-text message that is injected into the DOM via `document.getElementById`. The page’s background is set using a CSS rule with a remote SVG image.

Yyaswanthsen

70% match