Skip to main content
SimilarExport ZIP
100%

ICE 5 Data Vizualization

✓ Published0🌍 Public
RRohith Reddy
Last edited Mar 9, 2023
Created on Mar 9, 2023
Forked from HTML Starter

This visualization displays a map of domestic flight routes using a static SVG image with an embedded base64-encoded JPEG background. A section at the top of the page presents metadata about the underlying dataset, including file size in kilobytes, row count, and column count. The code loads the flight route data programmatically from a GitHub Gist URL using `d3.csv()`. It then formats the data with `d3.csvFormat()` to calculate the size in kilobytes and accesses the properties `data.length` and `data.columns.length` to determine the number of rows and columns. The result is rendered into the page via the DOM property `textContent` on a `<pre>` element. The page itself is structured with HTML and styled with CSS, while the D3 library version 5 is loaded from a CDN.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

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

This example analyzes the contents of a flight dataset loaded from a remote CSV file, displaying a summary of its size, row count, and column count. Using D3.js v7, it calls `d3.csv` to parse the data and `d3.csvFormat` to calculate the file size in kilobytes. A simple pre-styled HTML element presents the result. The page also includes two inline SVG images, with a plane graphic moving across a marquee and a static chart centered below, though no interactive visualization or data-driven rendering is performed.

Nnagamaheswar
81% match
Loading thumbnail…

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

This example demonstrates a simple air travel information page that loads a CSV dataset and displays its summary statistics. The page features a header, an airplane SVG image, and a text area showing the total dataset size in kilobytes, row count, and column count. Using D3.js version 7, the code fetches data from a GitHub gist via `d3.csv()`, formats it with `d3.csvFormat()`, and calculates the byte length by dividing by 1024. The interface is styled with custom CSS for a cohesive visual presentation.

Vvenkatajayanth03
81% match
Loading thumbnail…

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

This visualization displays a text summary of a flight dataset, showing its size in kilobytes, row count, and column count. It loads CSV data from a remote GitHub Gist using `d3.csv` and formats the analysis with `d3.csvFormat`. The page presents the message in a large `pre` element and includes a static SVG image. The code demonstrates asynchronous data fetching with Promises and uses D3.js v7 alongside basic HTML and CSS styling.

Nnagamaheswar
80% match
Loading thumbnail…

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

This example displays a web page titled "Welcome to Air Travel Information Centre" that loads CSV data from a remote URL and summarizes its contents. It first shows an airplane SVG image, then uses D3.js v7's `d3.csv` and `d3.csvFormat` functions to fetch and parse the airtravel.csv file, calculating the data size in kilobytes, row count, and column count, which are displayed in a large styled `<pre>` element. The page uses plain HTML, CSS for background and font styling, and JavaScript with D3.js to handle asynchronous data loading.

Vvenkatajayanth03
79% match
Loading thumbnail…

ICE-5

This example displays an SVG image of a map, overlaid on a green background with a heading, while also presenting dataset statistics. It loads a CSV file from a GitHub gist using D3’s `d3.csv` method, then calculates and reports the file size in kilobytes, the number of rows, and the number of columns. The page structure is defined in HTML with the image sourced from a raw GitHub URL, and styling is handled by an external CSS file. The code uses D3 v7 loaded via UNPKG to parse the CSV and update the DOM.

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

ICE-5 Data Visualization

This example displays metadata about an overseas dataset, including file size, row count, and column count, on an HTML page with a custom background image. It loads a CSV using `d3.csv` from a GitHub gist URL, then uses `d3.csvFormat` to calculate the data size in kilobytes. The page is styled with CSS and uses D3 v7 to fetch and process the dataset. Both the page title and the dataset link are presented as clickable elements, with the metadata output displayed in a preformatted block.

MMounikadontireddy
78% match
Loading thumbnail…

ICE-5 Data visualization

This visualization displays a static SVG image of race cars alongside a summary of race data loaded from a remote CSV file. The page uses D3 v7’s `d3.csv` to fetch the dataset, then calculates and reports the file size in kilobytes, the number of rows, and the number of columns, displaying these metrics in a styled `<pre>` element. The SVG is embedded directly via an `<img>` tag, while the data source is linked externally. The interface is minimal, with large colored headings and a red message container.

RRahulChaitu999
78% match