Anmol Gupta

@ish-u·8 public vizzes

Population

A horizontal bar chart displays the 2020 population of ten countries, sourced from a CSV file and rendered as SVG elements. The visualization uses React with a `useEffect` hook to fetch and parse the data via `csv`, then applies D3's `scaleBand` and `scaleLinear` for positioning. Gridlines and axis labels are generated from `xScale.ticks()`, while each country's bar length reflects its population value.

Jul 8, 2021

Loading thumbnail…

Rendering Data using React

This example renders CSS color names from an external CSV file as a full donut chart using React and D3. The visualization shows each color name as a slice of an SVG pie chart, with the slice fill matching the hex value of that color. The code uses React hooks (`useState`, `useEffect`) to load the data asynchronously, and D3 v5’s `csv`, `pie`, and `arc` generators to compute and draw the arc paths. ReactDOM renders the resulting SVG directly to the page, with the chart centered in a 960×500 viewport.

Jul 7, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a bar chart of deaths per episode, colored by season, with tooltips displaying the death count. It uses the Vega-Lite API to construct the chart specification, with data loaded from a CSV file via d3.csv. The visualization renders as SVG and is configured with custom axis styling and tooltip handlers from vega-tooltip.

Jul 6, 2021

Loading thumbnail…

CSV

This example displays a concise summary of a loaded CSV file, reporting the number of rows, columns, and file size in kilobytes. It fetches CSS color name data from a remote GitHub gist using the `d3.csv` function and renders the resulting statistics as large text in a React component. The application tracks loading state with React hooks (`useState`, `useEffect`) and uses `d3.csvFormat` to calculate the data’s byte size, presenting the output dynamically once the asynchronous request completes.

Jul 6, 2021

Loading thumbnail…

Cleaning Data

This example shows a minimal summary of a CSS color names dataset, displaying the row count, column count, and file size in kilobytes. It fetches a remote CSV file using the Fetch API and parses it with `d3.csvParse` from D3 v7. The resulting statistics are rendered into an HTML heading element via `document.getElementById`. The visualization is intentionally bare, focusing on data cleaning and inspection rather than graphical representation.

Jul 6, 2021

Loading thumbnail…

Mouse Follower

A single dark circle follows the mouse cursor across an SVG canvas in a React-based visualization. The circle’s position updates live via React’s `useState` hook, driven by the SVG `onMouseMove` event, which captures the cursor’s client coordinates. Rendering uses plain SVG elements, with D3 v5 loaded but not actively used in the logic. The example demonstrates reactive state-driven updates in React for interactive graphics, with the circle centered on the pointer’s exact location.

Jul 6, 2021

Loading thumbnail…

I am making a Face

Five nearly identical faces are stacked and centered in a 960×500 SVG, each built from a yellow background circle with a black stroke, two offset eyes, and an arc-based mouth. The React components (Face, Eyes, Mouth, BackgroundCircle) wrap a centralized EmojiContainer that translates the coordinate system, while the mouth uses d3.arc with inner and outer radii. Repeated rendering with fixed props demonstrates modular, parameter-driven composition.

Jul 6, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a yellow smiley face centered in the browser window, scaling its size to fit the viewport. The face is composed of three SVG circles: a large yellow head with a black stroke, and two smaller black circles for eyes. Built with React, the code uses `ReactDOM.render` to inject the SVG directly into the page. Dimensions like window width and height are read dynamically, and all facial feature positions are calculated relative to the center point using SVG transforms. The rendering relies on React’s JSX syntax for SVG elements, with the `stroke-width` attribute set explicitly to 20.

Jul 5, 2021