Morshai

@Morshai·5 public vizzes

Fork of Vega-Lite API Template - test

This example shows a bar chart of population by country, using data loaded from a CSV file. The visualization is built with Vega-Lite and the Vega-Lite API, with D3.js handling data fetching. It uses the `vl.markBar()` method to encode the country field on the x-axis and population on the y-axis, with tooltips displaying population values. The chart auto-sizes to fill the browser window and applies custom axis and label styling for readability.

Sep 18, 2021

Loading thumbnail…

Fork of Loading Data with React & D3

This example loads a CSV dataset of CSS named colors and displays a plain-text summary of its contents. Using React’s `useState` and `useEffect` hooks, it fetches the data with `d3.csv`, then computes and renders the file size in kilobytes, the number of rows, and the number of columns via a custom `message` function that relies on `d3.csvFormat`. The interface shows “Loading…” until the asynchronous request resolves.

Sep 14, 2021

Loading thumbnail…

Loading and parsing CSV data

This example demonstrates how to load and parse CSV data in D3 v7, displaying the dataset’s size, row count, and column count in a large, styled text block. It fetches a CSV of CSS named colors from a GitHub gist using `d3.csv`, then computes the file size from the formatted output via `d3.csvFormat`. The code also includes a commented alternative using the Fetch API with `d3.csvParse` for manual parsing.

Sep 13, 2021

Loading thumbnail…

Mouse Follower

A React component renders a single SVG circle that follows the mouse cursor across the full browser window. The app tracks pointer coordinates via an `onMouseMove` event handler, storing them in state with the `useState` and `useCallback` hooks. As the mouse moves, the circle’s `cx` and `cy` attributes update reactively, producing a direct visual tracking effect. The example demonstrates declarative SVG rendering with React’s virtual DOM, using no external charting library.

Aug 22, 2021

Loading thumbnail…

FENVIZ

FENVIZ renders a cartoon face from modular React components, combining SVG shapes for a yellow background circle, eyes, and an arc-based mouth. The face is centered within an 960×500 SVG canvas using a `FaceContainer` that translates a group element. The mouth uses a D3 `arc` generator with specified inner and outer radii and angular extents, while all other facial features are plain SVG circles. The visualization is built with React (version 16.9) and d3.v7, with component props controlling dimensions and positions.

Aug 22, 2021