seitzfab

@seitzfab·6 public vizzes

Fork of Fork of Vega-Lite API Template

This example visualizes the relationship between fuel efficiency (miles per gallon), horsepower, weight, and country of origin for cars from the UCI Auto MPG dataset, loaded via a CSV from a GitHub Gist. It uses a scatter plot with circles sized by weight and colored by origin, rendered through the Vega-Lite API and Vega-Lite’s declarative specification. The code registers Vega and Vega-Lite with `vl.register`, configures axes and tooltips via `vega-tooltip`, and sets the visualization to fit the browser window. Data is fetched asynchronously using `d3.csv`.

Jul 11, 2023

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, showing vehicle fuel efficiency against horsepower. Each circle’s size encodes vehicle weight and its color represents the country of origin, with tooltips revealing the car model name. The visualization is built using the Vega-Lite API, which compiles specifications into Vega and renders with D3. Data is fetched as CSV via D3’s `csv` function, and styling customizes axis labels and titles for readability.

Jul 11, 2023

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile engine displacement versus horsepower, with each point representing a car model and tooltips revealing the vehicle’s name. The visualization is built using the Vega-Lite API, which is registered with Vega and rendered as SVG, with data loaded from a CSV URL via d3’s `csv` function. The chart uses a custom configuration for axis styling and respects the browser window’s dimensions by setting width and height dynamically.

Jul 11, 2023

Loading thumbnail…

Fork of Smiley Face Part II

A yellow smiley face fills the browser window, centered and scaled to the viewport’s dimensions. The face is constructed with three SVG circles: a large yellow head with a black stroke, and two smaller black eye circles positioned symmetrically. The React code uses `ReactDOM.render` to draw the SVG directly, computing coordinates from `window.innerWidth` and `window.innerHeight`. The face’s radius adapts to the available vertical space, and the eyes are offset by fixed pixel amounts.

Jul 10, 2023

Loading thumbnail…

Smiley Face Part 1

The visualization displays a classic yellow smiley face composed of three SVG circles: the face outline and two black eyes. It renders declaratively with React, using the ReactDOM library to mount the SVG elements. The face's radius, eye positions, and stroke dimensions are all derived from the canvas dimensions (960 by 500) and computed variables like centerX, centerY, eyeOffsetX, and eyeOffsetY, with a stroke width of 10 pixels. No smile is drawn, only the face and eyes.

Jul 10, 2023

Loading thumbnail…

Fork of Smiley Face Part II

This example renders a yellow smiley face that fills the browser window using React and SVG. The face is centered by translating to the window’s midpoint, with the head as a circle whose radius scales to the viewport height. Eyes are placed using fixed horizontal and vertical offsets, and the mouth is omitted despite being referenced in a commented-out SVG block. The code relies on React 16.9’s `ReactDOM.render` to mount the component into the `#root` element, with all dimensions computed from `window.innerWidth` and `window.innerHeight`.

Jul 10, 2023