Bagaski

@bagaski·8 public vizzes

SVG Fundamentals 2022!

This example demonstrates fundamental SVG shapes arranged in a grid pattern, including circles, lines, a rectangle, and a freeform path. The code uses raw SVG APIs directly in an HTML document, with elements such as `<circle>`, `<line>`, `<rect>`, and `<path>` styled via attributes like `fill`, `stroke`, and `stroke-width`. A bright green background and vibrant magenta, blue, yellow, and red shapes create a playful visual composition. The rendering approach relies on static SVG markup without external libraries, showcasing basic vector drawing capabilities and coordinate placement within a 400x300 viewport scaled to fill the browser window.

Oct 14, 2022

Loading thumbnail…

Bagaski's Fork of Vega-Lite API Template

This example uses Vega-Lite API to create a scatter plot of Automobile MPG data from the UCI Machine Learning Repository. The visualization displays vehicles as points, mapping year to the x-axis, origin to the y-axis, and weight to point size, with color encoding origin. It uses `vl.markPoint`, `vl.x()`, `vl.y()`, `vl.color()`, `vl.size()`, and `vl.tooltip()` to construct the chart, rendered as SVG via the `vega` and `vega-lite` libraries. The code customizes axis and label styling through a config object, and loads data with `d3.csv` from a remote Gist.

Jun 27, 2021

Loading thumbnail…

Display a csv message with d3 & react

This example displays a CSV file’s metadata as a single large text message using React and D3. The page, styled with a centered 10em font, initially shows “loading…” until the CSS color names CSV finishes fetching from a GitHub gist. The React `App` component uses D3’s `csv` function to asynchronously load the data, then calls `d3.csvFormat(data).length` to compute the number of rows, which is rendered inside a `<div>`. The code relies on React’s `useState` hook and `ReactDOM.render` to update the view.

Apr 25, 2021

Loading thumbnail…

Tweak the Face!

This example displays a cartoon face built from modular React components, including separate face, eye, and mouth elements. The face and eyes use SVG circles, while the mouth is generated with the `d3.arc` API to create a curved path. Eye colors and facial dimensions are passed as props, allowing the appearance to be tweaked. The entire composition is rendered as an SVG within a React application using D3 v6, with the head centered via SVG transforms.

Apr 8, 2021

Loading thumbnail…

The React & d3 Smiley Face

A minimal smiley face rendered as an SVG using React components, with d3’s `arc` generator drawing the mouth. The face consists of a yellow circle, two black eye circles, and a curved mouth path, all centered and scaled relative to a fixed viewport. React 17 manages the DOM, while D3 v6 provides the arc shape’s path data. The example demonstrates combining React’s declarative JSX with D3’s geometry utilities for simple, static SVG composition.

Apr 5, 2021

Loading thumbnail…

A React Smiley Face

This example renders a simple smiley face using React and SVG. The face consists of a yellow circle for the head and two smaller black circles for the eyes, all drawn with explicit `circle` elements. The React component `App` returns the SVG markup, and `ReactDOM.render` mounts it into the DOM. The code loads React and ReactDOM from CDN scripts and uses JSX to define the component, with dimensions set as constants for the SVG viewport.

Apr 2, 2021

Loading thumbnail…

Let's make a face - Part I

A simple SVG face composed of three overlapping circles—a large yellow head and two black eyes—rendered in a fixed 960×500 viewport. The example demonstrates static SVG drawing within a plain HTML page, with the React library loaded via CDN but only used to log the global `React` object to the console. No interactive behavior or data binding occurs; the face is defined directly with circle coordinates and stroke properties in the markup. The code relies on native SVG elements and React 16.9, with styling presumably applied via an external stylesheet.

Mar 18, 2021

Loading thumbnail…

A Fork of the HTML Starter

This example displays a single line of text, “ Hey! HTML JavaScript CSS,” in large navy letters against a pink background. The page uses D3.js v6’s `select` method to target the body element and set its text content, demonstrating basic DOM manipulation with D3. The visualization is built with HTML, CSS, and JavaScript, with the styling defined in a `<style>` block and D3 loaded via a CDN script tag. The rendering approach is simple text display, showing how D3 can be used for minimal, non-graphical web interactions.

Mar 15, 2021