satyenataagyaa

@satyenataagyaa·5 public vizzes

Vega-Lite API Template

This example uses the Vega-Lite API to create a stacked bar chart of global religious demographics by country, sourced from a CSV file via D3’s `csv` loader. The visualization encodes country on the x-axis, population on the y-axis, and religion as color, with tooltips showing population values. The chart is rendered as SVG using Vega-Lite’s `markBar` and `encode` methods, with styling customized through a config object for axis and label appearance.

Mar 7, 2021

Loading thumbnail…

Loading Data with React & D3

This example demonstrates loading a CSV dataset from a remote URL using React state and the `useEffect` hook, with D3’s `csv` utility fetching the data asynchronously. While the data loads, the interface displays “Loading...”; once available, a message summarizes the dataset’s size in kilobytes, row count, and column count, computed via `d3.csvFormat`. The visualization itself is minimal—a large preformatted text element—highlighting the integration of D3’s data-loading and formatting APIs within a React component’s lifecycle.

Mar 5, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v6, displaying summary statistics about the dataset. It fetches a remote CSV file containing CSS named colors via `d3.csv`, then computes and presents the file size in kilobytes, row count, and column count as large text. The code also includes an alternative commented approach using the Fetch API and `d3.csvParse` for manual text parsing. The data source is a GitHub gist hosted CSV file.

Mar 5, 2021

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across an SVG canvas in this React-based visualization. The example uses React's `useState` and `useCallback` hooks to track `clientX` and `clientY` coordinates from a mouse move event, updating the circle's `cx` and `cy` attributes in real time. Rendered with D3 v6 for SVG elements and React 17, the circle starts centered at (480, 250) with a radius of 30 pixels. No data source is involved; the visualization demonstrates interactive event handling and state-driven positioning.

Mar 5, 2021

Loading thumbnail…

Smiley Face Part VI

A React component assembles a stylized smiley face from separate SVG subcomponents for the background circle, eyes, and mouth. The face is centered within a 960 by 500 viewport using a transformed group element. The mouth is generated with a D3 arc path, while the eyes and face outline are plain SVG circles with configurable positions and sizes. This example demonstrates component-based composition and parameter-driven customization.

Mar 2, 2021