androtop

@androtop·5 public vizzes

temperature hart

This visualization displays three temperature measurements—top, ambient, and bottom—as overlaid lines plotted against time. The layered chart uses the Vega-Lite API to define each line with distinct colors and tooltips. Data is loaded from a CSV file fetched via D3’s `csv` method, sourced from a gist. The visualization is rendered on canvas, with configuration adjustments for axis styling and label readability.

Oct 3, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to create a scatter plot of automobile data from the UCI Auto MPG dataset, loaded via `d3.csv`. The visualization encodes the vehicle’s country of origin on the x-axis and horsepower on the y-axis, with each point representing a car model and a tooltip showing its name. The plot uses a semi-transparent circle mark to emphasize overlapping points and is rendered on a full-window canvas via `vega-lite-api` with a custom dark-themed configuration for improved readability.

Oct 3, 2021

Loading thumbnail…

Smiley face 1

A grid of six by three smiley faces reacts to mouse movement, with each face's eyes tracking the cursor position across the entire viewport. Built with React and D3 v7, the visualization renders SVG circles and arcs for the facial features, while the eye movement is computed using trigonometric functions and mouse event coordinates. Each face has randomized eye and mouth parameters, and the mouse tracking adjusts the pupils' positions based on the relative distance to the cursor.

Sep 23, 2021

Loading thumbnail…

Mouse follower

A yellow circle follows the mouse cursor across an SVG canvas using React state to track pointer position. The component listens to `onMouseMove` events on the `<svg>` element and updates the circle’s `cx` and `cy` attributes accordingly. It uses React hooks (`useState`, `useCallback`) for state management, while the `d3` library is imported for its `arc`, `line`, and `range` utilities, though only the basic SVG circle rendering is demonstrated here. The initial position is centered at 480×250.

Sep 22, 2021

Loading thumbnail…

Loading a parsing CSV Data

This example demonstrates the initial step of loading and parsing CSV data from a remote source. It fetches a raw CSV file hosted on GitHub Gist using the Fetch API and converts the response to text with the `response.text()` method, then logs the raw contents to the browser console. The code includes an asynchronous `fetchText` helper function, alongside a commented-out alternative using promise chaining. It does not yet visualize the data, focusing solely on retrieving and inspecting the CSV payload to prepare for subsequent parsing and charting.

Sep 22, 2021