Meghana Bangari

@MeghanaBangari·8 public vizzes

Loading and Parsing CSV data

This example demonstrates loading and parsing CSV data from a remote URL using the Fetch API within a React application. The program fetches a dataset of CSS named colors, converts the response to text, and logs the raw CSV contents to the browser console. The code illustrates asynchronous data retrieval through `fetch()` and the `async/await` syntax, processing the text response with the `.then()` method. The visualization highlights the initial step of acquiring external tabular data for subsequent parsing and display, without yet rendering any graphical output.

Nov 6, 2021

Loading thumbnail…

Fork of Smiley Face Part II

A React-based smiley face visualization renders a full-screen SVG face using D3’s arc generator for the mouth. The face is centered with a yellow circle, two black eye circles, and a thick stroke outline, all sized dynamically to the window dimensions. The code imports `arc` from D3 and computes positions for eyes and mouth using constants for offsets and radii. React’s `ReactDOM.render` mounts the SVG into the DOM, while the `<path>` element for the mouth is constructed via `mouthArc()`. The example demonstrates combining React components with D3 geometry primitives for static, responsive graphics.

Nov 6, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

A single yellow circle with a black outline is rendered at the center of an SVG canvas, representing the initial step of a smiley face construction. The circle has a radius of 245 pixels and a stroke width of 10, positioned within a 960-by-500 viewport. The visualization is built with React, using `ReactDOM.render` to mount an `App` component that directly returns the SVG elements. This example demonstrates the foundational shape before additional facial features are added.

Nov 6, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

A yellow smiley face rendered as a static SVG using React 17. Two fixed black circles serve as eyes, while no mouth yet appears—partway toward completion. The code defines the face with inline JSX elements inside a plain `index.html`, using React and ReactDOM from UMD builds to mount the structure. The example serves as a minimal demonstration of React-driven SVG composition.

Nov 5, 2021

Loading thumbnail…

Fork of Hello HTML

This example presents a static vector graphic built directly with SVG elements inside an HTML page. A large yellow circle with a thick black stroke occupies the center, while two smaller unfilled circles sit within it, creating a simple abstract composition. The underlying code uses basic SVG circle shapes with inline coordinate, radius, fill, and stroke attributes, all managed through vanilla HTML and CSS. No external JavaScript libraries or data sources are involved; the visualization is entirely hand-coded, relying on raw SVG primitives for its geometry and styling.

Nov 5, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple smiley face rendered as a yellow circle with two eyes, drawn using SVG shapes. The face is positioned at the center of a 960x500 canvas, with the main circle outlined in black and the eyes placed symmetrically off-center. The code uses React and ReactDOM to render the SVG elements, though the face itself is hardcoded directly in the HTML rather than generated through React components. The project also includes an embedded YouTube video and appears to be part of a tutorial series on building faces step by step.

Oct 17, 2021

Loading thumbnail…

Fork of Hello HTML

This example shows a simple face-like graphic composed of three SVG circles: one large yellow circle with a black stroke for the head, and two smaller unfilled circles for the eyes. It demonstrates the most basic structure of an SVG visualization within an HTML page, using React from the UMD build loaded via a script tag. The code renders the SVG directly in the body without any React components or JavaScript execution beyond a console log of the imported React object. The rendering approach is static SVG, with no data binding or interaction.

Oct 16, 2021

Loading thumbnail…

Fork of Hello HTML

A minimal HTML page renders a single yellow circle at the center of an SVG canvas. The circle uses a black stroke and a 200-pixel radius, drawn directly with the SVG `<circle>` element. The page applies no external JavaScript libraries, relying solely on inline SVG markup within the body. The styling sets the body margin to zero and hides overflow, while the SVG itself has a fixed width of 960 pixels and height of 500 pixels.

Sep 30, 2021