d3.scale.category20() randomizer

100%

d3.scale.category20() randomizer

✓ Published0🌍 Public

Last edited Dec 20, 2014

Created on Dec 20, 2014

This example demonstrates a randomizer for D3’s categorical color palette, replacing the standard `d3.scale.category20()` colors with newly generated hexadecimal values. It first shows how the original palette’s colors appear in the page’s SVG elements, then swaps them by iterating over the old color strings. The code uses `d3.scale.category20().range()` to capture the initial palette, maps each color to a random `#`-prefixed hex code via `Math.random`, and updates inline styles and `fill` attributes with `d3.selectAll`. Pressing the up arrow re-runs the script, reassigning the palette each time. The data source is the existing DOM elements’ style and attribute values.

AI-generated description

Similar vizzes

Loading thumbnail…

D3 Random Abstract Art

This example generates a grid of 100 colored rectangles whose fills use randomized pairs from the d3 `schemeCategory10` palette via `d3.scaleLinear`. As the mouse hovers over a square, that rectangle and its entire row are re-appended to the SVG to bring them to the foreground, while the square’s width and height are scaled up or down by a factor of three or four. Clicking anywhere reloads the page to generate a fresh random composition. The visualization is built with D3 v6 selections and SVG rendering, and includes a small instruction bar.

CCaroline Ghisolfi

76% match

Loading thumbnail…

color palette generator

This example presents a simple color palette generator using D3.js (v7) within an HTML page. It displays a circle and a series of five rectangles, each filled with a color interpolated along a linear scale from orange to black, using a gamma-corrected RGB interpolation with a value of 1.5. The visualization is rendered as SVG, with shapes positioned and colored based on the numeric scale values, demonstrating D3's `scaleLinear` and `interpolateRgb` APIs.

Ssukumardunn

75% match

Loading thumbnail…

Color Experiments

This example generates 150 circles at random positions across the full browser viewport. Each circle receives a random radius, opacity, and a fill color selected from a procedurally generated RGB range using D3’s `select` and `join` methods. The SVG renders with a 13em body font, displaying the title "Color Experiments" at the top of the page. The data is constructed in plain JavaScript with no external dataset.

Aadventuresenglish.info@gmail.com

71% match

Loading thumbnail…

Uniform Random III

This example generates 10,000 random points within a fixed width and height, then computes their Voronoi diagram using `d3.geom.voronoi` with a clip extent matching the SVG canvas. Each Voronoi cell is rendered as an SVG path, filled with a color from a cubehelix scale (`d3.scale.cubehelix`) that maps the cell’s polygon area to a hue range. The coloring transitions smoothly from bright green to deep purple as area increases, creating a visually textured mosaic. The code uses D3 v3, the custom cubehelix interpolation library, and random uniform sampling.

Mmbostock

70% match

Loading thumbnail…

D3: Transitioning to randomized data values

This example shows a bar chart with value labels that randomize each time the user clicks on the text prompt above it. Initially, a fixed dataset of twenty values is rendered as SVG rectangles with a blue color scale and overlaid text labels. Upon clicking, the D3 transition API animates each bar's new height, fill color, and label position with a staggered delay based on its index, using `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. The original code was adapted from the book *Interactive Data Visualization for the Web* and updated to work with d3.v4.

深深度碎片

69% match

Loading thumbnail…

Random Digit Dice

This example visualizes random digit generation as a dice-rolling game. A grid of 20 circles represents possible outcomes, and clicking the Play button randomly selects a digit (0-9), coloring the corresponding circles orange. The code uses D3.js v5 selection methods like `d3.select` and `attr` to update circle fills. A Reset button restores all circles to black. The visualization renders as an SVG with IDs for each circle, and the random number logic is implemented in plain JavaScript using `Math.random()`.

SSreenivasulu

69% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a straightforward color legend using D3's ordinal scale, displaying three categories—blueberries, oranges, and apples—each assigned a color from the `d3.schemeCategory10` palette. The visualization renders swatches and labels via the `Swatches` function, which builds an HTML structure with inline styles for swatch dimensions and text formatting. The code imports `select` from D3 and applies the `swatches` helper to generate the legend, relying on D3 v7 loaded from a CDN. The page itself is minimal, centering the legend with a large font size, showcasing a simple starter template for D3-based data displays.

謝謝惠喻

69% match

Loading thumbnail…

random generator

Ten randomly positioned orange circles on a grey scatter plot animate to new coordinates whenever a “change data” button is clicked. The circles pulse by expanding and contracting their radius, and their fill color briefly shifts to red during the transition. Built with React and D3 v7, the visualization uses `d3.scaleLinear` for axes, `d3.randomUniform` for generation, and chained `transition` calls with an `easeSin` easing function. All rendering is SVG with animated updates.

Bbart

69% match