breadcircle

@breadcircle·6 public vizzes

Fork of Vega-Lite API Template

This scatterplot visualizes automobile data by plotting horsepower against origin, with each point representing a car model and tooltips revealing its name. Built with the Vega-Lite API, the chart uses `vl.markCircle` with encoding functions for x and y axes, while custom config adjusts font sizes and axis styling. Data is loaded asynchronously from a CSV using D3’s `csv` method, and the visualization renders full-screen with an SVG view and integrated tooltip handler.

Mar 25, 2022

Loading thumbnail…

Laoding Data with React & D3

This example demonstrates a minimal React and D3 workflow for loading and summarizing a CSV dataset from a GitHub gist. The app fetches the data with D3’s `csv` utility and stores it in React state via a `useEffect` hook. While the data is loading, a simple fallback message appears; once loaded, the interface presents a breakdown of the dataset’s size in kilobytes, row count, and column count using D3’s `csvFormat` method. The result is rendered as an SVG-compatible `<pre>` element, highlighting a straightforward integration of D3’s data utilities with React’s state management.

Mar 25, 2022

Loading thumbnail…

Fork of Laoding Data with React & D3

This example demonstrates how to load and display a dataset using React and D3. The page shows a summary of CSS named colors from a CSV file, displaying the data size in kilobytes, the number of rows, and the number of columns. The code uses React’s `useState` and `useCallback` to manage the data, and D3’s `csv` function to fetch and parse the external CSV resource. The rendering is done with a simple SVG-free `<pre>` element, updating via React state once the data arrives.

Mar 25, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the minimal steps required to load and parse a CSV file using D3 v7. It fetches a remote dataset of CSS named colors and converts it into an array of objects with `d3.csv`. The resulting summary is displayed in a large `<pre>` element, showing the file size in kilobytes, row count, and column count. The code relies on the Fetch API and `d3.csv`, then uses `d3.csvFormat` to calculate the data’s byte length.

Mar 24, 2022

Loading thumbnail…

Fork of Hello HTML

This fork of the minimal Hello HTML example renders an empty HTML page. The code sets up a basic HTML document with a title but contains no body content or JavaScript. It demonstrates the simplest possible web page structure. The example relies only on standard HTML markup, with no external libraries, data sources, or visualization techniques present. Despite being listed as a visualization, the page displays no visual elements of any kind.

Mar 23, 2022

Loading thumbnail…

Smiley Face Part I

The gallery displays a grid of eighteen randomly generated smiley faces, each rendered as a yellow SVG circle with black outlines, eyes, and a curved mouth. Built with React and D3 v7, the Face component composes BackgroundCircle, Eyes, and Mouth subcomponents, using D3’s `arc()` generator to create the mouth’s path. Faces vary in stroke width, eye offset, eye radius, mouth radius, and mouth width via JavaScript `Math.random()` calls. The SVG container centers each face using a transform, producing a playful, varied set of cartoon-like avatars.

Mar 22, 2022