Skip to main content
SimilarExport ZIP
100%

GiRiBnW_Ep10-resuable_chart

✓ Published1🌍 Public
JJimMaltby
Last edited Jan 12, 2022
Created on Jan 11, 2022

This example reproduces a Sol LeWitt art piece using a reusable D3.js scatter plot module built with d3.v6. It renders an SVG chart with animated circles positioned by linear scales based on x and y value extractors, with axes drawn via d3.axisBottom and d3.axisLeft. The code defines a custom `d3.reusable.scatterPlot` function that manages chart building, updating, and drawing, applying a join pattern for circles and axes to support dynamic updates. The visualization updates the graph by recomputing data mappings and re-rendering circles and the x-axis.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

GiRiBnW_Ep10-resuable_animated-scatterplot

This example shows an animated scatterplot that reproduces a Sol LeWitt art piece. It uses D3 v6 to render SVG circles whose positions are derived from data, with a transition that animates the radius of newly entering points from zero to a set size. The code builds reusable plotting components—scales, axes, and container groups—and uses the `d3.transition()` API, which is visible as `t = d3.transition().duration(1000)` and applied to enter/update/exit joins. The x and y axes are linear scales from the data’s extent, and the chart updates in place, though no external data source is specified.

JJimMaltby
91% match
Loading thumbnail…

GiRiB&W_Ep3-Sol_LeWitt-FullRepo-pt2

This visualization reproduces a Sol LeWitt-inspired geometric composition using alternating horizontal and vertical striped rectangles, masked by two overlapping circle shapes to create a dynamic intersecting pattern. The piece uses D3.js (v6.6.1) with specific imports including `select`, `range`, `symbols`, and `symbol` to generate the SVG output. It creates a 100-stripe grid where horizontal and vertical bands are each constrained by a separate SVG mask—one with a black background and white circle, the other inverted—resulting in a crossfading intersection of line directions. The code dynamically sizes elements to the window dimensions.

JJimMaltby
79% match
Loading thumbnail…

Episode 9 - Reusable Charts (GIRIBAW) w/ Symbols

This example demonstrates a reusable scatter plot built with D3 v6, visualizing the classic Iris dataset with petal width on the x-axis and sepal length on the y-axis. The scatterPlot.js module creates a configurable chart function that uses d3.scaleLinear for axes, d3.scaleOrdinal to map species to different d3.symbol shapes, and d3.symbol to generate the path data. Data is loaded asynchronously via d3.csv from a GitHub Gist. The chart is rendered as an SVG, with the reusable pattern allowing custom setters for dimensions, margins, accessors, and symbol size.

Eemberix@gmail.com
78% match
Loading thumbnail…

Reusable D3 Scatter Plot

A reusable scatter plot demonstrates how to build a modular D3 chart with configurable accessor functions. It visualizes the Iris Dataset using a user-defined `xValue` and `yValue`, rendering SVG circles scaled with `d3.scaleLinear` and axes via `d3.axisLeft` and `d3.axisBottom`. Every two seconds, the plot cycles through different columns—petal width, sepal width, petal length, and sepal length—updating the x-axis and circle positions through a set interval that re-calls the chart function. The example uses D3 v6 and follows the "Towards Reusable Charts" pattern, packaging the scatter plot as a closure with setter methods for width, height, data, margins, and radius.

CCurran Kelleher
78% match
Loading thumbnail…

Episode 9 - Reusable Charts (GIRIBAW)

This example demonstrates a reusable scatter plot that visualizes the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis. The chart is built using D3 v6 and rendered as SVG, with circles sized by a configurable radius and axes drawn using `axisLeft` and `axisBottom`. The code defines a `scatterPlot` function with a fluent API for setting width, height, data, margins, and value accessors, then invokes it via `svg.call()`. Data is loaded asynchronously from a remote CSV using `d3.csv`.

Eemberix@gmail.com
78% match
Loading thumbnail…

GiRiB&W_Ep3-Sol_LeWitt-FullRepo-Exercise_1

This visualization reproduces a Sol LeWitt-inspired geometric composition using D3.js. It displays ten horizontal black rectangles stacked vertically across the left half of the SVG canvas, with each rectangle’s vertical position mapped through a linear scale from the data range to half the window height. The code uses `d3.range` and `d3.scaleLinear` to generate and position the shapes, applying an SVG mask that is defined but not fully rendered in the provided source. The artwork is generated programmatically in an SVG format, directly responding to the browser window dimensions.

JJimMaltby
77% match
Loading thumbnail…

Episode 10 - Reusable Charts w/ Idempotence (GIRIBAW)

This visualization demonstrates reusable scatter plots using the D3.js library, rendering an SVG of the Iris dataset. The chart cycles through four attributes—petal width, sepal width, petal length, and sepal length—as the x-axis variable every two seconds, with sepal length fixed on the y-axis. The code uses D3’s `scaleLinear`, `axisLeft`, `axisBottom`, and the `join` pattern for idempotent updates. Data loads from a GitHub Gist via `d3.csv`, and the plot’s configuration (width, height, margins, radius, accessor functions) is set through a chained getter-setter API.

Eemberix@gmail.com
77% match
Loading thumbnail…

Animated ProD3 Reusable D3 Scatter Plot

This example presents an animated scatter plot of the classic Iris dataset, using a reusable D3 chart module built with d3.v6. It visualizes sepal length against petal width, with circles that grow into place on load. The code demonstrates the reusable chart pattern and the selection.join method for data binding, drawing axes with axisBottom and axisLeft. SVG rendering handles the vector output, while transitions animate the circles’ radius growth from zero to their final size.

JJimMaltby
77% match