Oghenemaro Anuyah

@anuyahmaro·8 public vizzes

Untitled

This example demonstrates collapsible content sections controlled by clickable buttons. The interface presents a set of headers, each of which can be expanded or collapsed to reveal or hide a block of text below it. The implementation uses vanilla JavaScript event listeners to toggle CSS classes and inline `display` styles, responding to user clicks on elements with the class `collapsible`. The page is built with plain HTML and CSS, with styling that changes the button background color on hover and when active, and sets the hidden content area to a specific width with pink text on a white background.

Apr 9, 2021

Loading thumbnail…

Manipulating the artifacts

This interactive HTML page demonstrates an accordion-style interface for concealing and revealing artifact content. Two header divs, labeled “Target name,” toggle the visibility of their adjacent content sections when clicked. The example uses jQuery’s `slideToggle()` method to animate the show/hide behavior and updates the header text based on the content’s visibility state, although both states display the same label. Styling is applied via an external CSS file, with inline styles for borders, while the page loads the jQuery library from Google’s CDN.

Apr 8, 2021

Loading thumbnail…

Mobile Breathing Visualization

This interactive visualization presents a guided breathing exercise using a segmented donut chart built with D3.js and SVG. The four colored arcs represent the phases of a breathing cycle: inhale, hold, exhale, and another hold, each distinguished by green, yellow, and red fills. An animated gray overlay arc, drawn with the D3 arc generator, progressively obscures the segments according to a timed sequence, while a text descriptor updates to label the current phase. The visualization resets and starts when the user clicks or presses the mouse down on the SVG container.

Apr 7, 2021

Loading thumbnail…

Trace

This visualization shows a trace of concept relationships between source and target requirements, rendered as a hierarchical tree with two levels. The SVG layout positions source concepts on the left and target concepts on the right, connected by horizontal curved links. Users can hover over nodes to highlight related connections and trigger a tooltip displaying how the selected concept can be defined, with active links and nodes shaded gray. The code builds the graph from array data containing requirement texts and extracted concepts, using d3.linkHorizontal for the curved paths and D3 selection methods for styling and interactivity.

Apr 1, 2021

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example shows how SVG shapes, paths, and CSS classes combine to create a static composition with varied fills, strokes, and transformations. The visualization displays circles, rectangles, lines, and a polyline path arranged in a scaled and translated group, with explicit colors and stroke styles applied. It uses the SVG DOM API for elements like `<circle>`, `<rect>`, and `<path>`, while CSS rules in `styles.css` define stroke properties for the line group. The code directly constructs the graphic in `index.html` without any JavaScript libraries.

Mar 30, 2021

Loading thumbnail…

Untitled

This example draws a single horizontal curved path on an SVG canvas using D3 v5’s `d3.linkHorizontal` generator. The path connects a fixed source point at (20, 10) to a target point at (280, 100), with a dark slate blue stroke and no fill. The code defines data with explicit source and target coordinates, then appends a `<path>` element to an empty `<svg>` selected via `d3.select`. The accompanying files include CSV datasets with clinical system requirements and concept relationships, but the visualization itself only renders the static link and does not use those files.

Mar 29, 2021

Loading thumbnail…

Introduction to D3

This example presents a bar chart of country populations using a simple SVG and a small dataset. Built with D3 v6, it loads population data from a CSV file and renders a horizontal bar chart. The code uses `d3.scaleLinear` for the quantitative x-axis, `d3.scaleBand` for categorical y-axis, and `d3.axisLeft` with `d3.axisBottom` to draw chart axes. The visualization demonstrates basic D3 syntax for data binding, scaling, and SVG element creation.

Mar 28, 2021

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page rendering the text “Hello HTMLi” in large, centered type. It works by combining CSS for styling with inline JavaScript that logs a message to the browser console. The page uses plain HTML elements, a `style` block for layout, and a `script` tag to call `console.log`. It does not use any external libraries or frameworks.

Mar 26, 2021