Marta

@ZephyraCold·4 public vizzes

Fork of Vega-Lite API Template

This interactive scatter plot uses the Vega-Lite API to visualize stars from the Auto MPG dataset, plotting their distance from the sun against their magnitude. Each star is represented by a circular mark, with color encoding the star type and size reflecting its stellar class. The visualization loads data via `d3.csv`, configures axis styles and tooltips through the `vega-lite-api` and `vega-tooltip` Handler, and renders dynamically to the full browser window using `vl.markCircle().encode()`.

Mar 25, 2021

Loading thumbnail…

Fork of Loading Data with React & D3

This example demonstrates the loading and summarization of a CSS named colors dataset using React and D3. It displays the data size in kilobytes, the number of rows, and the number of columns as text output. The application uses React's `useState` and `useEffect` hooks to manage the asynchronous loading process, while D3's `csv` function fetches and parses the remote CSV file. The `message.js` module calculates the summary statistics using `d3.csvFormat` to determine the data's size.

Mar 23, 2021

Loading thumbnail…

Fork of Smiley Face Part II - m

A single yellow circle follows the mouse cursor across a blank SVG canvas. Built with React hooks, the component tracks `clientX` and `clientY` coordinates from a `mousemove` event and updates the circle’s `cx` and `cy` attributes through `useState`. The visualization demonstrates real-time state updates and event handling in React, rendering a minimal interactive shape without additional data or animation logic.

Mar 17, 2021

Loading thumbnail…

Fork of Hello HTML

This example shows a stylized cartoon face rendered as SVG, with a yellow circular background, two eyes, and a mouth built from a D3 arc. The face is centered on a 960 by 500 canvas using React components that compose `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth`. The code uses React 16.9, ReactDOM, and D3 v6’s `arc` generator to define the mouth’s path. All facial features are parameterized via props, allowing the face’s dimensions and positions to be adjusted independently.

Mar 16, 2021