Caro Arriaga

@caroarriaga·5 public vizzes

Fork of Vega-Lite API Template

This example shows a bubble chart of religious demographics by country, using circle size to encode population and color to distinguish religions. The visualization is built with the Vega-Lite API, which is registered with Vega and Vega-Lite libraries, then rendered as an SVG canvas. Data is loaded from a CSV file containing religion statistics by country, fetched via d3.csv. The chart is configured with custom axis styling and tooltip handlers from vega-tooltip, and it dynamically fits its dimensions to the browser window size.

Oct 22, 2022

Loading thumbnail…

Loading Data with React and D3

This example demonstrates how React state can manage data loaded asynchronously with D3 utilities. The app uses `useState`, `useEffect`, and `useCallback` to fetch a CSV of CSS named colors via `d3.csv`, then displays a summary of the dataset as plain text. The message shows the file size in kilobytes, row count, and column count, computed with `d3.csvFormat`. Until the data arrives, the interface shows the word “loading,” illustrating a simple pattern for combining React’s component lifecycle with D3’s data-loading features.

Oct 7, 2022

Loading thumbnail…

Loading and Parsing Data

This example demonstrates how to load and parse a CSV file using D3.js version 7. The visualization displays basic characteristics of the dataset through a large text element, showing the file size in kilobytes, the number of rows, and the number of columns. The code uses `d3.csv()` to fetch and parse a remote CSV file containing CSS named colors from a GitHub gist, then formats the results with `d3.csvFormat()` and `Math.round()` to present concise statistics about the data structure.

Oct 7, 2022

Loading thumbnail…

Mouse Follower

A React application renders an SVG circle that follows the mouse cursor across a 960x500 coordinate space, updating its position in real time. The component uses the `useState` hook to track mouse coordinates and the `useCallback` hook to handle `onMouseMove` events, reading `clientX` and `clientY` from the event object. ReactDOM mounts the component to the DOM, and the circle's `cx` and `cy` attributes are set to the updated position, with a fixed radius of 30 pixels. The circle starts centered at the initial position (480, 250).

Oct 7, 2022

Loading thumbnail…

DS3Viz-SmileyFaceP1

A grid of 18 randomly generated smiley faces fills the screen, each rendered as a yellow circle with black stroke, two eyes, and an arc-based mouth. The example shows how to compose reusable React components to build a data-driven face visualization. It uses D3 v7’s `arc` generator to create the mouth path, while React manages the SVG structure through components like `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth`. Random values for eye offsets, radii, and mouth dimensions vary every face.

Oct 6, 2022