Ryan Murry

@ryanjmurry·10 public vizzes

Axes Bar Chart UN Population 2019

This example visualizes the top ten countries in the UN Population 2019 dataset, ranking them by projected 2020 population using horizontal bars. D3’s `scaleBand` maps country names to the y-axis with labels from the data’s `Country` field, while a `scaleLinear` maps population counts to bar widths via `xScale`. Tick marks and labels are drawn manually for both axes, but no axis lines or titles are rendered. The chart is built with React and D3 v5, using SVG output and fetching data from a remote CSV.

Jun 23, 2021

Loading thumbnail…

The Margin Convention Bar Chart UN Population 2019

This example shows the ten most populous countries in the 2019 UN Population dataset as horizontal bars, ranked by their 2020 population estimates. The chart applies the margin convention by translating the SVG group element, using `d3.scaleBand` for the categorical country axis and `d3.scaleLinear` for the population values, with no axes drawn. React manages the component state, fetching the CSV via `d3.csv` and rendering the rectangles as SVG elements inside a `d3.v5` environment.

Jun 23, 2021

Loading thumbnail…

Pathetic Bar Chart UN Population 2019

This example shows the ten most populous countries in 2020 as horizontal bars, with a linear x-scale mapping population count to bar width and a band y-scale stacking countries vertically. It uses D3’s `csv` loader to fetch UN Population 2019 data, then `scaleLinear` and `scaleBand` to compute dimensions. React renders each bar as an SVG `<rect>` element, with coordinates and widths derived from the scales. No axes are drawn, leaving the chart intentionally minimal.

Jun 23, 2021

Loading thumbnail…

Fork of Rendering Data with React & D3

A radial burst visualization displays CSS named colors as a pie chart, with each color mapped to a slice radiating from the center of an SVG canvas. The example loads color data from a CSV file using D3’s `csv` utility, then passes it to React components that render the paths. The `d3.pie` layout computes slice angles, while the `d3.arc` generator creates the SVG path shapes, with each slice filled by the color’s hex value. React’s `useState` and `useEffect` hooks manage data loading and state updates.

Jun 18, 2021

Loading thumbnail…

Smiley Face Part I

A stylized smiley face rendered as a reusable React component, composed of geometric SVG shapes for the head, eyes, nose, mouth, and mustache. The face is drawn with a white background circle, black outline, green nose, red mustache, and a curved black mouth arc. It uses React components like `BackgroundCircle`, `Eyes`, and `Mouth`, with the latter leveraging d3’s `arc` generator to create the smile path. All shapes are positioned relative to a central point via an SVG `<g>` transform, with no data source involved.

Jun 18, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes religious affiliation by country as a heatmap, with one axis for countries, the other for religions, and cell color intensity encoding the population share. The visualization is built with Vega-Lite’s JavaScript API, which registers Vega and Vega-Lite libraries to render an SVG bar mark. It imports data from a CSV file of 2015 global populations, fetched via d3.csv. The chart resizes to fit the window and includes a tooltip showing the population value for each cell.

Jun 17, 2021

Loading thumbnail…

Loading Data w/ React + D3

This example demonstrates how to load and summarize a CSV dataset within a React component using D3’s `csv` method. It fetches a list of CSS named colors from a GitHub gist and displays the file size, row count, and column count in a large `<pre>` element. The implementation uses React hooks (`useState` and `useEffect`) to manage loading state asynchronously, while D3’s `csvFormat` calculates the data size in kilobytes. A temporary “Loading…” message appears until the data arrives, and the final output is rendered with plain text styling.

Jun 16, 2021

Loading thumbnail…

Mouse Follower

A single SVG circle follows the mouse as it moves across the browser window, cycling through a rainbow of colors every second. Built with React hooks (useState, useCallback, useEffect), the component tracks mouse coordinates via onMouseMove and updates the circle's cx, cy, and fill attributes. The color changes through a 13-color array on a one-second interval, with a CSS transition smoothing the fill change. The example demonstrates interactive SVG rendering within a React application without additional data sources.

Jun 16, 2021

Loading thumbnail…

CSS Named Colors

This example displays a minimalist summary of the CSS Named Colors dataset, showing the file size in kilobytes, total row count, and number of columns. It loads the data from a CSV file using D3’s `d3.csv` fetch method, then formats the raw text with `d3.csvFormat` to calculate its size. The result is rendered as plain text into an HTML `<pre>` element.

Jun 16, 2021

Loading thumbnail…

Fork of React Starter

A React starter project renders the text “Hello React!” in massive type, centered across the browser window via a CSS class. The single component, defined with JSX and composed of a plain `<div>`, is mounted into the DOM using `ReactDOM.render`. The example uses React 16.13.1 from unpkg and relies on the `react` and `react-dom` libraries to demonstrate a minimal, functional React application setup within an HTML scaffold.

Jun 10, 2021