bryce-walsh

@bryce-walsh·7 public vizzes

click counter

This example demonstrates loading live weather data for London and displaying the current condition, initially set to "cloudy," in an HTML span element. It uses the browser's native `fetch` API to retrieve a JSON file from a GitHub Gist, then parses the response with `response.json()`. The code updates the DOM by querying the span with `document.querySelector` and setting its `innerHTML` to the `main` weather value from the retrieved data. React and ReactDOM are included via UMD scripts but are not actively used in the interaction.

Apr 19, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the relationship between miles per gallon and horsepower for automobiles, with each point colored by origin and sized by horsepower. The visualization uses the Vega-Lite API in JavaScript to construct a circle mark with quantitative x and y encodings, along with color, size, and tooltip encodings. It loads data from a CSV file via `d3.csv` and renders as an SVG using the vega-lite-api library. Appearance is customized through a config file that adjusts axis and label styling for readability.

Apr 8, 2021

Loading thumbnail…

Rendering data with react

This example renders the CSS named color palette as a vertical sequence of 960-pixel-wide, 4-pixel-tall color swatches, one per row. It shows how D3’s `csv` loader fetches the dataset from a GitHub gist, while React’s `useEffect` and `useState` manage the asynchronous data loading and render each row as a styled `<div>` in an SVG-capable layout. The code uses React 16.9, ReactDOM, and D3 6.6, with the raw CSV parsed for each color’s `RGB hex value` to set the background color. A simple loading state displays until the data arrives.

Apr 1, 2021

Loading thumbnail…

Loading Data with React and D3

This example demonstrates loading a CSV dataset with D3 and integrating it into a React component. The app uses React hooks (useState, useEffect) to fetch data via d3.csv from a GitHub-hosted file of CSS named colors, then displays a text summary that computes the dataset’s size in kilobytes, number of rows, and columns. While waiting for the data, the interface shows “Loading…”. The rendering relies on React DOM and D3’s csvFormat to calculate the data’s byte length.

Mar 10, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse a remote CSV file using D3 v6. It fetches CSS named colors data from a GitHub gist, then uses `d3.csv` to parse the file and `d3.csvFormat` to measure its size. The program displays a summary showing the data size in kilobytes, the number of rows, and the number of columns. The commented code also illustrates alternative approaches using the Fetch API with `async/await` and `d3.csvParse`.

Mar 10, 2021

Loading thumbnail…

Mouse follow

This example presents an interactive SVG visualization where a yellow circle continuously follows the mouse cursor across the full browser window. The circle’s position updates in real time as the user moves the pointer. Implemented with React and ReactDOM, the application tracks mouse movement through an `onMouseMove` handler, storing the pointer’s coordinates in component state to render the circle at the current location.

Mar 10, 2021

Loading thumbnail…

Dataviz 2020 Assignment 1 Bryce Walsh

A grid of randomly generated cartoon faces fills the view, each face composed of a colored circle with two eyes and a curved mouth. Constructed with React, each face is a reusable component built from smaller SVG primitives. The D3.js library provides utility functions like `arc` for the mouth’s curved path and `range` to generate the array of faces, while all appearance parameters—colors, sizes, and positions—are randomly assigned on each render.

Mar 9, 2021