jonathanh21

@jonathanh21·5 public vizzes

D3 Scatter Plot

This interactive scatter plot visualizes the classic Iris dataset, allowing users to dynamically compare different flower measurements by switching the X and Y axes through dropdown menus. Built with D3 v7, it renders animated SVG circles using the `scatterPlot` component, which leverages `scaleLinear` for axes and `transition` for smooth 1-second updates. The menu system uses `dispatch` for change events, while data is loaded from a GitHub-hosted CSV file.

Aug 31, 2022

Loading thumbnail…

Fork of Animated Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements through dropdown menus. The visualization uses D3 v6 with SVG rendering and transitions to animate circles as they reposition when axes change. Built with a reusable scatterPlot component using d3.scaleLinear, d3.extent, and axis generators, the code implements selection.join for smooth enter-update-exit patterns. Menus are created via a custom menu function that dispatches change events, triggering animated updates to the x and y axes.

Aug 30, 2022

Loading thumbnail…

Sol D3

Two intersecting sets of thin horizontal and vertical lines form a grid across the full screen. D3 symbols (shapes) are used as masks to selectively reveal or hide sections of these lines, creating a pattern inspired by Sol LeWitt's wall drawings. The code uses `d3.select`, `d3.range`, `d3.symbol`, and `d3.symbols` to generate SVG rectangles and masked paths, with two mask layers applied in opposite color inversions.

Aug 29, 2022

Loading thumbnail…

Fork of Sol LeWitt reproduction circle

This example reproduces a Sol LeWitt wall drawing by generating two intersecting sets of striped rectangles within a circular mask on an SVG canvas. One set of horizontal bands is clipped by a white circle mask, while a second set of vertical bands is clipped by an inverted black circle mask, creating a checkerboard-like pattern inside the circle. The code uses raw JavaScript and the SVG DOM API, creating elements with `document.createElementNS` and applying masks via `url(#circle-mask)` and `url(#circle-mask-2)`. The rectangles are laid out programmatically in two loops of 100 iterations each.

Aug 28, 2022

Loading thumbnail…

SVG Fundamentals

This example demonstrates a single SVG circle drawn with a radius of 50 units, positioned at the center of the SVG canvas. The visualization shows the fundamental shape primitive available in SVG, with a black fill on a transparent background. The code uses the native `<svg>` and `<circle>` elements from the SVG specification, rendered directly in the browser by the HTML document. The rendering approach is static SVG output, with no additional libraries or data sources required.

Aug 28, 2022