paridhi

@paridhi-gupta1998·6 public vizzes

World Map

This interactive world map displays country boundaries on an orthographic projection using SVG. The visualization reacts to mouse movement, rotating the globe horizontally based on cursor position. Built with React and D3 v5, it uses `geoOrthographic` and `geoPath` for projection and rendering, with `geoGraticule` adding grid lines. Land polygons come from the world-atlas TopoJSON dataset, with interior country borders highlighted in a contrasting color.

Apr 2, 2022

Loading thumbnail…

Mouse mover

A React component tracks the mouse position over an SVG canvas and renders a black circle that follows the cursor. The circle’s center coordinates are updated through React’s `useState` hook and a `handleMouseMove` callback triggered by the SVG’s `onMouseMove` event. The code uses D3 v7 for SVG rendering within a React 17 application, with the circle’s radius fixed at 30 pixels and the initial position set to the center of a 960×500 viewport.

Apr 2, 2022

Loading thumbnail…

Fork of Rendering Data with React & D3

This visualization displays CSS named colors as a single, full-screen radial burst, with each color represented as one slice of a pie chart. Using React’s `useState` and `useEffect` hooks, it fetches the CSV data with `d3.csv`, then maps each row to an SVG `<path>` element rendered by ReactDOM. The pie slices are drawn with `d3.arc()`, filling each path with the color’s hex value.

Mar 13, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This example creates a scatter plot of automobile data from a CSV file, displaying engine displacement against horsepower with points colored by region of origin. Built with the Vega-Lite API registered through Vega and Vega-Lite, it uses D3’s `csv` loader to fetch data, configures tooltips via `vega-tooltip`, and renders an interactive SVG view fitted to the window. The visualization encodes quantitative scales for both axes, a nominal color channel, and a tooltip showing car names.

Feb 13, 2022

Loading thumbnail…

Loading and parsing csv data

This example demonstrates loading raw CSV data from a remote URL and logging its unparsed text to the browser console. It uses the Fetch API with an asynchronous `fetchdata` function that retrieves the file from a GitHub-hosted sample dataset, converting the response to text. The code does not format or visualize the data; it simply verifies successful retrieval before any parsing would occur.

Feb 5, 2022

Loading thumbnail…

try day friday

This example shows a stylized smiley face rendered as a static SVG graphic, composed of a yellow circle, two dark eyes, and a dark mouth. The React component structure separates the face into reusable parts, with `FaceContainer` establishing the SVG and centering transform, while `BackgroundCircle`, `Eyes`, and `Mouth` define the visual elements. The mouth uses a D3 arc generator with a specified inner and outer radius to create a half-circle shape, while the eyes and background circle use simple SVG circle elements. The face is centered within a 960×450 viewport using calculated `centerX` and `centerY` coordinates. React 17 and D3 v7 are used as the primary libraries, with rendering occurring entirely through SVG elements.

Jan 15, 2022