Juan Raul de la Guardia

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, which includes sepal and petal measurements for three flower species. Users select which attribute to display on the X and Y axes via React Dropdown menus, and the plot updates accordingly. Built with React and D3 v5, it uses `scaleLinear` for axes, SVG `<circle>` elements for data points, and `csv()` to load the data. The axis ticks and labels are custom React components, with hover tooltips showing values.

Aug 18, 2024

Fork of Stylized Scatter Plot

This interactive visualization displays Fisher's Iris flower dataset as a scatter plot, allowing users to select which flower measurements (sepal length, sepal width, petal length, or petal width) appear on the x and y axes via dropdown menus. Each flower is rendered as an SVG circle, with D3 scaling below the threshold. Built with React and D3 v5, the code utilizes D3’s `scaleLinear`, `extent`, and `csv` functions for data loading and scaling, while custom `AxisBottom`, `AxisLeft`, and `Marks` components handle chart rendering.

Aug 18, 2024

Fork of Rendering Data with React & D3

This example shows a temperature-over-time chart for San Francisco, using a D3 CSV loader to fetch weekly data and rendering it as an SVG line graph with circular data points. React handles the component structure, while D3’s `scaleTime`, `scaleLinear`, `extent`, and `line` with `curveNatural` compute scales and draw the smooth path. The code also builds custom axes with `ticks()` and uses `timeFormat` for weekday labels on the x-axis. Native SVG `<title>` elements provide tooltips on hover.

Fork of Loading and Parsing CSV Data

This visualization demonstrates the loading and parsing of a CSV file containing CSS named colors, displaying the data’s size in kilobytes, row count, and column count in a large text block. It uses the `d3.csv` function to fetch the remote CSV and parse it into a data array, then calls `d3.csvFormat` to measure the serialized size. The code also includes commented-out alternatives using the Fetch API with `async`/`await` and `d3.csvParse`, highlighting different methods for handling asynchronous data loading.

Fork of Smiley Face Part II

A single yellow circle follows the mouse cursor across a full-window SVG canvas. The circle is drawn with fixed radius 30, and its position updates in response to mouse movement events. The React application uses `useState` and `useCallback` to track cursor coordinates and condition the circle's `cx` and `cy` attributes. The code creates an interactive SVG visualization where a simple shape directly mirrors the pointer's location.

Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing CSS Named Colors CSV data from a GitHub gist. It fetches the remote CSV file and displays the dataset size, row count, and column count in large text. The solution uses `d3.csv` from D3 v5 to parse the data, while commented alternatives show the same workflow with `fetch`, async/await, and `d3.csvParse`. The block also includes earlier attempts using nested promises. The rendering is simple HTML text with a `<pre>` element, styled with CSS.

Fork of Smiley Face Part V

A grid of 18 randomly generated smiley faces fills the viewport, each with varying eye positions, radii, mouth sizes, and stroke widths. Built as a React component composition, the visualization splits reusable subcomponents across ES6 modules, using React Fragments to group the eyes. The code leverages d3’s `arc` generator for the mouths and `range` for array creation, with all faces rendered as SVG within a single container.

Fork of Smiley Face Part IV

A React component renders a smiling face as an SVG, composed of a yellow circle with a black outline, two black eyes, and a D3-generated arc for the mouth. The code imports the D3 `arc` API to construct the mouth's path, while the face elements are positioned using SVG transforms and coordinate offsets. All shapes are drawn with hard-coded dimensions, and the `BackgroundCircle`, `Eyes`, and `Mouth` components are combined inside a single scalable SVG viewport.

Fork of Smiley Face Part III

This example shows a classic smiley face drawn with SVG, featuring a yellow circular head, black stroke, two eyes, and a curved mouth. The visualization is built using React components that render SVG elements, while D3’s `arc` generator handles the mouth path. Static values define the face’s dimensions and positions. The code demonstrates integrating React for component structure and D3 for geometric calculations, all rendered through a standard SVG canvas.

Fork of Smiley Face Part II

A React and D3 smiley face fills the browser window as a yellow circle with two black eyes and a curved mouth drawn from the D3 arc generator. The app uses React 16.9 to render SVG elements, with the face centered dynamically based on window dimensions via `window.innerWidth` and `window.innerHeight`. D3 v5’s `arc()` defines the mouth path, while the face and eyes are plain SVG circles with fixed offsets and radii. The mouth radius, eye positions, and stroke width are all hard-coded constants, presenting a static face with no interactivity. The entire SVG is mounted into the DOM via `ReactDOM.render`.

Fork of Let's Make a Face Part I

This example renders a smiley face as a React component using SVG. It shows a yellow circle with a black stroke for the face, plus two smaller circles for eyes positioned symmetrically around the center. The code defines constants for width, height, center coordinates, eye offsets, and eye radius, then uses ReactDOM to mount the SVG into the DOM. The visualization demonstrates a basic, static composition with React 16.9.0 and inline SVG elements.

Fork of Smiley Face Part II

This example renders a full-screen smiley face using React and SVG, where the face scales dynamically to fit the browser window. The code defines circle elements for the face, eyes, and mouth, positioning them relative to the center using offsets and computed radii. It uses React 16.9 to render the component tree into the DOM, with all SVG shapes drawn via JSX and styled with fill and stroke attributes. The visualization adapts its size based on `window.innerWidth` and `window.innerHeight`.