Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

HTML Starter

Public visualization

Viewing a saved revision (read-only)

03e1b1ef459947fe94640ce1a61f70d6

HTML Starter

0 stars1🌍 Public
CChristian Magelssen
Last edited Oct 25, 2020
Created on Oct 25, 2020
Forked from HTML Starter

A single orange-to-green bar visualizes a numeric score of 79 on a fixed 0-to-100 scale. The bar’s width and fill color both derive from the same data value using `d3.scaleLinear` for the x-position and color ranges. Rendered as an SVG rectangle with a black stroke, the chart updates automatically when the data array changes. The example uses D3 v6 to append the SVG and bind the data to the rectangle element.

AI-generated description

I have created a simple code example for you. Hope this helps:)

If you change the data, you will see that the color and size of th bar change accordingly