Skip to main content
Log in
J

Jun Alvarado

@jun3rd·9 public vizzes

Loading thumbnail…

Making a bar chart

This bar chart displays the population of ten countries, ordered by descending population size, using a clean SVG rendering. The visualization loads data from a CSV file and maps the values using `d3.scaleLinear` for the y-axis and `d3.scaleBand` for the categorical x-axis. Axis generation relies on `d3.axisLeft` and `d3.axisBottom`, while a D3 selection with `.select` appends rectangle elements to form the bars. The chart is built with d3.v5, driven by a promise-based `d3.csv` call, and styled with minimal CSS.

Aug 24, 2022
Loading thumbnail…

Ep6

This example demonstrates how modular JavaScript code can be assembled using ES6 imports and exports, alongside a direct integration of the D3.js library (v7). The visualization outputs a simple text string built from a constant defined in a separate module, while also logging the imported `select` function from D3 to the console. It contrasts an "old school approach" with a React-based starter template, highlighting different methods for structuring D3 projects. The code relies on D3's distribution from unpkg and does not render any graphical charts, serving only as a code-level illustration.

Aug 19, 2022
Loading thumbnail…

Ep5 D3Selections JS Arrays

Circles move vertically in a wave-like pattern, with their size and vertical position oscillating sinusoidally, creating a flowing, animated composition. The number of circles varies over time, dynamically increasing and decreasing, which demonstrates D3's enter, update, and exit behavior for managing the SVG circle elements. The code uses D3's `select`, `range`, and the `join` API to handle the data binding and transitions, with a React import pattern visible through modules like `vizData` and `makeData`. The animation runs via a `setInterval` loop, rendering as an SVG with a 60 FPS refresh rate.

Aug 18, 2022
Loading thumbnail…

SolLeWitt D3 - Single Image to Multiple Images

This example renders two alternating grids of horizontal and vertical bars, each masked by different geometric symbols to create a layered composition. Using React with D3 v7, it generates SVG rectangles based on window dimensions and applies SVG masks containing D3’s built-in symbol shapes. The code defines a `renderMask` function that creates white or black mask backgrounds with inverted symbol fills, then applies these masks to the bar groups. The visualization demonstrates how D3 selections, data joins, and mask operations combine multiple images into a single viewport.

Aug 17, 2022
Loading thumbnail…

SolLeWit using D3 without Notes

This visualization creates a geometric interplay of horizontal and vertical bars that reveal a diamond-shaped symbol through the use of SVG masks. The code uses D3 v7 to generate bar rectangles across the full screen, then applies two complementary masks—one black background with a white symbol and one inverted—to selectively show or hide different bar segments. The masks are defined using D3’s `symbol` generator with the `symbols[1]` diamond shape, rendering the final pattern without explicit notes or annotations.

Aug 17, 2022
Loading thumbnail…

Fork of SolLeWitt - convert from VanillaJS to D3

This visualization generates a geometric pattern using Sol LeWitt-inspired horizontal and vertical bars. It uses `d3.select` and `d3.range` to create rectangles, with SVG masks (`mask_bottom` and `mask_top`) that reveal or hide parts of the bars based on circular fill regions. The code computes bar positions based on window dimensions and uses the D3 `join` API to efficiently append and style `<rect>` elements. The final composition displays a grid of bars with a circular cutout effect in the center.

Aug 17, 2022
Loading thumbnail…

SolLeWitt in VanilaJS

This example generates a geometric composition inspired by Sol LeWitt using only vanilla JavaScript and the SVG DOM API. It creates an SVG canvas sized to the viewport, then draws alternating horizontal and vertical bars whose visibility is controlled by two circular masks. The top mask applies a black circular cutout over white bars, while the bottom mask uses a white circle to reveal underlying horizontal bars, producing an intersecting circular pattern. The code relies on `document.createElementNS` and `setAttribute` for all SVG elements, with no external libraries.

Aug 17, 2022
Loading thumbnail…

Pseudo Visualizations

Seven circles in a square SVG canvas appear as a pseudo network visualization, with each node represented by a circle of identical radius. The circles are placed at varying coordinates, creating an organic, scattered layout that resembles a graph without connective edges. The example uses static SVG elements—rect and circle—rendered directly in HTML markup, with no JavaScript framework or data binding. The white background rect anchors the visualization, while the unpositioned circles suggest a minimal, unfinished force-directed simulation.

Aug 9, 2022
Loading thumbnail…

SVG Fundamentals

This example displays the fundamental SVG path commands—moveto, lineto, curveto, and closepath—to construct a geometric composition of lines and a curved shape. It uses SVG filters like `feGaussianBlur` and `feOffset` to add a shadow effect, alongside a `linearGradient` fill. The visualization is rendered as static HTML with embedded CSS, demonstrating the core drawing capabilities of the SVG API without any interaction or data source.

Aug 9, 2022