kyosimba

@kyosimba·3 public vizzes

Shape with SVG and CSS

This example displays a static collection of SVG primitives—circles, rectangles, lines, and a path—arranged in a small grid. CSS classes style the stroke and fill colors, while nested SVG `<g>` transforms scale and translate the shapes. The code includes commented-out JavaScript that would animate a line by mutating its attributes, but that logic is not active. No external libraries are used, relying entirely on native SVG elements and CSS.

Jan 13, 2021

Loading thumbnail…

Fork of Cars Report

This example demonstrates a simple text-based car report, filtering a hardcoded dataset of four cars by price and formatting the results as a list. The dataset is embedded as JSON, and the visualization uses plain JavaScript with Promises and `setTimeout` to simulate asynchronous data loading. Once the data arrives, the report is generated using array methods like `filter`, `map`, and `join`, and then displayed in an HTML `<pre>` element via `document.getElementById`. The page relies on standard web APIs for DOM manipulation and requires no external libraries.

Jan 13, 2021

Loading thumbnail…

Cars Report

This example presents a simple report of car listings, filtering a hard-coded JSON dataset to show only vehicles priced under $1900. The page initially displays "Hello" and, after a simulated two-second delay via a JavaScript Promise and `setTimeout`, updates the text content of a `<pre>` element with formatted lines like "2009 Ford F150: $1950". The code uses vanilla JavaScript with `Promise`, `Array.filter`, `Array.map`, and `Array.join` to process and render the results, all within a minimal HTML page styled with basic CSS.

Jan 13, 2021