Shankar Ghimire

@shankarghimire·11 public vizzes

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3.js, displaying the file size, row count, and column count as large text. It fetches a remote CSS named colors dataset via `d3.csv()`, then formats the output with `d3.csvFormat()` to calculate the data size in kilobytes. The code also includes a commented fallback approach using `fetch()` and `d3.csvParse()`. The main path relies on D3’s promise-based `d3.csv` method to handle asynchronous loading and parsing of the tabular data.

Apr 14, 2022

Loading thumbnail…

Mouse Follower

A large, unfilled circle traces the pointer's path across the full browser window, its position updating in real time as the mouse moves. The visualization uses React's `useState` and `useCallback` hooks to manage the circle's coordinates, which are rendered on an SVG canvas that spans the viewport's width and height. The circle's center is set from the `clientX` and `clientY` properties of the mouse-move event, while the window's initial dimensions determine the starting position. This example demonstrates a minimal, responsive interaction between user input and SVG graphics.

Apr 13, 2022

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data, displaying summary statistics for the CSS Named Colors dataset. It reports the file size in kilobytes, row count, and column count in a large text block. The implementation uses d3.csv for asynchronous data loading and d3.csvFormat to compute byte length, with alternative approaches using fetch and async/await commented out for comparison. The code runs within a React application using D3 v5.

Apr 13, 2022

Loading thumbnail…

Smiley Face Part-VI

A grid of fifteen random smiley faces, each generated with varying facial features using React components. The example demonstrates how to compose and reuse SVG elements through React's component model, with faces rendered using D3's arc generator for the mouths and basic circles for the eyes and backgrounds. The code uses React 18 and D3 v7, and each face’s parameters—such as stroke width, eye offset, and mouth radius—are randomized to create visual variety across the grid.

Apr 13, 2022

Loading thumbnail…

Smiley Face Part I

A yellow smiley face with black outlined eyes and a curved mouth is rendered in an SVG canvas inside a React application. The face's background circle, eyes, and mouth are created using React components that return SVG elements, with the mouth's shape derived from a d3.arc() path using inner and outer radii and specified start and end angles. The drawing is centered using an SVG group transform, and all shape dimensions are controlled by variables passed as props.

Apr 7, 2022

Loading thumbnail…

Fork of Hello HTML

A single yellow circle with two smaller black-outlined circles inside it forms a simple emoji-like face on a blank canvas. The example demonstrates bare-minimum SVG rendering in an HTML page without any JavaScript or D3.js dependency. Instead, it uses native SVG elements—`circle` tags with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes—placed directly in the markup. The rendering approach is static, with no interactivity or data binding; the shapes are hard-coded in the source. It serves as a minimal starting point for understanding SVG structure before introducing D3.

Apr 4, 2022

Loading thumbnail…

Data Viz Smiley Face

This basic SVG graphic draws a smiley face using two nested groups of circles. A large yellow circle forms the head, with a black outline, while two smaller black circles create the eyes. The example uses the SVG circle element within an 800-by-500 viewport, demonstrating minimal markup for geometric shapes without any interactive or data-driven features.

Apr 4, 2022

Loading thumbnail…

Fork of Hello HTML

This example shows a simple yellow smiley face drawn as an SVG circle with two eye circles, rendered statically without interaction. The code uses React 17 to define an `App` component that returns SVG elements, with ReactDOM rendering it into the root HTML container. Dimensions and positions are computed via JavaScript variables for the face radius, center coordinates, stroke width, and eye offsets. The visualization demonstrates basic SVG circle shapes and React’s declarative JSX syntax for composing graphics, with no external data or dynamic behavior.

Apr 3, 2022

Loading thumbnail…

Fork of Let's Make a Face Part I

This example displays a static yellow smiley face made from three SVG circles: a large outlined face and two smaller eyes. The code uses React 17 via a UMD build to render the SVG elements directly in the browser. All coordinates and dimensions are hard-coded, with the face centered at (480, 250) and a 245-pixel radius. The rendering approach relies on plain SVG shapes without any interactive behavior or data-driven updates.

Mar 9, 2021

Loading thumbnail…

Smiley Face

A yellow circle with a black outline forms a smiling face on a blank white canvas. Two smaller black-outlined circles serve as eyes, positioned symmetrically on either side of the face’s center. The static SVG drawing uses simple geometric primitives—`<circle>` elements with fixed coordinates and stroke attributes—to create the illustration. No interactive features or dynamic behavior are present; the rendering relies entirely on declarative SVG markup within an HTML page.

Mar 7, 2021

Loading thumbnail…

Smiley Face Part 1

A hand-drawn-style yellow smiley face is rendered on a black-outlined SVG canvas, with a circular head and two hollow eyes but no mouth. Built with React 17, the drawing uses four SVG `<circle>` elements with fixed pixel coordinates—the head at (480, 250) with a 200-pixel radius, and two eyes at (360, 200) and (600, 200) each with a 50-pixel radius and thick stroke. The page sets the body margin to zero and hides overflow, while the script logs the React object to the console.

Mar 7, 2021