R

rmgoldberg24

@rmgoldberg24·27 public vizzes

Loading thumbnail…

Interactive Polished Scatterplots with Menus and Color

This interactive scatterplot explores the Iris dataset, displaying four numeric flower attributes and using color to encode species. Users can select which measurements appear on the x- and y-axes via dropdown menus. The visualization features hover interactions that highlight points of a specific species in the legend. Built with React and D3 (d3.v7), it uses `scaleLinear` and `scaleOrdinal` for axes and color, with SVG rendering and custom components for axes, marks, and a color legend.

Loading thumbnail…

Polished Scatterplots with Menus and Color

This interactive scatterplot displays the Iris flower dataset, allowing users to explore relationships between four measurements—sepal and petal length and width—through dropdown menus that control the x and y axes. Species are distinguished by color in a legend. Built with React and D3 v7, the visualization uses `scaleLinear` for axes, `scaleOrdinal` for colors, and SVG rendering for all marks and legends.

Loading thumbnail…

Polished Scatterplots with Menus

This interactive scatterplot explores the classic Iris dataset, allowing users to compare any two measured attributes (petal length, sepal width, etc.) by selecting them from dropdown menus. The axes and labels update dynamically based on the chosen variables, with all data points rendered as SVG circles. Built with React and D3 v7, the visualization uses `scaleLinear` for continuous scaling, `extent` for domain calculation, and custom axis components for ticks and labels. The data loads asynchronously via `csv` from a GitHub gist, with numeric fields parsed on import.

Loading thumbnail…

Scatterplot with Menus

Two dropdown menus control which numeric measurements from the Iris dataset appear on the x- and y-axes of an SVG scatterplot. Built with React and D3 v7, the visualization uses `d3.scaleLinear` to map sepal and petal dimensions to axes, rendering circles with a constant radius. The code constructs reusable `AxisBottom`, `AxisLeft`, and `Marks` components, and updates the plot dynamically through React state when menu selections change. Data is loaded asynchronously via `d3.csv` from Curran’s gist.

Loading thumbnail…

A Menu!

A menu-driven interface built with React and D3 lets a user select a car brand from a dropdown list. The example displays a static set of options (Volvo, Saab, Mercedes, Audi) and, upon selection, prints a confirmation message using React's `useState` hook. The `Dropdown` component, a React JSX element, manages the `<select>` HTML control. The page uses the Poppins font and relies on React and D3 libraries loaded via `unpkg` CDNs, with the React app rendered into a `#root` div.

Loading thumbnail…

React Starter

This example demonstrates a minimal React application that renders a simple "Hi!" message, serving as a template for building React-based data visualizations. The code integrates React 16.9 for component rendering and D3.js v5 for potential data manipulation, both loaded via CDN. A single `App` component produces the text output, which is mounted into the `#root` element using `ReactDOM.render`. The project structure includes an HTML entry point and a separate JavaScript bundle, highlighting how React and D3 can coexist as a foundation for interactive charts.

Loading thumbnail…

Working with Time

This visualization displays temperature readings over time from the Data Canvas Sense Your City dataset, plotting temperature against timestamps. The chart uses a line path rendered with d3.line and curveNatural, while employing scaleTime and scaleLinear to map the data domain to pixel coordinates. The React component structure includes custom AxisBottom and AxisLeft components for tick marks, with d3.timeFormat to display abbreviated weekday labels. The SVG rendering leverages D3 v7 within a React framework, showing a smooth natural curve through the temperature data points.

Loading thumbnail…

Stylized Scatterplot

This stylized scatterplot visualizes the Iris Dataset, mapping petal length against sepal width for individual flowers. The visualization uses D3.js v7 scales and axes within a React component, rendering marks as SVG circles with a teal fill. Data is loaded asynchronously via D3’s `csv` parser, with numeric conversion applied to all measurements. The axes employ custom tick components, and tooltips are provided through SVG `<title>` elements, formatted using D3’s `format` function. The visual style features a clean design with Poppins typography and subtle grid lines.

Loading thumbnail…

Stylized Bar Chart

A horizontal bar chart displays the top ten countries by population in 2020, using data from the UN Population 2019 CSV. D3 v7 scales and axes are applied: `scaleBand` positions each country, while `scaleLinear` maps population values. React components render the SVG, with axes and marks built from `scaleLinear` ticks and `scaleBand` domains. The chart uses a custom "Poppins" font, teal bars, and a formatted tick label replacing "G" with "B" via `format('.2s')`.

Loading thumbnail…

Refactored Bar Chart

This interactive bar chart displays population data for ten countries in 2020, sourced from a UN dataset loaded via d3.csv. The visualization shows horizontal bars ordered by country, with population values mapped to bar width using d3.scaleLinear and d3.scaleBand for positioning. The React component structure separates axis and mark rendering into modular files, with SVG elements generated from scales and mapped data. Custom AxisBottom and AxisLeft components handle ticks and labels, while Marks renders the rectangular bars.

Loading thumbnail…

Axes with React + D3

This example shows a horizontal bar chart of top-10 countries by 2020 population, using React to manage the data and render SVG axes and bars. It loads CSV data from a GitHub gist with d3.csv, stores it in React state via useState and useEffect, and builds scales with d3.scaleBand and d3.scaleLinear. Axes are drawn manually with SVG line and text elements, while d3.max computes the domain. React’s declarative rendering replaces D3’s typical join pattern for the visualization.

Loading thumbnail…

The Margin Convention

This example shows a horizontal bar chart of the top 10 most populous countries in 2020, using the UN Population dataset loaded via `d3.csv`. React state management with `useState` and `useEffect` handles the asynchronous data fetching, while D3’s `scaleBand` and `scaleLinear` map country names and population counts to SVG rectangles. The SVG rendering respects the margin convention by translating a `<g>` element, and the chart appears only after data loads, with a loading message displayed beforehand.

Loading thumbnail…

Fork of Rendering Data with React and D3 as a Burst of Color!

This visualization displays the top 10 countries by 2020 population as horizontal bars, using the 2019 UN Population dataset. The React component loads the CSV with `d3.csv`, stores it in state via `useState`, and renders an SVG with `d3.scaleBand` for the y-axis categories and `d3.scaleLinear` for the x-axis values. A loading message appears until the data arrives.

Loading thumbnail…

Rendering Data with React and D3 as a Burst of Color!

A radial burst of color displays CSS named colors as an SVG pie chart, with each slice filled by its corresponding hex value. The visualization loads color data from a CSV via `d3.csv`, stores it in React state using `useState` and `useEffect`, and renders paths with `d3.arc` and `d3.pie`. The example integrates D3 v7 with React 16.9, using ReactDOM to mount the interactive SVG output.

Loading thumbnail…

Rendering Data with React

A visualization displays the CSS named colors as a sequence of horizontal color swatches. The program loads color data from a CSV file using D3’s `csv` method and stores it in React state via the `useState` and `useEffect` hooks. Each row is rendered as a div whose background color is set from the `RGB hex value` column. React renders a loading message until the data is fetched, then maps over the array to produce the color bands.

Loading thumbnail…

Loading Data with React and D3

This example demonstrates how to load a CSV dataset into a React application using D3's `csv` function, with the fetched data stored in React state via `useState` and `useEffect`. The interface displays a simple text summary of the dataset, including its size in kilobytes, row count, and column count, using D3's `csvFormat` function. The data source is a remote CSV file containing CSS named colors, and the visualization updates from a loading message to the computed statistics once the data arrives.

Loading thumbnail…

Fork of Histogram with Iris Data - Data Decoder

This interactive histogram visualization explores the Iris dataset, allowing users to select which numerical attribute to display on both the X and Y axes via dropdown menus. The visualization displays binned frequency data as semi-transparent bars, colored by the species of each data point using an ordinal color scale. It also overlays positional circles from the second histogram to compare the two selected attribute distributions. Built with React and D3 v7, the code utilizes `scaleLinear`, `scaleOrdinal`, `bin`, and `count` functions, rendering SVG elements with custom axis components.

Loading thumbnail…

Fork of NBA Player Games Played Bar Chart

This interactive bar chart displays games played by NBA players across all 30 teams, with a dropdown menu to select a team. Each bar represents a player, colored by wins (light green) versus losses (light coral), with a legend on the right. The React-based visualization uses D3 v5 scales and SVG rendering, with `scaleBand` for the x-axis player names, `scaleLinear` for the y-axis game counts, and the `csv` loader to fetch the NBA Player State dataset from a GitHub gist.

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This bar chart visualizes the first 20 countries from a COVID-19 dataset, displaying confirmed cases as horizontal bars on a green SVG canvas. It uses React with D3.js v5, employing `d3.scaleBand` for the categorical country axis and `d3.scaleLinear` for the numeric case counts. The chart renders axes using D3's `ticks()` method and maps each country to a `rect` element positioned via the scales. The visualization demonstrates how to combine React's declarative component structure with D3's quantitative scales to build an interactive-free chart.

Loading thumbnail…

Fork of Bar Chart

This fork renders the top 10 most populous countries from the United Nations World Population Prospects 2019 dataset as a bare SVG bar chart with no axes or labels. The React app uses d3.csv to load the data, d3.scaleBand for the y-axis category positions, and d3.scaleLinear for the x-axis bar lengths based on the 2020 population column. The chart displays only the rectangles, omitting all chart furniture for a minimal presentation.

Loading thumbnail…

Bar Chart

This example uses React and D3 to load and display United Nations population data from a CSV file, though it currently renders only a loading message. The code imports `csv`, `scaleBand`, and `scaleLinear` from D3 v5, and uses React hooks `useState` and `useEffect` to fetch the data asynchronously. The commented-out SVG code suggests the intended bar chart would map countries to bar widths using D3 scales, but the interactive visualization is not yet implemented.

Loading thumbnail…

Rendering Data with React

A pie chart displays named CSS colors from a CSV file loaded via `d3.csv`. The React component uses the `useState` and `useEffect` hooks to fetch data asynchronously and render SVG elements. Each color is represented as a slice using `d3.pie` and `d3.arc`, with the slice's fill set to its corresponding RGB hex value. The visualization demonstrates how React manages state and lifecycle for D3-generated data-driven graphics.

Loading thumbnail…

Visualizing Data with React and D3

This example shows a React application that loads a CSV of named CSS colors from a GitHub gist and renders each color as a horizontal strip, stacking them to form a full-width palette. The code uses React’s `useState` and `useEffect` hooks to fetch the data asynchronously with D3’s `csv` function, then maps over the resulting rows to create colored `<div>` elements. A loading message appears until the dataset arrives, and the sidebar displays metadata about the file size, row count, and column count.

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API and D3 to render an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. The visualization shows miles per gallon against horsepower, with color encoding for origin and point size representing vehicle weight. Hovering over a point reveals the car’s name via a tooltip. The code constructs the chart declaratively with `vl` from vega-lite-api, loads data using `d3.csv`, and renders to SVG with vega-lite and vega-tooltip.

Loading thumbnail…

Retrieving and Parsing CSV

This example shows a minimal summary of a CSV dataset loaded from a remote URL, displaying the file size in kilobytes, row count, and column count as large text. It fetches a CSS named colors CSV using d3.csv, then applies d3.csvFormat to measure the data’s size. The page is built with a plain HTML pre element and styled via CSS, rendering the resulting metadata readout directly into the DOM. The code uses D3 v7’s promise-based CSV parsing and formatting functions without any additional framework.

Loading thumbnail…

Smiley Faces!

A grid of 15 smiley faces displays a range of skin tones, with each face built from reusable React components for the background circle, eyes, mouth, and eyebrows. The visualization uses D3’s `arc` generator to create the mouth and eyebrow paths, while SVG circles render the face and eyes. Each face is centered via a transformed group, and the color palette is repeated three times to populate the array rendered through React’s `map` function.

Loading thumbnail…

Interaction with React

A React application renders an interactive smiley face as an SVG circle that follows the mouse cursor across a 960-by-500 viewport. The component uses React hooks `useState` and `useCallback` to track pointer coordinates from the SVG's `onMouseMove` event, updating the circle's `cx` and `cy` attributes. The face's features—eyes and mouth—are static, while the orange head moves with the cursor. Rendering uses React DOM directly with SVG elements, with no external visualization library.