Tyler Brown

@tab250·6 public vizzes

Fork of Working with Time

This scatter plot visualizes temperature readings over time using the Data Canvas Sense Your City dataset. The visualization encodes timestamps on the x-axis and temperature values on the y-axis, with each circle representing a data point. Tooltips reveal the day of the week for each point. Built with React and D3 v5, the code uses d3.scaleTime and d3.scaleLinear for scaling, d3.extent for domain calculations, and d3.csv for data loading. SVG circles render the marks, with custom AxisBottom and AxisLeft components generating the tick marks and labels.

Jun 25, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This interactive example demonstrates the process of loading and parsing CSV data from a remote URL, fetching the CSS Named Colors dataset. Using D3.js v5, it displays the file size in kilobytes, the number of rows, and the number of columns in a large text format. The primary approach employs `d3.csv`, with commented-out alternatives showing `fetch` with `async`/`await` and `d3.csvParse`. The interface is minimal, rendering the computed statistics within a `<pre>` element.

Jun 15, 2021

Loading thumbnail…

Mouse Follower

A yellow-stroked circle tracks the mouse cursor across an SVG canvas. The React component uses `useState` to store the pointer's coordinates and `useCallback` to update them on every `onMouseMove` event. Rendered with React DOM and SVG, the circle’s `cx` and `cy` attributes are bound directly to the current mouse position.

Jun 15, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL using the Fetch API. The program defines an asynchronous function, `fetchText`, which retrieves text from a given URL and returns it as a string. It then calls this function with a CSV file containing CSS named colors, hosted as a GitHub Gist, and logs the parsed text to the browser console. The code also includes a commented-out alternative using the Promise-based `fetch` method with nested `response.text()` calls.

Jun 15, 2021

Loading thumbnail…

Full Smiley Face

This example renders a classic smiley face as a scalable vector graphic. The face is composed of a yellow circle, two black eyes, and a mouth, all positioned within an SVG container. The code builds the face using React components, with each part like the eyes and background defined in separate files. The mouth is generated using the D3.js `arc` function, which creates a path with specified inner and outer radii and angles. The entire composition is centered and sized through props passed to the main `Face` component.

Jun 15, 2021

Loading thumbnail…

Smiley Part I HTML

This example shows the first stage of a smiley face built as a standalone HTML page. A large yellow circle forms the head, with two smaller black circles serving as eyes, all rendered in a fixed 960×500 SVG canvas. The code uses plain SVG elements—`circle` with explicit `cx`, `cy`, `r`, and stroke attributes—styled via inline CSS to hide the page margins. It is a purely static visual, with no interaction or animation, and serves as a baseline for further facial features.

Jun 15, 2021