t829702

@t829702·5 public vizzes

lit-html

This example demonstrates streaming and asynchronous data updates in web pages using lit-html. It renders a static "Hello" template, then an async counter that increments every second via `asyncReplace`. The page also loads an Arrow table from a remote gist using Arrow.Table.from() and displays its size, row count, column count, and chunk count. A commented-out section shows incomplete code for streaming a billion digits of PI via `asyncAppend`, but this is not executed.

Sep 23, 2020

Loading thumbnail…

Loading Data (2020/09)

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.

Sep 22, 2020

Loading thumbnail…

Click to Shuffle:: Rendering Data with React & D3

This example renders CSS named colors from a CSV dataset as a radial burst of pie slices, where each slice’s fill corresponds to its RGB hex value. Clicking anywhere on the page shuffles the order of the slices, recalculating the pie layout with `d3.pie` and drawing paths with `d3.arc`. The visualization uses React hooks (`useState`, `useEffect`) to manage the data and trigger updates, while D3’s `csv` loader fetches the color data. The SVG output is generated entirely through React components, demonstrating a hybrid of React state management and D3’s data transformation utilities.

Sep 21, 2020

Loading thumbnail…

First Assignment with Vue

A first attempt at combining Vue 3 with D3 to draw a stylized face. The SVG composition uses D3’s `arc()` generator within a Vue method to construct the lips, while Vue’s `v-for` directive iterates over arrays to place eyelashes. The illustration is rendered entirely in SVG, with hard-coded coordinates for facial features and gradients for cheeks.

Sep 20, 2020

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.

Sep 20, 2020