savalifestus75@gmail.com

@Festohvs·7 public vizzes

Marks

This example demonstrates how to create an interactive smiley face using D3.js, with its eyebrows animated to move dynamically. The visualization renders as inline SVG elements, and the code also displays project and laptop budget values as an HTML list. It uses D3’s selection methods (`d3.select`, `selectAll`, `data`, `enter`, `append`) to bind data to DOM elements and update the list. The implementation relies on D3 v7, alongside an embedded YouTube tutorial for explanation, and loads the library via CDN.

Jan 12, 2024

Loading thumbnail…

Uganda Budget

A static bar chart displays the Uganda budget, comparing two named categories, project and laptop, with values 50 and 40. The visualization uses D3.js v7 to bind the data object to list items via `d3.select`, `selectAll`, `data`, and `enter`, appending list elements that render the numeric values. The page also includes an empty SVG for a smiley face, but the code only populates the list. The example demonstrates fundamental DOM manipulation with direct data binding, rendering the budget figures as text items rather than geometric shapes.

Jan 4, 2024

Loading thumbnail…

Uganda Budget

This example demonstrates fundamental DOM manipulation with D3.js by rendering a smiley face whose eyebrows move, alongside a list representation of Uganda’s budget data. The visualization pairs an SVG face with a `<ul>` element populated using `d3.select`, `selectAll`, `data`, `enter`, and `append` to bind a simple object containing project and laptop values. The face animation relies on D3 v7’s selection and attribute methods, though the code also loads an unused older D3 version. The budget data appears as list items, showing text binding without visualization of proportions or comparison.

Jan 4, 2024

Loading thumbnail…

Uganda Budget

This visualization presents a treemap of Uganda’s national budget, partitioning government expenditures into nested rectangles sized by allocated funds. Each block represents a ministry or department, with color coding to differentiate spending categories. Built with the D3.js library, the layout is computed using a squarified treemap algorithm and rendered via SVG `rect` elements. Data for the 2021/2022 fiscal year is loaded from a JSON file, and hover interactions display tooltips with detailed line-item values using D3’s `enter` and `exit` transitions.

Jan 3, 2024

Loading thumbnail…

Fork of Sol Lewitt Reproduction

This example reproduces Sol LeWitt’s geometric wall drawing using SVG masks and repeated rectangles to create intersecting striped patterns. A circular mask reveals portions of horizontal and vertical bars, while the second mask inverts the visibility to produce a checkerboard-like overlap. The page uses raw JavaScript with `document.createElementNS` to build the SVG dynamically, sizing elements to the full browser window. No external libraries are required, and the work is a direct homage to the artist’s instructional art.

Dec 29, 2023

Loading thumbnail…

Sol Lewitt Reproduction

This piece is a generative art reproduction of a Sol LeWitt wall drawing, rendered as an SVG. The composition uses a constrained, systematic arrangement of lines and shapes to evoke the artist's conceptual style. Built with React, the programmatically generated SVG leverages the framework's declarative structure to construct the vector-based artwork. The reproduction demonstrates how computational methods can reinterpret the rules-based aesthetics of minimalist art within a modern web development context.

Dec 29, 2023

Loading thumbnail…

Sol Lewitt Reproduction

This visualization reproduces a Sol Lewitt-inspired drawing using a series of vertical bars. The code generates 100 rectangles using the SVG API, positioning each one 20 pixels apart with a width of 10 pixels, creating a repeating striped pattern that spans the full height of the browser window. The rendering approach is procedural and algorithmic, with the SVG elements created dynamically via JavaScript’s `createElementNS` method and appended to the document body. The bars’ spacing is hardcoded, producing a clean, minimalist geometric composition.

Dec 29, 2023