Loading Data (2020/09)

100%

Loading Data (2020/09)

✓ Published0🌍 Public

Last edited Sep 22, 2020

Created on Sep 19, 2020

Forked from Loading and Parsing Arrow Data

This example demonstrates interactive exploration of a dataset of 57,000+ articles from Matters, loaded from a remote Arrow file. The interface allows searching by author name, filtering by month, and toggling tag visibility, with results grouped by publication date. It uses Vue 3 for reactive UI components and Apache Arrow’s `Arrow.Table.from`, `Arrow.predicate`, and table filtering with custom predicates to query the columnar data. D3 utilities like `d3.rollups` and `d3.group` aggregate rows, while `d3.utcFormat` formats dates for display.

AI-generated description

A program that loads and parses some Arrow data:

https://unpkg.com/@apache-arrow/esnext-umd@0.17.0/Arrow.js

MIT Licensed

Similar vizzes

Loading thumbnail…

Loading and Parsing Arrow Data

This example demonstrates the loading and parsing of Apache Arrow data in the browser. It fetches a remote `.arrow` file, parses it with `Arrow.Table.from`, and displays summary statistics—including file size, row count, column count, and chunk count—in a large `<pre>` element. The code highlights the schema and performs a filtered query using `Arrow.predicate.col('userName').eq('az')`, while relying on `d3.sum` to aggregate chunk byte lengths and `d3` for general utilities.

Tt829702

78% 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

65% match

Loading thumbnail…

learning loading of data

This example demonstrates how to load and summarize a remote CSV dataset using D3.js v7. It fetches a CSV file from a GitHub gist, parses it with `d3.csvParse`, and displays the file size, row count, and column count alongside a dynamically generated HTML table of the data. A loading spinner animation is shown until the fetch completes, with error handling if the request fails. The page uses a green background and styled cards to present the dataset summary and preview clearly.

Bbhargavinalamothu@gmail.com

65% match

Loading thumbnail…

Loading Carnegie Museum of Art Data

This example demonstrates the process of loading and parsing a CSV dataset from the Carnegie Museum of Art, which contains metadata for artworks including titles, creation dates, and dimensions. The visualization initially displays a placeholder showing "LOADING" as a `<pre>` element, then asynchronously fetches the data using the `fetch` API. After the dataset is retrieved, the code uses D3's `csvParse` function to convert the CSV string into an array of objects, converting date fields into JavaScript `Date` objects and numeric fields into numbers. The resulting parsed data is then displayed as JSON in the `<pre>` element.

EEri Kim

64% match

Loading thumbnail…

Loading data with React and d3

A React application loads a color-name dataset from a GitHub gist using `d3.csv`, then displays summary statistics about the dataset in a `<pre>` element as plain text. The component uses React’s `useState` and `useEffect` hooks to manage the asynchronous data-fetching lifecycle, showing "Loading..." until the data arrives. The code includes reusable SVG face components built with `d3.arc` and `d3.line`, though the main view focuses on reporting the file size in kilobytes, row count, and column count. The rendering uses React’s virtual DOM with SVG elements.

Aadante111

64% match

Loading thumbnail…

Activity 6

This example demonstrates how to load data from a remote CSV file and display it in a web page using D3.js v5 and Vue. The visualization retrieves the dataset via a GitHub Gist URL using D3's `csv` function, then formats and displays the first 10 rows as JSON in a `<pre>` element. It also showcases importing from the D3 library and local ES6 modules, with the SVG and WebGL rendering infrastructure defining the page layout.

Mmn0658

64% match

Loading thumbnail…

Loading Data with React & D3

This example demonstrates a simple data-loading workflow that displays dataset statistics, including file size, row count, and column count, as a large text output. Built with React and D3, it uses the `useState` and `useEffect` hooks to fetch a CSV file from a GitHub gist via D3’s `csv` function. The loaded data is formatted and summarized using `d3.csvFormat` and the `message` utility, while the interface shows a “Loading…” state until the asynchronous request resolves. The visualization integrates React 16.9 and D3 v7 in a single-page app.

JJadeITNT

64% match

Loading thumbnail…

Loading Data with React and D3

This example demonstrates how React and D3 can work together to load and display tabular data. It uses the `csv` function from D3 to fetch a remote dataset containing CSS named colors and then presents a summary of the data in a plain text format. The `useState` and `useEffect` hooks manage the asynchronous data loading, while a custom function calculates the file size in kilobytes, row count, and column count. The visualization renders as SVG within a React component, showing only the file's metadata rather than the color values themselves.

Ddmagarian

64% match