acampbellblack

@acampbellblack·5 public vizzes

Fork of Vega-Lite API Template

This fork of the Vega-Lite API template displays a time-series area chart of temperature data from a CSV file. The visualization uses the `vega-lite-api` to define a markArea encoding with `timestamp` on the x-axis and `temperature` on the y-axis, including a tooltip. The code loads data via `d3.csv` and renders the chart using Vega-Lite and Vega, with custom styling from a `config.js` file and tooltip functionality from `vega-tooltip`. It fills the browser window by setting the width and height to the viewport size.

Feb 22, 2023

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL using the browser’s Fetch API. It fetches a CSV file containing CSS color names and values, converts the response to text, and logs the raw CSV string to the console. The code uses `fetch` and `async/await` to handle the asynchronous request, showing the initial step of retrieving external tabular data for later visualization. No parsing library like d3.csv is used; instead, the output is the unprocessed text content.

Feb 22, 2023

Loading thumbnail…

Tweaked face

A yellow face with black outlines illustrates a modular React component approach to SVG visualization. The face consists of separate elements for the background circle, eyes, and mouth, composed within a container that centers the drawing. D3's `arc` generator creates the mouth path, while the overall structure uses React props to parameterize dimensions like eye offset and stroke width. The visualization demonstrates how reusable, data-driven components can be assembled to create customizable graphics.

Feb 21, 2023

Loading thumbnail…

Fork of Smiley face part 2

This example shows a smiley face built from SVG shapes, with a yellow circle for the head, two black eyes, and a curved mouth drawn as an arc. The face is centered in a 960x500 viewport, with the mouth rendered using D3’s `arc()` generator with specified inner and outer radii and start/end angles. The visualization is implemented in React, using ReactDOM to render the SVG tree, while D3 v7 provides the arc path calculation. Each element is positioned via SVG coordinates and a translate transform.

Feb 18, 2023

Loading thumbnail…

Smiley face part 1

A large yellow circle filled with a black outline sits at the center of the SVG canvas, with a smaller black-outlined circle positioned to its upper left. The example uses inline SVG elements—specifically two `<circle>` tags—to construct the beginnings of a smiley face, though the facial features are incomplete. Rendered directly in the HTML with no external JavaScript libraries, the SVG viewport is set to 960 by 500 pixels with the main circle centered at (480, 250). The code defines explicit positioning and styling attributes for each circle, demonstrating basic vector graphics construction.

Feb 18, 2023