Santaends

@Santaends·4 public vizzes

Let's make a face!

This example demonstrates how to build a simple face using JavaScript objects, arrays, and modules, rendering it as an SVG graphic. The page sets a red background on the SVG canvas and uses D3 version 7.3.0 to select the `<svg>` element and apply styling. The visualization highlights basic D3 selection and styling methods, with the face construction logic likely intended for further development. The code relies on `d3.select` and the `.style()` API to manipulate the SVG directly.

Jan 27, 2022

Loading thumbnail…

Shapes Report

This example shows a static SVG canvas of geometric shapes, including circles, rectangles, lines, and a path. The shapes are grouped and transformed using SVG’s `scale` and `translate` attributes, with some elements inheriting stroke and fill styles from CSS classes. The code uses raw SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>`, with inline attributes for positioning and colors, alongside external stylesheet rules to define stroke width and color for the line group.

Jan 27, 2022

Loading thumbnail…

Cars Report

This example demonstrates a simple asynchronous report generator that filters a hardcoded JSON array of used cars by price and formats the results into a text list. It shows how JavaScript modules, promises, and array methods can create a dynamic message that appears after a simulated two-second delay. The code uses `JSON.parse`, `Promise`, `setTimeout`, `filter`, `map`, and `join`, with data stored in a static string in `getCars.js`. The final report is displayed in a `<pre>` element on an HTML page, styled with custom CSS that highlights one entry in red.

Jan 27, 2022

Loading thumbnail…

Cars Report

This example demonstrates a simple asynchronous data-loading and report-generation workflow. It fetches a hardcoded JSON array of car objects via a simulated delay, filters cars under a price threshold, and formats the results into a text report. The report is rendered inside a `<pre>` element using DOM `textContent`. The code uses native JavaScript Promises (`setTimeout`), `Array.filter`, `Array.map`, `Array.join`, and `JSON.parse` to process data, with React not actually used despite the framework metadata.

Jan 27, 2022