Cesar R Castillo

@cesarrac·9 public vizzes

Data with React D3

This example demonstrates how D3 and React can work together to load and summarize external data. It fetches a CSV file of PR boxers using D3’s `csv` method, then displays the dataset’s size in kilobytes, row count, and column count as plain text. The React `useState` and `useEffect` hooks manage the asynchronous data loading, while a custom `buildMessage` function formats the information. The visualization is rendered as an SVG-less `<pre>` element, showing a minimal text-based summary rather than charts.

Jan 15, 2022

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL, displaying the dataset’s size in kilobytes, row count, and column count. Using D3 v5’s `d3.csv` method, it fetches the CSS Named Colors dataset from a GitHub gist, then formats the parsed rows with `d3.csvFormat` to calculate the file size. The result is rendered as text inside an HTML `<pre>` element. Alternate implementations using `fetch` with `async`/`await` and `d3.csvParse` are commented out for comparison.

Jan 15, 2022

Loading thumbnail…

Mouse Follow

A yellow circle follows the mouse cursor across a 960 by 500 SVG canvas, with its center position updating live in response to pointer movement. Built with React, the app uses the `useState` hook to track mouse coordinates from the SVG’s `onMouseMove` event and renders the circle with ReactDOM, which manages the SVG element directly. The example demonstrates a simple interactive animation loop without external data, relying solely on user input.

Jan 15, 2022

Loading thumbnail…

Fetching data

This example demonstrates how to fetch and log a remote CSV file using the browser’s Fetch API. It defines an asynchronous helper function that retrieves text from a given URL, then calls it on a GitHub-hosted dataset of boxers, outputting the raw contents to the console. The visualization is minimal, focusing on the data-fetching step rather than rendering, and uses no external libraries—only plain JavaScript within a single HTML file.

Jan 15, 2022

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3.js starter setup, displaying the text “Hello D3 version 7” centered on a blank page. It uses D3 v7, loaded via a CDN, and imports the `select` function from D3 to target the body element. The page also includes an embedded YouTube video explaining the starter workflow. The rendering relies on standard DOM manipulation through `select('body').text(...)` in the `index.js` file, with minimal CSS styling for centering and large font size.

Jan 15, 2022

Loading thumbnail…

Fork of Smiley Face Part III

A smiling face rendered with React components and SVG, composed of a yellow background circle, two eyes, and a mouth. The code builds the face from modular components, with the mouth shaped using the d3.arc() API via D3 v5, while React manages the component structure and props. The entire face is centered on an SVG canvas using a translation, with dimensions and offsets defined as numeric constants. Each shape is drawn using SVG primitives such as circle and path, illustrating a hybrid approach where D3 handles geometry and React handles state and composition.

Jan 7, 2022

Loading thumbnail…

Fork of Smiley Face Part III

This visualization renders a classic smiley face using React and D3, with a yellow circular head, black stroke outline, two solid black eyes, and a curved mouth drawn as an arc. The SVG is generated declaratively through React’s JSX, while D3’s `arc` helper defines the mouth’s geometry with specified inner/outer radii and angular range. The layout is centered on a 960×500 canvas, with all positions and sizes derived from computed constants rather than hardcoded coordinates.

Jan 7, 2022

Loading thumbnail…

Fork of Let's Make a Face Part I

This example renders a stylized smiley face using React and D3.js version 7, composed of SVG circles and a path. The face features a gradient-filled head with a drop shadow, two eyes with pink offset shadows, and a mouth drawn using a D3 arc generator. The code defines all geometry through hardcoded constants rather than data, with the arc’s inner radius, outer radius, and angle ranges set explicitly to form the smile. The rendering is driven by React’s declarative component model, which outputs the SVG directly.

Jan 6, 2022

Loading thumbnail…

Amazing Hello HTML

This example shows a single SVG circle rendered without any visible text or labels on a blank canvas, set against a full-window hidden-overflow background. The circle uses no positioning attributes, so it defaults to the top-left corner of the 960×540 SVG, appearing as a basic geometric shape. The code uses an inline SVG element directly in HTML, not d3 or other libraries, relying solely on native SVG circle syntax. The page also embeds a YouTube video iframe, though it is not part of the displayed visualization. Rendering is static, with no interaction or animation.

Jan 6, 2022