ShaneBowen1

@ShaneBowen1·11 public vizzes

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between four flower measurements (sepal and petal length/width) and species. Two dropdown menus, implemented as React components, let viewers independently select which attributes appear on the x- and y-axes. The visualization uses d3.scaleLinear for coordinate mapping, with React managing state updates and SVG rendering ticks, circles, and axis labels. Data loads asynchronously via d3.csv from a remote gist, and each data point includes a tooltip showing its exact value.

Mar 18, 2021

Loading thumbnail…

Menus with React

This example demonstrates how to build an interactive pet selector using React. It renders a dropdown menu with six animal options, and the selected value is displayed in the browser console via `console.log`. The code uses React’s `useState` hook to manage the selected value and a custom `Dropdown` component that maps options to HTML `<select>` elements. The UI is styled with CSS, and the app is mounted with `ReactDOM.render` into a root div.

Mar 18, 2021

Loading thumbnail…

Axes with React & D3

This example visualizes the top 10 most populous countries as a horizontal bar chart. Each bar’s length encodes the country’s 2020 population, with a formatted x-axis (using `d3.format` to abbreviate large numbers) and a labeled y-axis. The chart is built with React components that return SVG elements, using `d3.scaleBand` and `d3.scaleLinear` for positioning. Data comes from the United Nations World Population Prospects 2019, loaded via `d3.csv`.

Mar 16, 2021

Loading thumbnail…

Fork of Rendering Data with React & D3

This radial burst visualization displays all CSS named colors as equal-sized arcs around a central point. Built with React and D3 v5, it loads color data from a CSV file using D3’s `csv` utility, then renders the arcs as SVG `path` elements. React manages the application state and UI, while D3’s `pie` and `arc` functions compute the angular geometry for each color slice.

Mar 16, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a scatter plot of Auto MPG data from the UCI Machine Learning Repository, sourced via a Gist CSV. The visualization encodes miles per gallon on the x-axis, horsepower on the y-axis, colors points by origin, scales size by weight, and adds tooltips for vehicle names. It registers Vega, Vega-Lite, and the vega-lite-api library, then loads the data with d3.csv, applies a custom dark-themed config for axis styling, and fits the chart to the window dimensions.

Mar 16, 2021

Loading thumbnail…

Loading data with React and d3

This example demonstrates how to load and summarize a CSV dataset in a React application using d3. The app fetches CSS named colors data from a GitHub gist and displays its file size, row count, and column count in a large text element. React’s `useEffect` hook triggers the asynchronous `d3.csv` request, while `d3.csvFormat` calculates the data’s byte length. The visualization is rendered as SVG-free text via the `pre` element.

Mar 16, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates the basic workflow of loading and parsing a CSV file containing CSS named colors. It displays summary statistics, including the file size in kilobytes, the number of rows, and the number of columns, directly in the browser. The visualization uses D3.js version 5, specifically the `d3.csv` method to fetch the remote data asynchronously and the `d3.csvFormat` function to calculate the data size. The data originates from a GitHub Gist.

Mar 16, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a single unfilled circle that follows the mouse cursor across the full browser window, rendered as an SVG element. The circle’s center coordinates update continuously on mouse movement, using React’s `useState` and `useCallback` hooks to manage and optimize state changes. The visualization is built with React 16.9 and ReactDOM, rendering directly to the DOM, with the SVG’s `onMouseMove` event driving the interactive behavior. The underlying code includes commented-out static smiley-face circles, indicating the fork’s evolution from a fixed illustration to a mouse-tracking interactive graphic.

Mar 16, 2021

Loading thumbnail…

Fork of Smiley Face Part VI

The gallery entry shows a grid of randomly generated smiley faces, each rendered as an SVG with a yellow circle, two eyes, and an arc-shaped mouth. Built with React components and D3’s `arc()` API for the mouth path, the code uses `d3.range` to create 18 faces and applies randomized stroke widths, eye offsets, eye radii, and mouth dimensions. The `FaceContainer` wraps SVG elements, centering each face via a transform, while React’s `map` function renders the collection. The result is a playful variation set demonstrating declarative component reuse and D3’s geometric utilities within a React application.

Mar 16, 2021

Loading thumbnail…

Fork of Smiley Face Part III

This visualization displays a smiling face constructed from a yellow circular background, two black eyes, and an arc-shaped mouth. The React components pass geometry values like radius, offsets, and stroke width through props, while the D3 `arc()` generator computes the mouth’s path. All elements render as SVG, with the face centered using a translation group.

Mar 16, 2021

Loading thumbnail…

Smiley Face Part 1

This example displays a yellow smiley face centered on an SVG canvas, built entirely with React and D3 v6. The face consists of a circular head, two black eye circles, and a curved mouth created using the `arc` generator from the D3 shape module. The `arc` function constructs the mouth path with specified inner and outer radii and angular extents, while React renders the SVG elements declaratively. The code defines all dimensions as constants, including eye offsets, radius, and stroke width, layering the shapes within a translated group element.

Mar 16, 2021