Juan Corrales Correyero

@juancorr·11 public vizzes

Reusable D3 Scatter plot

This reusable scatter plot visualizes the Iris dataset, showing the relationship between petal width and sepal length across iris species. It uses D3 v7’s `scaleLinear`, `scaleOrdinal`, `symbol`, and `axisLeft`/`axisBottom` APIs to render SVG marks with distinct symbol shapes for each species, such as circles, crosses, and diamonds. The chart is built as a customizable function following the “Towards Reusable Charts” pattern, with setters for dimensions, margins, data accessors, and symbol size. Data is loaded from a GitHub Gist containing Fisher’s classic measurements.

Sep 21, 2023

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot animates the Iris Dataset, cycling through four attribute pairs every two seconds. It uses D3 6.7.0 to load CSV data, compute linear scales from data extents, and render SVG circles and axes via the `scatterPlot` custom chart module. The plot updates in place, swapping the x-value mapping while keeping the y-axis fixed on sepal length.

Sep 21, 2023

Loading thumbnail…

D3 Scatter plot

This scatter plot visualizes the Iris flower dataset by plotting petal length against sepal length. The visualization uses D3.js v7 with linear scales to map data values to screen coordinates, and SVG circles represent individual data points. The code demonstrates data loading and parsing via d3.csv with type coercion for numeric fields. Axes are generated using d3.axisLeft and d3.axisBottom, positioned according to defined margins, while the plot dynamically fills the browser window using window.innerWidth and innerHeight.

Sep 14, 2023

Loading thumbnail…

D3 Selection exploration

Animated D3 visualization explores circle selection and layout updates as data changes over time. It renders a dynamic set of circles whose positions, radii, and count oscillate sinusoidally, driven by a timer that updates every frame. The implementation uses D3's `select` API to append an SVG, the `range` utility to generate data, and the `selection.join` method to efficiently synchronize the SVG circle elements with the incoming data. The data is created procedurally in `makeData`, with coordinates and radii derived from sine functions.

Sep 14, 2023

Loading thumbnail…

Full Sol LeWitt Reproduction with D3 v2

This example reproduces a Sol LeWitt-inspired geometric composition using D3 v7. It displays two overlapping sets of striped rectangles—horizontal and vertical—that intersect through the use of SVG masks. The code uses `d3.select`, `d3.range`, `d3.symbols`, and `d3.symbol` to generate mask shapes, then applies those masks to the rectangles. The masks are created by rendering inverted and non-inverted versions of the symbols, which reveal or hide portions of the grid-like stripes across the full viewport.

Sep 12, 2023

Loading thumbnail…

Full Sol LeWitt Reproduction with D3.

This example reproduces a Sol LeWitt art piece using D3 v7 and SVG rendering. It creates two overlapping sets of horizontal and vertical striped rectangles, each clipped by a circular mask with inverted fill patterns to produce intersecting geometric shapes. The code uses `d3.select`, `d3.range`, and `d3.symbol` with `symbols[1]` to generate the mask paths, while `selection.append` and `selection.join` build the 100 rectangles per axis across the full viewport.

Sep 12, 2023

Loading thumbnail…

Fork of Original Sol LeWitt Reproduction v2

This example reproduces a Sol LeWitt-inspired geometric composition using D3.js, rendering perpendicular sets of thin horizontal and vertical rectangles that create a grid. The two overlapping sets are masked using the SVG `mask` element with a circular aperture, producing an interwoven disc where vertical strokes appear over a filled circle and horizontal strokes remain visible outside. The visualization uses `d3.select` with `d3.range` to generate 100 rectangles per direction, each 10 pixels thick, positioned at 20-pixel intervals to cover the full browser viewport. The rendering is crisp vector SVG with no external data source, purely algorithmic drawing.

Sep 12, 2023

Loading thumbnail…

Fork of Original Sol LeWitt Reproduction

This example uses D3’s `select`, `append`, and `attr` APIs to build an SVG composition that layers two sets of thin rectangular strips—horizontal and vertical—over a full viewport-sized canvas. Two circular SVG masks (`circle-mask` and `circle-mask-2`) are applied, allowing only strips within a 200-pixel radius of the screen center to remain visible; the two masks are inverted, so each direction’s lines are clipped to opposite halves of the circle. The code uses D3’s `range` to generate 100 strips per direction, with dimensions computed from the window’s width and height. This reproduces a Sol LeWitt–style geometric drawing directly in the browser, with no external data source.

Sep 11, 2023

Loading thumbnail…

Fork of Sol LeWitt Reproduction. Juan

This visualization reproduces a Sol LeWitt art piece using purely generative SVG elements, creating a geometric pattern of layered horizontal and vertical lines. A central circular mask reveals the intersection of these line grids, with one set of lines clipped inside a white circle and another set clipped outside a black circle, producing a striking contrast. The code builds the SVG dynamically via the DOM API, using `document.createElementNS` to construct rects and masks, and sets attributes for positioning and masking. No external libraries are used; the rendering relies entirely on native SVG and JavaScript.

Sep 1, 2023

Loading thumbnail…

Fork of SVG Animations using CSS transitions

A single red SVG rectangle animates its fill color and stroke width in response to mouse hover, smoothly transitioning over three seconds. The example demonstrates CSS transitions applied directly to SVG elements, using the `transition: all 3000ms` property on the `rect` selector and a `:hover` pseudo-class to trigger the visual change. The code defines a 960x500 SVG canvas with one 500x250 rectangle, and relies entirely on CSS rather than JavaScript libraries or animation APIs.

May 11, 2023

Loading thumbnail…

Fork of SVG Fundamentals

This example shows simple SVG primitives—circles, lines, and paths—arranged on a blank canvas to demonstrate basic vector shapes. Overlapping red and green circles illustrate layering, while a red cubic Bézier curve and a black multi-segment path with rounded joins highlight path syntax. The code uses native SVG elements (circle, line, path) with inline fill and stroke attributes, rendered directly in the browser without any external JavaScript libraries. The SVG viewport is fixed at 960×900 pixels, with the body margin zeroed to avoid scrollbars.

May 11, 2023