Marvin Frede

@marfrede·12 public vizzes

D3 Scatterplot VI - better transitions

This example demonstrates a scatterplot of the Iris dataset that periodically swaps which measurement is plotted on the x-axis among sepal length, sepal width, petal length, and petal width every five seconds. It uses d3.csv to load the data and d3.scaleLinear to map data domains to pixel ranges, with axes rendered via d3.axisLeft and d3.axisBottom. Points animate smoothly through d3.transition with staggered delays, while the SVG rendering and join pattern manage enter, update, and exit selections.

Oct 4, 2023

Loading thumbnail…

D3 Scatterplot VII - responsiveness

This interactive scatterplot demonstrates responsive visualization with D3.js, cycling through different Iris flower measurements every five seconds while gradually shrinking the chart width. The visualization uses `d3.scaleLinear` to map data domains to pixel ranges, with animated transitions via `transition.attr` as circles update their positions. Built with SVG rendering, the example dynamically re-renders the plot as the selected x-axis column changes among sepal and petal dimensions, showcasing D3's data join patterns and reusable chart components. The dataset comes from a CSV file containing classic Iris flower measurements.

Oct 4, 2023

Loading thumbnail…

D3 Scatterplot V - transitions

This example demonstrates animated transitions in a D3.js scatterplot using the Iris flower dataset. Every two seconds, the plot cycles through different measurements—sepal length, sepal width, petal length, and petal width—as the x-axis value, causing circles to smoothly relocate with d3.transition over 500 milliseconds. The reusable scatterPlot function employs d3.scaleLinear for both x and y axes, dynamically updating domains and ranges as data mappings change, with d3.axisBottom and d3.axisLeft rendering the axis labels.

Oct 2, 2023

Loading thumbnail…

D3 Scatterplot IV - dynamic, idempotent charts

This example presents a dynamic scatter plot that cycles through different attribute pairs from the Iris flower dataset every two seconds. It visualizes measurements like petal length and sepal width as circles, with axes updating to reflect the currently selected dimensions. The chart uses D3’s `scaleLinear` to map data ranges to pixel coordinates, and leverages the `join` API for idempotent rendering, ensuring circles and axes are efficiently updated without duplication. A timer triggers re-renders, making the visualization animate through the dataset’s numeric columns.

Oct 2, 2023

Loading thumbnail…

D3 Scatterplot III - reusable charts

This example demonstrates a reusable scatterplot component built with D3 v7, visualizing the Iris dataset. It renders circles scaled from petal length and sepal length measurements using `d3.scaleLinear` for x and y axes. The chart is implemented as a configurable function that accepts data, accessor functions, dimensions, and margins, then renders SVG circles, axis labels, and ticks. It loads data from a CSV URL via `d3.csv` and incorporates an HTML/CSS/SVG rendering pipeline.

Sep 29, 2023

Loading thumbnail…

D3 Scatterplot II - margin convention, axis

This example presents a scatterplot of the Iris dataset, visualizing petal length against sepal length with circular marks. The code uses D3 v7's `scaleLinear` to map data domains to pixel ranges, with margins applied to position the plot area. Axes are generated with `axisLeft` and `axisBottom` functions. The visualization is rendered as an SVG, with data loaded asynchronously via `d3.csv` from a remote gist URL, and point positions are computed and drawn using D3's selection and join operations.

Sep 28, 2023

Loading thumbnail…

D3 Scatterplot I - scaleLinear, domain, range

This scatterplot displays the relationship between petal length and sepal length for the Iris flower dataset, with each point representing one sample. The visualization maps the data values to pixel coordinates using D3 v3's `d3.scaleLinear` and explores the concepts of `domain` (the data range) and `range` (the pixel space). It fetches CSV data from a gist URL, parses the numeric fields, and renders the points as SVG circles using a dataset join. The dataset is the classic Iris dataset, and the code logs the scales and computed mark positions to the console for inspection.

Sep 28, 2023

Loading thumbnail…

LeWitt D3 More Symbols

This example generates a geometric pattern of black bars overlaid on a white background using D3 version 7. It displays 100 horizontal and 100 vertical rectangles, each masked to reveal shapes: the horizontal bars are clipped by a wye symbol, while the vertical bars are masked by a star with a rectangular cutout. The code uses `d3.select`, `d3.range`, `d3.symbol`, and SVG `<mask>` elements to compose the layered effect, rendering fully in SVG with no external data source.

Sep 28, 2023

Loading thumbnail…

LeWitt D3 Symbols

A generative geometric composition inspired by Sol LeWitt uses D3 v7 to render black bars across the full window. The SVG defines two masks—a circle and a star—and applies them to alternating horizontal and vertical bar groups, creating intersecting line patterns. `d3.range` and `d3.symbol` generate the shapes, while `select` and `join` manage the 100 rects per axis. The result is a minimal, modular artwork built entirely with scalable vector graphics.

Sep 28, 2023

Loading thumbnail…

LeWitt Recreation w/ D3

This example recreates a Sol LeWitt-style geometric drawing using D3.js v7 and SVG rendering. It displays a grid of horizontal and vertical black bars overlaid on a full-window canvas, with a circular mask creating a central void. The code uses D3's `select`, `range`, and `join` to generate 100 rect elements in each orientation, while SVG `mask` elements with white and black shapes define the visible regions. The result is a minimalist pattern that demonstrates simple masking and data-driven shape generation.

Sep 28, 2023

Loading thumbnail…

LeWitt Recreation w/ JS & SVG

A minimalist digital recreation of Sol LeWitt's geometric wall drawings uses JavaScript and SVG to layer a grid of black rectangles over a large white circle and a contrasting white rectangle over a black circle, with two SVG masks controlling visibility. The code constructs all shapes dynamically via DOM creation methods like `createElementNS` and `setAttribute`, requiring no external libraries, and renders at full window dimensions. The masks invert the patterns, producing an interplay of intersecting horizontal and vertical lines across the canvas.

Sep 27, 2023

Loading thumbnail…

SVG Fundamentals

A compact SVG canvas displays a grid of geometric shapes—circles and rectangles—arranged in two horizontal bands within a 500×200 viewport. The top row mixes filled and unfilled red circles with red squares, while the bottom row uses blue shapes in a symmetric pattern. Built with raw SVG elements (`<circle>` and `<rect>`) directly in an HTML page, the example demonstrates fundamental vector graphics positioning via `cx`, `cy`, `r`, `x`, `y`, `width`, `height`, and `fill` attributes.

Sep 27, 2023