Neetu-Shah

@Neetu-Shah·4 public vizzes

BA 401 LOADING DATA

This example demonstrates fetching remote data from a GitHub gist using the Fetch API within a plain HTML and JavaScript setup. The code initializes a URL pointing to a raw text file and calls `fetch(url)` inside a `console.log`, which will output a Promise object to the browser console. It shows the beginning of a data-loading workflow, with React and the Vite development environment as potential context, but does not render any visualization or process the response. The page relies on standard web APIs, with no external visualization libraries included.

May 6, 2021

Loading thumbnail…

MAKING ROBOT FACE

The example shows a robot face built from basic SVG shapes, with a yellow circular head, purple eyes, a pink rectangular nose, and a mouth formed by a pink rectangle. It contrasts two rendering approaches: the initial static HTML/SVG markup with hardcoded coordinates and the React-based version that uses D3’s `arc()` generator to draw the mouth as an arc path. The React component renders SVG elements dynamically, positioning the eyes and mouth relative to calculated center offsets, while the earlier markup uses fixed pixel values for each shape.

May 4, 2021

Loading thumbnail…

NEETU viz_DRAW RECTANGLE

This example shows a stylized yellow smiley face composed of SVG primitives: a large face circle, two eye circles, and a mouth drawn with a D3 arc path. The face is centered within an 800 by 500 SVG viewport, with all elements positioned relative to a translated group at the canvas center. The code uses React to render the SVG structure, while the D3 `arc()` API generates the mouth’s curved path based on specified inner and outer radii and start and end angles. The rendering is purely declarative, with no interactive behavior or external data.

May 4, 2021

Loading thumbnail…

BA 401 CODE NEETU SHAH

This example renders a yellow smiley face in an SVG canvas using React and D3. The visualization shows a large yellow circle with two eyes and a mouth arc, all positioned relative to the canvas center. The code defines the mouth using D3’s `arc` generator, specifying inner and outer radii and angular start/end angles to create the curved line. The SVG is generated directly through React’s declarative syntax, with all geometric properties (radii, offsets, stroke widths) computed as constants in JavaScript.

Apr 29, 2021