edw.ext@gmail.com

@eapino9·6 public vizzes

Fork of D3 Starter_EP

This example shows two linked bar charts side by side. One chart groups data from a CSV file by color, the other by letter, and clicking a bar in either chart highlights the corresponding bars in both. It uses React with hooks and a ResizeObserver to manage container dimensions, while D3 v7 handles scales, axes, gridlines, and bar rendering.

Oct 4, 2025

Loading thumbnail…

D3 Starter_EP

This example demonstrates a React and D3.js bar chart visualizing the frequency of letters in a small CSV dataset. The chart displays each letter on the x-axis with its corresponding count on the y-axis, featuring interactive bars that change color and opacity when clicked to highlight a selected letter. Built with React 19 and D3 v7, the application uses a custom `useDimensions` hook with ResizeObserver for responsive sizing, `d3.scaleBand` and `d3.scaleLinear` for scales, `d3.axisBottom` and `d3.axisLeft` for axes with gridlines, and `d3.csv` for data loading. The code leverages D3's selection `join` method for declarative SVG rendering within the React component lifecycle.

Oct 4, 2025

Loading thumbnail…

Fork of Simple Scatter Plot

This example visualizes the relationship between bill length and flipper length for penguins, with each circle representing an individual penguin. The scatter plot uses a light gray background for the plotting area and semi-transparent circles to show data density. The code uses d3's `scaleLinear` for axis scaling, `extent` for data range calculation, and axis label functions from the `@curran/axis-labels` library. Data comes from the `@curran/penguins` dataset, and the visualization is built using declarative D3 joins.

Oct 4, 2025

Loading thumbnail…

Fork of D3 Scatter Plot

This example presents a scatter plot of the classic Iris dataset, mapping sepal length against petal length for individual flowers. The visualization is a direct fork of a D3.js v3 example, adapted to use the modern D3 v6 API, and rendered as an SVG that fills the browser window. The code constructs a linear scale for both axes using `scaleLinear` and `extent`, draws the data points as circles with a fixed radius, and adds labeled axes via `axisLeft` and `axisBottom`. It also employs the `join` operator for efficient, declarative updating of the circle marks. The plot is fully responsive, sizing itself to the window's dimensions.

Oct 4, 2025

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example recreates a Sol LeWitt-inspired drawing using D3 and SVG. It shows a grid of horizontal and vertical bars that are partially hidden by two circular masks, creating a pattern of lines that fade in and out of view. The code uses D3’s `select`, `append`, `range`, and `.join()` API to generate the bars and masks, with the masks defined as SVG elements containing rectangles and circles. The visualization is rendered entirely with vector graphics, using a full-window canvas and a data-driven approach to build the repeating line structure.

Oct 4, 2025

Loading thumbnail…

Fork of HTML Starter

This example displays two plain SVG circles, one unfilled and one red, positioned on a blank canvas. It functions as a minimal HTML starter template, demonstrating static SVG shape rendering within a web page. The code uses raw SVG elements directly in an HTML file, with a linked stylesheet that defines a message class, and a JavaScript file that only logs a string to the console. No external libraries are employed; rendering is entirely native SVG.

Oct 4, 2025