rsulli4

API pull UI

This example presents a React-based user interface for querying the YouTube Data API. It shows a form where users enter a channel ID and an API key; upon submission, the app constructs a search URL to fetch up to ten recent videos. The interface displays the raw JSON response in the console and derives a comma-separated list of video IDs from the retrieved items using custom helper functions. The code leverages React's state management and `useEffect` hook to trigger the fetch, alongside `fetchVideoData.js` which wraps the standard `fetch` API.

May 2, 2023

customized line chart

A customized line chart visualizes the daily total COVID-19 cases in Virginia during 2020, with a smooth natural curve connecting the data points. The React application uses d3.v5's `scaleTime`, `scaleLinear`, `line`, and `curveNatural` to render the SVG path, with custom axis components for the bottom and left ticks. Data is loaded from a CSV file via `csv()` and mapped to dates and case counts. The chart displays the trend of cumulative cases over the year, with a five-pixel-wide teal stroke for the line.

May 2, 2023

points on a Map

This example displays a world map with semi-transparent points representing cities, overlaid on a natural Earth projection. The visualization uses D3 v5’s `geoNaturalEarth1` and `geoPath` to render the sphere, graticules, landmasses, and country interiors from a TopoJSON world atlas, while city coordinates from a CSV are projected and drawn as circles. React manages the component state, fetching data asynchronously with `useEffect` and rendering the SVG marks via a custom `Marks` component.

May 2, 2023

customized Scatter plot with menus

Two dropdown menus allow the viewer to select which airplane attributes to plot on the x and y axes. The interactive scatter plot uses a dataset of airplanes, showing each plane as a circle with a tooltip displaying its x-axis value. Built with React and D3 v5, the code uses `scaleLinear`, `extent`, and `csv` for data processing, while the custom `Dropdown` component and `Marks` map the selected attributes to the axes and circles within an SVG canvas.

May 1, 2023

customized Scatter plot

This interactive scatter plot visualizes the relationship between maximum velocity (Vmax) and range for a dataset of airplanes, using SVG circles to represent individual aircraft. The chart is built with React and D3 v5, employing `scaleLinear` for both axes and custom `AxisBottom` and `AxisLeft` components to render ticks. Hovering over a circle reveals its precise Vmax value via a native SVG `<title>` tooltip. The visualization reads from a CSV file fetched through D3’s `csv` loader, with styled axis labels and a clean, minimal aesthetic defined through CSS classes.

May 1, 2023

polished Scatter plot with menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between four numeric flower measurements through dropdown menus that select which attributes appear on the X and Y axes. The visualization uses React state management and the react-dropdown library for the menu controls, while D3.js scaleLinear and extent functions handle the coordinate scales. Each data point renders as an SVG circle with a native tooltip showing the X value, and axis components generate ticks and labels using D3's scale.ticks() method.

May 1, 2023

Scatter plot with menus

This interactive scatter plot displays the classic Iris flower dataset, letting users compare any two measured attributes at once. Two dropdown menus independently select the variables assigned to the x and y axes, instantly repositioning all data points. The visualization is built with React and renders SVG elements using D3 scales, axes, and tick formatting. Circles represent individual flowers, with native SVG titles providing hover tooltips showing the x-axis value. Data loading relies on D3's `csv` function, while linear scales and extent computations handle the numerical ranges for each chosen attribute combination.

Menus with react

A React-based interactive menu demonstrates controlled component state by letting visitors select a pet from six options, with the chosen value logged to the console. The app uses React's `useState` hook to manage selection, while a reusable `Dropdown` component renders a native `<select>` element and calls `onSelectedValueChange` on user input. Built with React 16.9 and ReactDOM, the code imports the component from a separate file and mounts it to the DOM via `ReactDOM.render`. The selected value updates live, but no additional visualization is generated beyond the form control.

World Map

This visualization displays a world map using a Natural Earth projection, with landmasses filled in teal against a light gray sphere and graticule lines. It renders country borders as interior mesh lines and includes a subtle stroke detail. The implementation uses React with d3.geoNaturalEarth1 and d3.geoPath to project and draw geographic features, while d3.json and topojson’s feature and mesh functions load and parse the world-atlas dataset from unpkg. The SVG output is styled via CSS classes for land, sphere, graticules, and interior boundaries.

working with time

A scatter plot displays daily temperature readings from the Sense Your City dataset, plotting time on the x-axis and temperature on the y-axis. Each circle’s position encodes a timestamp and temperature value, with a native SVG title element providing a tooltip showing the abbreviated weekday. The visualization uses React components for the axes and marks, with d3.scaleTime, d3.scaleLinear, and d3.extent handling the scaling and domain calculations. Data is loaded asynchronously via d3.csv and parsed into JavaScript Date objects and numeric temperatures.

Stylized Scatter plot

This scatter plot visualizes the Iris dataset, showing petal length against sepal width for 150 flower samples. Each point is rendered as a teal circle using React and D3 v5, with scales created via `scaleLinear` and axes constructed from custom `AxisBottom` and `AxisLeft` components. The SVG markup includes formatted tick labels using D3's `format` function and native tooltips via SVG `<title>` elements. Data is loaded asynchronously with `csv` and processed through type coercion in a `useData` hook.

Customized bar chart

This example presents a customized bar chart of COVID-19 case counts by U.S. jurisdiction, using data from August 2020. It displays the top ten locations ordered along the vertical axis, with horizontal bar lengths encoding total cases. The visualization is built with React and D3 v5, leveraging `scaleBand` for categorical positioning, `scaleLinear` for quantitative scaling, and `csv` for data loading. SVG rendering produces the bars, axes, and tick labels, with D3’s `format` function abbreviating large numbers (e.g., converting billions to “B”).

Stylized bar chart

A stylized bar chart displays the top ten countries by 2020 population, using horizontal bars with rounded, teal fill and labeled axes. The data is loaded from a CSV of UN population figures via the `csv` function. The chart is built with React and rendered as SVG using D3 v5 scales: `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `scaleLinear` ticks for the bottom axis. Tooltips show formatted population values, with axis labels styled via Poppins font.

Refactored bar chart

This chart displays the population of the top ten countries from the UN population data for 2020, using horizontal bars to show each country's total. It is built with React and the D3.js library, which handles data loading and scaling, while SVG elements render the bars and axes. The code organizes the visualization into reusable components for the bottom and left axes, and the bar marks themselves.

Fork of Axis with react d3

This example shows a horizontal bar chart of United Nations population data for the top ten countries in 2020. The visualization uses React components to render SVG elements, with D3 v5 utilities handling data loading, scales, and axis ticks. `d3.csv` fetches the data, while `scaleBand` and `scaleLinear` position bars and their lengths. Grid lines and tick labels are generated manually from `xScale.ticks()`, and React’s `useState` and `useEffect` manage the asynchronous data loading.

Axis with react d3

This example uses React to render an SVG bar chart of United Nations population data for ten countries. The chart displays horizontal bars with a linear x-axis scaled to the maximum population and a banded y-axis for country names. D3 utilities `csv`, `scaleBand`, `scaleLinear`, and `max` load the data and compute scales, while React's `useState` and `useEffect` manage the asynchronous data fetching. Both axes are drawn with manual D3 tick marks, gridlines, and text labels.

pathetic bar chart

This chart displays the ten most populous countries in 2020 as horizontal bars, positioned vertically by country name and sized proportionally to population. The visualization is built with React and D3, using d3.csv to load the UN population data, d3.scaleBand for y-axis placement, and d3.scaleLinear for the x-axis scale, rendered as SVG rectangles.

rendering data with react and D3

A radial burst chart displays a dataset of named CSS colors, with each color represented as a slice of a circle emanating from the center. The visualization loads CSV data from a remote gist using `d3.csv` and renders the arcs as SVG `path` elements. React manages the asynchronous data loading and component state, while D3's `pie` and `arc` functions calculate the angular segments. The code uses `ReactDOM.render` to mount the application and applies the hex value from each data row as the fill color.

rendering data with react

This example displays the complete set of named CSS colors as a vertical stack of thin horizontal strips, with each strip’s background color corresponding to its RGB hex value from the loaded CSV data. A loading message appears until the data arrives. The visualization uses React’s `useState` and `useEffect` hooks to fetch and store the data, and calls `d3.csv` to parse the remote CSV file, then renders each color bar as a styled `<div>` element via `ReactDOM.render`.

Loading data with React & D3

This example demonstrates how React and D3 can work together to load and summarize a dataset. It shows a brief text report of the loaded CSS Named Colors CSV, displaying the file size in kilobytes, row count, and column count. The code uses React’s `useState`, `useEffect`, and `useCallback` hooks to manage state, while D3’s `d3.csv` fetches the data asynchronously. A custom module formats the summary using `d3.csvFormat`. The visualization is minimal, focusing on data-loading workflow rather than graphical output.

Loading and Parsing CSV Data part 3

This example displays basic statistics about a remote CSV file containing CSS named colors. Using D3.js version 5, it loads the data with `d3.csv` and reports the file size in kilobytes, the number of rows, and the number of columns in large text. The code also includes an alternative commented-out approach using the Fetch API with async/await and `d3.csvParse` to achieve the same result.

Loading and Parsing CSV Data part 2

This example demonstrates how to load and parse CSV data from a remote URL, displaying basic file statistics as large text: the size in kilobytes, the number of rows, and the number of columns. It uses D3 v5’s `d3.csv` method to fetch and parse the data, then accesses the resulting array’s length and the `columns` property to report row and column counts. The code also computes the file size from `d3.csvFormat(data).length`. The data source is a GitHub Gist containing CSS named colors, and the output is rendered inside a `<pre>` element with a large font size.

Mouse Follower color changer

A React application renders an SVG circle that follows the mouse cursor across a full-screen viewport, changing its fill color randomly on every mouse movement. The circle starts at the center of the 960×500 SVG canvas and uses React’s `useState` and `useCallback` hooks to track the cursor’s client coordinates via the SVG `onMouseMove` event. Each move updates the circle’s position and generates new random RGB values for its fill using the `rgb()` color function. The visualization demonstrates real-time event handling and state-driven rendering with React and SVG.

Apr 28, 2023

Mouse Follower

A yellow circle follows the mouse cursor across an SVG canvas. The visualization tracks pointer movement and repositions the circle to match the cursor’s coordinates in real time. Built with React, it uses the `useState` hook to store the mouse position and an `onMouseMove` event handler on the SVG element to update that state. The circle renders via ReactDOM with SVG markup, and its `cx` and `cy` attributes are bound to the current mouse coordinates.

Apr 28, 2023

Loading and Parsing CSV Data

This example demonstrates how to fetch and display the raw contents of a CSV file, specifically a list of CSS named colors. It shows the process of retrieving external data as text, which is the foundational step before any parsing or visualization can occur. The code uses the standard `fetch` API to request the file from a GitHub Gist URL, then applies the `response.text()` method to extract the string content. The resulting text is logged to the browser console using `console.log`, and an asynchronous alternative using `fetchText` and `await` is also provided.

Apr 28, 2023

Smiley Face Part VII

A grid of eighteen smiley faces renders as React components, each with randomized features including eye offset and radius, mouth width and radius, stroke width, and two gradient colors. The faces use SVG circles for the background and eyes, while the mouth is drawn with a `d3.arc` path. Each face's background employs a radial gradient defined in SVG, and colors are generated via `Math.random()` RGB values. The code imports React, ReactDOM, and D3's `range` and `arc` utilities.

Apr 15, 2023

Smiley Face Part VI

An array of eighteen smiley faces is rendered in a grid, each with randomized facial features such as eye position, eye radius, and mouth width. A radial gradient colors each face from red to blue. The example uses React to compose reusable components, including a `FaceContainer` that wraps an SVG, and D3’s `arc` generator to draw each mouth. The `range` function from D3 creates the array of faces, and randomized parameters generate variety across the grid.

Apr 14, 2023

Smiley Face Part V

A smiling face rendered as a React SVG composition uses d3.arc to draw a curved mouth, while the face's background, eyes, and gradient fill are plain SVG elements. A radial gradient transitions from red at the center to blue at the edges, with the face positioned at the viewport center. The code imports ES6 modules and combines React components with D3 v5 to construct the graphic procedurally from numeric constants.

Apr 14, 2023

Smiley Face Part IV

This gallery example shows a stylized smiley face built from basic SVG shapes: two eyes, a curved mouth, and a large background circle. The face is centered on a 960-by-500 canvas, with the background filled by a red-to-blue radial gradient. The visualization is implemented as a React component, using D3’s `arc` API to generate the mouth path. The code also uses ReactDOM to render the SVG into a root div, with styles applied directly in the HTML file.

Apr 14, 2023

Smiley Face Part III

This example renders a smiling face using React and D3’s `arc` generator to draw the mouth, with SVG circles for the eyes and head. The face is centered in a 960×500 viewport, and a radial gradient defined in SVG `defs` fills the head from red to blue. The D3 `arc` function creates a mouth path with inner and outer radii and specified angles, while React manages the component structure. The SVG circles use fixed pixel offsets for eye placement, and the head’s stroke width is set to 20 pixels.

Apr 13, 2023

Smiley Face Part II

A smiling face rendered as a yellow SVG circle with black outline and two black eyes, positioned symmetrically around the center of a 960×500 canvas. The example uses React to define and render the SVG elements, with ReactDOM mounting the component into the page. Hard-coded constants specify the circle radii, eye offsets, and stroke width, with no interactive or animated behavior. The smile itself is absent, showing only the face and eyes at this stage.

Apr 13, 2023