{"version":"1.0","type":"rich","title":"d3 color-legend example","description":"This example shows how to render a D3 ordinal color scale as a legend of colored swatches in a plain HTML page, using the `swatches` function from the Observable `@d3/color-legend` notebook. The color scale and margin values come from the stacked-area-chart example, with categories like “Manufacturing” and “Government” mapped to `d3.schemeCategory10`. It imports the Observable `Runtime` and loads the notebook’s cell via `module.value(\"swatches\")`, then appends the returned DOM element to a container. The legend uses a fixed column width of 180 pixels.","provider_name":"VizHub AI Studio","provider_url":"https://next.vizhub.com","html":"<iframe src=\"https://next.vizhub.com/viz/gist-eb373dddefed52febc07049ccb1aee27?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"1\"></iframe>","width":960,"height":500,"cache_age":3600}