Ethan Pierce

@jumpybuns·11 public vizzes

Fork of Menus with React

This example demonstrates a React-based interactive dropdown menu for selecting a pet from a list of six options. The user’s selection is managed through the `useState` hook, with each choice logged to the console. The `Dropdown` component is a reusable function that renders a native `<select>` element, mapping over the options array to produce `<option>` tags. The app uses React 16.9.0 and ReactDOM, with the selected value displayed via `selectedValue` and updated through `onSelectedValueChange`. The default selection is set to hamster.

Apr 12, 2021

Loading thumbnail…

World Map

This example shows a world map rendered as an SVG using React and D3 v5. It displays the boundaries of countries from the World Atlas TopoJSON dataset, projected with `d3.geoPath`. The visualization uses `d3.json` to load the data and `topojson.feature` to convert it into GeoJSON for rendering. The map is simple and static, focusing on the geographic outlines without additional data encodings or interactions.

Apr 9, 2021

Loading thumbnail…

Fork of Stylized Bar Chart

This interactive scatterplot visualizes the Iris flower dataset, showing the relationship between sepal length and sepal width, with each point representing a flower specimen. The visualization is built with React and D3 v5, using `d3.scaleLinear` and `d3.extent` for coordinate mapping, plus custom `AxisBottom` and `AxisLeft` components for tick rendering. The SVG chart includes axes, labels, and tooltips via SVG `<title>` elements, with data loaded asynchronously using `useData` and D3's `csv` parser. The styling uses the Poppins font, and the visualization displays the dataset without color encoding for species.

Apr 6, 2021

Loading thumbnail…

Fork of Pathetic Bar Chart

This bar chart displays the top 10 most populous countries using United Nations World Population Prospects 2019 data, loaded via `d3.csv`. The visualization uses `d3.scaleBand` for categorical country labels and `d3.scaleLinear` for population values, rendered as SVG rectangles through React components. Custom React components encapsulate the axes and marks, with formatted tick labels using `d3.format` to abbreviate billions. The chart updates via React hooks (`useState`, `useEffect`), and includes interactive tooltips showing precise population values on hover.

Apr 5, 2021

Loading thumbnail…

Rendering data with React & D3

This example shows a bar chart of the top 10 countries by 2020 population, rendered as SVG rectangles with React managing component state while D3 handles data loading and scales. The code loads CSV data via `d3.csv`, converts population values to numbers, and uses `scaleBand` for country categories and `scaleLinear` for population values. React’s `useState` and `useEffect` hooks trigger the initial data fetch, and the chart renders only after data arrives, showing a loading message beforehand.

Apr 5, 2021

Loading thumbnail…

Fork of Pathetic Bar Chart

This example shows the top 10 most populous countries as a set of horizontal bars without axes, labels, or scales. It loads population data from the United Nations World Population Prospects 2019 CSV file. The code uses React hooks, including `useState` and `useEffect`, to fetch and store the data, then renders SVG rectangles with D3’s `scaleBand` and `scaleLinear` to position and size each bar based on the country name and 2020 population value.

Apr 5, 2021

Loading thumbnail…

Fork of Rendering Data with React & D3

This example visualizes the CSS named colors dataset as a radial burst, with each color represented by a wedge-shaped slice in a circular SVG layout. The visualization loads data from a CSV file using D3’s `csv` utility, then employs React’s `useState` and `useEffect` to fetch and store the data. React renders each arc using D3’s `arc` and `pie` functions, generating paths filled with the hex values from the dataset. The code runs within an HTML page that imports React 16, ReactDOM, and D3 v5 via CDN.

Apr 5, 2021

Loading thumbnail…

Loading Data with React & D3

This example demonstrates the process of loading external data into a React application using D3 utilities. The app fetches a CSV file containing CSS named colors and displays a summary of the data, including its size in kilobytes, number of rows, and column count. The implementation uses React's `useState` and `useEffect` hooks to manage the loading state, while D3's `csv` function parses the remote data. The interface shows a loading message until the data arrives, then presents the calculated statistics using `d3.csvFormat` within a custom message module.

Apr 2, 2021

Loading thumbnail…

Loadin

A circle follows the mouse cursor across an SVG canvas, updating its position in real time with a hidden custom cursor via CSS. The React app uses the `useState` hook to track mouse coordinates and the `useCallback` hook to handle `onMouseMove` events, rendering the circle with JSX. The visualization demonstrates lightweight interactive tracking in React 16.9.0 without external data or animation libraries.

Apr 2, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL using native browser APIs. It fetches a list of CSS named colors from a GitHub gist and logs the raw text to the browser console. The code uses the Fetch API with an asynchronous `fetchText` function, combining `await` and `response.text()` to read the data. The page displays a large empty `<pre>` element, though the visible result is the console output, not a graphical visualization.

Mar 29, 2021

Loading thumbnail…

Fork of Hello HTML

A grid of fifteen smiling cartoon faces renders across the screen, each randomly varying in eye size, mouth width, and mouth radius. The example demonstrates component reuse in React, where the `Face`, `Eyes`, `Mouth`, and `BackgroundCircle` components compose together inside an SVG, using a `FaceContainer` to center the transformations. Data is generated with `d3.range` and randomized values, while the mouth shape is drawn using the `d3.arc` path generator.

Mar 29, 2021