lok noe

@lok-noe·6 public vizzes

Sol LeWitt with D3

This example renders a minimalist, generative composition inspired by Sol LeWitt using D3.js. It draws one hundred horizontal rectangles stacked vertically, each with a fixed height and dynamic width, all clipped by a circular mask. The SVG output uses a black background rectangle inside the mask to reveal the bars only within the circle’s bounds. The code relies on D3’s `select`, `range`, and `join` methods to create the rectangles, demonstrating a simple data-driven approach to geometric art.

Apr 26, 2023

Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shapes, showing two circles of equal radius positioned side-by-side, with only the second circle explicitly filled red. The underlying code is a minimal HTML page that uses raw inline SVG markup within the `index.html` file, placing the shapes in a coordinate system without any additional CSS styling or JavaScript logic. The visualization highlights how SVG’s default black fill contrasts with an explicit fill attribute, and the implementation relies solely on the browser’s built-in SVG support rather than external libraries.

Apr 26, 2023

Loading thumbnail…

SVG Fundamentals

This example demonstrates the basics of SVG rendering through a simple face-like composition of three circles on a yellow background. A large yellow circle with a black stroke forms the head, while two smaller circles serve as eyes. The code uses raw SVG elements within an HTML page, showing how shape attributes like `cx`, `cy`, `r`, `fill`, and `stroke-width` control visual output. It also includes a React setup via the `react` and `react-dom` libraries, though the SVG itself is written directly in the markup rather than generated programmatically. The example serves as a minimal introduction to combining declarative SVG with a React application structure.

Jan 23, 2023

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automobile data from the UCI Machine Learning Repository, with each car’s origin encoded by color and weight by point size. The visualization is built using the Vega-Lite API, which abstracts the declarative Vega-Lite specification into a programmatic interface, and renders through Vega’s SVG engine. Data is loaded asynchronously via D3’s `csv` function, and a custom tooltip is attached using the Vega-Tooltip `Handler` class. The chart’s axes and labels are styled through a custom Vega-Lite configuration object.

Nov 14, 2021

Loading thumbnail…

SVG Fundamentals

This example demonstrates a single black circle rendered on a white canvas, showcasing the basic SVG shape elements. The visualization is created using raw SVG markup within an HTML `index.html` file, specifically employing the `<svg>` and `<circle>` tags to define the graphic. The circle is positioned with `cx`, `cy`, and `r` attributes, setting its center coordinates and radius. The entire graphic depends on the browser’s native SVG rendering engine, requiring no external JavaScript libraries. The work serves as a fundamental primer on declarative vector graphics, illustrating how simple shapes form the core building blocks of scalable data-driven diagrams.

Nov 13, 2021

Loading thumbnail…

Hello Lothar

This example displays a simple SVG face composed of a large yellow circle with a black outline for the head and two smaller unfilled circles for the eyes, all rendered directly in an HTML page. The static artwork is created using raw SVG elements—`<svg>`, `<circle>`, and attributes like `cx`, `cy`, `r`, `fill`, and `stroke`—within a basic HTML document, with CSS styling for the body margin and overflow. No interactive behavior or data binding is present; the visualization relies purely on declarative markup to produce the fixed composition.

Apr 6, 2020