Mohammed

@mohammedgrea·4 public vizzes

Fork of Data Visualization Homework 1: Scatter Plots

This interactive scatter plot displays the Iris dataset using D3 v5, with dropdown menus to select which measurement columns appear on the x and y axes. Points are colored by iris species, shown in a categorical color legend. The visualization uses `scaleLinear` for axes, `scaleOrdinal` with `schemeCategory10` for colors, and animates each circle from the center to its position via `transition()`.

Nov 7, 2023

Loading thumbnail…

Create Graphic Using js

This example produces a full-screen SVG visualization of transparent rectangles whose colors transition over time. It samples a normal distribution to generate dynamic color changes for each rectangle. The page uses D3.js version 6, with an SVG canvas appended to the document body. The rectangles are sized to span the screen height, and the D3 selection and attribute methods (`select`, `append`, `attr`) drive the rendering. The design is inspired by work from Nita Nagdewate, referencing similar distribution-scatter visualizations.

Nov 6, 2023

Loading thumbnail…

Fork of Sol LeWitt Reproduction Vertical

This example reproduces a Sol LeWitt-style geometric composition, displaying a single large circle centered on a blank, full-window canvas. The artwork uses a vertical orientation, with the circle’s radius fixed at 100 units and its height set to match the window’s height. The code creates an SVG element via the standard DOM API, appending it to the document body without any external libraries or data sources. The piece focuses on the minimal, algorithmic aesthetic of LeWitt’s wall drawings, rendered purely through JavaScript and raw SVG creation.

Nov 4, 2023

Loading thumbnail…

Fork of Fork of Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt-inspired geometric composition using D3's selection and data-join methods. It renders 100 horizontal and 100 vertical rectangles across the full viewport, with each set masked by a circular cutout at the center—one mask inverts the other, creating a striking interlocking grid pattern. The visualization uses D3 v6's `select`, `range`, and `append` APIs to construct the SVG elements and masks, with the circle radius fixed at 200 pixels. The code demonstrates how layered SVG masks can produce complex visual effects from simple rectangular primitives.

Nov 3, 2023