Jaga-droid

@Jaga-droid·10 public vizzes

JS in HTML

This example demonstrates how JavaScript modules and dependencies are handled within an HTML page, highlighting the contrast between traditional script tags and ES6 module imports. It shows the console output of a string concatenated from variables exported across separate files, including `GetRekt.js` and `lmfao.js`, using named exports. The code uses ES6 `import` and `export` statements, which are bundled by Vizhub’s internal Rollup process when the file is named `index.js`. It visualizes the concept of topological sorting for script dependencies, though the actual rendering is limited to a plain HTML text display.

Feb 14, 2023

Loading thumbnail…

D3 Selection Exploration

An animated sine wave demonstrates D3 selections and the data-join pattern. The visualization generates circles and a connecting line path from computed trigonometric data, with the circle count varying over time. Using D3's `selectAll` and `join`, the example automatically handles enter, update, and exit states as data changes each frame. The code relies on `d3.select`, `d3.range`, and `d3.line` within an SVG rendering, updating at 60 frames per second via `setInterval`.

Feb 6, 2023

Loading thumbnail…

Javascript_Arrays

This example demonstrates sorting arrays with D3, showing both numeric and object-based data. It uses `d3.ascending` and `d3.descending` to sort numbers in ascending or descending order, and also sorts arrays of objects by their key or value properties using custom comparator functions. The code, written in JavaScript with the d3 library (v7.8.2), logs the sorted results to the console, comparing D3’s sort methods against manual comparison logic.

Feb 5, 2023

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece as an interactive SVG graphic. It generates a grid of 120 horizontal and vertical bands, each with a repeating pattern that shifts based on a mask. The code builds two alternating bands of white and black, then uses two masks, each applying a different pattern rotation. Using the D3 library, it leverages `select`, `range`, `symbol`, `symbols`, and `scaleBand` to construct the visual, with `symbol(d, size)()` generating the shape paths. The rendering is fully in SVG, defined entirely in `index.js` with `window.innerWidth` and `window.innerHeight` for dimensions and a `padding` constant.

Feb 5, 2023

Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This line chart displays one week of temperature data in San Francisco, plotting temperature in Celsius over time. The chart uses a smooth basis curve to connect data points, with a title, axis labels, and a maroon line against a light grid. Built with D3 v7, it uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render the SVG. The data is loaded from a CSV file containing timestamps and temperatures, with circles styled in the CSS but not rendered in the JavaScript.

Feb 5, 2023

Loading thumbnail…

Sol Lewitt in Vanilla JS

This piece reproduces a Sol Lewitt art concept using a generative, animated SVG composition. It displays a rotating triangular mask that reveals or conceals a grid of horizontal and vertical lines, creating a dynamic interplay of shapes. Rendered entirely in vanilla JavaScript, the code dynamically creates SVG elements via `createElementNS`, building a responsive full-window graphic. The animation is driven by CSS keyframes, while two distinct SVG masks, one inverting the other, control the visibility of the line grid, producing a clean, geometric visual effect.

Feb 5, 2023

Loading thumbnail…

Fork of Episode 3: Sol LeWitt in Vanilla JavaScript version 3

This piece generates an abstract, animated composition inspired by Sol LeWitt’s geometric wall drawings. A grid of 200 vertical rectangles, each filled with a random bright RGB color, extends across the full window height, with each rectangle independently bobbing upward in a looping translateY animation. Centered in the viewport, a white circle is drawn, and a separate mask (defined via SVG `mask` and `defs`) is applied to a grid of horizontal rectangles, so that only the circular area reveals the second set of stripes. The sketch uses only vanilla JavaScript and the SVG DOM API, without any external libraries, to assemble and animate the shapes.

Feb 5, 2023

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt wall drawing as an interactive SVG canvas. It displays a central white circular mask over a field of 100 horizontal black stripes, with the circle acting as a window that reveals the full-width bars. The piece uses the SVG DOM API directly, creating a mask and rectangles via JavaScript, without any external styling. Each stripe is 10 pixels tall, and the composition fills the entire browser viewport, adapting to the window’s dimensions.

Feb 5, 2023

Loading thumbnail…

Fork of Episode 3: Sol LeWitt in Vanilla JavaScript version 4

This example generates a grid of vertical SVG rectangles filled with random RGB colors, layered with a white circle and a horizontally striped mask-defined circle overlay. It uses the Web Animations API to apply infinite, randomized-duration animations to each rectangle. The piece is inspired by Sol LeWitt’s generative art, created in vanilla JavaScript with dynamic SVG creation via `document.createElementNS`.

Feb 5, 2023

Loading thumbnail…

Pseudo_Box_Plot

The Pseudo_Box_Plot displays four hand-coded box-and-whisker diagrams as static SVG primitives, with colored interquartile-range rectangles, black median and whisker lines, and coordinate points placed directly in a 2000×2000 viewport. The visualization uses raw SVG elements—`rect`, `line`, and `path`—styled via inline attributes and a global CSS class for red strokes, with no JavaScript computation or data binding. It renders fixed, pre-defined positions for each plot, showing the structural look of a statistical chart without an underlying dataset or algorithmic generation.

Feb 4, 2023