Tell us what works and what could be better. We read every submission.
@TomStanczyk·8 public vizzes
This example visualizes the structure of MQTT protocol packets using a hex viewer paired with a hierarchical tree view. It shows how the raw binary data is parsed into protocol fields—such as packet type, QoS, topic, and header properties—through a Kaitai Struct format. The visualization highlights the relationship between individual bytes and their semantic meaning, with color-coded regions mapping directly to the parsed fields. The code uses Kaitai Struct’s compiled parser to decode the data and displays the resulting type hierarchy alongside the raw bytes.
This example demonstrates a minimal TypeScript project configured for Node.js development, showing how npm scripts and a tsconfig.json file structure a build pipeline. It uses the TypeScript compiler (via `npx tsc`) to transpile ES5-targeted CommonJS modules from `src` to `dist`, with strict type-checking and `noImplicitAny` enabled. The package.json declares dependencies like `typescript`, `ts-node`, and `nodemon`, and the scripts include `build`, `prestart`, `start`, and `dev` to compile and run the code, while `tsconfig.json` sets `rootDir`, `outDir`, and `esModuleInterop` for module resolution.
This visualization displays a hierarchy of solutions as a network graph, where nodes represent individual entries and edges show containment relationships. It reads hierarchical data from a Neo4j graph database using a Cypher query that calls `apoc.path.expand` to traverse all `CONTAINS` relationships, then builds a `hierarchyName` string and `hierarchyLevel` per node. The rendering uses d3.forceSimulation to position nodes, with links drawn between connected elements, producing an interactive tree-like layout that reveals the nested structure and depth of each solution.
This example loads an Enterprise Architect model from a SQL Server database into Neo4j, creating a graph of packages, diagrams, objects, attributes, and their containment relationships. It uses APOC procedures `apoc.load.csv` and `apoc.load.jdbc` to execute SQL queries and import nodes and edges. The scripts set node labels based on stereotypes and create relationship types from connector types, preserving metadata such as authors, notes, and timestamps.
This example demonstrates an abstract base class in Angular for building custom structural directives that show or hide template content under a condition. The code defines `AppBaseIfDirective`, which uses `ViewContainerRef` and `TemplateRef` to manage embedded views, along with protected methods `showView`, `hideView`, and `updateView` that toggle the view’s visibility. It provides reusable logic for if-like directives without binding to any specific data source. The implementation relies solely on Angular’s core APIs, with no external rendering libraries involved.
This example demonstrates a PowerShell script that archives files and folders older than a specified date by month. It processes items in an input directory matching a file mask, copying those created before the first day of the given month and year into monthly subdirectories, then compressing each into a separate ZIP archive. The script uses the `Get-ChildItem` cmdlet with the `-Include` parameter, `Copy-Item` with `-Recurse`, and the `Compress-Archive` cmdlet, writing progress to the console via `Write-Host`.
This example shows a PowerShell script that converts Excel workbooks to PDF files and inserts a signature image into each one. It processes every .xls and .xlsx file in a specified folder, opening the first worksheet of each workbook. Using the Excel COM object, it places the signature PNG into cell D10 via the `Shapes.AddPicture` method, then exports the workbook as a PDF using `ExportAsFixedFormat`. The script relies on the Microsoft Office Interop Excel API and iterates through files with `Get-ChildItem`.
The visualization demonstrates an interactive color-picking interface built with Angular, using the `ngx-color-picker` library. It shows a palette of selectable color swatches alongside a live preview of the chosen color, with the selected value displayed in real time. The code instantiates the color picker component and binds its output to update the display dynamically, leveraging Angular’s two-way data binding to synchronize state. The rendering relies on standard HTML and CSS within Angular templates, with no external charting or simulation libraries involved.