Skip to main content
SimilarExport ZIP
100%

ICE 5_Niharika

✓ Published2🌍 Public
118121a1545
Last edited Oct 3, 2025
Created on Oct 2, 2025
Forked from ICE 5_Harish

This example presents a tabular preview and a suite of chart-based visualizations for a campus snacks dataset loaded from a CSV file. Using D3.js v7, it renders a bar chart, donut chart, scatter plot, and stacked charts directly into SVG elements, with a tooltip for interactions. The page also includes a U.S. map drawn with TopoJSON, loaded dynamically via the `topojson-client` library. Data is summarized and displayed across multiple chart types to explore patterns in the dataset.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Barchart_Niharika_ICE_6

This interactive dashboard presents campus snack data through three coordinated visualizations: a bar chart comparing a chosen metric across categories, a scatter plot examining relationships between two quantitative attributes, and a multi-series chart combining bars with an overlaid line. Built with D3 v7, the SVG-based implementation uses `d3.csv` to load data, `d3.scaleBand` and `d3.scaleLinear` for axes, and includes interactive controls for metric selection, fullscreen toggling, and glassmorphic tooltips via the `tooltip` helper function.

118121a1545
82% match
Loading thumbnail…

ICE-5 Campus Food Trucks

This example visualizes campus food truck data by showing a bar chart of cuisine counts alongside summary statistics and a full data table. It loads a CSV file from a GitHub gist using D3.js’s `d3.csv` method with `d3.autoType` for type inference. The bar chart uses `d3.scaleBand` and `d3.scaleLinear` to map cuisine categories to rectangular bars, with counts labeled above each bar. Summary values are calculated via `d3.mean`, and the table is populated using D3’s data join pattern.

Jjanisha30gowda@gmail.com
79% match
Loading thumbnail…

ICE 5

This example displays a dataset summary alongside a static SVG composition of colored circles. It loads a hosted CSV file of global economy data and computes basic statistics for numeric columns, including row count, min, max, and mean. The visualization renders a 3-by-10 grid of circles using D3 v7’s selection and data-joining methods, applying a Tableau color scheme and decorative opacity. The code uses `d3.csv` for parsing and `d3.min`, `d3.max`, and `d3.mean` for summary calculations, with all output drawn as SVG elements.

CCharith Kapuluru
78% match
Loading thumbnail…

ICE-5 The shapes of data

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.

Ssridhardubala106@gmail.com
78% match
Loading thumbnail…

ICE-5 Data Visualization-11540639

This example demonstrates loading and parsing a CSV dataset with D3.js, displaying a summary of the UNT International Student Information file, including size, row count, and column count, alongside a static SVG image. The code uses `d3.csv` to fetch the data from a GitHub gist and `d3.csvFormat` to calculate the dataset size in kilobytes. Styling is applied via embedded CSS, with the results rendered in a styled `pre` element and an image sourced from a GitHub repository. The page is built with plain HTML and JavaScript, using D3 v7.

SSravanthi Silla
77% match
Loading thumbnail…

ICE_5_Nirupama

This example loads a cars dataset from a raw GitHub gist and presents an overview with summary statistics, a preview table of the first 10 rows, and a bar chart counting cars by color. It uses D3 v7 to parse the CSV, compute aggregated values with `d3.rollup`, and render the chart as an SVG with `d3.scaleBand` and `d3.scaleLinear`. Data is displayed in an HTML table, and the visualization includes styled axes and color-coded bar fills.

NNirupama Karanam
77% match
Loading thumbnail…

ICE5

This page summarizes a student dataset by displaying its metadata as plain text, including file size in kilobytes, row count, and column count. The visualization uses D3.js (v7) to fetch the CSV data from a remote GitHub URL, calculates the metadata, and renders it into an HTML `<pre>` element. A modular D3 component, defined in `module.js`, appends a text element to an SVG canvas, although its interaction is minimal. The page's styling includes a custom background image and white headings for visual presentation.

NNikitha123171
77% match
Loading thumbnail…

ICE-5: Welcome to ICE-5 Data visualization

This example displays a web page titled "ICE-5: Welcome to ICE-5 Data visualization" that uses D3.js to fetch and summarize a CSV dataset of the Top 100 actors. It renders a cyan-styled `<pre>` element reporting the approximate file size in kilobytes, the number of rows, and the column count, alongside a static SVG image. The code leverages the `d3.csv` and `d3.csvFormat` APIs to load and measure the remote data, providing a simple, non-interactive overview of the dataset's structure.

SSravan1888
77% match