karl.dalborg@mail.com

@Dalborg·7 public vizzes

Fork of Vega-Lite API Template

This example visualizes the relationship between fuel efficiency (mpg), horsepower, weight, and country of origin for classic automobiles. The data is loaded from a CSV file containing the standard Auto MPG dataset, with each car represented as a semi-transparent circle. The visualization is built using the Vega-Lite API, which wraps Vega and Vega-Lite in a JavaScript API, while the D3 library handles CSV parsing. Interactive tooltips display car names on hover, and the chart is rendered as an SVG, with appearance customized through a configuration object that adjusts axis labels and colors.

Aug 5, 2025

Loading thumbnail…

Fork of Fork of Smiley Face Part II

This example demonstrates a data-loading status display for a CSV file containing CSS named colors. It shows a plain-text readout of the dataset’s size in kilobytes, row count, and column count, updating from “loading” to the final metrics once the data arrives. The visualization uses React hooks (`useState`, `useEffect`, `useCallback`) to manage asynchronous state, and D3’s `csv` function to fetch and parse the remote data. The rendered output is a simple `<pre>` element styled with large font size, with no graphical chart involved.

Aug 5, 2025

Loading thumbnail…

Fork of HTML Starter

This example demonstrates how to load and parse CSV data from a remote URL, displaying basic file statistics in plain text. The code fetches a gist-hosted dataset of CSS named colors using the Fetch API, then parses it with d3.csvParse. It reports the file size in kilobytes, the number of columns, and the number of rows in a pre element. The visualization relies on D3 v7 and shows the data summary without any graphical chart.

Aug 5, 2025

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates the size and structure of a CSV file containing CSS named colors by displaying its kilobyte size, row count, and column count in large text. It loads the remote dataset using d3.csv and then formats the output with d3.csvFormat to calculate the file size. The page also includes commented-out alternatives using fetch, async/await, and d3.csvParse, illustrating different approaches to loading and parsing CSV data with D3 v5.

Aug 5, 2025

Loading thumbnail…

Fork of Smiley Face Part II

A single yellow circle follows the mouse cursor across an SVG canvas, responding to every pointer movement. Built with React 16.9 and ReactDOM, the application uses the `useState` and `useCallback` hooks to track the cursor's client coordinates and update the circle's `cx` and `cy` attributes in real time. The rendering approach is purely SVG, with a fixed viewport of 960 by 500 pixels. No external data source is involved; the visualization demonstrates interactive state management in a minimal React component.

Aug 5, 2025

Loading thumbnail…

Fork of Test1

This example shows a grid of eighteen cartoon faces, each with a yellow circular head, two eyes, and a curved mouth. The faces are rendered as SVG elements using React components, with each face’s eye radius, mouth radius, and mouth width randomized. The code builds the facial features using D3’s `arc()` API for the mouth and React’s component composition for the eyes and background circle. All faces are static, generated from a `range(18)` array, and centered within fixed 160×160 pixel containers.

Aug 5, 2025

Loading thumbnail…

Test1

A grid of 18 randomly generated smiley faces, each rendered as an SVG circle with two eyes and an arc-shaped mouth, demonstrates a modular React component structure. The faces vary in eye radius, mouth radius, and mouth width based on generated `Math.random()` values. The visualization uses React 18 for component composition, D3 v7’s `arc` generator to create the mouth paths via `d3.arc`, and SVG for all geometric drawing, with each face positioned through a shared container transform.

Aug 5, 2025