internalfx / distinct-colors Goto Github PK
View Code? Open in Web Editor NEWGenerate a palette of visually distinct colors. It's great for charts.
License: ISC License
Generate a palette of visually distinct colors. It's great for charts.
License: ISC License
A feature I've been looking for in a library like this is the ability to generate an open-ended stream of distinct colors. In other words: given a set of past colors, generate a new color that is as distinct from those as possible.
For a moment I thought you already supported that feature, because the docs indicate that count: Infinity
is a valid option? But it seems doubtful, since you're returning an array.
Anyway, consider it a feature request. Though I'd understand if it's not planned.
Thanks for create this useful module!
As Typescript getting more and more popular, I believe create a .d.ts
Typescript declaration file will help the Typescript user easier to use this module and promote this module to more people!
The I want hue
demo has a colorblindness option which seems to be missing from the configuration options available here.
For some reason sometimes 3 different HCL values product the same lab color.
This breaks stuff, badly.
version affected: 2.0.0
can't use it in vue (created using vue cli)
import distinctColors from "distinct-colors";
console.log(distinctColors); // output {}
can only use with
import distinctColors from "distinct-colors/src";
console.log(distinctColors);
/* output
ƒ (opts = {}) {
var options = { ...defaults, ...opts }
if (options.count <= 0) { return [] }
if (options.samples < options.count * 5) {
options.samples = options.count * 5
}
var colors…
*/
This throws an error:
var pallet = DistinctColors({count:50, lightMin: 50})
TypeError: Reduce of empty array with no initial value
If lightMin is less than 50, it works. I also see it in other random places, for example if hueMin is 300.
beware when opening this link, cpu runs at 100% in the service worker
https://codesandbox.io/s/distinct-colors-state-issue-iufog
calling 2 times with same config is ok
console.log(distinctColors({ count: 26, lightMin: 50 }));
console.log(distinctColors({ count: 26, lightMin: 50 }));
but calling with different config will cause cpu runs at 100% and never return value
console.log(distinctColors({ count: 26, lightMin: 50 }));
console.log(distinctColors({ count: 26, lightMax: 50 }));
EDIT: calling only either one of them is totally fine
First of all - thanks for great library!
Recently found out that It fails for me to generate 408 distinct colors. Here is codepen. I tried it with count - 500, and it worked.
Current Behaviour:
Exception throw when the function is called with option {count:85}
,
> DC = require('./lib').default
[Function: distinctColors]
> DC({count:85})
Thrown:
TypeError: Reduce of empty array with no initial value
at Array.reduce (<anonymous>)
at Object.sum (/Users/xxx/distinct-colors/lib/utils.js:9:18)
at distinctColors (/Users/xxx/distinct-colors/lib/index.js:195:36)
Expectation:
Output the correct colors.
Is anyone else having issues with this package running in Internet Explorer? It works great in Google Chrome, but it will not work for me in IE 11.
I get it on this:
palette = new DistinctColors({count: 34, lightMin: 70, chromaMin: 60, samples: 100});
This is already a really useful tool, but I feel like there's a lot I don't know about. Are there any demos?
I made a codesandbox to get it going with react hooks for any newbies like myself. I don't know if it's worth putting something like this on your ReadMe, as it would have saved someone like me a bit of time. There's a whole lot of methods with the distinctColors() object, but I don't understand a lot of it. It'd be great to see more of it in action.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.