Bobby Bowes

@rmbowes·6 public vizzes

Bowes Vega-Lite API Template

This example displays a bar chart of student course enrollments and their year-end grades (Y1) from a school grades dataset. The visualization uses the Vega-Lite API to define a bar mark, encoding course titles as the x-axis and an aggregate count of Y1 grades as the y-axis. Data loading relies on D3’s `csv` function, while the chart is rendered with Vega and Vega-Lite in a browser. The tooltip handler and configuration object customize the visual appearance and interactivity.

Mar 27, 2022

Loading thumbnail…

Load Data with D3 and React

This example demonstrates how to load CSV data with D3 and integrate it into a React component’s state. The app fetches a named-colors dataset from a GitHub gist using `d3.csv`, then displays the file size, row count, and column count in large red text. The React `useState` and `useEffect` hooks manage the asynchronous data loading, while a separate `message.js` utility formats the summary using `d3.csvFormat` and the `data.columns` property.

Mar 27, 2022

Loading thumbnail…

Color Starter

This example displays the size and structure of a color-named CSV dataset, showing the file size in kilobytes, row count, and column count. It uses D3 v7’s `d3.csv` to asynchronously fetch and parse the remote CSV, then formats the metrics with `d3.csvFormat` and updates a `<pre>` element. A static title and large CSS typography frame the output. The code also includes commented alternatives using `fetch` and `d3.csvParse`.

Mar 27, 2022

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across an SVG canvas, updating its position in real time to mirror the user’s pointer movements. The visualization uses React’s `useState` and `useCallback` hooks to manage the cursor’s coordinates, captured through the `onMouseMove` event on the `<svg>` element. The circle is rendered via ReactDOM, with its center tied to the `clientX` and `clientY` values from the event, demonstrating a straightforward state-driven interactive graphic.

Mar 27, 2022

Loading thumbnail…

Smiley Face Part II

This gallery example displays a grid of 48 randomized smiley faces rendered as SVG components in React. Each face uses D3’s `arc` generator to create the mouth and nose shapes, while eyes and the circular background are drawn with basic SVG circle elements. The D3 `range` function generates the array used for the grid, and each face’s properties—such as eye offset, radius, and stroke width—are randomly assigned per iteration. The faces are positioned within a translated group inside an SVG container, demonstrating component reuse and parameterized visualization.

Mar 27, 2022

Loading thumbnail…

Smiley Face Part I

This example shows a static smiley face drawn as a yellow circle with two black eyes and an empty space where a mouth will be added later. The code renders the SVG elements directly in the HTML file, setting the circle center, radius, and stroke properties. It uses React 17 with `react-dom` to mount the app, though the actual drawing lives outside the React component. The SVG viewport is 960 by 500 units, and the face uses basic geometric shapes without any data-driven visualization or interactive features.

Mar 26, 2022