Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Blank Slate

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

322ad57e37644aae94f7f438015106fd

Open

Fork of Blank Slate

0 stars0🌍 Public
Sshailajat1998@gmail.com
Last edited Mar 5, 2024
Created on Mar 5, 2024

This example shows a simple CSV file summary interface that fetches a remote dataset and displays its basic properties—file size, row count, and column count—in a styled card. It uses the Fetch API to retrieve the CSV from a GitHub raw link, then parses it with `d3.csvParse` to determine the number of rows and columns. The summary text is injected into the DOM via `innerHTML`, and a helper function formats the file size using logarithmic scaling. The page relies on D3.js v6 for parsing and basic DOM manipulation, with no charting or visualization beyond textual metadata.

AI-generated description

A blank slate starting point showing the "Hello World" for the VizHub V3 Runtime Environment, which supports continuous hot reloading with interactive widgets.

  • There is no index.html - that's what triggers the V3 Runtime
  • The entry point is the main function exported from index.js
  • The main function takes an argument container, a DIV that has measurable dimensions using clientWidth and clientHeight
  • The second argument to main is an options object containing state and setState.
  • The state of the application is stored in state, which is initialized as an empty object {}.
  • The setState function can be called with a function that uses the previous state to create a new state object using immutable update patterns.
  • For an interactive example, see Mouse Follower.

Full course playlist: YouTube: Constructing Visualization 2024.