I'm still new to the library, so I don't know everything. Here are some useful things I've found.
You can see them in action in this unfinished piechart showing how I spend money on transport. More on that next week.
Chroma color scales are designed to be delightful. You define two colors, and chroma-js finds the most pleasant path between them.
The quickest way to get some pretty colors going is to define an ordinal scale like this. Choose start and end points, say you want 6 colors, and pick the
I'm not sure what
lch mode means, but it creates nicer colors than the default
rgb mode. They come out brighter.
You can create continuous scales as well. Add multiple points of reference etc. Great for encoding data with color.
Chroma also helps you create prettier hover effects. Color effects in general, really.
You often see in web and dataviz design that people use opacity changes to create hover effects. You mouse over something and it becomes a little transparent so the white background shines through.
This works, but looks bland. It lightens the color. What you want instead is to make the color look brighter.
Chroma to the rescue with its color manipulation utilities.
You can also
darken. All useful effects if you find an excuse to use them. All better than just changing opacities.
If you're color challenged like me, then you can't go wrong with the color brewer utilities. A set of predefined colors that look great together.
That piechart above is made with the
chroma.scale("PuBu"). No need to worry too much, just go to color brewer, find a scheme you like, and tell Chroma to use it.
Happy coloring 🙏🏻
Here's how it works 👇
Then get thoughtful letters 💌 on mindsets, tactics, and technical skills for your career.
"Man, love your simple writing! Yours is the only email I open from marketers and only blog that I give a fuck to read & scroll till the end. And wow always take away lessons with me. Inspiring! And very relatable. 👌"
Ready to Stop copy pasting D3 examples and create data visualizations of your own? Learn how to build scalable dataviz components your whole team can understand with React for Data Visualization
Curious about Serverless and the modern backend? Check out Serverless Handbook, modern backend for the frontend engineer.
Ready to learn how it all fits together and build a modern webapp from scratch? Learn how to launch a webapp and make your first 💰 on the side with ServerlessReact.Dev
By the way, just in case no one has told you it yet today: I love and appreciate you for who you are ❤️