Javan Friedel

@JavanFriedel·8 public vizzes

JS in HTML

This example demonstrates how JavaScript can be imported and executed within an HTML document, with D3.js loaded via a CDN. The HTML file includes an empty body and a stylesheet, while the JavaScript imports `select` from D3 and logs it to the console, alongside a separate `script.js` that logs 'Hello'. A custom module `something.js` exports a string, showing ES module imports in action. The example highlights module structure and console output rather than visual rendering, using `d3.select` implicitly for demonstration.

Jun 16, 2022

Loading thumbnail…

D3 Selection Exploration - Javan

A line of fifteen circles moves in a sine-wave pattern across the screen, connected by a single path. Every 500 milliseconds, the positions update based on a time parameter, creating a simple animation. The example uses D3 v7’s `select`, `range`, and `line` generators to bind data to SVG circles and a path, demonstrating joining and updating elements with `join`. Rendering is in SVG with a dark background and steel-blue circles.

Jun 16, 2022

Loading thumbnail…

Fork of JavaScript Arrays with D3 - Javan

This example demonstrates core JavaScript array operations alongside D3’s `ascending` import, using a console-based workflow. It shows how `push`, `map`, and `reduce` manipulate arrays, including transforming a numeric range and converting an array of key-value objects into a single object. The code explicitly builds a custom `range` function and logs outputs to the console, while the included D3 dependency remains unused in visible logic. The visualization relies on plain JavaScript execution rather than DOM rendering, with no graphical output generated.

Jun 16, 2022

Loading thumbnail…

JavaScript Arrays - Javan

This example demonstrates JavaScript array manipulation through a console-based sequence of operations. It shows how arrays can be built with `push()`, generated with a custom `range` function that returns a new array, and transformed using `map()` to multiply each element, and reduced with `reduce()` to sum all values. The code also illustrates converting an array of key-value objects into a single object by reducing with an accumulator. All output is logged to the browser console rather than rendered visually.

Jun 16, 2022

Loading thumbnail…

Fork of Full Sol LeWitt Reproduction in D3 - Javan

This example reproduces a Sol LeWitt wall drawing using D3.js to generate a grid of horizontal and vertical stripes, with geometric symbols cut out through SVG masks. The code creates 100 rectangular bands in each direction, then applies two complementary masks—one with dark symbols on a light background, the other inverted—to reveal layered patterns. The visualization uses D3’s `select`, `range`, `symbol` and `symbols` APIs, along with SVG `<mask>` elements, to compose the artwork across the full browser window.

Jun 16, 2022

Loading thumbnail…

Full Sol LeWitt Reproduction in D3 - Javan

This example reproduces a Sol LeWitt art piece using D3’s SVG rendering. It displays two sets of overlaid horizontal and vertical striped rectangles, masked to reveal a diamond shape in the center and a circular cutout, creating layered geometric patterns. The code uses `d3.select`, `d3.range`, `d3.symbol`, and `d3.symbols` to generate the shapes, applies SVG masks via `mask` elements, and sizes the artwork to the full window dimensions.

Jun 16, 2022

Loading thumbnail…

Sol LeWitt Reproduction in D3 - Javan

This example recreates a Sol LeWitt-inspired geometric composition using D3.js and SVG rendering. It displays a grid of thin horizontal and vertical rectangles layered over each other, with two circular masks creating intersecting circular cutouts that reveal or hide portions of the rectangles. The code uses D3 selections, `range()` for data generation, and `.join()` to bind 100 rectangles per axis to the SVG. The `mask` element defines the circular regions, with one mask using a white circle on black and the other using a black circle on white.

Jun 16, 2022

Loading thumbnail…

Sol LeWitt Reproduction

A Sol LeWitt reproduction appears as a single black square on a white canvas, mimicking a minimalist geometric artwork. The example uses raw JavaScript with the SVG DOM API, creating an `svg` element and appending a `rect` via `document.createElementNS`. The code explicitly sets the SVG width to 960 and height to 500, but draws only a 100-by-100 pixel rectangle. This is a static, non-interactive demonstration of basic SVG shape generation, with no data source beyond hardcoded dimensions.

Jun 15, 2022