Shasvathan Pathmanaban

@shas99·7 public vizzes

Fork of Stylized Line Chart

This example visualizes weekly temperature readings from San Francisco as a smooth, stylized line chart. Using the Data Canvas Sense Your City dataset, React components render SVG elements that map timestamps to a time scale and temperature values to a linear scale. The visualization employs d3.line with curveNatural to create a flowing path, while d3.scaleTime and d3.scaleLinear handle axis scaling. Custom axis components generate ticks and labels, with styling applied through Poppins typography and a teal color scheme for the path.

Nov 20, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses a scatter plot to display the relationship between miles per gallon and horsepower for vehicles from the Auto MPG dataset, with color indicating origin and dot size representing weight. Built with the Vega-Lite API, it loads data via `d3.csv` from a remote URL and uses custom configuration for axis styling. The visualization also incorporates the `vega-tooltip` handler for interactive hover details, and the chart automatically fits the browser window dimensions.

Nov 17, 2021

Loading thumbnail…

Loading Data with react & D3

This example displays a text summary of a CSV dataset’s size and structure in a large, full-screen `<pre>` element, updating after the data finishes loading. It uses React hooks (`useState`, `useEffect`) to manage the asynchronous data fetch, while `d3.csv` loads the CSS named color data from a GitHub gist URL. The `Message.js` utility computes the file size in kilobytes, row count, and column count using `d3.csvFormat`, then renders the result with React DOM.

Nov 14, 2021

Loading thumbnail…

Loading and parsing CSV data

This example demonstrates a minimal D3 workflow for loading and parsing remote CSV data by fetching a raw GitHub-hosted file with the Fetch API. It first retrieves the text via `fetch` and `response.text()`, then parses it into a tabular dataset using `d3.csvParse`. The parsed result is summarized in a `<pre>` element, displaying the file size in kilobytes, row count, and column count. The visualization itself is purely textual, highlighting how D3’s parsing utilities transform raw CSV strings into structured data objects.

Nov 14, 2021

Loading thumbnail…

Smilly face

A yellow circle follows the mouse cursor across a blank SVG canvas, with its position updating in real time as the user moves the pointer. Built with React (using the `useState` hook and event handlers), the circle is rendered as an SVG `<circle>` element whose `cx` and `cy` attributes are bound to the current mouse coordinates. The code uses ReactDOM to mount the component and handles `onMouseMove` events on the `<svg>` element to track the cursor.

Nov 14, 2021

Loading thumbnail…

Untitled

A blank SVG canvas fills the browser window, capturing mouse movement through an `onMouseMove` handler that logs to the console. The only visible element is a fixed circle with a radius of 54 pixels, positioned near the top-left corner at coordinates (45, 20). Despite the README’s claim that the program follows the user with a circle, the circle does not move in response to mouse events. Built with React, the component renders the SVG directly, using `window.innerWidth` and `window.innerHeight` for the canvas dimensions.

Nov 14, 2021

Loading thumbnail…

D3

A smiling face built from SVG shapes, rendered with React components and D3’s `arc` generator for the mouth and nose. The face is centered via a `g` transform, with a yellow background circle, two eye circles, and an outlined smile path. D3 v7 computes the arc paths, while React 17 manages the component hierarchy and SVG rendering. The code defines reusable components like `BackgroundCircle`, `Eyes`, and `Mouth`, each accepting size or offset props to control the face’s geometry.

Nov 14, 2021