Skip to main content
SimilarExport ZIP
100%

color palette generator

✓ Published0🌍 Public
Ssukumardunn
Last edited Feb 6, 2023
Created on Feb 6, 2023
Forked from HTML Starter

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

colorPalettes

This interactive visualization showcases color palettes generated by rotating the hue of a base color. The view displays six columns, each containing nine shades that transition from light to dark via a linear scale, alongside a row of original base colors. Users can click any color square to copy its hex value to the clipboard, which triggers a temporary tooltip confirming the action. Built with d3.v7, the SVG graphic uses d3.hsl to manipulate hue, d3.scaleLinear to interpolate lightness and saturation, and d3.select for DOM interactions.

GGabriel Ing
77% match
Loading thumbnail…

D3.js 教程

This example generates a colorful grid of rectangles using D3.js. The visualization displays twenty rectangles arranged in a responsive layout, with each rectangle's fill color cycling through a palette of six distinct colors. The code leverages the D3.js library (v6) to select the chart container, append an SVG element, and join data to SVG rectangles using the `selectAll`, `data`, and `join` methods. The SVG renders at half the window's width and full height, with a light cream background.

Vvivianaaai@qq.com
76% 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
75% 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
75% match
Loading thumbnail…

visualising css colour data with D3

This example visualizes CSS named color data as a circular radial burst, with each slice representing one color from the dataset. The code loads the data using `d3.csv` from a GitHub gist, then renders the visualization as SVG paths using React. D3’s `pie` generator assigns equal angles to each entry, while `arc` with an inner radius of zero and outer radius spanning the width produces the filled wedge shapes. Each path is colored by the hexadecimal value from the corresponding data row, creating a full spectrum wheel.

HHollyClarke19
75% match
Loading thumbnail…

Colors Pie Chart using React and D3

A radial burst of 148 CSS named colors, each rendered as a wedge from the center to the outer edge of an SVG. The example loads a CSV of color names and hex values using d3.csv, then applies d3.pie() and d3.arc() to compute the geometry for each path. React manages the component state and renders the SVG paths, with each wedge filled by its corresponding RGB hex value. The code also includes commented alternatives using d3.arc() directly and a horizontal-line layout.

OOleg Zhernovoy
75% match
Loading thumbnail…

HTML Starter

This example demonstrates a color gradient mapped onto a series of rectangles using a logarithmic scale. It uses D3.js to create an SVG visualization, with `d3.scaleLog` and `d3.scaleLinear` defining the value-to-position mapping, while a custom log-based color scale assigns a range of three colors across the domain. The visualization also includes a bottom axis with `d3.axisBottom` and tick formatting, all rendered within an HTML page.

Jjeronimoek
75% match
Loading thumbnail…

React * d3 radial burst!

This example shows all 148 CSS named colors arranged as a radial burst, with each color occupying an equal slice of a full circle. Built with React and D3 v7, the visualization loads color data from a CSV file using `d3.csv`, then uses `d3.pie` and `d3.arc` to compute and draw the SVG paths. Each slice is filled with its corresponding RGB hex value, and the chart is rendered inside a React component that manages the asynchronous data loading with hooks like `useState` and `useEffect`. The result is a vibrant, full-circle color wheel that highlights the full spectrum of named CSS colors.

DDavid Kim
75% match