dexuzi

@dexuzi·7 public vizzes

Untitled

This interactive visualization maps the U.S. daily cigarette smoking rate from 1996 to 2012 across counties, showing changes over time through a choropleth map with a slider. A tooltip displays each county’s 1996 and 2012 rates along with the change. The visualization uses D3 v4’s `d3.geo` module with the Albers USA projection, `d3.nest` for data organization, and `d3.scale.threshold` for color coding, rendering SVG paths for counties and states. Data comes from the Institute for Health Metrics and Evaluation.

Aug 25, 2022

Loading thumbnail…

JS arrays

Fifteen circles are rendered in a horizontal row across the browser viewport, each with a radius of 20 pixels. The example demonstrates how to bind an array of numbers to SVG elements using D3’s `data()` and `enter()` selection methods. The code uses `d3.select` and `d3.range` to generate the data and append circles to an SVG, with x-positions calculated as `d * 50 + 50` and a fixed y-coordinate of 250. Rendering is done via inline SVG in the HTML document.

Aug 16, 2022

Loading thumbnail…

SOl Le witt with D3

This example recreates a Sol LeWitt-inspired drawing using D3.js, showing a grid of horizontal and vertical bars that intersect within two circular masks. The SVG rendering uses D3 selections and data joins to generate 100 horizontal rectangles and 100 vertical rectangles, each constrained by a separate mask. The first mask reveals horizontal bars through a white circle on black, while the second uses the inverse, creating a contrasting circular crosshatch pattern. The code leverages D3’s `select`, `append`, and `range` APIs to build the scene dynamically.

Aug 16, 2022

Loading thumbnail…

Sol LeWitt Creation Horizontal

This example reproduces a Sol LeWitt-inspired wall drawing as a horizontal striped composition. The visualization fills the entire browser window with a series of 50 horizontal bands, each 10 pixels tall, stacked vertically with no gaps. The piece directly uses the Document Object Model (DOM) API to create SVG elements programmatically, generating rectangles via `createElementNS` and appending them to the document. The page relies on the browser’s `window.innerWidth` and `window.innerHeight` for its full-bleed dimensions, resulting in a clean, minimal, and generative aesthetic that echoes LeWitt’s instructional art.

Aug 11, 2022

Loading thumbnail…

Sol LeWitt Creation

This example generates a full-screen SVG that reproduces Sol LeWitt’s minimalist wall drawings. It creates a grid of 50 narrow vertical rectangles, each ten pixels wide and spaced twenty pixels apart, which collectively fill the entire browser viewport. The piece demonstrates the use of the Document Object Model (DOM) API’s `createElementNS` method to construct SVG elements directly through JavaScript, rather than employing a library like D3. The code iterates a loop, appending each rect to the SVG root, whose dimensions are set from `window.innerWidth` and `window.innerHeight`. The result is a clean, algorithmically generated abstract composition.

Aug 11, 2022

Loading thumbnail…

Javascript Basics

This example shows a blank SVG canvas with JavaScript code commented out in the HTML file, demonstrating basic programming concepts such as variables, objects, loops, and arrow functions. The code includes examples of console logging, arithmetic operations, object creation, and function definitions, though all are disabled. It uses an inline `<script>` tag and an SVG element with 960 by 500 pixel dimensions, rendered as static SVG markup. The visualization appears as an empty plot, with the JavaScript fundamentals acting as the primary subject rather than any graphical output.

Aug 11, 2022

Loading thumbnail…

HTML1

This example displays three circles layered on an SVG canvas. A red and a blue circle sit alongside a black outlined circle, with a large blue-bordered rectangle frame surrounding them. The page uses a raw SVG static drawing with no interaction or dynamic updates. The design emphasizes geometric positioning and color contrast, using basic SVG elements and attributes to create a simple visual composition.

Jul 27, 2022