Example of Loading External Data

100%

Example of Loading External Data

✓ Published0🌍 Public

Last edited Nov 18, 2018

Created on Nov 18, 2018

This example demonstrates how to fetch and display external tabular data directly from a GitHub repository URL, bypassing the need for manual upload. The visualization shows a summary of the dataset’s row count, column count, and file size in kilobytes, followed by the first 10 rows formatted as JSON. The code uses D3’s `tsv()` function to load a TSV file from `https://raw.githubusercontent.com/hopperrr/ellis-immigration-by-ship`, along with `select()`, `csvFormat()`, and `format()`. The dataset originates from the Ellis Island immigration ship records.

AI-generated description

This example shows how you can pull in data directly from URLs that start with https://raw.githubusercontent.com/, without the need to upload the data into VizHub. This dataset, for example, comes from hopperrr/ellis-immigration-by-ship.

MIT Licensed

Similar vizzes

Loading thumbnail…

parsing data

This example demonstrates how to load and display tabular data from a remote CSV file using D3 v5. It fetches data from a GitHub Gist URL, converts the first 10 rows to JSON, and appends them to the page as formatted text. The code uses `d3.csv` for parsing and `d3.csvFormat` to calculate the dataset’s size in kilobytes, while `d3.select` manages DOM updates.

VVenkat-Sumith-Thota

75% match

Loading thumbnail…

Loading and parsing CSV data

This example demonstrates loading and parsing a CSV file from a remote URL using D3 version 7. It fetches the data with the `fetch` API and parses it with `d3.tsv`, then displays the dataset’s size in kilobytes, row count, and column count in a large `<pre>` element. The data source is a GitHub gist containing CSS color names, and the visualization is purely textual, summarizing the parsed structure without rendering a chart.

Mmk3737

74% match

Loading thumbnail…

Load Data

This example demonstrates how to load and parse external CSV data using D3 v5. It fetches a text file from a GitHub gist URL using the Fetch API, then converts the raw text into an array of JavaScript objects with `d3.csvParse`. The parsed data is logged to the browser console, showcasing the basic pattern for retrieving and structuring tabular data for use in a visualization. No visual rendering occurs; the focus is purely on data acquisition and formatting.

Aaredmond-re

74% match

Loading thumbnail…

Loading and parsing CSV data

This example demonstrates a minimal D3 workflow for loading and parsing remote CSV data by fetching a raw GitHub-hosted file with the Fetch API. It first retrieves the text via `fetch` and `response.text()`, then parses it into a tabular dataset using `d3.csvParse`. The parsed result is summarized in a `<pre>` element, displaying the file size in kilobytes, row count, and column count. The visualization itself is purely textual, highlighting how D3’s parsing utilities transform raw CSV strings into structured data objects.

SShasvathan Pathmanaban

74% match

Loading thumbnail…

Loading data with D3

This example demonstrates how to load and inspect a remote CSV dataset using D3. It fetches a tidy version of the Anscombe’s quartet from a GitHub gist and displays three summary metrics in large text: the file size in kilobytes, the number of rows, and the number of columns. The code uses `d3.csv` to asynchronously parse the data, `d3.csvFormat` to calculate the raw size, and the `data.length` and `data.columns.length` properties to report the dataset’s dimensions.

Rrvdv

73% match

Loading thumbnail…

loading of data

This example demonstrates how to load and parse a CSV dataset using D3.js. The visualization displays a title and a pre-formatted message area that reports the file size in kilobytes, the number of rows, and the number of columns after fetching data from a GitHub gist. The page also includes an embedded SVG illustration. The code uses the `d3.csv` method to retrieve and parse the remote CSV file, then calculates the formatted size with `d3.csvFormat` and updates the DOM via `document.getElementById`.

Ppavankalyan1507

73% match

Loading thumbnail…

hosting external data

This example demonstrates how to load and fetch external data from a GitHub URL using the d3.csv API, then logs the number of rows to the console. The visualization uses D3.js to parse comma-separated values from an HMP155A meteorological sensor file containing timestamps and environmental measurements such as temperature and humidity. The code includes commented-out scatter plot logic that reads from a district-level dataset, defining scales with scaleLinear and extent, drawing circles with SVG, and rendering axes via the @drbagwell/responsive-viz-axes library. The final SVG rendering approach is standard D3, though the active example stops at data retrieval.

DDonald Bagwell

73% match

Loading thumbnail…

Loading Data with React and D3

This example demonstrates how to load and inspect a CSV dataset within a React application, displaying basic file statistics such as size in kilobytes, row count, and column count. The visualization uses React hooks (`useState`, `useEffect`) to manage asynchronous data loading, while D3’s `csv` function fetches the external data and `d3.csvFormat` measures its size. The result is rendered as plain text in a `<pre>` element, with a loading message shown until the data arrives. The data source is a GitHub gist URL.

SSam Hege

73% match