Tushar Dangayach

@rockstartushar·8 public vizzes

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a bar chart with no axes, using population data from the United Nations World Population Prospects 2019. The chart renders with React and D3 v5, where `scaleBand` maps countries to vertical positions and `scaleLinear` maps population values to bar widths. Each bar is drawn as an SVG rectangle within a React component, with data loaded asynchronously via `d3.csv`. The visualization intentionally omits scales, labels, and other chart furniture to present a minimal, data-only view.

Sep 20, 2021

Loading thumbnail…

Mouse Folower

A single yellow circle follows the mouse cursor across an SVG canvas. The visualization demonstrates real-time interaction by updating the circle's position in response to mouse movement events. Built with React, the application uses the `useState` hook to track the current mouse coordinates and `useCallback` to handle the `onMouseMove` event. The circle is rendered through ReactDOM into an SVG element, creating a simple but direct example of state-driven rendering within a web-based data visualization framework.

Sep 20, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote source using D3 v5. It displays the file size in kilobytes, the number of data rows, and the number of columns derived from the CSS Named Colors dataset. The primary implementation uses `d3.csv` with a promise to fetch and parse the data, while commented-out alternatives show `fetch` with `async`/`await` and `d3.csvParse`. A large `pre` element renders the summary statistics as text.

Sep 20, 2021

Loading thumbnail…

Fork of Smiley Face Part VI

The gallery displays a grid of eighteen procedurally generated smiley faces, each with randomized facial features. Built with React components and D3’s arc generator, the code renders SVG circles for the face background and eyes, while the mouth uses `d3.arc` to create a curved path. Each face receives random values for stroke width, eye offset, eye radius, and mouth dimensions, producing varied expressions across the grid.

Sep 20, 2021

Loading thumbnail…

Fork of Smiley Face Part V

This example shows a smiley face constructed from a yellow circle, two eyes, and an arc-shaped mouth, all rendered as SVG elements in a React application. The face’s components are split into separate ES6 modules, demonstrating component reuse and React fragments for grouping. The mouth uses d3’s `arc()` API to define an annular sector, while the circle and eye positions are controlled by constant offsets and radii. D3 v5 and React 16.9 are used, with ReactDOM handling the SVG rendering.

Sep 20, 2021

Loading thumbnail…

Fork of Smiley Face Part III

This example shows a large yellow smiley face rendered as an SVG, with two smaller decorative circles positioned above it. The face is centered on the screen and includes eyes and a mouth, all outlined in black with a thick stroke. The visualization uses React to structure the SVG elements, while d3’s `arc` function generates the mouth path. The layout adapts to the browser window size, and the rendering is entirely SVG-based.

Sep 20, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

A React application renders a yellow smiley face as a scalable vector graphic (SVG) that fills the browser viewport. The face is composed of a large circle for the head, two smaller circles for eyes, and an empty space where a mouth could be added. The code uses ReactDOM to mount the component into the DOM, with dimensions derived from `window.innerWidth` and `window.innerHeight`, positioning elements relative to the center of the screen. A half-finished mouth remains unimplemented, leaving the face incomplete.

Sep 20, 2021

Loading thumbnail…

Smiley Face Part One

This example shows a simple smiley face made from three SVG circles: a large yellow face and two black eyes. The page uses plain SVG elements within an HTML file, with a body margin of zero and hidden overflow to present the drawing cleanly. The SVG canvas is 960 by 500 pixels, and all circles are positioned with explicit coordinates and styled with fill and stroke attributes. No JavaScript libraries or data sources are involved; the rendering relies solely on static SVG markup.

Sep 20, 2021