dreesmpk

@dreesmpk·4 public vizzes

Vega-Lite API Template

This example demonstrates a scatter plot of automobile data, showing the relationship between engine displacement and horsepower, with each point representing a car model. The visualization is built using the Vega-Lite API, which constructs a specification that is then compiled and rendered by Vega and Vega-Lite. Data is loaded asynchronously from a CSV file via `d3.csv`, and the plot is configured with custom axis styles and tooltips via the `vega-tooltip` Handler. The chart fills the browser window and uses an interactive SVG renderer.

Jul 28, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example shows how to load and parse CSV data in the browser using the native Fetch API. The code fetches a remote CSV file containing color data from a GitHub Gist and logs its raw text content to the console. It demonstrates an asynchronous JavaScript pattern using `fetch` and `response.text()` to handle the network request, with a commented-out alternative approach for comparison. The visualization itself is not yet rendered, as the focus is entirely on the data-loading step.

Jul 24, 2021

Loading thumbnail…

Smiley Part 4

The visualization displays a grid of fifteen cartoon faces, each rendered as a yellow circle with black outlines, green and purple eyes, a nose, and a curved mouth. The faces vary slightly due to random values applied to eye and nose radii. Built with React components and D3 v7, the code uses `d3.arc` to generate the mouth path and `d3.range` to create the array of faces. Each face is positioned within an SVG container using a translated group, combining declarative React state with D3’s geometry utilities.

Jul 22, 2021

Loading thumbnail…

Let's Make a Face Part I

A single yellow circle with a black outline forms the base of a smiley face. Two smaller black circles serve as eyes, positioned symmetrically on either side of the face's vertical center. The code uses raw SVG elements—a `<circle>` for the face and two additional `<circle>` elements for the eyes—directly embedded in an HTML document. The fixed 960 by 500 viewport and manual coordinate calculations for the eye positions are visible in the source.

Jul 16, 2021