M

mauricio-acosta-reyes

@mauricio-acosta-reyes·30 public vizzes

Loading thumbnail…

Final Project

This final project presents a quality assurance dashboard for a proton therapy center, displaying the status of multiple beam parameters across three large donut charts. Each ring segment represents a specific measurement spot or energy level, with parameter names labeled along curved paths. The visualization is built with React and D3 v6, using `d3.pie` and `d3.arc` to generate the SVG donut segments, while custom path generators position the labels. Data is loaded from a CSV file containing spot-by-spot measurement values, rendered as green arcs.

Loading thumbnail…

another trial

This example demonstrates a grid of D3.js circles arranged along linear X and Y scales, alongside static circular SVG shapes. It uses React for DOM management and D3 version 6 to generate circles programmatically via `d3.range` and the `select` API. The visualization also constructs pie chart arc data using `d3.pie` on a custom `pieData` array, though the final rendering of these arcs is not completed in the provided code. The SVG canvas is fixed at 960 by 500 pixels, with blue filled circles as the primary geometric elements.

Loading thumbnail…

one more time

This example shows a smiley face built from a radial pie chart, where the face’s features are composed of labeled arcs. It uses React components to assemble the face from separate parts like the background circle, eyes, and mouth, while the main radial chart is rendered with SVG paths generated by d3.pie and d3.arc. The pie’s data comes from an array of values, and each arc is filled with a categorical color from d3.scaleOrdinal, with labels placed at the arc centroids. The visualization demonstrates a playful blend of charting and character design, with the face centered in a fixed SVG canvas.

Loading thumbnail…

Fork of Line Plot with menu

This interactive line chart displays price trends across months, letting users switch between two price columns via a dropdown menu. The visualization redraws the line with a smooth basis curve and animated transition whenever a new column is selected. Built with D3 v5, it uses `scaleTime` and `scaleLinear` for axes, `axisBottom` and `axisLeft` for tick marks, and a custom `dropdownMenu` component to handle user input. The data is loaded from an external CSV file, with month values parsed as dates and price strings converted to numbers.

Loading thumbnail…

Untitled

This example shows a pie chart of browser usage statistics for January 2017, where each slice is colored and labeled by browser name. The chart is built using React and D3.js v4, with the `d3.pie()` layout computing arc angles from the `d_Sigma_X` field of the provided `spots.csv` data. The SVG is rendered via `d3.arc()` paths for the slices and labels, with the chart centered in the viewport. A legend-like title is added as a text element.

Loading thumbnail…

It's Coming together

A radial chart renders proton therapy quality assurance data as a colorful donut, with each of 55 segments representing a distinct measurement parameter. Built with React and rendered as SVG, it uses D3's `pie` and `arc` functions to compute segment geometry and `scaleOrdinal` with `schemeCategory10` for color mapping. The chart is composed through a custom face-like layout, combining pie chart segments with circular background elements.

Loading thumbnail…

Fork of Fork trying to get the donut plot IPIPIPI

This visualization displays a proton daily QA report as a donut chart with multiple labeled segments. Each arc represents a measurement parameter such as PositionX, SigmaY, or Intensity. The SVG rendering uses React components with D3’s `pie` and `arc` generators to create the donut layout, while the `FaceContainer` organizes the overall composition. A background area path and tab-like header frame the chart.

Loading thumbnail…

cleaned up trial

A radial donut chart visualizes 53 beam parameters on a circular layout, with each parameter represented as an equal segment in a donut ring surrounding a yellow smiley face. The SVG rendering combines React components for modular structure and D3 v6 APIs for arc generation and pie layout. The face component draws circles for eyes and a mouth arc, while the surrounding donut uses d3.arc() and d3.pie() to encode categorical data from the parameters array.

Loading thumbnail…

Daily QA IP

A radial chart displays daily QA beam parameters as seven equal arc segments, each representing a measurement category such as Position X, Sigma Y, or Intensity. The visualization uses React to render an SVG composed of concentric circles and pie-slice paths, with D3’s `pie` and `arc` generators computing the angular geometry. All segments are currently filled green, with the source data stored in a TSV file listing each parameter’s value. The code defines custom radii for axis labels, data rings, and outer bounds, and draws separating radial lines using D3’s `range`.

Loading thumbnail…

Fork trying to get the donut plot

This interactive proton therapy dashboard displays daily quality-assurance metrics across multiple treatment rooms, with each metrics value shown as a colored donut chart segment. The visualization combines a React-based smiley face component with a D3 pie chart, rendered as SVG elements. Each donut segment represents one of 54 machine parameters (position, sigma, skewness, intensity), with green fill indicating within-tolerance readings. The dashboard uses D3's arc and pie generators to construct the donut plots, while React components manage the circular layout, including background circles and daily single-room displays.

Loading thumbnail…

Untitled

This example compares five React implementations of a pie chart, each rendering the same dataset of five random values. The charts display SVG arcs with value labels, and a "Transform" button triggers new data. Implementations include plain SVG elements, React hooks, a React class component, and two animated versions: one using D3 transitions with `attrTween` and interpolation, and another using React Spring's `useSpring` for animation. All use D3's `pie` and `arc` generators to compute geometry and `schemeCategory10` for colors.

Loading thumbnail…

Fork of May 3

This example shows a donut chart displaying population data for different age groups, with each segment labeled by its corresponding age. The visualization uses D3.js v4 with the `d3.arc`, `d3.pie`, and `d3.requestTsv` APIs to load and process the TSV data. It renders the chart on an HTML5 Canvas element, drawing each arc segment in a distinct color and placing text labels at the centroid of each arc using the Canvas `fillText` method. The chart is centered within a 960×500 canvas.

Loading thumbnail…

Fork of Smiley Face Part V--- lets do it

A modular React component renders a smiley face as an SVG graphic, composed of a yellow circle, two eyes, and an arc-shaped mouth. The code splits UI elements into separate files—BackgroundCircle, Eyes, and Mouth—using ES6 modules and React Fragments. D3’s arc generator creates the mouth path, while ReactDOM mounts the SVG onto the page with a fixed viewport. The face is positioned via a translation and uses hardcoded dimensions for its features.

Loading thumbnail…

Fork of Smiley Face Part III - yess

A smiley face rendered as a yellow circle with eyes and a mouth, built using React and D3. The code creates an SVG with a central group transformed to the center of the 960×500 viewport, drawing the face with circles and a D3 arc for the mouth. It uses ReactDOM to render the component and D3’s `arc` API to define the mouth’s inner and outer radii and angular range, illustrating how React manages SVG elements while D3 handles geometric path calculations.

Loading thumbnail…

Fork of Smiley Face Part II_jkhkljh

This example shows a simple, full-window smiley face rendered as a scalable vector graphic. The face is built from a large yellow circle with a black outline, two smaller black circles for eyes, and a mouth implied through a missing arc, all composed using React’s declarative syntax. The code uses React and ReactDOM to create an SVG element, with dimensions and positions computed from the browser window’s `innerWidth` and `innerHeight`. The rendering relies on SVG’s circle elements in a translated coordinate system, and the approach is purely programmatic, using no external data source.

Loading thumbnail…

Smiley Tutorial

A grid of 18 smiley faces renders in SVG via React, each face composed of a yellow circle, two eyes, and an arc-based mouth. The faces are generated by mapping over a `range` from D3, with randomized eye radii creating slight variation per face. React components encapsulate facial features, while D3’s `arc` generator constructs the mouth path. The SVG container centers each face using a translation transform, and the `index.html` loads React and D3 from CDN before mounting the app to the root element.

Loading thumbnail…

Fork of DailyQA_may2

This example shows a static donut chart displaying five categorical values as colored slices with black outlines and partial opacity. The chart is rendered in an SVG generated with D3 v6, using `d3.pie()` and `d3.arc()` to compute slice geometry and `d3.scaleOrdinal()` for the categorical color scale. Dummy data is hardcoded in the script, and the visualization is centered within a fixed 450×450 pixel canvas. The code forks from a DailyQA project and includes no interactivity or animation.

Loading thumbnail…

DailyQA_may2

This visualization presents a radial, pie-chart-style layout for displaying daily quality assurance (QA) parameters in a medical or imaging context. It shows seven data categories—Position X/Y, Sigma X/Y, Skewness X/Y, and Intensity—as equal-sized arc segments arranged around a central point. The code uses React for rendering the SVG, D3’s `pie()` and `arc()` generators to compute and draw the arcs, and `d3.range` to create separator lines between segments. The data is loaded from a TSV file (pie_setup.tsv) containing parameter names and values.

Loading thumbnail…

DailyQA_version3

This visualization displays daily quality assurance measurements for proton therapy spots, comparing actual recorded values against expected baselines across multiple sessions. The interface uses a diverging color scale from red through yellow to green, applied to deviations in spot position, sigma values, skewness, and intensity. Data is loaded from two CSV files (spots.csv and spots_expected.csv) using d3.csv, and d3.scaleLinear maps the deviation ranges to the color gradients, allowing rapid identification of outliers in the treatment delivery parameters.

Loading thumbnail…

Untitled

This example shows a donut chart that distributes categorical data into seven colored arcs, with each slice labeled by its corresponding category name. It renders directly to a Canvas element using the `d3.arc` and `d3.pie` APIs from D3 v4, with data loaded from an external TSV file via `d3.requestTsv`. The chart translates the Canvas context to center it, fills each arc with a distinct color from a predefined palette, applies white stroke separators, and places labels along the inner ring using `labelArc.centroid`.

Loading thumbnail…

Bare Bones

This example demonstrates a bare minimum React and D3 setup, rendering an arc shape using the `d3.arc()` API from D3 v6. The page loads React 17 and ReactDOM via CDN, with D3 loaded separately, and mounts a single component into the `#root` div. It shows how to combine React’s declarative rendering with D3’s geometry helpers, while the CSS removes default margins and hides overflow for a full-viewport display. The visualization itself is minimal, focusing on the integration of these libraries rather than complex data or interaction.

Loading thumbnail…

daily_qa_trial

This radial bar chart displays wind speed and direction data from a CSV file, with eight color-coded speed bins arranged around a compass. D3.js (v6) and the custom `d3-scale-radial.js` library convert linear scales to radial distances for the stacked bars. The chart uses `d3.stack()`, `d3.arc()`, and `d3.scaleBand()` to render the segments, with angular labels and concentric circular gridlines showing frequency values. A legend identifies the speed ranges, and the SVG output includes accessible text elements.

Loading thumbnail…

Fork of Rose Wind Plot

A radial stacked bar chart displays wind speed distribution across compass directions, with each direction divided into wind speed bins colored from blue to red. The circular layout uses a custom `scaleRadial` scale built on `d3-scale` to map data values to radial distances. The `d3.csv` function loads the dataset, `d3.stack()` layers the speed categories, and `d3.arc()` renders the annular segments. Concentric dashed circles show frequency values, while angled labels and a legend identify directions and speed ranges. The SVG output is generated entirely through D3 v6 APIs.

Loading thumbnail…

Loading data with React & d3

This example demonstrates how to load external data in a React application using D3 utilities and manage the resulting state with React hooks. The app fetches a CSV file of CSS named colors from a GitHub gist using `d3.csv`, stores the parsed data via `useState`, and displays summary statistics with `d3.csvFormat`. While loading, it renders “Loading…” before showing the file size, row count, and column count. The visualization uses SVG rendering and combines React’s `useEffect` for data fetching with D3’s parsing capabilities.

Loading thumbnail…

Loading CSV

This example demonstrates the basic mechanics of loading and parsing a CSV file with D3.js, displaying the resulting dataset’s size, row count, and column count as large text. The code uses `d3.csv` to fetch the data from a GitHub gist containing CSS named colors, then formats the metrics with `d3.csvFormat`. It also includes commented-out alternative code using the Fetch API and `d3.csvParse` with `async`/`await`, showing an equivalent approach for handling the same data.

Loading thumbnail…

mouse follower

A yellow circle follows the mouse cursor across a dark SVG canvas. The visualization uses React with hooks (`useState`, `useCallback`) to track pointer coordinates from an `onMouseMove` event on an SVG element, updating the circle’s `cx` and `cy` attributes in real time. The circle starts at the viewport’s center and moves smoothly, demonstrating a simple interactive pattern built with React 16.9 and ReactDOM.

Loading thumbnail…

Smiley Face Part 1

This example shows a grid of 270 small, randomly varied smiley faces generated as React components. Each face uses a yellow background circle, two black eyes, and a mouth drawn as a d3 arc path, with dimensions like eye offset, eye radius, and mouth radius varying per instance. The code combines React elements with d3 v6’s `arc()` generator to create the mouth shape, and renders everything as SVG within a container that translates to the face’s center point. The layout is static, produced from a d3 `range` array with no interactivity.

Loading thumbnail…

Untitled

A radial line chart displays Twitter's closing stock price over a year, with time mapped to angle and price to distance from the center. Monthly tick labels and concentric price rings aid reading, while a blue path animates around the circular layout on load. The visualization uses d3.scaleTime, d3.scaleRadial from a custom d3-scale-radial.js file, and d3.lineRadial, with SVG transitions for drawing the trajectory.

Loading thumbnail…

Tutorial again

This example renders a full-page display of the text “Hello HTML” at a massive font size, with a plain-text aesthetic. It demonstrates the foundational use of HTML, CSS, and JavaScript in a single file. The page uses CSS rules to center the content and set the font size, while JavaScript logs “Hello JavaScript!” to the browser’s developer console. No external libraries are used, serving as a minimal starter template for web-based visualization projects.

Loading thumbnail…

Fork of Psuedo Spider Chart

A pseudo spider chart displays seven concentric circles and radial lines, with a semi-transparent orange polygon connecting eight labeled points. It visualizes a central value of 5 and increasingly larger values up to 45 along the top axis. The SVG rendering uses inline paths and shapes, with labels drawn using the Share Tech font. The chart emphasizes a simple, grid-like structure for reading comparative data points.