Manishankar Vakta

@manishankarvakta·3 public vizzes

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3.js version 5, displaying summary statistics about the CSS Named Colors dataset. It shows the file size in kilobytes, the number of rows, and the count of columns in a large text display. The code fetches a remote CSV file using the `d3.csv` function, which returns a promise, then formats the loaded data with `d3.csvFormat` to compute its length. The visualization communicates the data structure through concise textual output rather than graphical elements.

Nov 15, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example creates a simple smiley face using React and SVG, where a single yellow circle is drawn on a black background. The code defines a 960 by 500 pixel canvas and renders a circle element that follows the mouse movement via React's `useState` and `useCallback`. The implementation leverages ReactDOM to render the SVG directly into the HTML, with the circle's position updated on every mouse move event. No external data source is used; the visualization relies solely on user interaction.

Nov 15, 2021

Loading thumbnail…

Fork of Hello HTML

This example renders a grid of 18 procedurally generated cartoon faces using React and D3. Each face is composed of SVG circles and an arc-based mouth, with randomized stroke widths, eye offsets, eye radii, and mouth dimensions. The code uses `d3.range` to create the array of faces and `d3.arc` to construct the mouth path. React components (`Face`, `Eyes`, `Mouth`, `BackgroundCircle`, `FaceContainer`) structure the SVG output, and the app is mounted via `ReactDOM.render`. The result is a playful, varied collection of simple smiley faces.

Nov 11, 2021