varun-j312

@varun-j312·5 public vizzes

Loading data with React and D3

A donut chart of CSS named colors loads and renders as a circular spectrum of 148 colored arcs. The example demonstrates asynchronous data loading with React hooks and D3. It uses `useState` and `useEffect` to fetch a CSV file via `d3.csv`, then maps each row to an arc via `d3.pie` and `d3.arc`. Each path is filled with the row’s ’RGB hex value’ and rendered in an SVG. React 17 manages the component lifecycle while D3 v6 handles the data parsing and geometry.

May 21, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between car origin and horsepower using a scatter plot of individual vehicle names as tooltips. It leverages the Vega-Lite API to declaratively define the chart, with D3.js handling CSV data loading from an online auto-mpg dataset. The visualization uses semi-transparent point marks with custom configuration for dark text and light gridlines, and it automatically sizes to fit the browser window. The code integrates Vega, Vega-Lite, and the Vega-Lite API library, with tooltip functionality provided by Vega Tooltip.

May 20, 2021

Loading thumbnail…

Fork of Hello HTML

This example displays a text summary describing the size and structure of a CSV dataset, rendering the file size in kilobytes, the row count, and the column count in large, bold typography. It fetches the `cssNamedColors.csv` dataset from a remote GitHub gist using D3.js’s `d3.csv` method, then formats the results via `d3.csvFormat` to calculate the byte size. The visualization demonstrates a minimal workflow for loading remote tabular data and presenting its basic dimensions without any charts or graphics.

May 19, 2021

Loading thumbnail…

Mouse follower

A single circle follows the mouse cursor across an SVG canvas. The React component tracks pointer coordinates via an `onMouseMove` event handler, updating the circle's `cx` and `cy` attributes through `useState` and `useCallback`. The visualization demonstrates reactive state updates in a React-D3 integration, rendering with SVG elements and default black fill without additional styling.

May 19, 2021

Loading thumbnail…

Fork of Hello HTML

A cartoon smiley face is drawn as a yellow circle with black outline, two eyes, and a mouth. The face is assembled from modular React components, including `BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`, which renders an SVG. The mouth path is generated using `d3.arc` with specified inner and outer radii and start/end angles. The example demonstrates composing reusable SVG shapes with React and D3, using props to control geometry like radius, stroke width, and offsets.

May 19, 2021