R

Ryan Offstein

@rkohub·22 public vizzes

Loading thumbnail…

Food Nutrition Feedback Bigger Images

This interactive scatterplot, built with React and D3 v7, visualizes the nutritional profiles of foods from the USDA Foundation Foods dataset. Users select which nutrients to plot on the x-axis, y-axis, and as the circle radius; a log or linear scale is available for both axes. The visualization animates point positions when the nutrient selection changes. An optional feature fetches food images from the Wikipedia API to display as point patterns, with a categorized color legend identifying food groups.

Loading thumbnail…

Food Nutrition Feedback

This interactive visualization maps nutritional content across a variety of foods, allowing users to compare two nutrients on the x- and y-axes and optionally encode a third nutrient as bubble size. Built with React and D3.js, it plots data from the Foundation Foods dataset, using either a linear or logarithmic scale. The visualization can optionally render food images from Wikipedia as point markers, and includes hover tooltips to identify specific foods.

Loading thumbnail…

Food Nutrition Polishing

An interactive scatter plot visualizes the nutritional content of foods from the USDA Foundation Foods dataset, plotting two selectable nutrients along the x- and y-axes with a log or linear scale. Circle size encodes a third nutrient, and optional Wikipedia thumbnails replace the circles as image patterns. The React app uses D3 scales, axes, and tooltip transitions, with dropdown menus and toggles for scale type, nutrient selection, images, and legend visibility.

Loading thumbnail…

Week 9 Food Interaction

This interactive scatterplot visualizes nutrient compositions of foods from the USDA Foundation Foods dataset. Users can select which nutrients appear on the x- and y-axes, toggle between linear and logarithmic scales, and optionally map a third nutrient to point radius. The visualization uses D3 v7 scales and axes within a React application, with support for fetching Wikipedia thumbnail images to display as point fills. Animated transitions update the plot when selections change, and a tooltip provides detailed food descriptions and category information.

Loading thumbnail…

Food Color Categories

This interactive scatter plot, built with React and D3, visualizes the nutritional profiles of foods from the USDA FoundationFoods dataset. Users can select nutrients for the x- and y-axes, toggle between logarithmic and linear scales, and optionally map point size to a chosen nutrient. The visualization uses D3's `scaleLog` and `scaleLinear` for axes, and color-codes points by food category. Optionally, it can fetch food images from Wikipedia via a web API and use them as point patterns within the SVG.

Loading thumbnail…

Food Images.

This interactive scatterplot maps nutritional data for over a hundred common foods, plotting nutrients like protein and carbohydrates on logarithmic or linear scales. Users can choose which nutrients appear on the x-axis, y-axis, and determine point size, with a toggle to replace colored circles with Wikipedia thumbnail images fetched via the MediaWiki API. Built with React and D3 v7, it uses `scaleLog`, `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` to render axes and points, with data sourced from the USDA Foundation Foods dataset.

Loading thumbnail…

Fork of Scatter Plot with Color

This example shows a scatter plot of the Iris dataset, mapping sepal length on the x-axis and petal length on the y-axis. Each point is colored by species using a categorical scale, with a color legend identifying setosa, versicolor, and virginica. The visualization uses D3.js APIs including `scaleLinear` for axes, `scaleOrdinal` with `schemeCategory10` for colors, and `axisLeft`/`axisBottom` for rendering axes. Data is loaded from a CSV file and parsed with `csvParse`.

Loading thumbnail…

Food Scatter Plot with React & D3

This scatter plot displays the relationship between carbohydrate and protein content in various foods, with both axes using a logarithmic scale. The data comes from the USDA Foundation Foods dataset, which is loaded and formatted in App.js before being passed to the visualization. The plot is rendered by a custom viz.js component that uses D3's scaleLog, axisBottom, and axisLeft APIs to construct the chart within a React application. Each food item is represented as a steelblue circle, with the chart axes labeled to identify the nutrient values.

Loading thumbnail…

Food Project work

This example displays a scatterplot of food items from a USDA Foundation Foods dataset, comparing carbohydrate content on the x-axis against protein on the y-axis. The visualization uses logarithmic scales to accommodate the wide range of values across foods like hummus, black beans, and peanut butter. Built with React and D3 v7, the code handles data filtering and axis rendering through the `scaleLog`, `axisBottom`, and `axisLeft` APIs. Circles are positioned using the `selectAll` join pattern within the `viz.js` module, with labels and tick styling configured through attributes.

Loading thumbnail…

Simple Foods

This interactive scatterplot, built with React and D3 v7, visualizes the nutritional composition of everyday foods from the USDA Foundation Foods dataset. Users can select which nutrients to plot on the x- and y-axes, adjust the point radius based on a third nutrient, and switch between linear and logarithmic scales. The visualization uses D3 scales, axes, and SVG circles, with tooltips revealing the specific food item and its nutrient values.

Loading thumbnail…

More Food

This interactive scatterplot visualizes the nutritional composition of foods from the USDA Foundation Foods dataset, letting users compare nutrient levels across three axes. Each circle represents a food item, positioned by two selectable nutrients on the x and y axes, with circle size encoding a third nutrient. Users can switch between log and linear scales via dropdown menus. The visualization uses React for state management and rendering, D3 v7’s `scaleLinear`, `scaleLog`, `axisBottom`, and `axisLeft` for scales and axes, with hover tooltips showing food descriptions.

Loading thumbnail…

Playing with Foood

This interactive scatterplot displays the nutritional composition of foods from the USDA’s Foundation Foods dataset. Users can independently map select nutrients to the x-axis, y-axis, and circle radius, with a toggle for logarithmic or linear scaling on both axes. Built with React and D3.js (v7), the visualization uses `scaleLog` and `scaleLinear` for axes, `axisBottom` and `axisLeft` for ticks, and `extent` to compute domains. Hovering over a circle reveals the food’s description via a tooltip.

Loading thumbnail…

Fork of Food Scatter Plot with React & D3

This example plots foods from a USDA Foundation Foods dataset on a log-log scatter plot, comparing carbohydrate and protein content in grams. The React app loads the data with d3.json, then formats nutrient amounts before passing them to a reusable D3 visualization function. The viz module applies d3.scaleLog for both axes, draws axes with d3.axisBottom and d3.axisLeft, and renders food items as steelblue circles. The chart filters out non-positive nutrient values to accommodate the logarithmic scale.

Loading thumbnail…

Working with food 2

This visualization displays nutrient data for various foods on a logarithmic scatter plot from the US Department of Agriculture's FoodData Central database. It plots the carbohydrate content against protein content for items like hummus and grape tomatoes. The implementation uses React with D3.js v7, employing `scaleLog`, `axisBottom`, and `axisLeft` APIs to render the axes. The `viz` function filters data points to those with positive values for the logarithmic scale, then draws circles with `join('circle')` to represent each food item.

Loading thumbnail…

Fork of Basic Scatter Plot with React & D3

A React and D3 scatter plot visualizes hospital readmission metrics across U.S. states, comparing the number of hospitals performing worse versus better than the national average for each measure. The code loads CSV data, converts non-numeric values to NaN, and filters out invalid points before rendering circles with d3.scaleLinear. The `viz` function uses `selectAll` and `data().join()` to bind points, with padding applied to the x and y axes. The dataset comes from CMS hospital readmission rates per state.

Loading thumbnail…

Hospital Readmission Rates

This visualization displays hospital readmission rates across U.S. states, comparing each state’s hospital performance to national averages for various conditions like heart failure and pneumonia. The data, sourced from CMS, is loaded via `fetch` and parsed with `csvParse`. The view renders the raw parsed data as JSON text using D3’s `select` and `join` methods, with non-applicable values converted to NaN. It provides a direct, unprocessed look at the dataset’s structure and numeric fields.

Loading thumbnail…

Food Nutrience

This interactive visualization explores the nutritional composition of a curated selection of foods from the USDA FoodData Central dataset. It reads a local `data.json` file containing food items with their associated nutrient values (such as vitamins, fatty acids, and minerals) and uses d3’s `select` and `join` operations to render the raw data as a formatted JSON structure in a `<pre>` element. The visualization serves as a debugging and exploration tool, displaying the exact food and nutrient records loaded from the source, highlighting the distribution of analytical data points, medians, and amounts for each nutrient. The interface is minimal, with a simple body layout and a state-managed loading process that fetches and displays the data upon initialization.

Loading thumbnail…

Nutrition & Health Outcomes

This visualization displays the nutritional composition of foundation foods, detailing specific vitamins, fatty acids, and minerals for each food item. The interface shows raw JSON data from the `data.json` file in a structured pre-formatted text block. Using D3 v7, the code employs `select` and `join` operations to render the data container, while fetching the dataset asynchronously via `fetch()` and parsing it with `csvParse()` to populate the visualization state.

Loading thumbnail…

Mental Health in Tech

This visualization displays survey data on mental health attitudes and disorders in the tech workplace. It shows each participant’s demographic information and answers to questions about treatment, workplace support, and consequences. The code loads the CSV file using `d3.csvParse` and converts the Age field to numeric values. Data is rendered as raw JSON text in a `<pre>` element, managed through a simple state system with custom `viz` and `setState` functions.

Loading thumbnail…

Fork of Circles with D3

This example renders a fixed composition of overlapping circles and rectangles on a full-screen SVG canvas. The visualization displays fourteen geometric shapes, each defined with explicit x, y, dimensions, color, and shape type in a static array, using a yellow-green background and semi-transparent fills. Using d3.select and data joins, the code filters the dataset by shape type and applies circle or rect attributes, such as cx, cy, r, width, and height, to draw the mixed shapes via D3 v7's selection methods.

Loading thumbnail…

Fork of Circles with D3

Seven semi-transparent circles in vivid colors, such as pink, purple, and green, are positioned at fixed coordinates on a light gray background. The visualization uses D3.js v7 to render an SVG canvas that fills its container, with the `select` API joining circle elements to a static dataset containing x, y, radius, and fill properties. The circles are drawn with an opacity of 0.7, and the background color is configurable through the `viz` function’s options.

Loading thumbnail…

Fork of Blank Slate with Hot Reloading

This example creates a minimal blank slate visualization with a single circle positioned at fixed coordinates. It demonstrates a live-updating D3.js setup where the SVG canvas resizes to its container and renders one data point. The code uses D3’s `select`, `selectAll` with data joins, and `join` to manage the SVG and circle elements, with hot reloading enabled for rapid development iteration.