Skip to main content
Log in
K

Kerim

@3xo13·17 public vizzes

Loading thumbnail…

Fork sol assignment

This example renders a heart-shaped cutout through a grid of horizontal and vertical lines using raw JavaScript and SVG. The code creates two masks: the first punches the heart shape out of the background, revealing a set of overlapping horizontal rectangles behind it. The second mask highlights the same heart shape in front of the vertical lines, creating a layered, intersecting pattern. Both heart paths rotate 360 degrees in alternating directions via CSS keyframe animations.

Dec 7, 2022
Loading thumbnail…

animated transition of Reusable D3 Scatter Plot

This example demonstrates an animated scatter plot of the Iris dataset, with sepal length and petal width mapped to the x and y axes. The visualization uses D3 version 6.7.0 and follows the reusable chart pattern, constructing a scatter plot via the `scatterPlot` function. SVG circles represent data points, positioned using `scaleLinear` with domains from `extent`, while `axisLeft` and `axisBottom` generate the axes. Although the code includes commented-out logic for cycling through columns, the active script renders a single static view of the data with no animation.

Nov 14, 2022
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot uses the classic Iris dataset to explore relationships between flower measurements, dynamically cycling through different attribute combinations every two seconds. Built with D3.js v6, the visualization leverages reusable chart components like `scaleLinear`, `axisLeft`, and `axisBottom` to render axes and circles via an SVG. The code demonstrates the utility of the `join` pattern for idempotent updates, allowing the plot to smoothly transition between four variable pairings while maintaining consistent margins, radius, and styling.

Nov 14, 2022
Loading thumbnail…

countries GDP in 2015 or before

This scatter plot visualizes countries' population and GDP from a 2015-or-earlier dataset, with each circle representing a country. The x-axis maps population in millions, while the y-axis shows GDP in millions of USD. The chart uses D3’s scaleLinear, extent, axisLeft, and axisBottom to construct axes. Circles are rendered via SVG, and each includes a title element showing detailed country data on hover. The reusable scatterPlot function, inspired by Towards Reusable Charts, is configured with margin, radius, and text value setters. The code loads CSV data from a GitHub repository using d3.csv.

Oct 12, 2022
Loading thumbnail…

Fork of D3 Scatter Plot

This fork of a D3 scatter plot visualizes the classic Iris Dataset, showing the relationship between petal length and petal width for three flower species, colored red, blue, and green. Built with the d3 v6 API, it renders circles in an SVG, with circle radius scaled by the sum of petal width and length. The code imports and uses `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` from d3, loading data from a GitHub Gist URL. It also defines a custom scatter plot module (`scaterlot.js`) that outlines a configurable chart factory, although the main script does not use it.

Oct 10, 2022
Loading thumbnail…

Reusable D3 Scatter Plot

This example demonstrates a scatter plot of the Iris dataset, mapping petal length to the x-axis and sepal length to the y-axis. The visualization uses D3 v7 APIs including `d3.csv`, `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to load data, scale positions, and render axes. Circles of fixed radius are drawn as SVG elements with coordinates computed from the scaled values. The chart fills the browser window, with the data sourced from a GitHub Gist and rendering done entirely in SVG.

Oct 7, 2022
Loading thumbnail…

animating data modul

Two sets of twenty circles oscillate horizontally in sine waves, with each set connected by a smooth line and accompanied by horizontal and vertical connector lines, creating a dynamic, layered network. Built with D3 v7, the visualization uses `select`, `range`, `line`, and the `.join` method to update SVG circles and paths every frame, animating via two `setInterval` timers that shift the data’s phase and time offset. The rendering uses SVG elements with explicit `cx`, `cy`, and `r` attributes, and the data is generated procedurally in the `makeData` function, which computes x positions from sine functions of an incrementing time variable.

Aug 31, 2022
Loading thumbnail…

Fork of Double Harmonic

This example animates a double pendulum system, tracing the motion of two connected masses as they swing around a fixed center point. The code uses `d3.select` to create SVG circles and lines, updating their positions every frame with `setInterval` and `range(1)` to compute the pendulum’s coordinates. It relies on D3 v6’s data joins (`selectAll` and `join`) to render the moving balls, connecting rods, and shadow markers, with an animation loop that advances the angle `t` and the ratio `psi`.

Aug 30, 2022
Loading thumbnail…

animating data cleaner code

This example uses D3 v7 to create an animated, generative visualization of circles. It displays a dynamic sine-wave pattern where 10 to 15 circles move vertically and change radius over time, rendered as SVG elements on a full-window canvas. The animation runs at a 60 FPS interval, with each frame updating the `cx`, `cy`, and `r` attributes of the circles via `selectAll` and `.join`. The periodic motion is computed using `Math.sin` for both position and size, creating a smooth, evolving sine-wave composition.

Aug 29, 2022
Loading thumbnail…

animating data

Animated circles move in a sine-wave pattern across the screen, with the number of visible circles oscillating over time as they enter and exit the view. The visualization demonstrates D3's data join pattern using `d3.range` to generate positional data and `selection.join()` to handle enter, update, and exit selections. Running at 60 frames per second via `setInterval`, it renders SVG circles whose x and y coordinates are computed from a continuously incrementing time variable `t`. The example highlights the concise syntax of D3 v7's join method compared to manual merge operations.

Aug 29, 2022
Loading thumbnail…

Fork of sol lewit reproduction assignment

This example reproduces a Sol LeWitt-inspired drawing using D3 v7 selections and SVG masks. Three alternating vertical and horizontal stripe patterns are overlaid on the page, each masked by a large circle that reveals or hides the lines through contrasting black and white mask fills. The code builds the SVG structure with `d3.select`, generates stripe counts via `d3.range`, and applies masks through D3’s `attr` method, rendering the final output as SVG.

Aug 28, 2022
Loading thumbnail…

Refactored Fork of sol lewit reproduction

A grid of horizontal and vertical black lines is selectively revealed by two SVG masks, creating an interplay of striped regions against a white background. The visualization uses D3 v7 to generate rectangles and `d3.symbol` paths, with the masks defined via `svg.append('mask')` and applied through the `mask` attribute. The masks are constructed from white rectangles and black symbol shapes, using inverted fill logic to show or hide the lines. The code refactoring is evident in its use of a reusable `renderMask` function and D3’s data join.

Aug 28, 2022
Loading thumbnail…

sol lewit reproduction assignment

This visualization reproduces the geometric precision of Sol LeWitt’s wall drawings using D3.js, encoding alternating vertical and horizontal line grids. It renders a series of thin rectangles that are selectively masked by SVG masks containing paths of abstract symbols, creating overlapping patterns of positive and negative space. The code leverages D3’s `select`, `range`, `symbols`, and `symbol` APIs to generate the grids and symbol paths, with masks (`url(#mask0)`, etc.) toggling visibility. The result is a dynamic, screen-sized composition that mirrors LeWitt’s systematic, rule-based aesthetics through algorithmic drawing.

Aug 24, 2022
Loading thumbnail…

sol vanilla JS

This example uses SVG and JavaScript to create a circular viewport that reveals a grid of horizontal and vertical lines. The visualization dynamically builds SVG elements, using masks to carve a circular hole in the background and to clip the vertical stripes inside the circle. The code creates a mask for the horizontal lines, which span the entire window width, and a second mask for the vertical lines, which fill the circle’s height. The result is an optical illusion of intersecting lines, produced entirely with procedural DOM manipulation and CSS styling.

Aug 24, 2022
Loading thumbnail…

sol lewit reproduction

The visualization reproduces Sol LeWitt's geometric wall drawing style using horizontal and vertical striped rectangles layered and masked into circular and diamond-shaped forms. Built with D3 v7, it uses `select`, `range`, `join`, and `symbol` to generate SVG elements dynamically, with two masks (`#mask` and `#mask-2`) controlling visibility of the overlapping bands. The artwork renders at four times the window width, with dimensions derived from `window.innerWidth` and `window.innerHeight`, producing a large-scale, pattern-based composition.

Aug 23, 2022
Loading thumbnail…

assignment 1

This example renders a stylized, symmetrical face using React and D3 v7. It displays a large circular head with two outer ears, white eye scleras with black pupils, red cheeks, and a grey mouth created via the `d3.arc` path generator. The composition layers SVG ellipses, circles, and paths positioned with coordinate transforms, all drawn with static SVG elements inside a React component. The visualization relies on declarative JSX markup and D3’s `arc` helper but does not implement interaction or data binding.

Aug 19, 2022
Loading thumbnail…

Fork of React Starter

This example displays a simple yellow smiley face rendered as a static SVG graphic. It shows a large circle with a thick black stroke, two smaller black circles positioned as eyes, and a curved arc forming a mouth. The visualization uses React to define the SVG structure and D3's `arc()` generator to compute the mouth path. The `index.html` loads React 16 and D3 v7 from a CDN, while the `index.js` imports React and the `arc` function from D3, with the final SVG sized to 960 by 500 pixels.

Aug 19, 2022