sangar-si

@sangar-si·4 public vizzes

Fork of HTML Starter

This example visualizes a cartoon face built from SVG shapes, including a yellow circular background, two black eyes, and a curved mouth. The face is composed through React components that accept numeric props for size, position, and thickness, with a container component managing the SVG coordinate transform. The mouth uses d3.arc to generate a path with specified inner and outer radii and angles. All elements are rendered declaratively via ReactDOM, with D3 v7 available for geometry calculations.

Jan 4, 2022

Loading thumbnail…

Working with data

This example demonstrates fetching and logging a CSV file containing CSS named colors. The page, built with plain HTML, CSS, and JavaScript, uses the `fetch` API within an asynchronous `fetchText` function to retrieve the text from a GitHub Gist URL and print it to the browser console. The code shows how to handle asynchronous network requests in React-ready JavaScript.

Jan 2, 2022

Loading thumbnail…

Working with data

This example demonstrates the fundamental capabilities of VizHub, showing how to load D3 via a CDN and combine it with local ES6 modules. It imports the `select` function from D3 to set the text content of a div element, using a message string exported from a separate `myMessage.js` module. The rendered output is a single centered line of text, "Hello VizHub!", displayed at a large font size via CSS. The code highlights both external library integration and modular JavaScript organization within a visualization environment.

Jan 2, 2022

Loading thumbnail…

Face Starter

This visualization displays a stylized cartoon face composed of a yellow circular background, two black eyes, and an arc-shaped mouth, all rendered as SVG elements within a React component. The code uses React functional components and JSX to structure the face, while D3’s `arc` API generates the mouth path. The FaceContainer wraps the SVG and applies a translate transform to center the face, with fixed dimensions and positioning constants defining the layout.

Jan 2, 2022