10x

100%

✓ Published0🌍 Public

Last edited Jul 12, 2018

Created on Jul 12, 2018

A radial bullseye chart displays ten concentric priority levels across four quarterly quadrants, with each arc segment colored by its quadrant using an RGB blue scale. The visualization uses D3 v4’s `d3.arc` generator to compute SVG path geometries from angular and radial ranges. A draggable circle, positioned via `d3.drag`, moves over the arcs and highlights the segment beneath the pointer by changing its fill to red, demonstrating interactive hit-testing through DOM element lookup.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Circle overlap

Ten concentric circles, colored from black through green, blue, yellow, orange, purple, teal, and green to yellow and finally red, are drawn inside an SVG. The circles expand outward in radius from 20 to 200, with their horizontal positions also set to their radius, creating a diagonal stack. The visualization uses d3.select to append a group, scales it by 1.5, and binds the data array via d3’s data join, setting circle attributes for radius, position, fill, stroke, and stroke width.

NNita

75% 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

75% match

Loading thumbnail…

1 Circles with D3

A D3.js data visualization displays fourteen colored circles at fixed positions with varying radii and hex fills across an SVG canvas. The code imports circle data from a separate JavaScript module and uses D3's `select` API with a data join to append and configure each `circle` element. Rendering targets a 960 by 500 pixel SVG, with the visualization defined in a reusable function that binds the dataset to attributes like `cx`, `cy`, `r`, and `fill`.

BBismark Kofi Owusu Sarfo

74% match

Loading thumbnail…

Circular Layout (Arc)

A circular layout of concentric arcs radiates outward from a central point, with each arc’s color shifting from brown to steel blue as its radius increases. The visualization encodes two linear scales—one mapping radius size and another mapping fill color—onto a grid of 180 rotated groups. Built with D3 v3, the code uses `d3.svg.arc` to generate each path segment, with `innerRadius` and `outerRadius` driven by the same scale. Rotating each group by successive 2-degree increments creates the full circular pattern. The data is generated synthetically via `d3.range`, not from an external source.

Mmbostock

74% match

Loading thumbnail…

Untitled

This visualization displays a radial, donut-like chart composed of eight concentric arcs, each representing a different data item stacked from a single-row dataset. The arcs are rendered using D3’s `arc` generator, with their inner and outer radii mapped through a linear scale (`scaleLinear`) to encode values, while the start and end angles are fixed to create a partial ring. The SVG is drawn in React, and the stacked data is computed with `d3.stack()`. Each arc segment is assigned a distinct color from a predefined array, producing a nested multi-layered ring visualization.

Ssubratanp

74% match

Loading thumbnail…

Fork of Main Viz | Protype Dev

This visualization displays a radar chart composed of concentric, donut-like rings with color-coded quadrants for health and wellbeing data. The SVG rendering uses D3 v5 scales and arc generators to construct the circular plot from CSV data loaded via `d3.csv`. The interface includes separate sections for controls, the central chart, and a bubble component. Quadrant-specific gradients (`linearGradient`) and hard-coded color palettes distinguish four risk areas within the radial layout.

Tt0miwa22

73% match

Loading thumbnail…

D3 Quadrant

Four labeled quadrants—Assess, Adopt, Avoid, and Analyze—organize a scatterplot of fabricated data points, each colored by category and positioned by random percentage and count values. The D3 v7 visualization uses linear scales for both axes and avoids overlaps with the legend in the lower-right corner. SVG rectangles, text, and circles render the quadrants, labels, and legend items, while a CSS keyframe animation applies a marching-ants dash offset to any path elements.

CCarloWK1202

73% 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

73% match