{"repo":"clhenrick/color-legend-element","free":true,"listed":false,"github":"https://github.com/clhenrick/color-legend-element","clone":"git clone https://github.com/clhenrick/color-legend-element.git","description":"A custom element (web component) suitable for use as a legend in data visualizations","language":"TypeScript","stars":82,"topics":["custom-elements","web-components","d3","d3js","data-visualization","lit-element"],"license":"MIT","category":"ui-components","readme_excerpt":"Color Legend Element A Custom Element suitable for use as a legend in data visualizations. Built with Lit and D3JS. Features - Render legends for continuous, log10, discrete, threshold, and categorical scales. - Uses d3-scale 's concept of a domain and a range for mapping values to visual marks. - Compatible with color interpolators from d3-scale-chromatic - Customizable via its properties / attributes and CSS variables. - Framework and bundler not required, just add a tag and use it! - Small bundle size: 27kb minified and 9kb gzipped. Installation NOTE: the assumes D3JS is available as a peer dependency. At the very least this should include the following modules from the D3JS library: d3-scale , d3-array , d3-format , d3-interpolate , and possibly d3-scale-chromatic if using one of d3's color schemes. Install via npm: Or via Yarn: You may then import the in the desired ES Module: To use without a frontend build tool, add the via a tag in your HTML document. If you prefer to not use the ESM build, you may instead use the UMD build: Windows OS Install Note that Windows OS users may experience a problem with module bundlers where the D3JS dependencies are not found by the CLE. To work around this, it is recommended to be sure to use the ESM build: Example Usage The will render using its default settings as follows: It may be customized by settings its properties and CSS variables (full list below). See the color-legend website for more examples of how to use the Color Legend E","default_branch":null,"files":null,"tree":[],"storefront":"/r/clhenrick","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/clhenrick/color-legend-element/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}