vishnubpg

@vishnubpg·7 public vizzes

Loading and Parsing CSV Data

This example demonstrates the initial step of loading and parsing CSV data from a remote URL using the Fetch API, logging the raw Promise response to the browser console. It fetches a gist-hosted text file and logs the result of the `fetch(url)` call, but does not yet parse the CSV content or render any visualization. The code relies solely on the standard `fetch` function and `console.log`, with no external libraries like D3.js or visual output. It serves as a minimal foundation for subsequent data processing steps.

Jun 13, 2021

Loading thumbnail…

Compartmentalising - Smilie Face

Ten smiling faces are rendered in a grid, each composed from reusable React components for the background circle, eyes, and mouth. Built with React and D3 v6, the example demonstrates component compartmentalization and SVG rendering. The mouth uses d3.arc to generate a path, while the faces are positioned by a FaceContainer that translates the coordinate system. The array from d3.range creates the repeated elements.

Jun 12, 2021

Loading thumbnail…

Multiple pages - Smilie Face

A smiling face rendered with React components draws a yellow circle with black stroke, two eyes, and a curved mouth inside an SVG. The face uses D3’s `arc` generator to create the mouth path, with React managing component composition and SVG rendering. All elements are positioned relative to a central transform, with fixed pixel dimensions for the canvas.

Jun 9, 2021

Loading thumbnail…

Components - Smilie Face

A React component renders a smilie face as an SVG, using D3's `d3.arc` to generate a mouth path with specified inner and outer radii and angular range. The face consists of a yellow circle background with a black stroke, two black eye circles offset from the center, and the arc-based mouth, all positioned via SVG transformations. The code imports `React` and `ReactDOM`, and uses D3's `arc` API directly within the JSX markup to define the geometric shapes.

Jun 9, 2021

Loading thumbnail…

Smilie Face with React and D3

This example shows a classic smiley face rendered as an SVG graphic, with a yellow circular head, two black eyes, and a curved mouth. The face is built using React components that return SVG elements, while D3’s `arc` generator defines the mouth’s path. The code sets fixed dimensions and coordinates for the face’s features, then uses ReactDOM to mount the component. Both React and D3 are loaded via UMD scripts, and the rendering relies purely on static D3 shapes without any data or interaction.

Jun 9, 2021

Loading thumbnail…

Smilie Face with SVG

This example demonstrates a minimal SVG-based smiley face rendered inside an HTML page. The code uses plain SVG markup embedded directly in the HTML structure, styled with CSS for centering and large font sizing. While the page includes a placeholder heading and a commented-out JavaScript console log, the primary visualization is the static smiley face, which relies on SVG’s built-in circle and path elements. No external libraries or data sources are used; the drawing is defined entirely within the markup.

Jun 9, 2021

Loading thumbnail…

Smilie Face with React

This example renders a yellow smiley face as an SVG graphic using React. It draws three circles—a large yellow face and two smaller black eyes—with explicit pixel dimensions for width, height, and stroke widths. The code creates a React component that returns JSX, using the `React` and `ReactDOM` libraries to mount the visualization into the DOM. All coordinates and radii are predefined constants, resulting in a static, purely declarative chart.

Jun 8, 2021