Suwigya Rathore

@suwigyarathore·4 public vizzes

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the Iris dataset, mapping petal length on the x-axis against sepal width on the y-axis with circular marks. Built with React and D3 v5, it uses `scaleLinear` for both axes, `extent` for domain calculation, and custom SVG components for rendering axes and circles with tooltips. The visualization loads data via `d3.csv` from a GitHub gist and applies a custom `format` function for tick labels, styled with the Poppins font.

Nov 2, 2021

Loading thumbnail…

Loading and parsing csv data

This example displays basic statistics about a remote CSV file, including its size in kilobytes, row count, and column count, rendered as plain text. It loads the data using `d3.csv` from the D3 v5 library, which asynchronously fetches and parses the CSV from a GitHub gist. The parsed result is then queried for its row and column metadata using `data.length` and `data.columns.length`, and the formatted text is injected into a pre element. The code also includes a commented-out alternative using the `fetch` API and `d3.csvParse`.

Oct 19, 2021

Loading thumbnail…

mouse follower

A circle follows the mouse cursor across an SVG canvas, updating its position in real time as the pointer moves. Built with React and D3 v7, the example uses React state to track mouse coordinates via an `onMouseMove` handler, then renders the circle at those coordinates. The SVG viewport is 960 by 500 pixels, and the circle has a fixed radius of 30 pixels, demonstrating a simple interactive pattern without data or animation.

Oct 19, 2021

Loading thumbnail…

Fork of Hello HTML

This example shows a simple smiley face rendered as SVG, with a yellow circular background, two black eyes, and a curved mouth. The face is built from reusable React components, including `BackgroundCircle`, `Eyes`, and `Mouth`, which are composed within a single SVG element. Positioning is centered using a `g` transform, and the mouth is generated with the `d3.arc` API to create the semicircular path. The code uses React 17, D3 v7, and ReactDOM to render the static visualization without any interaction or data binding.

Oct 13, 2021