Skip to main content
Log in
G

Gyromighty

@Gyromighty·5 public vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, encoding horsepower, miles per gallon, origin, and weight for each vehicle. The visualization uses the Vega-Lite API to construct a circle mark with quantitative fields mapped to x and y axes, a nominal field for color, and a tooltip displaying the vehicle name. Built with vega-lite-api, vega, vega-lite, and vega-tooltip, the chart is styled with a custom configuration that disables axis domains and uses light gray ticks. Data is loaded asynchronously via d3.csv, with the plot sized to fill the viewport.

Nov 18, 2021
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between engine displacement and horsepower for automobile models using the Vega-Lite API, with tooltips displaying car names on hover. It renders a scatter plot with semi-transparent points on a full-screen canvas, configured for a clean dark-on-light aesthetic. The code loads data from a CSV file via D3’s `csv` function, then builds the visualization declaratively with `vl.markPoint` and `vl.x().fieldQ()`, wiring everything together through Vega-Lite and Vega’s runtime, including custom tooltip handling via the `Handler` from `vega-tooltip`.

Nov 17, 2021
Loading thumbnail…

Fork of Smiley Face Part II

This example draws a yellow smiley face that dynamically resizes to fill the browser window. Built with React and rendered as an SVG, it uses circle elements positioned relative to the window’s center, with eye and mouth coordinates calculated from the viewport dimensions. The code leverages ReactDOM for rendering and React’s declarative syntax to create the graphic, which adjusts its radius based on the window’s height.

Nov 10, 2021
Loading thumbnail…

Fork of Smiley Face Part II

This example draws a yellow smiley face that dynamically resizes to fill the browser window. Built with React and rendered as an SVG, it uses circle elements positioned relative to the window’s center, with eye and mouth coordinates calculated from the viewport dimensions. The code leverages ReactDOM for rendering and React’s declarative syntax to create the graphic, which adjusts its radius based on the window’s height.

Nov 10, 2021
Loading thumbnail…

Fork of Let's Make a Face Part I

This fork of “Let's Make a Face Part I” shows the initial step toward building a smiley face, displaying a yellow circle with two smaller black circles for eyes on an SVG canvas. The code uses raw SVG elements—`circle` tags with attributes for center coordinates, radius, fill, and stroke—to draw the shapes, with the face positioned at the center of a 960×500 viewport. Comments in the HTML indicate planned calculations for eye placement and stroke width adjustments, though no interactive or data-driven behavior is present yet.

Nov 10, 2021