Tejashree Renukdas

@TejashreeG·3 public vizzes

Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing a CSV file containing CSS named colors. It displays basic statistics about the dataset, including its size in kilobytes, the number of rows, and the number of columns. The visualization uses D3.js version 5, specifically the `d3.csv` method to fetch and parse the data from a remote URL. The parsed data is then formatted using `d3.csvFormat` to calculate the file size before presenting the results as large text within an HTML page.

Oct 8, 2021

Loading thumbnail…

Mouse move

A yellow circle follows the cursor across a blank SVG canvas, updating its position in real time as the mouse moves. The visualization demonstrates event-driven interaction in React, using the `useState` hook to track mouse coordinates and `onMouseMove` to capture pointer movement. The circle’s center (`cx`, `cy`) is bound to the state, and React re-renders the SVG element on each mouse event. The example relies on React’s declarative rendering, with the SVG viewport set to 960 by 500 pixels and a fixed circle radius of 30.

Oct 8, 2021

Loading thumbnail…

Fork of Smiley Face Part II

A dynamic smiley face fills the browser window, rendered as a single SVG using React. The face’s yellow circle, black stroke, two eyes, and an arc-based mouth are drawn with React elements, while D3’s `arc` generator computes the mouth’s curved path. Coordinates adapt to `window.innerWidth` and `innerHeight`, centering the face and scaling its radius based on viewport height. The code combines React’s component model with D3’s geometry helpers within a plain SVG output.

Sep 29, 2021