Strunck

@Strunck·8 public vizzes

Table 9x4 pcoWEB

The example visualizes the binary inputs and outputs of a Carel pco Board as a 9x4 grid of LED-like cells, with two rows for 18 inputs and two rows for 18 outputs. Built with plain HTML and CSS, the page uses flexbox for layout and styled `div` elements as indicators, with yellow highlighting on active cells. The code references specific board connections (C19-X4, C17-X2) via CSS IDs, showing a static snapshot of the device's state through a pcoWEB server interface.

Mar 5, 2023

Loading thumbnail…

InfluxDb Measurement

This example demonstrates how to transform raw InfluxDB-style measurement data into a structured JSON payload. It shows a collection of sensor readings (such as pressure, temperature, and power) organized into InfluxDB line protocol objects, each with a measurement name, fields, and index-based tags. The code uses D3 v5’s `select` API to display the resulting JSON in the browser, while local ES6 modules handle data transformation. The `message.js` module iterates over the data keys and builds the output objects, which are rendered as text in the page’s message div.

Dec 3, 2021

Loading thumbnail…

Untitled

This visualization displays 14 days of refrigeration plant data, including room temperature, defrost water, cooling and fan runtimes, and dates. It uses Canvas API functions to manually draw grouped bar charts and a line chart, with linear gradients for bar fill effects. The code employs `createLinearGradient`, `fillRect`, and `stroke` to render the composite chart.

Nov 16, 2021

Loading thumbnail…

Canvas Fiddling

A small animated square glides horizontally across a blank canvas, moving in discrete steps and disappearing from its starting position as it advances. The example demonstrates fundamental Canvas 2D drawing and animation using the HTML5 `getContext('2d')` API, with a rectangular fill drawn via `fillRect` and cleared each frame using `clearRect`. Driven by a `setInterval` timer at 20-millisecond intervals, the square’s position increments by one pixel per frame, creating a simple, linear motion loop without user interaction.

Oct 15, 2021

Loading thumbnail…

parseCSV

This example demonstrates how to parse a semicolon-delimited CSV string and display it as an HTML table. The code embeds a hardcoded dataset with sensor readings, splits it into rows and columns, and dynamically creates table elements. It uses native JavaScript DOM methods like `document.createElement` and `appendChild` to build the table structure, while CSS styles the table with hover effects and alternating row colors. The parsing logic handles the header row separately and converts each data row into a JavaScript object using `Object.defineProperty`.

Oct 15, 2021

Loading thumbnail…

KWS Booster Visu

A bar chart displays fourteen vertical bars of varying heights on a white background, with each bar representing a data point. The visualization includes a decorative line-art sun or flower motif in the top-left corner, drawn using SVG `<circle>` and `<line>` elements. The chart is rendered as static inline SVG, with bars positioned using fixed `rect` coordinates and labeled with a single date, "28.08.", via a `<text>` element. The layout uses a fixed viewport of 1120 by 640 pixels, with no interactive or animated features.

Sep 14, 2021

Loading thumbnail…

Untitled

This visualization displays 14 days of daily cold store data, comparing tauwasser (defrost water) values against cooling and fan operation times. The chart uses grouped bar charts on a dark canvas, with grey gradient bars for tauwasser values, blue bars for fan hours, and dark blue bars for cooling hours. A horizontal black line marks the 20-liter target threshold for tauwasser. The implementation uses the HTML5 Canvas API directly, with custom JavaScript loops and helper functions to calculate bar heights and draw the visualization, including date labels and value annotations beneath each bar.

Sep 14, 2021

Loading thumbnail…

Raumdaten CSV FileLoader

This example demonstrates loading and combining CSV data from multiple files into a single data object. The code uses `fs.readFile` to access local files with a configurable file prefix, parsing semicolon-delimited temperature and climate logs from different rooms. The project showcases VizHub’s module system by importing D3 via UNPKG and using local ES6 modules, though the visualization itself is not fully implemented. The data includes room temperatures, humidity, oxygen, and CO2 readings across multiple dates.

Sep 14, 2021