maker57sk

@maker57·4 public vizzes

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, displaying vehicle weight against horsepower with points colored by origin and sized by weight. A tooltip reveals the car’s name on hover. The code builds the visualization declaratively via `vl.markCircle`, `vl.encode`, and field mappings, then registers Vega-Lite with vega and vega-lite-api, using d3’s `csv` loader for data retrieval and custom configuration for styling axes and labels.

Feb 26, 2021

Loading thumbnail…

Fork of Smiley Face Part II

A yellow smiley face is drawn as a static SVG circle with two black eye circles and a wide mouth, all specified within commented-out markup in the HTML. The React application renders an interactive SVG where a single circle tracks the mouse position, updating its center coordinates via React state and event handling. The code uses React 16.9.0, ReactDOM, and the `useState` and `useCallback` hooks to manage mouse movement events, with the SVG dimensions set to 960 by 500 pixels.

Feb 24, 2021

Loading thumbnail…

Fork of HTML Starter

This example loads a remote CSV file containing CSS named colors and logs its contents to the browser console. It uses the Fetch API to retrieve the text, then parses it into a string for inspection. The visualization demonstrates asynchronous data loading with modern JavaScript, though it currently shows no graphical output—only the raw parsed CSV data in the console. The code relies on `fetchText`, a custom async wrapper around `fetch` and `response.text()`, pointing to a GitHub Gist as the data source.

Feb 24, 2021

Loading thumbnail…

Smilie face part 1

This example displays a grid of eighteen randomly generated smiley faces, each with varying stroke widths, eye offsets, eye radii, mouth widths, and mouth radii. The faces are composed of SVG circles and an arc for the mouth, positioned within a translated group. The React application maps over a D3 range to create the faces, using D3's arc generator to construct the mouth path.

Feb 24, 2021