karishmakaur

@karishmakaur·3 public vizzes

Fork of Smiley Face Part II

A yellow circle follows the mouse cursor across a blank SVG canvas. The visualization uses React with hooks, specifically `useState` and `useCallback`, to track mouse coordinates from an `onMouseMove` event listener on the SVG element. The circle’s center position updates dynamically via React state, rendering through `ReactDOM` in a fixed 960×500 viewport. No external data source is used; the interaction is driven entirely by local pointer events.

Jun 28, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load raw CSV data from a remote URL and log its contents to the browser console. It uses the Fetch API to retrieve the text from a GitHub gist containing named CSS colors, then parses the response asynchronously with `response.text()`. The code defines a `fetchText` helper function that returns the parsed text, which is then logged for inspection. No visualization is rendered; instead, the example focuses purely on the data-loading and parsing workflow before any charting library is applied.

Jun 28, 2021

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019. The visualization orders bars horizontally, with population values extending left to right on a linear scale and country names positioned along a categorical band scale. The React-based interface renders SVG elements through reusable AxisBottom, AxisLeft, and Marks components, which rely on d3 scaleLinear, scaleBand, and format APIs to handle scaling and tick labeling. Population figures are converted from raw CSV values using a row parsing function that multiplies the 2020 estimates by 1000.

Jun 27, 2021