Skip to main content
SimilarExport ZIP
100%

advance-setup-1

✓ Published1🌍 Public
Aalexis
Last edited Aug 5, 2024
Created on Aug 5, 2024
Forked from basic-setup

This example shows a scatter plot reproduction of a Sol LeWitt art piece, with blue data points on a gray inner rectangular area surrounded by a light blue background. The visualization includes labeled X and Y axes with titles, using a fixed data array from `data.js`. The code builds an SVG container with D3 v7, using `scaleLinear` for coordinate mapping, `axisBottom`, `axisLeft`, and modular functions for axis labels. The plot is rendered through a setup that manages margins, dimensions, and joins for SVG elements.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

advance-setup-2

This example reproduces a Sol LeWitt art piece as an interactive SVG scatterplot. Points with x and y coordinates are plotted on light blue and gray axes, each point rendered with a fixed radius and opacity. The visualization uses d3.scaleLinear for scaling and d3.axisBottom and d3.axisLeft for axis generation, with data from a static JavaScript array. The container is responsive via a ResizeObserver that updates plot dimensions.

Aalexis
93% match
Loading thumbnail…

basic-setup

This example reproduces a Sol LeWitt-inspired drawing using D3.js. It renders a series of blue circles on a cyan background, plotting each point according to x and y coordinates from a static data array. The code uses the `select` function to manage SVG elements and binds circle positions with chained `.attr` calls to set `cx`, `cy`, `r`, and `fill` properties. The opacity is fixed at 0.7 to show overlapping points. The dataset includes both scaled coordinate pairs and precomputed pixel values.

Aalexis
79% match
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
75% match
Loading thumbnail…

Fork of Sol LeWitt Reproduction Vert

This example reproduces a Sol LeWitt-style artwork as an interactive chart, combining a bar chart and scatter plot to explore categorical and quantitative data. It shows how geometric abstraction can be generated from data, with hovering over bars highlighting them in orange. The code loads CSV data via D3 v6’s `d3.csv` method, converting string values to numbers, then passes the dataset to custom `renderBarChart` and `renderScatterPlot` functions that set up SVG, scales, and axes. While the drawing logic is stubbed out, the structure relies on D3’s data-binding and selection APIs to map values to visual elements.

SSai Hemanth Babu Sunkari
74% match
Loading thumbnail…

simple scatterplot

This example shows a simple scatterplot of seven data points, each defined by x and y coordinates on a fixed 960-by-500 SVG canvas. The visualization uses D3 v4 to create the SVG container and relies on the `d3.select` and `attr` methods to set its dimensions. The data is hardcoded as an array of JavaScript objects, and while the code preps the SVG, it does not yet plot any circles or axes, leaving the points unrendered. The body is styled with zero margins to make the chart full-width.

SScarlettHui
73% match
Loading thumbnail…

Scatter Plot

This example creates an empty scatter plot using D3.js v4, setting up a fixed SVG canvas with defined margins and dimensions. The code establishes a scalable vector graphics (SVG) container and applies a translation transform to position a group element within the plot area. The visualization does not include any data points or axes, focusing solely on the foundational layout structure. It uses D3’s selection and attribute methods to configure the SVG’s width, height, and transform, preparing the coordinate system for future data binding. The data source is not specified in the visible code, and no rendering beyond the empty scaffold is demonstrated.

BBerengerCunillera
73% match
Loading thumbnail…

Untitled

This example shows a simple scatter plot of 100 randomly generated points, each positioned on a 500-by-500 pixel SVG canvas. The visualization uses D3.js v4 scales and axes to map linear domains to screen coordinates, with red circles drawn for each point. The code appends an SVG group to the page, translates it by a 40-pixel margin, and uses `d3.scaleLinear` for both the x- and y-axes, which are rendered via `d3.axisBottom` and `d3.axisLeft`. Data is created in a loop using `Math.random()`.

Ffay Alomar
72% match
Loading thumbnail…

Reusable Scatter Plot in

This reusable scatter plot displays sample data points as steelblue circles, with x and y positions mapped through linear D3 scales. The visualization constructs axes using d3.axisBottom and d3.axisLeft, applied to an SVG container with configured margins. The d3.v7 code encapsulates the chart creation in a `createScatterPlot` function, which binds data via `selectAll().data().enter().append()` and renders the SVG output with hardcoded example values.

Ssaipaidipalli
72% match