100%

ICE-5 The shapes of data

✓ Published0🌍 Public

Last edited Mar 7, 2024

Created on Mar 6, 2024

This example, "ICE-5 The shapes of data," visualizes a dataset of 50 U.S. tourist places through an interactive D3.js dashboard. It combines a sortable HTML table with a summary and analysis section, alongside a custom SVG beach scene that uses D3 v7 to draw geometric shapes—a blue water rectangle, a red sun, and stylized people—to evoke the dataset’s themes. The visualization transforms tabular CSV data into a playful, narrative-driven SVG illustration, demonstrating how D3 can extend beyond charts to create thematic, data-inspired graphics.

AI-generated description

Tourist Places Website

This project creates a simple website displaying tourist places in the US. It includes a table of tourist places along with a summary and analysis of the CSV data. Additionally, it generates an SVG image representing a beach scene with people.

Features

Displays a table of tourist places with their names, locations, and descriptions.
Provides a summary and analysis of the CSV data.
Generates an SVG image of a beach scene with buildings and people.

Prerequisites

To run this project, you need a web browser and an internet connection to fetch the CSV data.

Usage

Clone this repository to your local machine.
Open the index.html file in your web browser.

File Structure

index.html: HTML file containing the webpage structure.
styles.css: CSS file containing styles for the webpage.
script.js: JavaScript file containing logic for fetching data, generating tables, and creating SVG images.

Modification

You can modify the content and styles of the webpage by editing the HTML, CSS, and JavaScript files. You can also adjust the SVG generation logic in the script.js file to customize the beach scene.

Credits

CSV data: Tourist Places in US
SVG image inspiration: CodePen - Animated Beach Scene

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE 5

This example visualizes an ice-themed dataset using D3.js v5 within a React framework, rendering SVG elements. It displays a labeled diagram with geometric shapes, including rectangles and lines, paired with text annotations. The visualization uses D3’s selection and styling capabilities to manipulate SVG attributes, while the code also incorporates static SVG markup for structure. The data appears to be pre-defined or externally sourced, as no dynamic data loading or interactive forces are present.

AAditya Pujari

83% match

Loading thumbnail…

ICE-5: The Shapes of Data

This example displays summary statistics about a United HealthCare stock dataset, including file size, row count, and column count, in a large text overlay on a blue background. It uses D3.js (v7) to fetch the CSV data from a GitHub gist via `d3.csv`, then processes the formatted output with `d3.csvFormat` to calculate the data size in kilobytes. The visualization also includes a simple SVG graphic featuring a stylized mountain and circle shape, rendered with static SVG elements and colored fills.

SShivaKarpe

81% match

Loading thumbnail…

ICE- 5: Shapes of Data

This interactive visualization presents an abstract, organic composition formed by layered, flowing shapes derived from embedded base64 image data. The piece functions as an artistic exploration of form, where the data source is a pixelated background image rendered through an SVG pattern. Built with D3 v7 and React, the visualization uses JavaScript to drive the SVG and WebGL rendering, creating a dynamic interplay of colorful, distorted geometries that showcase the aesthetic potential of raw data.

AAmruthaVee

81% match

Loading thumbnail…

ICE 5

This visualization presents a blank SVG canvas with a light gray background, overlaid with an image pattern defined in the SVG defs. The main interactive element is a text display showing metadata about a dataset loaded from a CSV file, including its size, row count, and column count. The code uses D3 v5 to fetch and parse the CSV data from a GitHub gist URL, then formats and displays this information in a styled `<pre>` element. The rendering approach combines static SVG markup with dynamic data-driven text output.

TTekmal-Bhavana

79% match

Loading thumbnail…

ICE 5

This example loads the Disney movies dataset from a remote CSV file using D3 v5’s `d3.csv` and `d3.csvFormat` APIs, then displays basic metadata about the file on the page. The visualization shows a static SVG line drawing of a geometric shape with colored ellipses and grid-like lines, while the text area below reports the dataset’s size in kilobytes, row count, and column count. The SVG is hand-coded in HTML, and the data summary is rendered into a `<pre>` element. No interactive or data-driven visual encoding is present; the graphic is independent of the loaded dataset.

Bbrindapotluri

79% match

Loading thumbnail…

ICE-5: Welcome to ICE-5 Data visualization

This example displays a stylized welcome page for "ICE-5 Data visualization," combining a large title with a repeating ornamental image pattern. Rendered as a static SVG, it uses CSS for page styling and embeds D3 v7 via a script tag, though the visualization itself relies on hardcoded SVG markup including an embedded base64 JPEG image. The composition demonstrates layout and theming with HTML and SVG rather than dynamic data processing.

Rrajasrilekkala

78% match

Loading thumbnail…

ICE5

This example displays a static SVG illustration of a whimsical landscape, including a house, sun, and decorative stars, with a header that confirms the loading of phrase data. It uses D3 v7 to fetch and parse a CSV file from a GitHub gist, then calculates and displays the data’s size, row count, and column count in a styled `<pre>` element. The visualization combines hardcoded SVG shapes with dynamic data summary text, showing how D3’s `d3.csv` and `d3.csvFormat` can be used to introspect dataset properties while the rendering relies on React’s DOM and SVG elements.

RRakesh Kumar Chekuri

78% match

Loading thumbnail…

ICE5- Retrieve information from the dataset

The visualization presents a stylized, abstract planetary-like form rendered as an SVG with gradient fills and animated paths. The central element is a large dark blue sphere overlaid with intricate, flowing curves that suggest geographic or atmospheric features, drawn in contrasting cyan and light blue tones. A smaller grey sphere in the lower-left corner echoes the main form. The composition is minimal, using smooth gradient transitions, with no visible axes, labels, or data marks, focusing purely on geometric form and the retrieval of shapes from the dataset. Subtle animation is implied through the path stroke-dasharray and layered rendering, inviting exploration of the underlying data structure.

AAsrar Al Qassem

78% match