amauris@outlook.com

@amauris-pd·5 public vizzes

Fork of HTML Starter

This example visualizes hourly data across a week using a grouped bar chart. Each bar represents a specific hour, with the dataset’s labels indicating days of the week. The chart is generated with Chart.js from raw data embedded in the script, using a canvas element for rendering. The visualization displays the distribution of values across the 24 hours, with a legend positioned at the bottom and an auto-scaling y-axis.

Feb 1, 2024

Loading thumbnail…

Ama Charts.js

This example shows a weekly sales bar chart rendered on an HTML canvas, with each day of the week labeled and individually colored. The code uses the Chart.js library (loaded via CDN) to create the chart, configuring it with a type of `bar` and providing datasets for background and border colors. The chart is embedded within a styled page featuring a dark menu bar displaying the library version. It relies on the browser's canvas element for rendering and standard JavaScript for data setup and configuration.

Jan 31, 2024

Loading thumbnail…

Graph

This example displays a stacked bar chart of soil conditions across different crop groups, with connecting lines and percentage labels between adjacent bars to highlight changes in total values. The chart uses D3.js v6, leveraging `d3.csv` to load external data, `d3.stack()` for stacking series, and `d3.scaleBand`/`d3.scaleLinear` for axes. Custom SVG line and text elements are appended to visualize deltas between group totals, with text anchored dynamically based on whether values increase or decrease.

Jan 29, 2024

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt art piece, showing a grid of horizontal stripes confined to a circular region, with vertical stripes filling the surrounding area. It uses D3 v6 selections and data joins to generate the SVG rectangles, while SVG mask elements create the circular boundary and its inverse. The code builds two masks with `create_circle_mask`, applying them to the stripe groups to achieve the geometric composition. The rendering is entirely SVG-based, with dimensions fixed at 960 by 500 pixels.

Jan 26, 2024

Loading thumbnail…

Fork of Blank Slate

A blank slate example demonstrates the minimal setup for a VizHub V3 visualization, rendering a red "Hello World!" message at a large font size directly into a container DIV via JavaScript. The runtime requires no `index.html`; instead, the exported `main` function receives a container element and sets its `innerHTML` with dynamic CSS styling. The code uses the V3 Runtime Environment's hot-reloading system, which supports interactive widget editing, such as Alt-drag for font-size changes. A second, static SVG file shows a circle and quadratic Bézier path, rendered with inline SVG attributes.

Jan 25, 2024