D

Dilara Bozkurt

@dilalab·18 public vizzes

Loading thumbnail…

moving contours

This example visualizes the movement of 30 random points through animated density contours. As the points drift within the SVG canvas, `d3.contourDensity()` computes ten density levels, which are drawn as steel-blue contour paths using `d3.geoPath()`. The points themselves are rendered as small unfilled circles. The data is generated randomly rather than from an external file. The animation is driven by `d3.interval()`, which triggers an update every 200 milliseconds, moving each point by a random offset and recomputing the evolving contours in real time.

Loading thumbnail…

spikemap

This map uses a spike or bar projection to visualize the distribution of Old Faithful geyser eruption durations and waiting times. The D3.js SVG visualization renders the two-dimensional data set, with each point represented by an upright spike. The height and position of these spikes correspond to the `eruptions` and `waiting` values from the `faithful.json` file, creating a 3D-like terrain. The chart employs a simple scene graph with an orthographic projection, mapping the numeric fields to both the x/y placement and the extruded z-axis of the spikes.

Loading thumbnail…

cartographic doodled

This example visualizes the Old Faithful geyser dataset through an animated, hand-drawn aesthetic. The visualization represents eruption durations and waiting times as a moving contour map, with lines that shift and deform over time. Using D3.js version 7, the code employs `d3.contourDensity` to generate density contours from the data points, then animates these contours with `transition.attrTween` to create a flowing, organic movement. The rendering uses SVG paths with a rough, sketch-like stroke style, giving the data a playful, doodled appearance.

Loading thumbnail…

moving contours colored

This example animates a set of randomly moving points and their evolving density contours. Using the Old Faithful geyser dataset, it visualizes how the point distribution shifts over time. The code employs `d3.contourDensity()` to compute contour levels and `d3.geoPath()` to render them as SVG paths. Points drift randomly within the canvas, and each contour is filled with a random color and outlined in steel blue. The visualization updates every 200 milliseconds using `d3.interval`, creating a dynamic, fluid representation of changing data density.

Loading thumbnail…

contours with audio

This example visualizes the distribution of randomly generated points as animated contour lines that respond to audio frequency data. The code uses D3's `contourDensity` and `geoPath` to compute and render density contours, while an AudioContext analyzer extracts frequency data to drive point movement in real time. Points are rendered as small steelblue circles, and the contour paths update dynamically as points shift based on the audio input. The visualization demonstrates how D3 can integrate web audio APIs with geographic projection techniques for interactive, sound-reactive data displays.

Loading thumbnail…

Fork of Full Sol LeWitt reproduction with D3_2

This visualization reproduces a Sol LeWitt art piece using D3.js, displaying a grid of vertical and horizontal striped rectangles overlaid with masked geometric symbols. The code employs D3 selections and data joins to generate 100 rectangles in each direction, while `d3.symbol` and `d3.symbols` create the diamond and triangle shapes used in the masks. Two SVG masks, defined via the `renderMask` function, apply the symbols as cutouts in alternating black-and-white fills, revealing the striped pattern through the shapes. The rendering uses SVG with dynamic window dimensions, and the masks are applied with inverted fill states to create the final layered composition.

Loading thumbnail…

Full Sol LeWitt reproduction with D3_2

This visualization reproduces a Sol LeWitt drawing using overlapping vertical and horizontal bars. The bars are drawn as SVG rectangles, with alternating masks creating a visual interplay between the two orientations. The code uses D3.js’s `select`, `range`, `symbol`, and `symbols` APIs to generate the geometric grid and mask patterns. It relies on D3’s SVG rendering with dynamic mask definitions to achieve the layered, cross-hatched effect. The data is procedurally generated rather than sourced from an external dataset.

Loading thumbnail…

Full Sol LeWitt reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3 v7, rendering a grid of intersecting rectangles with SVG masks. It shows alternating striped patterns: one set of horizontal and vertical bands is masked by a black diamond symbol, while the other is masked by an inverted version. The code uses `selection.join`, `range`, and `symbol` with `symbols[1]` to generate paths, applying masks via `svg.append('mask')` and `attr('mask', ...)`. The visualization is data-free, instead deriving geometry from the browser’s window dimensions, and outputs pure vector shapes.

Loading thumbnail…

Fork of Sol LeWitt reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 to generate a grid of horizontal and vertical rectangles. The rectangles are masked by circles, creating an interlocking pattern where the horizontal bars show through a white circle and the vertical bars show through a black circle on a contrasting background. The code uses D3 selections and the `range` function to create 100 rectangles in each direction, applying SVG mask elements with rectangle and circle shapes. The visualization renders entirely in SVG, filling the browser window with the geometric composition.

Loading thumbnail…

Sol LeWitt reproduction with D3

This D3.js reproduction of a Sol LeWitt piece covers the viewport with two sets of striped rectangles—horizontal bands and vertical bands—that intersect at a central circular area. The rendering uses SVG masks (`circle-mask` and `rect-mask`) to selectively reveal or hide stripes, creating the illusion of a circular window through the grid. The code draws 100 rects in each orientation, layering them with opposite mask fills to alternate visibility. This generative artwork leverages D3's `select`, `range`, and `join` API to build the SVG structure dynamically, scaling to the full window size.

Loading thumbnail…

Sol LeWitt reproduction Vertical

A web-based reproduction of Sol LeWitt's wall drawing, rendered as a full-screen SVG using programmatic JavaScript. The piece displays a grid of thin, alternating horizontal and vertical gray bars, with a circular mask that inverts the contrast in the center, creating a subtle optical effect. It uses the raw SVG DOM API (`createElementNS`) to build elements, applying two masks (`circle-mask` and `circle-mask2`) to control visibility. The design is generated entirely in code, with no external libraries, drawing 100 horizontal and 100 vertical rectangles.

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt wall drawing using raw JavaScript and the SVG API. It generates a grid of horizontal and vertical stripes, masked by two inverse circular masks to create a composition of intersecting lines. The code directly creates SVG elements via `document.createElementNS`, setting attributes for rectangles and masks to control the visible pattern. The rendering is dynamic, adapting to the browser window's full width and height.

Loading thumbnail…

Sol LeWitt reproduction

This example reproduces a Sol LeWitt art piece using JavaScript to generate an SVG. It renders a series of 100 vertical rectangles, each 10 pixels wide, spaced 20 pixels apart across a 960-pixel-wide canvas. The code creates the SVG elements dynamically through the DOM API without any external libraries, directly appending each rectangle to the document body. The artwork is defined procedurally, with the number of rectangles and their spacing hardcoded in a loop.

Loading thumbnail…

Sol LeWitt reproduction

This example reproduces a Sol LeWitt wall drawing as an SVG visualization. It shows a geometric composition of parallel lines and arcs within a square boundary, following the artist’s instructional aesthetic. The rendering is generated procedurally using plain JavaScript within an inline `<script>` tag, targeting an SVG element with fixed width and height. The code does not rely on external libraries or data sources; instead, it draws the artwork directly through SVG coordinates and path commands. The result is a clean, minimalist interpretation of LeWitt’s conceptual art, emphasizing rule-based visual output over data-driven input.

Loading thumbnail…

Sol LeWitt reproduction

This example reproduces a Sol LeWitt wall drawing as an SVG visualization. It shows a geometric composition of parallel lines and arcs within a square boundary, following the artist’s instructional aesthetic. The rendering is generated procedurally using plain JavaScript within an inline `<script>` tag, targeting an SVG element with fixed width and height. The code does not rely on external libraries or data sources; instead, it draws the artwork directly through SVG coordinates and path commands. The result is a clean, minimalist interpretation of LeWitt’s conceptual art, emphasizing rule-based visual output over data-driven input.

Loading thumbnail…

Pseudo Graph

This example demonstrates basic SVG chart construction by combining styled rectangles as bar elements with a single black path used as a pseudo graph line. The visualization shows a simple categorical bar chart with four bars of varying heights, each filled with a dark red color and outlined with a thick stroke. A second SVG element displays a small horizontal bar legend with four color-coded segments labeled A through D. The code uses raw SVG elements—`rect`, `path`, and `text`—with CSS classes and inline attributes, along with Google Fonts for typography, to create the layout without any JavaScript libraries.

Loading thumbnail…

SVG Fundamentals

This example demonstrates three basic SVG shapes—a red circle, a yellow rectangle with a navy border, and a diagonal line—positioned on a 960×500 canvas. The code uses raw SVG elements (`circle`, `rect`, `line`) directly in HTML, with attributes such as `cx`, `cy`, `r`, `stroke`, and `stroke-width` controlling geometry and styling. No JavaScript libraries are involved; the rendering is purely declarative SVG. The visualization serves as a minimal reference for how SVG coordinates, fill colors, and strokes work in a standalone document.

Loading thumbnail…

SVG Fundamentals

This example demonstrates the VizHub V3 Runtime Environment, a "Hello World" that renders text to a container div using inline styles. The code exports a `main` function that receives a container element and sets its inner HTML with a font size of 217 pixels. The example highlights continuous hot reloading, where alt-dragging the font size value in the editor updates the display in real time, showcasing the interactive widget system for immediate visual feedback.