Shanoy

@Cyberyawdie·5 public vizzes

Fork of Vega-Lite API Template

This example visualizes the top five religions by country as a stacked bar chart, with each bar segment colored by religion and sized by population. The chart displays country names along the x-axis and population counts on the y-axis, with tooltips showing exact values. It uses the vega-lite-api to construct the visualization, while vega and vega-lite handle rendering and encoding, and d3.csv loads data from a remote CSV file. The configuration customizes axis labels, title fonts, and uses a dark color scheme for improved readability.

Mar 13, 2022

Loading thumbnail…

Loading Data with D3 and React

This example demonstrates loading a CSV dataset in a React application using D3’s `csv` function, which fetches the data from a GitHub Gist containing CSS named colors. The app displays a loading message for three seconds before showing summary statistics—file size, row count, and column count—computed with `d3.csvFormat` and rendered as large text in a `<pre>` element. The code integrates React’s `useState` and `useEffect` hooks to manage asynchronous data fetching and rendering. The visualization is minimal, focusing on the data-loading workflow rather than graphical output.

Mar 13, 2022

Loading thumbnail…

Fetching data

This example displays basic metadata about a fetched CSV file, showing its size in kilobytes, row count, and column count in large text. It loads a named CSS colors dataset from a GitHub gist using the `d3.csv` method with a Promise-based `.then()` callback, then counts rows via `txt.length` and columns through `txt.columns.length`. The text size is computed from `d3.csvFormat(txt).length`. The page uses D3 v7 and renders the resulting information inside a `<pre>` element.

Mar 13, 2022

Loading thumbnail…

Mouse follower

A React application renders a single SVG circle that follows the mouse cursor as it moves across the full-window viewport. The component uses the `useState` and `useCallback` hooks to track the cursor’s `clientX` and `clientY` coordinates, updating the circle’s `cx` and `cy` attributes on every `onMouseMove` event. The initial position is centered based on `window.innerWidth` and `window.innerHeight`. This simple interactive example demonstrates real-time state-driven SVG updates without any external data sources or animation libraries.

Mar 13, 2022

Loading thumbnail…

Smile

A grid of smiley faces, each composed of a yellow circle, two eyes, and a curved mouth, fills the screen with randomly varied facial features. The code builds each face using React components for the background, eyes, and mouth, with the mouth drawn via a D3 arc generator. These components are combined and replicated using D3's range function to generate the grid. The rendering relies on SVG, with D3 v7 providing the mathematical basis for the arcs and distribution.

Mar 12, 2022