S-Au-Zn

@S-Au-Zn·4 public vizzes

Fork of Vega-Lite API Template

This scatter plot visualization explores the relationship between fuel efficiency and horsepower across car models, using color to encode the region of origin and point size to represent vehicle weight. The plot is built with the Vega-Lite API, which registers with Vega and Vega-Lite libraries to render an SVG chart, while D3.js handles fetching and parsing the CSV data. Tooltips display vehicle names via the Vega Tooltip handler. The data originates from the UCI Machine Learning Repository’s Auto MPG dataset, loaded from a GitHub Gist.

Apr 4, 2023

Loading thumbnail…

Fork of Smiley Face Part III

This example shows a yellow smiley face rendered as an SVG graphic, composed of a large circle for the head, two small circles for the eyes, and an arc-shaped mouth. It demonstrates how to build a static visualization by combining React components with D3’s `arc` generator for the mouth path. The code uses `d3.arc()` with defined inner and outer radii and angular ranges, while React manages the SVG elements and props. The layout is centered using fixed pixel coordinates, with style attributes for stroke and fill applied directly.

Apr 3, 2023

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a static yellow smiley face drawn on an SVG canvas, with a large circular head and two black eyes positioned symmetrically around the center. The rendering uses raw SVG elements—`<circle>` tags with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes—defined directly in the HTML. No JavaScript libraries or data-binding APIs are involved; the face is hardcoded as markup, with a 960×500 viewport and a 10-pixel black stroke outlining the head. The title references a video tutorial, but the visualization itself contains no animation or interactive behavior.

Apr 3, 2023

Loading thumbnail…

Fork of HTML Starter

This example displays a minimal React application that renders a simple “hello” heading on a blank page. The code sets up a full-screen layout with zero margin, and uses ReactDOM to mount the App component into the #root div. It loads React 16.9.0 from a CDN, with the core component defined in index.js and a separate bundle.js file for the application logic. The visualization is primarily a starting point for building more complex data-driven React visualizations, with no actual data or charting library in use beyond the basic React rendering API.

Apr 3, 2023