FerasMorsi

@FerasMorsi·8 public vizzes

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js, generating a grid of thin horizontal and vertical rectangles across the full browser window. The visualization appears as a dense crosshatch pattern, with a circular region in the center where the lines are inverted—dark lines show through a light circle, while the surrounding area has light lines on a dark background. The code builds an SVG, creates rect elements with D3’s `range` and `join` methods, and applies two SVG masks with circles to achieve the contrasting effect.

Feb 7, 2023

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric composition using D3.js, rendering a grid of overlapping horizontal and vertical rectangles as SVG elements. The piece shows alternating stripes of black and white that intersect within two circular masks, creating a layered, op-art effect across the full browser viewport. The code uses d3.select, d3.range, and selection.join to generate 100 rectangles along each axis, with svg.append('mask') defining two circular regions that invert the fill colors. The rectangles are masked so that one circle reveals white-on-black stripes while the other shows black-on-white, producing a dynamic visual contrast.

Feb 7, 2023

Loading thumbnail…

Sol LeWitt

This example presents a nearly blank SVG canvas as a starting point for learning JavaScript. The page embeds a `<script>` tag within the SVG element, where console logging and basic operations illustrate language fundamentals. The code demonstrates variable assignment with `let` and `const`, demonstrates the increment operator, and defines functions using both arrow syntax and traditional `function` declarations. While the page shows no data visualization, it introduces core JavaScript concepts in the context of an SVG container. The concrete code uses no specific visualization libraries, relying instead on the browser’s native SVG and scripting support.

Feb 5, 2023

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes, including a circle, rectangle, line, and path, all rendered directly in an HTML page using inline SVG markup. It shows how basic geometric elements are defined with attributes like cx, cy, r, x, y, width, height, and stroke properties, as well as how paths use coordinate commands such as M and L. The example uses no external libraries, relying purely on native SVG and CSS styling. A navy-bordered rectangle frames the composition, while a yellow line and a black path illustrate stroke rendering and multi-segment path construction.

Feb 4, 2023

Loading thumbnail…

Fork of Let's make a face with D3.js!

A yellow smiley face is drawn centered in an SVG canvas using D3.js v5. The face features fixed eyes and a mouth, while its eyebrows animate by moving up and down via chained `transition` calls. The code constructs the face with D3 selections and shape primitives, including `circle` elements for the eyes and an `arc` generator for the mouth. Eyebrows are `rect` elements that translate vertically over time, demonstrating basic DOM manipulation and animation with D3 transitions.

Jan 29, 2023

Loading thumbnail…

Fork of Responding to Resize

This example demonstrates a full-page SVG visualization that responds to browser resizing by drawing a green X composed of two thick diagonal lines. The code uses D3 v5 to select the chart container and append an SVG element, then defines a redraw function that extracts the container’s clientWidth and clientHeight and applies them as the SVG’s width and height attributes. Two lines are bound to a data array and updated with new coordinates on every resize event, merging entered and existing elements via selection.merge(). The chart listens to the window’s resize event to trigger the redraw, using only CSS and client dimensions for layout.

Jan 29, 2023

Loading thumbnail…

Cars Report

This example demonstrates a JavaScript data pipeline that loads a JSON array of used cars and filters it to display a text report of models priced under $2,000. The page initially shows a “Loading...” message, then uses asynchronous `getCars()` to fetch the data after a simulated delay. A `generateReport` function chains array methods (`filter`, `map`, and `join`) to process the cars, while `formatCar` constructs each line as a template string. The result is rendered into a `<pre>` element in the browser, relying on standard JavaScript object destructuring and ES6 modules.

Jan 28, 2023

Loading thumbnail…

Fork of Cars Report

This example demonstrates a simple text-based data report, loading a hardcoded list of car objects and printing formatted lines for vehicles priced under $2,000. It shows the interaction between JavaScript modules, Promises, array methods, and template literals. The code uses `JSON.parse` to convert inline data, `setTimeout` inside a Promise to simulate a delayed API fetch, and `filter` with `map` to process the array before joining the results. The final output updates a `<pre>` element in the DOM through `document.getElementById` and `textContent`.

Jan 28, 2023