Unknown-bot-sus

@Unknown-bot-sus·6 public vizzes

Vega-Lite API Template

This example visualizes the religious composition of countries as a bubble chart, mapping population size to circle area, country to the x-axis, and religion to the y-axis. It loads data from the UCI Auto MPG dataset via a Gist, processed with d3.csv. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries, applies a custom configuration for readability, and renders interactive SVG output with a tooltip handler.

Jan 14, 2022

Loading thumbnail…

Loading Data with React D3

This example demonstrates how to load and summarize a dataset within a React application using D3 utilities. The interface displays a text summary showing the dataset’s size in kilobytes, row count, and column count, initially presenting “loading…” before the data arrives. The code uses D3’s `csv` function to fetch a CSV file from a GitHub gist containing CSS named colors, then processes the result through D3’s `csvFormat` function. React’s `useState` and `useEffect` hooks manage the asynchronous data loading, while the custom `message` function generates the displayed statistics.

Jan 13, 2022

Loading thumbnail…

Loading and Parsin CSV Data

This example demonstrates the process of loading and parsing CSV data using D3.js. It fetches a CSV file listing CSS named colors from a GitHub gist and uses `d3.csv` to parse it asynchronously. The program then computes and displays the file size in kilobytes, the number of data rows, and the number of columns in a large preformatted text block. The visualization highlights the parsed data’s structural metadata rather than plotting the content itself.

Jan 13, 2022

Loading thumbnail…

Mouse follower

A circle follows the mouse cursor across an SVG canvas, updating its position in real time. The example demonstrates React state management with a `useState` hook and the `onMouseMove` event handler, which captures the cursor's client coordinates and passes them to the circle's `cx` and `cy` attributes. React re-renders the SVG element on each mouse movement, while D3's `arc` import is present but unused, and no external data source is involved.

Jan 13, 2022

Loading thumbnail…

smiley face part1

A grid of 18 smiley faces, each with randomized facial features, renders as a tiled composition. The example demonstrates a React-based declarative approach to SVG construction, where the `Face` component composes `BackgroundCircle`, `Eyes`, and `Mouth` elements. The `Mouth` uses the D3 `arc` API to generate a path with a specified inner radius and angular range. Each face’s properties—stroke width, eye offsets, eye radius, and mouth dimensions—are determined by `Math.random()` expressions, producing visually varied iterations within a fixed canvas size.

Jan 13, 2022

Loading thumbnail…

Fork of smiley face assignment

This example renders a classic smiley face using React and D3’s `arc` API. It draws a yellow circle with a black stroke, two eye circles at fixed offsets, and a mouth path generated by `d3.arc` with a specified inner and outer radius and start/end angles. The SVG is centered on a 960×500 canvas, with all shapes positioned via a translated `<g>` group. The code relies on ReactDOM to mount the component and D3 v7 for the arc geometry, producing a static, data-free vector graphic.

Jan 13, 2022