CeciliaW888

@CeciliaW888·6 public vizzes

Vega-Lite API Template

This example demonstrates a scatter plot of auto MPG data, showing miles per gallon versus horsepower, with points colored by origin and sized by vehicle weight. The visualization is built using the Vega-Lite API, which is registered with Vega and Vega-Lite, and rendered as SVG. Data is loaded via d3.csv from a Gist hosting the UCI Machine Learning Repository’s Auto MPG dataset. Interactive tooltips display car names, with layout and axis styling configured through a custom config object.

Apr 8, 2023

Loading thumbnail…

Sol LeWitt Reproduction Final

This example reproduces a Sol LeWitt wall drawing using two SVG masks to create a central circular region where intersecting horizontal and vertical lines alternate between foreground and background. The code builds the visualization with plain JavaScript and SVG DOM manipulation, using the `mask` element with black and white `rect` and `circle` shapes to control visibility. Each of the 100 lines is drawn as a thin `rect` element, with horizontal lines clipped by the first mask and vertical lines clipped by the second, producing a geometric pattern that shifts contrast inside and outside the circle.

Mar 26, 2023

Loading thumbnail…

Sol LeWitt Reproduction

This visualization reproduces a Sol LeWitt-inspired geometric composition using only SVG rectangles, creating a rhythmic pattern of vertical bars across the full viewport. The code generates 100 rectangles, each 10 pixels wide and positioned at 20-pixel intervals, using the Document Object Model (DOM) method `createElementNS` to construct SVG elements in plain JavaScript. The rectangles stretch from the top to the bottom of the window, with their height tied to the viewport’s dimensions. The minimalist approach mirrors LeWitt’s instructional art style, relying on simple, repeated shapes to produce a clean, abstract visual statement.

Mar 23, 2023

Loading thumbnail…

JavaScript Basics

This example demonstrates basic JavaScript syntax and concepts using console output. The code defines functions and objects, including a `person` arrow function that returns an object with `first` and `last` properties, and logs the result to the browser console. It also shows commented-out examples of variable declaration with `const` and `let`, loops, and arithmetic operations. The page uses a simple CSS class for styling but no external libraries or data sources.

Mar 23, 2023

Loading thumbnail…

Playground

This example shows a simple static composition of seven black circles scattered across a light gray and white background. The circles vary in position but share a uniform size and fill. The visualization is implemented with an inline SVG element within a minimal HTML document, using basic SVG shapes like `<circle>` and `<rect>`. No JavaScript or external libraries are involved; the rendering relies entirely on SVG’s native vector graphics.

Mar 17, 2023

Loading thumbnail…

SVG Fundamentals

This example demonstrates core SVG shapes—a red circle, a blue outlined rectangle, and an empty line—drawn on a 400-by-400 canvas using plain SVG markup. It shows how basic geometric elements are positioned via `cx`, `cy`, `r`, `x`, `y`, `width`, `height`, and `stroke` attributes, with `fill` and `stroke` controlling appearance. The code runs directly in an HTML page without any JavaScript libraries, relying only on native SVG rendering in the browser. It serves as a minimal introduction to SVG fundamentals for static visualization construction.

Mar 17, 2023