Adwait Godbole

@adwait-godbole·5 public vizzes

Mouse Follower

A fixed radar-like SVG tracks the cursor across a 960 by 500 viewport, drawing an inner circle at the center that follows the pointer’s coordinates. Written with React 16.9 and rendered as an SVG `<circle>`, the interaction uses an `onMouseMove` event handler on the root `<svg>` element, logging `clientX` and `clientY` to the console while the yellow-outlined circle visually responds to the mouse position.

Oct 31, 2021

Loading thumbnail…

Untitled

This example shows a yellow smiley face drawn with SVG that follows the mouse cursor across the full browser window. The face is centered dynamically using window dimensions, with the eyes positioned relative to the center point. Built with React and ReactDOM, the code calculates the viewport size and renders an SVG circle for the face, while an inner group transform places the eyes at fixed offsets from the center. The implementation uses React's declarative syntax to generate the SVG markup.

Oct 31, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the initial step of working with external data in a web page: fetching a CSV file and printing its raw contents to the browser console. It uses the native JavaScript `fetch` API to retrieve the text from a GitHub-hosted CSV containing CSS named colors, then logs the parsed response. The code is intentionally minimal, using only vanilla HTML and JavaScript without additional libraries, and highlights the asynchronous promise-based flow of `fetchText` before any data transformation or visualization occurs.

Oct 31, 2021

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a minimal VizHub setup that renders a simple text message to the page. It loads D3.js from a CDN via UNPKG and uses the `select` function to target a `#message` div, setting its text content to a string imported from a local ES6 module. The message originates from `myMessage.js`, while `styles.css` centers the text and enlarges its font size. This fork serves as a template for combining external libraries, local modules, and styling in a single visualization.

Oct 31, 2021

Loading thumbnail…

Fork of HTML Starter

This example shows two nested cartoon faces rendered as SVG. The first face has a yellow circular background, black stroke, offset eyes, and a smiling arc; the second face overlaps it with larger proportions and a thicker stroke. The code builds the faces using React components, with the smile generated by `d3.arc` in the `Smile` component. The `FaceContainer` renders an SVG wrapper, while `BackgroundCircle` and `Eyes` define geometric elements. Both faces are positioned with fixed dimensions and offsets via JSX props.

Oct 31, 2021