indranil-sri

@indranil-sri·5 public vizzes

Loading Data with react & D3

This example shows a horizontal bar chart of United Nations population data for 2019, displaying the ten most populous countries. Built with React and D3 v7, it renders SVG bar marks scaled by population along the x-axis, with country labels on the y-axis. The chart loads CSV data asynchronously using D3's `csv` function inside a custom React hook, then constructs scales with `d3.scaleBand` and `d3.scaleLinear`. Reusable axis components generate tick marks and labels, while the bars are drawn as SVG rectangles with a teal fill.

Nov 11, 2021

Loading thumbnail…

vega-light

This example uses Vega-Lite’s JavaScript API to render a stacked bar chart of global religious populations by country, sourced from a CSV file. The visualization sorts countries in descending order and encodes religion with color, with tooltips for each segment. It integrates React, Vega, and Vega-Lite through the `vega-lite-api`, and applies custom axis and label styling from a shared config. The chart is rendered as SVG, fitting the full browser window.

Nov 10, 2021

Loading thumbnail…

CSV parser

This example demonstrates how to load and parse a CSV file containing CSS named colors using D3 v7. It fetches the remote dataset with the `d3.csv` method, which automatically parses the CSV text into an array of JavaScript objects, and then logs the result to the browser console. The code also includes commented-out alternatives using the Fetch API with `d3.csvParse`, as well as an async/await approach. The page is a minimal HTML document that loads D3 from a CDN and runs entirely in plain JavaScript.

Nov 8, 2021

Loading thumbnail…

mouse_follower

This example demonstrates a yellow circle that follows the mouse cursor as it moves over an SVG canvas. The visualization uses React hooks, specifically `useState` and `useCallback`, to track the cursor’s `clientX` and `clientY` coordinates. An `onMouseMove` event handler updates the circle’s center position in real time. The rendering relies on React’s declarative JSX, with no D3 bindings, and the SVG is sized at 960 by 500 pixels, matching the viewport dimensions.

Nov 8, 2021

Loading thumbnail…

Smile part 1

This example displays a smiling face consisting of a yellow circular background with a thick black outline, two black circular eyes, and a black arc-shaped mouth. The SVG is rendered using React, with each component defined as a separate JavaScript component, such as the `BgCircle` for the face. The mouth is drawn using D3’s `arc` API, which generates a path with specified inner and outer radii and angular ranges. The layout uses fixed dimensions and positions relative to the center.

Nov 8, 2021