Shiya

@clrois2·4 public vizzes

Fork of Vega-Lite API Template

This fork of a Vega-Lite API template displays a bar chart of fire counts by type, using data loaded from a CSV file via D3’s `csv` method. The visualization is built with the Vega-Lite API, registering Vega and Vega-Lite libraries, and renders to SVG with a custom dark theme and tooltip support from Vega-Tooltip. The chart fills the browser window and logs the first data row to the console for inspection, though the specific dataset source is the UCI Auto MPG repository.

Oct 31, 2021

Loading thumbnail…

Smiley Face Part I

A yellow circle with a black outline forms the face, flanked by two smaller circles for eyes and a curved arc for a mouth. The example demonstrates building a smiley face from basic SVG shapes using React and D3's `arc()` generator, which constructs the mouth path from start and end angles. The components are positioned via SVG transform, with specific offsets and radii for each element. The code relies on `ReactDOM.render` and D3 v7, rendering declaratively within an SVG container.

Oct 31, 2021

Loading thumbnail…

Smiley Face Part I

A static yellow circle with a black outline renders as a smiley face on an SVG canvas. The example demonstrates embedding React components within an SVG element, using React 16.13.1 and ReactDOM to mount a simple application. The circle is hardcoded with fixed coordinates and dimensions, while the React component renders only a "Hello React!" message, showing the separation between the SVG drawing and the React-managed DOM. The page includes minimal styling to remove margins and hide overflow.

Sep 19, 2021

Loading thumbnail…

Smiley Face Part I

A static SVG smiley face is drawn as a yellow circle with a black outline, accompanied by two filled black circles for eyes. The example demonstrates basic React rendering by defining an `App` component that returns the SVG markup, though it does not render to the DOM. It uses React 17 and uses SVG circle elements with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes. The code is an introductory illustration of embedding SVG primitives within a React component structure.

Sep 19, 2021