sachin rai

@sachin7987·3 public vizzes

Fork of Vega-Lite API Template

This fork of the Vega-Lite API template visualizes the Auto MPG dataset, plotting miles per gallon against horsepower with color encoding by origin and size by vehicle weight. Tooltips reveal car names on hover. The code constructs the visualization declaratively using the Vega-Lite API, with D3.js fetching the CSV data and VEGA, Vega-Lite, and Vega-Tooltip libraries handling rendering and interactivity.

Dec 18, 2023

Loading thumbnail…

Fork of Mouse Follower

A circle tracks the mouse across a 960-by-500 SVG canvas, centering itself on the pointer’s coordinates as it moves. The React app uses the `useState` hook to store the mouse position and the `useCallback` hook to update it on every `mousemove` event. The circle is rendered as an SVG `<circle>` element with its `cx` and `cy` attributes bound to the state, while the SVG’s `onMouseMove` handler triggers the position update. No data source is involved; the visualization simply demonstrates interactive rendering with React and SVG.

Dec 18, 2023

Loading thumbnail…

firstDataVisualization

This example displays a large “Hello HTML! hii” message styled with CSS, while the page loads a CSV of CSS named colors from a GitHub gist. It fetches the text using the Fetch API and parses it with `d3.csvParse`, logging the resulting array to the browser console. The visualization is a minimal HTML page that combines D3 v7 for data parsing with React production builds, though no user-visible chart or interactive output is rendered.

Dec 17, 2023