Anup Mantri

@amantri·6 public vizzes

FCC: Scatter Plot with Color Legend

This scatter plot visualizes the Iris dataset, plotting petal length against sepal width, with each data point colored by species. The visualization uses D3 v5 scales and ordinal color mapping, rendered as SVG through React components. The code includes custom axes, a color legend for the three iris species, and tooltips showing petal length values upon hover.

Mar 19, 2021

Loading thumbnail…

FCC: Vega lite exploration

This example uses the Vega-Lite API to render a horizontal bar chart of automobile horsepower by name, with color encoding by country of origin and tooltips on hover. It loads the Auto MPG dataset from the UCI Machine Learning Repository via a CSV fetch using d3.csv. The visualization dynamically fits the browser window, and the Vega-Lite specification is registered with Vega and enhanced with Vega-Tooltip for interactive data inspection. Custom axis styling is applied through a configuration object.

Mar 18, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3.js, displaying summary statistics about the dataset. It fetches a CSV file containing CSS named colors from a GitHub gist and shows the file size in kilobytes, the number of rows, and the number of columns in a large preformatted text block. The primary implementation uses `d3.csv` with a promise, while commented-out alternatives illustrate using `fetch` with `async/await` and `d3.csvParse`. The example also includes a commented-out "pyramid of doom" pattern for comparison.

Mar 17, 2021

Loading thumbnail…

FCC: Mouse follower using React

A single black circle follows the mouse cursor across a full-window SVG canvas. The React component tracks pointer coordinates via an `onMouseMove` handler, storing them in state with the `useState` hook and updating them through a `useCallback`-wrapped event listener. The circle’s `cx` and `cy` attributes are re-rendered with each mouse movement, using the viewport dimensions from `window.innerWidth` and `window.innerHeight`. The example demonstrates React’s declarative UI updates for interactive SVG visualizations.

Mar 16, 2021

Loading thumbnail…

FCC: Smiley w/ React components

A grid of eighteen randomly generated smiley faces, each built from React components and rendered as SVG, demonstrates how to compose and reuse visual elements programmatically. The `Face` component assembles a yellow `BackgroundCircle`, two `Eyes` circles, and a `Mouth` path created with the `d3.arc()` API for a curved smile. Each face’s dimensions—stroke width, eye offset and radius, and mouth properties—are randomized via `Math.random()` within the `App` component, producing unique variations across the grid while maintaining consistent facial structure. The example uses React’s `StrictMode` and `ReactDOM.render` to manage the SVG output, with D3 v6 providing the arc geometry for the mouth.

Mar 16, 2021

Loading thumbnail…

FCC: Smiley

A smiley face rendered as a reusable SVG component built with React and D3. The static data is defined as constants for radii and offsets, and the mouth is generated using `d3.arc()` with specified start and end angles. The face is drawn with circles for the head and eyes, and a path for the mouth, all centered via an SVG `<g>` transform. The code uses ReactDOM to render the component into the DOM, demonstrating a hybrid approach combining React's declarative structure with D3's shape generators.

Mar 15, 2021