Skip to main content
Log in
K

khalil-ryu

@khalil-ryu·14 public vizzes

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example shows a row of twenty circles evenly spaced across the screen, all centered vertically. The visualization uses D3.js version 6.7.0 to bind an array of data points to SVG circle elements, setting each circle’s x-coordinate, y-coordinate, and radius based on the data. The code pulls data from a simple generated array via `d3.range`, and positions the circles using the `select`, `selectAll`, and `join` methods. The page is styled with a hidden overflow and a custom Google font, though the dataset referenced in the README is not actually loaded in the running code.

Dec 14, 2022
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This reusable scatter plot visualizes the Iris Dataset, cycling through four flower measurements (petal width, sepal width, petal length, sepal length) on the x-axis every two seconds while keeping sepal length on the y-axis. Built with D3 v6, it uses `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and a custom `scatterPlot` function to render SVG circles and axes. The animation is driven by `setInterval` and repeated `svg.call(plot)` invocations, with styling from the Share Tech font. Data loads via `csv` from a GitHub Gist.

Dec 14, 2022
Loading thumbnail…

scatter plot

This example presents a scatter plot of the classic Iris dataset, loaded from a GitHub-hosted CSV using D3.js’s `d3.csv`. The visualization is rendered as an SVG element that fills the entire browser window, with dimensions set to the viewport’s height and width via `window.innerHeight` and `window.innerWidth`. The code parses the dataset’s four numeric columns (sepal length, sepal width, petal length, petal width) into integers using the `parseRow` function, though it does not yet map these fields to visual positions or draw any points. Instead, it establishes the SVG canvas and logs the parsed data to the console, leaving the plotting logic incomplete.

Dec 13, 2022
Loading thumbnail…

anotherProj

A circular pattern of 20 black circles orbits the center of the screen, with each circle’s radius growing proportionally to its index. The animation updates every frame using `setInterval`, recalculating each circle’s `cx` and `cy` based on trigonometric functions of a time variable. The code uses D3’s `select`, `range`, and data joins (`join('circle')`) to bind and update SVG circle elements, with the viewport dimensions determined by `window.innerWidth` and `window.innerHeight`.

Dec 9, 2022
Loading thumbnail…

sphere

This example renders a dynamic abstract sphere composed of 25 circles that continuously move and change size and color. Each circle’s position is computed from cosine functions, creating a pulsing, orbital effect across the screen. The visualization updates 60 times per second via `setInterval`, re-binding data with D3’s `selectAll` and `.join()` pattern. It uses `d3.range` to generate the data array, and SVG circle attributes like `cx`, `cy`, `r`, and `fill` are animated based on a time incrementing variable `t`.

Dec 9, 2022
Loading thumbnail…

playing with selection

This example demonstrates animated data binding with D3 selections. A set of circles continuously updates as new data points are generated, with positions, radii, and colors shifting over time. The visualization uses `d3.select` to create an SVG, then the custom `vizData` function applies the data join pattern with `selection.join()`, merging enter and update elements. Data is generated procedurally via `makeData`, producing 15 to 25 circles each frame. The animation runs on a `setInterval` loop at 60 frames per second, with each frame updating the circle attributes directly.

Dec 7, 2022
Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page that displays a large, centered "Hello HTML!" message using CSS styling. The code uses plain JavaScript with the D3 library imported via ES modules, and it logs the `select` function to the console. The page renders text directly in the browser without external data, showcasing a basic setup for combining HTML, CSS, and JavaScript in a single file.

Dec 1, 2022
Loading thumbnail…

selecting

This example demonstrates animated data visualization using the D3.js library (version 7). It shows a dynamic set of circles that move vertically and change radius over time, with the number of circles oscillating between 15 and 25. The visualization uses `d3.select` to target the SVG container, `d3.range` to generate data points, and a custom `vizData` function that employs `selection.selectAll` and the `.join` method to efficiently handle entering and updating circle elements. The animation runs at 60 frames per second via `setInterval`, updating positions based on a sine wave function.

Nov 29, 2022
Loading thumbnail…

javascript arrays

This example demonstrates basic JavaScript array and object operations using D3.js v7 within a React framework. It sorts a numeric array in descending order using the array’s built-in `sort` method with a comparison function, then logs the result to the console. It also converts an array of key-value pair objects into a single object using the `reduce` method, showcasing data transformation techniques. The visualization is minimal, with no graphical output, focusing solely on console logging of the computed results.

Nov 24, 2022
Loading thumbnail…

Fork of Fork of test lewitt d3

This example creates a grid-based generative artwork using D3.js version 7 and Anime.js. It draws 100 horizontal and 100 vertical rectangular strips across the full viewport, with each strip assigned an SVG mask. Two distinct masks are applied using D3's `symbol` and `symbols` functions to generate complex path patterns, with the first mask using a black fill on white and the second using the inverse. The SVG output is rendered directly to the browser window, filling the entire screen with no margins.

Nov 24, 2022
Loading thumbnail…

Fork of test lewitt vertical

This visualization uses D3 v7 and Anime.js to generate an abstract, grid-based composition of colored vertical and horizontal bars. It shows a pattern of alternating purple and green vertical rectangles layered over black horizontal lines, with two circular SVG masks creating distinct circular cutout regions that reveal the different bar orientations. The code constructs elements via D3 selections and raw SVG DOM manipulation, applying masks to selectively show portions of the two bar layers.

Nov 23, 2022
Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This piece uses SVG to display horizontal and vertical lines in a grid across the entire screen, generating a striped texture rather than a literal reproduction of the Sol LeWitt artwork. Each line segment is drawn as a thin rectangle, with 100 rows and 100 columns created via d3’s range and join methods. Two circular masks are applied to the grid: one with a central white hole on a black background, and another with an inverted pattern, producing a lensing or spotlight effect. The piece pairs D3’s SVG API with custom mask elements to create a geometric, interactive-looking visual.

Oct 31, 2022
Loading thumbnail…

test lewitt

A full-screen SVG rendering creates a circular viewport into a dense field of 100 vertical black stripes, each 10 pixels wide and spaced 20 pixels apart. A mask with a white circle on a black background reveals the stripes only within that circle, while the rest of the canvas remains hidden. The code builds the SVG and mask elements using the raw DOM API, and it relies on D3 v7 only for the script import, with no D3-specific functions invoked.

Oct 21, 2022
Loading thumbnail…

Fork of SVG Fundamentals

A black-bordered square contains a bullseye of seven concentric, overlapping circles, each a different color, with the text “Problem Solving” centered in yellow on the white innermost circle. The example defines each SVG shape directly in the HTML, using elements like `rect` and `circle` to demonstrate basic vector graphics. It renders in SVG at a fixed 960 by 500 pixel size, with the page body hidden from overflow and no interactive behavior or scripts.

Oct 2, 2022