Skip to main content
SimilarExport ZIP
100%

gems on top of square

✓ Published0🌍 Public
PPatrick Wojda
Last edited Mar 22, 2019
Created on Mar 21, 2019

A square chart area displays nine colored circles, each connected by a dashed line to a corresponding icon positioned evenly along the top edge. The visualization overlays two gradient backgrounds—one horizontal and one vertical—using CSS `mix-blend-mode` for a blended effect. Built with D3 v4 in SVG, the code uses `d3.pie`, `d3.scaleLinear`, and `d3.scaleOrdinal` to position data points randomly and assign colors. A crosshair grid and a legend-like icon row clarify spatial relationships.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/GitNoise/'>GitNoise</a>'s block: <a href='http://bl.ocks.org/GitNoise/983b35042c0d105eb7a54a3a6b2a0c24'>donut chart</a>

forked from <a href='http://bl.ocks.org/GitNoise/'>GitNoise</a>'s block: <a href='http://bl.ocks.org/GitNoise/080bf6a557f63d2a60b101d123762aab'>necklace around square</a>

mit Licensed

Similar vizzes

Loading thumbnail…

necklace around square

A necklace of colored donut slices encircles a central scatterplot of random points, connected by radial spokes. Each slice is rendered with an SVG `path` using `d3.arc`, while dots positioned at random coordinates inside a square crosshair use `d3.pie` to map values. The code applies `d3.scaleOrdinal` for color, draws dashed guide lines, and uses a `rect` boundary to frame the chart area.

PPatrick Wojda
77% match
Loading thumbnail…

fresh block

This example shows a simple scatterplot-style visualization of five circles, with each circle's position and color determined by its data value. The circles are placed horizontally and vertically based on the array `[25, 50, 125, 75, 100]`, and they turn purple when the value exceeds 100, otherwise yellow. The visualization uses D3 v4, selecting the body element, appending an SVG, and binding data with `selectAll` and `enter()`. Circle radii are fixed at 10, while `cx` and `cy` attributes derive directly from the data points, creating a one-dimensional distribution of distinct colored dots.

BBrieLewis
74% match
Loading thumbnail…

Icons on the side of a scatter plot

A scatter plot with eight colored dots moves from a vertical line to a two-axis layout, drawing curved paths behind each point. Each dot leaves a circular icon on the axis edge, showing how points transition between dimensional configurations. Built with d3.v4, the animation uses SVG transition methods on circles and paths to interpolate positions, axes, and curved arcs. The random data is generated inline, with a palette of ten colors and a fixed plot field.

PPatrick Wojda
74% match
Loading thumbnail…

Icons on the side of a scatter plot

Eight colored dot icons sit in a vertical strip on the left edge of a scatter plot, each linked by a connector line to a corresponding circle arranged in a vertical line at the center of the chart. A button labeled “MOVE” triggers a `d3.transition` that animates the circles from the centered, one-dimensional arrangement into a two-dimensional scatter plot with random x and y coordinates, while the icons remain fixed as a legend. The visualization uses D3 v4 with SVG elements, including markers for arrowheads, and demonstrates how a categorical axis can be represented by icons placed perpendicular to the plot’s main axes.

PPatrick Wojda
73% match
Loading thumbnail…

Circles

Twenty colored circles of varying sizes move through a rectangular chart, bouncing off the edges and reacting to user clicks. The example demonstrates a reusable chartlet built with D3 v4 and the d3Kit library, using `d3.scaleLinear` for positioning and radius, plus `d3.scaleOrdinal` for color. Circles animate via D3 transitions and toggle to black when clicked.

663anp3ca
73% match
Loading thumbnail…

Arc Corners IV

A donut chart presents eight sequential values from a hardcoded Fibonacci-like array as colored wedges with rounded outer corners. The d3.svg.arc generator applies a cornerRadius of 20 pixels, while d3.layout.pie sets a padAngle to separate slices. Rendered as SVG paths in a centered group, each wedge uses a category10 color scale. The visualization highlights how rounded corners and padding soften the classic pie chart aesthetic, using D3 v3’s layout and shape APIs.

Mmbostock
72% match
Loading thumbnail…

D3: Pie layout

This example shows a donut chart built with D3.js, displaying six numeric values as colored arc segments arranged around a central hole. Each segment is labeled with its corresponding value, positioned at the centroid of the arc. The visualization uses the `d3.pie()` layout to compute the angles and `d3.arc()` to generate the SVG path shapes, with an ordinal color scale (`d3.scaleOrdinal` and `d3.schemeCategory10`) assigning colors. Data is hardcoded as an array, and all rendering is done via SVG elements in d3.v4.

深深度碎片
72% match
Loading thumbnail…

Goed voorbeeld

A clustered dot plot arranges 50 circles around a central point, with each circle's distance from the center determined by how its randomly generated count differs from a selected circle's count. Clicking any circle increments its count and causes it to move to the center while all other circles reposition based on the new distance metric. The visualization uses d3.scaleSqrt for sizing, d3.scaleLinear for both radial distance and color mapping from steelblue to red, and transitions with an 800-millisecond duration to animate the repositioning. An SVG container with concentric gray guide rings provides a static backdrop for the interactive data.

GGJHazelaar
72% match