Skip to main content
SimilarExport ZIP
100%

Fork of ICE 5 Q3 assignment sharanya

✓ Published0🌍 Public
Cchengalvasharanya@gmail.com
Last edited Oct 5, 2025
Created on Oct 5, 2025

This example shows the first five rows of a flowers dataset loaded from a public Gist CSV. D3 v7 parses the CSV and renders a styled HTML table with color swatches for flower colors, category tags, bloom-season pills, sunlight and water-need badges, and mini bar charts for fragrance intensity. The page uses `d3.csv` to fetch and parse the data, then builds the table dynamically by populating the `<thead>` and `<tbody>` elements with matched column headers and cell values.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE 5 Q3 assignment sharanya

This example displays the first five rows of a flowers dataset in a styled HTML table, with categorical values rendered as color-coded tag pills and a miniature bar chart indicating fragrance levels. D3 v7 loads the CSV from a public Gist using `d3.csv` and populates the table headers and body dynamically. The dark-themed interface applies custom CSS classes to encode season, sunlight, and water requirements, while the caption notes that the data comes from an external source.

Cchengalvasharanya@gmail.com
90% match
Loading thumbnail…

Fork of ICE-5 · Flowers Dataset

This fork of ICE-5 visualizes the Flowers Dataset, showing a data summary and the first ten rows in a styled table alongside an inline SVG flower badge. The page uses D3.js v7 to render the summary statistics and CSS grid for layout, while the static SVG includes a radial gradient and drop shadow filter. The dataset is loaded from a CSV file with the table displaying raw attributes in a dark-themed interface.

Cchengalvasharanya@gmail.com
85% match
Loading thumbnail…

Fork of Fork of ICE 5 - Lifestyle Harshitha Dontha

This example displays a preview of cricket T20 match data, summarizing the loaded CSV file’s size, row count, and column count before rendering the first ten rows in a styled HTML table. Using D3.js v7, the code fetches the dataset via `d3.csv`, dynamically builds the table header and body with `selectAll` and `join`, and applies custom CSS for zebra striping, hover effects, and a sticky gradient header. The table presents the raw data as text without additional visualization.

Tt37674473@gmail.com
82% match
Loading thumbnail…

Fork of ICE-5: Loading and Parsing CSV Data with D3.js

This example demonstrates how to load and parse CSV data using D3.js, displaying a summary of the dataset's size, row count, and column count in a styled HTML element. The page fetches data from a GitHub Gist URL via `d3.csv`, then uses `d3.csvFormat` and the resulting array’s properties to compute the formatted string. The visualization renders as static SVG and text, with styling applied through CSS, and serves as a simple introduction to working with external tabular data in a browser environment.

NNikhitha630
82% match
Loading thumbnail…

Fork of ICE 5 - Lifestyle harshitha Dontha

This D3 v7 visualization presents a preview of a cricket T20 dataset, displaying the first ten rows of tabular data in a styled HTML table. The code fetches a CSV from a GitHub gist URL using `d3.csv`, then asynchronously loads and summarizes the data by calculating approximate file size in kilobytes, row count, and column count. The table is constructed dynamically using D3's selection and join API (`d3.select`, `.join`, `.text`) to generate headers and cells. Styling is applied via external CSS, featuring a sticky gradient header, zebra striping, and hover effects with an accent bar.

Tt37674473@gmail.com
81% match
Loading thumbnail…

Fork of ICE-5: Loading and Parsing CSV Data with D3.js

This example demonstrates how to load and parse CSV data with D3.js, displaying the dataset's size in kilobytes, row count, and column count in a styled HTML page alongside a static SVG image. The code uses `d3.csv` to fetch the remote CSV file from a GitHub gist and `d3.csvFormat` to calculate the data size. The page is built with HTML, CSS, and vanilla JavaScript, with the D3 library loaded via CDN.

DDivyaVellanki
81% match
Loading thumbnail…

Fork of ICE5_11519492: Loading and Parsing CSV Data with D3.js

This example demonstrates how to load and parse CSV data using D3.js, presenting the results in a styled HTML page. The visualization shows a summary of the parsed dataset, including its size in kilobytes, number of rows, and column count, displayed within a large text element. The code fetches data from a remote CSV file using the `d3.csv()` method, then processes it with `d3.csvFormat()` to calculate the data size. The page also displays an SVG image and uses CSS for styling headings and the message container. The rendering is done through standard HTML elements rather than a custom SVG visualization.

TTulluripallavi
81% match
Loading thumbnail…

Fork of Fork of ICE5_11519492: Loading and Parsing CSV Data with D3.js

This example demonstrates how to load and parse a CSV file using D3.js, displaying the data’s size, row count, and column count in a styled HTML page. The code uses `d3.csv` to fetch the dataset from a GitHub gist and `d3.csvFormat` to calculate its length. A static SVG cityscape is also embedded directly in the markup, alongside custom CSS styling for the text output.

TTulluripallavi
81% match