Sami Friedrich

@samifriedrich·3 public vizzes

d3 Scatter Plot

This scatter plot visualizes the Iris dataset, showing petal length on the x-axis and sepal length on the y-axis for each flower specimen. The code loads the data as CSV via `d3.csv`, parses it with a custom row function, and maps values through `d3.scaleLinear` with `d3.extent` for domains. It renders SVG circles using a data join, adds axes via `d3.axisLeft` and `d3.axisBottom`, and reads the window size for a full-viewport layout. The example uses D3 v7 and styles tick labels with CSS.

Oct 23, 2025

Loading thumbnail…

D3 Selection

This example demonstrates a dynamic update of 15 circles that move and resize in a sine-wave pattern, animated via a timer. The visualization uses D3 version 6.6.1 with the selection API to bind data to SVG circles and synchronize their positions and radii. Each circle’s x-coordinate is fixed, while its y-coordinate and radius oscillate over time. The animation runs at 60 frames per second using setInterval, with a data transformation that maps array indices to circle attributes. The SVG is rendered as a full-window graphic with an orange fill, and the code relies on d3.select, selectAll, and range.

Oct 21, 2025

Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces Sol LeWitt’s geometric wall drawings using D3 v3 and SVG, rendering a grid of horizontal and vertical stripes overlaid with two masks. The masks, created with SVG `<mask>` elements, cut out shapes from the stripes using D3 symbols such as circles, diamonds, and triangles. One mask inverts its fill to alternate visible and hidden symbol areas. The code leverages `d3.select`, `d3.range`, `d3.symbol`, and `d3.symbols` to generate the pattern dynamically at full window size.

Oct 15, 2025