otis

@otislambert·4 public vizzes

Rendering Data with React

This example shows a React-driven visualization that renders CSS named colors as individual SVG paths, with each color represented by a filled shape. The app loads color data from a CSV file using D3’s `csv` utility, then uses React’s `useState` and `useEffect` hooks to fetch and store the data asynchronously. ReactDOM renders an SVG containing one `<path>` per color, filling each with its corresponding hex value from the dataset. The code also includes a separate message module that reports file size, row count, and column count, though it is not displayed in the final output.

Aug 22, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the relationship between land-use change and transport emissions for various food products, using color and tooltips to identify items. The visualization is built with the Vega-Lite API, which programmatically defines the chart specification, while the underlying data is loaded as a CSV file from Our World in Data. Rendering is handled by Vega, with d3.csv fetching the data and the Vega Tooltip handler providing interactive hover details. The chart fills the browser window and is configured for readability with custom fonts and axis styling.

Aug 20, 2022

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a static smiley face rendered in React, with a yellow circle for the head, a black outline, and two smaller circles for eyes. The code uses React 18 and ReactDOM to render the SVG directly in the browser. It appears to be a work-in-progress, as the facial elements are incomplete. The source includes an instructional video link, suggesting this is a practice exercise. The SVG dimensions are fixed at 960 by 500 pixels, with circles positioned using explicit coordinates.

Aug 18, 2022

Loading thumbnail…

Hello HTML

This example shows a simple emoji-like face drawn as a yellow circle with two smaller black circles for eyes, all inside an SVG canvas of 960 by 500 pixels. The circle elements are defined directly in the HTML file using SVG markup. The page is styled with a zero margin and hidden overflow to present the graphic without scrolling. The visualization relies solely on inline SVG and CSS, with no JavaScript or data libraries, and is rendered in the browser as a vector graphic. The included YouTube video demonstrates how the source code was built.

Aug 18, 2022