Manish Singh

@ManishBangari·5 public vizzes

Fork of Vega-Lite API Template

This visualization uses a Vega-Lite API specification to render a scatter plot of Auto MPG data from the UCI Machine Learning Repository. Each circle’s position maps origin and horsepower, while its size reflects mpg and its color encodes horsepower, with tooltips showing car names. The code builds the chart using the vega-lite-api library, registers Vega and Vega-Lite, and renders SVG via D3 v5, applying a custom config for axis and label styling.

Apr 5, 2023

Loading thumbnail…

Data Visualization of Health Dataset - MINI PROJECT

This visualization plots COVID-19 data from a WHO global dataset, showing cumulative cases on the x-axis against newly reported deaths in the last 24 hours on the y-axis. Each circular mark represents a country, with color encoding the country name and size encoding cumulative deaths. The chart is rendered using Vega-Lite, registered through the vega-lite-api, with the data fetched via `d3.csv` and displayed as an SVG using vega’s renderer.

Jul 16, 2022

Loading thumbnail…

Getting to know React(making a mouse follower)

A React application renders a single SVG circle that follows the mouse cursor across a 960 by 500 canvas. The circle's center coordinates update on every mouse movement via the `onMouseMove` event handler, which calls `setMousePosition` to update the component's state. The code uses React's `useState` hook and `ReactDOM.render` to manage the interactive behavior, drawing the circle as an SVG `<circle>` element with a fixed radius of 50 pixels.

Jul 14, 2022

Loading thumbnail…

Loading and Parsing CSV data

This example shows how to fetch and parse CSV data from a remote source for a health dataset visualization. The code defines an asynchronous function that uses the Fetch API to retrieve the CSV file, then logs the raw text response to the console. It demonstrates the modern async/await pattern with `fetch()` and `response.text()` to avoid nested promise callbacks, replacing the commented-out pyramid-of-doom approach. The data source is a GitHub Gist containing CSS-named-colours data, prepared for future health-related visualization work.

Jul 14, 2022

Loading thumbnail…

smiley face phase 2 with HTML

A smiley face rendered as a yellow circle with black outline and two eyes, drawn using React and SVG. The component defines fixed dimensions (960 by 500) and calculates center coordinates, stroke width, eye offsets, and eye radius as constants. It uses React 18 and ReactDOM to mount the SVG into the page’s root element. The eyes are positioned asymmetrically—one above and one below the horizontal center—due to differing offset values for the y-axis.

May 31, 2022