G

GullyPlook

@GullyPLook·20 public vizzes

Loading thumbnail…

Animated menued plot + categories

This interactive scatter plot visualizes the Iris flower dataset, letting users explore relationships between four quantitative measurements (sepal and petal length/width) and species categories. Two dropdown menus, built with a reusable D3 menu module, control which column is mapped to the x and y axes, with scales switching between linear and point scales depending on data type. Points animate smoothly when axes change using `d3.transition`, while axis labels and circles update accordingly. The visualization is rendered as SVG with D3 v6, using a custom `scatterPlot` function and `d3.csv` for data loading, with all text styled in the Share Tech font.

Loading thumbnail…

Animated menued Reusable D3 Scatter Plot

This example presents an animated scatter plot of the Iris dataset, where users select which numerical attribute maps to the x- and y-axes via two dropdown menus. The visualization uses a reusable D3 module pattern and renders in SVG. When a menu selection changes, the scatter plot’s points transition smoothly to new positions over a one-second duration using d3.transition, while the axes update accordingly. The code builds the menus with a custom D3 dispatcher and uses d3.scaleLinear and d3.extent to scale the data domains.

Loading thumbnail…

animated Reusable D3 Scatter Plot

This animated scatter plot displays the Iris dataset, cycling through all four feature pairs every three seconds. The code implements a reusable D3.js `scatterPlot` function that handles the full rendering pipeline using SVG, `scaleLinear` for axes, and `transition` for smooth animations. As the data mapping changes, circles transition between positions using `.join()` selection joins with staggered delays, while axes update via `axisLeft` and `axisBottom` on the same transition timeline. The plot is rendered across the full browser window with data loaded via D3's `csv` loader.

Loading thumbnail…

Reusable D3 Scatter Plot

This scatter plot displays the Iris dataset, cycling through different attribute pairs every two seconds to reveal correlations between petal and sepal measurements. Circles are positioned using D3's `scaleLinear` scales and rendered as SVG elements, with axes drawn via `axisLeft` and `axisBottom`. The visualization uses a reusable function pattern where parameters like data, dimensions, and value accessors can be updated dynamically, triggering re-renders through `selection.call()`. Data is loaded asynchronously from a CSV file using D3's `csv` fetch utility, with numeric parsing applied to each row.

Loading thumbnail…

D3 Scatter Plot

This D3.js scatter plot visualizes the Iris dataset, plotting petal length on the x-axis against sepal length on the y-axis. The code loads CSV data from a remote Gist, converts string values to numbers, and uses `d3.scaleLinear` with `d3.extent` to map data domains to screen coordinates. Individual data points are rendered as SVG circles with tooltips showing their coordinates. Axis ticks are generated using `d3.axisLeft` and `d3.axisBottom`, with the chart filling the entire browser window.

Loading thumbnail…

More D3 selection exploration

This example demonstrates a dynamic, animated scatter plot where fifteen circles move in a sinusoidal wave pattern across the screen. Using the D3.js version 7.8.5 library, the code leverages `select`, `range`, and `svg.selectAll` to create and continuously update circle elements in an SVG container. The animation runs on a 100-millisecond interval, incrementing a time variable to shift the vertical position of each circle based on sine functions of its index. The circles are rendered with a fixed radius of 20 pixels, while their x-coordinates remain evenly spaced at 62-pixel intervals.

Loading thumbnail…

JS in HTML

This example demonstrates the integration of JavaScript within an HTML page, displaying the static text “Hello HTML!” styled with CSS. The code imports `something` from `./something.js`, which itself combines a string with the export from `./beautiful.js`, logging the concatenated result to the console. It also references the global `d3` object, though the D3 library is not loaded in the page due to the commented-out script tag. The example illustrates module-based code organization and console output without any interactive visualization.

Loading thumbnail…

D3 selection exploration, Data DOM, enter update exit

Animated circles sweep in sine patterns across the screen, with their radii and vertical positions oscillating over time. The visualization demonstrates D3's enter/update/exit lifecycle: a `selectAll('circle')` query is joined with a data array via `.join('circle')`, which handles node creation, attribute updates, and removal as the dataset changes each frame. The code uses `d3.select` and `d3.range` to build an SVG scene, updating positions and sizes at 60 frames per second via `setInterval`. The data is procedurally generated with trigonometric functions, and the rendering is pure SVG with no external data source.

Loading thumbnail…

javascript arrays

This example demonstrates how to manipulate JavaScript arrays, focusing on generating a range of numbers, filtering, mapping, and reducing, with sorting handled by comparing object keys. The visualization shows the process of creating an array using a custom `range` function and then sorting an array of entries alphabetically by their `key` property using a comparison function. The code uses built-in JavaScript array methods like `push`, `sort`, and `map`, and references the D3 library's `ascending` function for sorting. The output is logged to the console, showing the sorted entries.

Loading thumbnail…

Sol Lewitt Reproduction javascript in html

This example reproduces a Sol LeWitt wall drawing using JavaScript and dynamically generated SVG. It shows a grid of horizontal and vertical stripes, with a circular area in the center where the pattern is inverted due to two overlapping SVG masks. The code creates the SVG namespace via `document.createElementNS` and builds the composition procedurally. The first mask hides the vertical lines within a 200-pixel radius circle, while the second mask hides the horizontal lines in that same region. The rendering relies entirely on core SVG and JavaScript APIs, with no external libraries.

Loading thumbnail…

Sol Lewitt Reproduction with D3 multiple symbols

This example reproduces a Sol LeWitt-style drawing using D3’s `symbol` and `symbols` API to generate five geometric shapes (circle, cross, diamond, square, and star) that act as masks. Two sets of horizontal and vertical striped rectangles are drawn, each masked by a different pattern of symbols; the first mask uses black-filled symbols on white, the second inverts this. The `renderMask` function appends SVG `mask` elements, mapping each symbol to a `path` via `symbol(d, 8000)()` at evenly spaced translations. The code relies on `select`, `range`, and `join` for data-driven rendering.

Loading thumbnail…

Sol Lewitt Reproduction with D3 Cross

This example reproduces a Sol LeWitt-style drawing using D3.js to generate intersecting horizontal and vertical bands overlaid with a large circular mask. The visualization employs two SVG masks with inverted fill patterns to create a cross-like composition where lines are visible only within specific regions. The code uses D3’s `select`, `range`, `symbol`, and `symbols` APIs to construct the grid and mask shapes, while rendering entirely as SVG with the data generated procedurally from window dimensions and D3’s symbol generator.

Loading thumbnail…

Sol Lewitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired drawing using D3 to generate a grid of horizontal and vertical rectangles. It shows two sets of 100 thin bars, one stacked vertically and one horizontally, which intersect to form a fine lattice across the full browser window. The code uses SVG masks with `d3.select` and `range` to reveal a central 200-pixel-radius circle where one set of bars appears white on black, while the other appears black on white, creating a contrast inversion. The visualization is rendered with SVG elements created via `append` and `join` within the D3 v7 library.

Loading thumbnail…

Sol Lewitt Repro Vertical

This generative art piece reproduces Sol LeWitt’s conceptual aesthetic by rendering 100 alternating horizontal and vertical stripes across the full browser viewport, with a circular mask applied to each set. The stripes are created as SVG `rect` elements, with horizontal bars masked by a white circle and vertical bars masked by a black circle, producing a layered checkerboard-like interaction. The code uses raw SVG manipulation via `createElementNS` and `setAttribute`, with no external libraries. The masks (`circle-mask` and `circle-mask-2`) define a central 200-pixel-radius zone, revealing or hiding stripes dynamically based on the window’s dimensions.

Loading thumbnail…

Sol Lewitt Repro

This generative visualization reproduces a Sol LeWitt wall drawing as a series of thin, full-height vertical bars. The piece fills the browser window with 100 equally spaced black rectangles, creating a minimalist, rhythmic pattern. The code dynamically sizes the SVG to the viewport’s inner width and height, and generates each bar using the native DOM API `document.createElementNS` within an SVG namespace. It relies on procedural repetition rather than external data, directly scripting each rectangle’s position and dimensions in a loop.

Loading thumbnail…

Java script basics

This example demonstrates basic JavaScript syntax and programming concepts within a blank SVG canvas, including variable declarations, arithmetic, comparison, functions, and object manipulation. The code uses plain JavaScript with commented-out console.log statements to illustrate operations like loops, arrow functions, and object creation, while the SVG element serves as the output container. The rendering is handled directly through the SVG element, with no external libraries or data sources used. The example focuses on educational coding fundamentals rather than data visualization or interactive features.

Loading thumbnail…

Plooks Psuedo Horizontal Bar Chart

This example shows a pseudo horizontal bar chart with four labeled bars (A, B, C, D), where each colored rectangle extends horizontally from a shared left axis. The bars use varying widths to imply categorical values, though the mapping is purely visual. The visualization is rendered as static SVG using plain SVG `<rect>` and `<text>` elements, styled with the Share Tech font via Google Fonts. The first bar is green due to a CSS class, while others are black; no JavaScript libraries or data sources are involved.

Loading thumbnail…

Plooks Psuedo Bar Chart

Four black rectangles of decreasing height suggest a simple bar chart, though no axes, labels, or gridlines are present to define the mapping from data to geometry. Each bar is rendered as a raw SVG `<rect>` element, with explicit `x`, `y`, `width`, and `height` attributes computed to produce the descending silhouette. The example uses inline SVG within an HTML page, with the rectangles filled solid black on a white canvas. The chart appears to approximate categorical values, but the absence of any data source or textual annotation leaves the quantitative scale and labels entirely implicit.

Loading thumbnail…

Plooks Psuedo Scatter Plot

A hand-coded SVG scatter plot approximates five data points as large black circles on a white background. Each circle is placed manually with explicit `cx` and `cy` coordinates, and rendered by the browser’s native SVG support. The plot uses no JavaScript libraries, instead relying on static `<circle>` elements within an inline `<svg>` tag. This minimal example demonstrates how raw SVG markup can represent a simple categorical or numeric distribution.

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes, including circles, rectangles, lines, and paths, arranged on a 960 by 500 canvas. It shows how to set basic visual attributes such as fill colors, stroke colors, stroke widths, and coordinate positions directly in SVG markup. The rendering relies entirely on plain SVG elements defined in an HTML file, with no external libraries or JavaScript logic. It serves as a static reference for constructing simple geometric graphics.