mukta1994

@mukta1994·5 public vizzes

Loading data with d3 and react

This example shows a React component that loads a CSV dataset from a GitHub gist using d3.csv, with the data stored in component state via the useState hook. The rendered output is initially empty, as the App component returns an empty div while the data is being fetched asynchronously. The code includes commented-out SVG markup for a smiley face, suggesting the intended visualization, though it is not currently rendered. The implementation combines React’s useEffect for side effects with d3’s data-loading API, using the d3.v5 library alongside React 16.9.

Jun 13, 2021

Loading thumbnail…

Loading and parsing csv data

This example demonstrates how to load and parse CSV data from a remote URL using D3.js version 7. The page displays no visual output, instead showing the parsed data in the browser’s console. It uses the `fetch` API to retrieve the text from a gist-hosted colors.csv file, then passes that response to `d3.csv`, which parses the comma-separated values into an array of objects. The resulting dataset is logged to the console for inspection, illustrating the basic data-loading workflow without any chart or rendering.

Jun 13, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a single circle that follows the mouse cursor across an SVG canvas. The circle’s position is updated live based on pointer movement, with its center coordinates directly mapped from the browser’s clientX and clientY events. Built with React and D3 v5, the code uses React’s useState and useCallback hooks to manage the mouse position state, while rendering the circle as a SVG <circle> element. The interaction demonstrates a simple, responsive data-binding pattern between user input and a visual element.

Jun 13, 2021

Loading thumbnail…

smiley part 2

This example renders a grid of 50 randomly generated smiley faces using React and SVG. Each face is composed of separate components for the background circle, eyes, and mouth, assembled within a FaceContainer that handles SVG coordinate translation. The mouth is drawn using d3's arc generator, while eye and mouth dimensions vary randomly between faces, creating a diverse collection of expressions.

Jun 13, 2021

Loading thumbnail…

Fork of HTML Starter

A grid of fifty randomly generated smiley faces fills the screen, each rendered as a separate SVG using React components. The faces vary in eye radius, mouth width, and mouth radius due to Math.random() values passed as props. The code uses React 17 and D3 v7, specifically the d3.arc() API to construct the mouth path, while reusable components like FaceContainer, BackgroundCircle, Eyes, and Mouth structure the visualization. All faces share the same dimensions and center coordinates, creating a repetitive, playful pattern.

Jun 13, 2021