RandyElkins

@RandyElkins·13 public vizzes

Making a Scatter Plot (5:53:13)

This example renders a scatter plot of Iris flower measurements using React and D3. It displays sepal length on the x-axis and sepal width on the y-axis, with circular marks colored teal. The code builds SVG axes and ticks via custom React components (`AxisBottom`, `AxisLeft`) that leverage D3’s `scaleLinear`, `extent`, and `ticks` APIs. Data is loaded asynchronously from a CSV URL using a custom `useData` hook that employs D3’s `csv` parser. Despite the title referencing a radial burst, the code only implements a standard scatter plot.

Aug 15, 2021

Loading thumbnail…

Stylized Bar Chart (5:29:00)

This stylized bar chart displays the populations of the top ten countries from a UN 2020 dataset, rendered as horizontal bars with a teal color scheme. The visualization uses React for component structure and rendering to SVG, while D3.js handles data loading via `csv`, scales with `scaleBand` and `scaleLinear`, and formatting through `format`. The chart includes a bottom axis with formatted tick labels, a left axis showing country names, and tooltips using D3's `title` element.

Aug 14, 2021

Loading thumbnail…

Refactoring a Bar Chart (5:18:00)

This example shows a horizontal bar chart of population data for the top 10 countries, loaded from a CSV file. The visualization is built with React and rendered as SVG, using D3 v7 utilities for data loading, scaling, and axis generation. A linear scale maps population values to bar widths, while a band scale positions each country on the vertical axis. The code refactors axis rendering into separate components, with `AxisBottom` generating tick lines and labels from the scale’s `ticks()` method and `AxisLeft` placing domain labels.

Aug 14, 2021

Loading thumbnail…

Axes with React & D3 (5:02:30)

This example shows a horizontal bar chart of the top 10 countries by 2020 population, rendered with React components inside an SVG. The code uses `d3.csv` to load population data, `d3.scaleBand` and `d3.scaleLinear` to map countries and population values to screen coordinates, and `xScale.ticks()` to generate labeled grid lines and axis ticks. React manages the component state for the loaded data, while D3 handles the data formatting and scale calculations.

Aug 14, 2021

Loading thumbnail…

The Margin Convention

This example displays the top 10 countries by 2020 population as horizontal bars within a fixed margin, demonstrating the SVG margin convention. The bars are scaled using `scaleBand` for the y-axis and `scaleLinear` for the x-axis, with React managing state and D3's `csv` loading the UN population data. A margin object defines the inner plotting area, and the SVG is translated accordingly to position the chart.

Aug 14, 2021

Loading thumbnail…

UN World Population 2020

A horizontal bar chart displays the top 10 most populous countries in 2020 according to UN data. Each bar’s length encodes the country’s population, scaled linearly using `d3.scaleLinear`, while the vertical bands use `d3.scaleBand`. The data loads asynchronously via `d3.csv` from a GitHub gist, and React renders the SVG rectangles. The code imports `csv`, `arc`, `pie`, and `max` from D3 v7.

Aug 14, 2021

Loading thumbnail…

Fork of Rendering Data with React & D3

This interactive example visualizes a dataset of CSS named colors as a radial burst, where each color is represented by a pie slice arranged around a central point. Using React to manage the rendering pipeline, the code fetches color data from a remote CSV file and passes it through D3’s `pie` and `arc` functions to generate SVG paths. Each slice is filled with its corresponding RGB hex value, producing a colorful, circular mosaic. The visualization demonstrates the integration of D3’s data handling and geometry with React’s component-based UI for dynamic SVG output.

Aug 14, 2021

Loading thumbnail…

Rendering Data with React

This example demonstrates rendering a dataset of CSS named colors as a series of horizontal stacked bars, each colored by its corresponding RGB hex value. The visualization uses React to map each data row to a div element, with the background color set directly from the CSV field. D3’s `csv` function loads the color data asynchronously from a GitHub gist URL, while React’s `useState` and `useEffect` hooks manage the loading state. Once fetched, the app renders a full-width strip of colored segments, with a loading message displayed until the data arrives.

Aug 13, 2021

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load and display a summary of CSS named colors data using React and D3. The app fetches a CSV file via `d3.csv` and stores the result in React state with `useState` and `useEffect`. While the data loads, it shows a “Loading...” message, then renders a text report through the `message` function, which formats the data using `d3.csvFormat` to display file size, row count, and column count. The visualization uses SVG rendering within a React component.

Aug 13, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example creates a scatter plot of cereal data, positioning each cereal brand by its cups of cereal and calories. The visualization uses a Vega-Lite API built on the `vega-lite-api` library, with `vl.markCircle` and `vl.x`/`vl.y` encodings to map the quantitative fields, and a tooltip encoding showing the cereal name. Data is fetched as CSV from a remote URL using `d3.csv`. The rendering is handled by Vega-Lite and Vega, with tooltips provided through `vega-tooltip`. The chart is customized with a dark text color and simplified axes, and it auto-fits to the browser window size.

Aug 11, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3.js, displaying a summary of the fetched dataset’s size, row count, and column count in large text. The code calls `d3.csv` on a remote URL containing CSS named colors, then formats the result with `d3.csvFormat` to calculate the data size in kilobytes. It also accesses the parsed array’s `length` and `columns` properties to report row and column totals. A commented alternative shows using the Fetch API with `async/await` and `d3.csvParse` for the same task.

Aug 9, 2021

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across the full browser window, changing its radius randomly with each movement. Built with React, the app tracks mouse coordinates via an SVG `onMouseMove` handler and updates the circle’s `cx`, `cy`, and `r` attributes through React state. The `useState` and `useCallback` hooks manage the position and re-render, while the radius is generated by a custom `randomIntFromInterval` function, resulting in a dynamic, size-shifting target.

Aug 9, 2021

Loading thumbnail…

Smiley Face Part II

A grid of randomly generated smiley faces fills the frame. Each face uses random values for stroke width, eye size and position, mouth radius, and background color, creating a varied collection. Built with React and D3, the faces are composed of SVG primitives: circles for the background and eyes, and a D3 arc path for the mouth. The D3 `range` function generates the six-by-three grid of faces, while helper functions produce random integers and RGB colors.

Aug 9, 2021