Woah, take's me back to late 80s computing when colors were few but paint programs all used to have patterns in them.
There's a really nice additive effect with patterns that can give a designer a way to show combinations of things together in a way that color really can't (bonus it's better for some visual impairments). For example, take a series of lines for one value:
\ \ \
\ \ \
\ \ \
and a series for another kind of value
/ / /
/ / /
/ / /
put them in the same visual space and simple add them together
x x x
x x x
x x x
You can also add in vertical, horizontal lines and even line width (and even line color over a baseline color) and you can encode a ton of different values into a single graphical area.
I used this technique to layer graph areas that overlap so you can still clearly see them even in black and white. Use a dot series to get a 3rd overlapping series you can see.
I just want to say how clear and concise this documentation is. Having examples alongside their code snippets is all you need to understand the library.
Board games. Website design. When you start playing board games, you realize how many colorblind people are there! They're everywhere. Modern boardgames are usually designed to accommodate color blindness, but for example Race for the Galaxy only now got a 2nd edition.
This looks great. Now I need to figure out how create a quick project to use this on. Reminds me of work from an Edward Tufte book: https://en.wikipedia.org/wiki/Edward_Tufte
Once upon a time someone on HN posted about an old-school book describing patterns for graphs. Very useful for SVG, for website design, for colorblind people. I failed to bookmark it. Can someone help?? How to find that book?
Wow, I love this. A couple of interesting applications I could think of here:
- structure preserving hash that automatically distributes categorical data across buckets -- this would be great for dashboards; on the job, we have dashboards with color coded dashboards but some of the colors are way too close for comfort and make visual communication difficult
- Halftoning for animation -- some of these seem like they'd be really neat if applied towards either CG animation or stationary animation as an alternative (or combined with) cel shading. I wonder if there's existing state of the art here for doing this with shader computation?
This is really neat - useful and beautiful. My only minor concern is that thicker/thinner is ambiguous and my first thought would be that they carry out the heavier/lighter functionality. Perhaps denser/sparser would have been more appropriate?
I guess most people don't know what color blindness feels like. Obviously, I can only speak for myself, so YMMV.
It's not that the colors are indistinguishable per se, always. They are hard to distinguish under certain conditions such as:
a) size of the elements of the same color. If half my screen is in one color and the other in different color, it's very easy to distinguish them and say which one is what. If on the other hand you have just a few pixels, it's much harder to say what color they are.
Recommendation for app devs: don't use only 1px red border to show validation errors in forms. It's almost impossible for me to say that the border is red and not black.
b) closeness to each other in terms of distance. Similar colors far away from each other are easier to recognize vs when they are right next to each other (like in the map).
c) Similarity between colors. If the colors are not used for scale, use very distinctive colors. I always take my colors from: https://colorbrewer2.org/ based on the use-case. This has already been researched and it works.
d) movement. It does not help in recognizing colors.
These conditions don't occur that often in "real life" when walking, shopping, etc. They are mostly annoying on screen and paper.
Regarding compensation techniques:
If it is not work related, I just don't bother and don't put any effort. There is a cool map on reddit, and I can't read it because of the colors? My loss, not gonna spend time on it.
My biggest pet peeve: sport team outfits. Sometimes certain teams play vs each other and I cannot distinguish who is who. That is maddening. Why would you play black vs red when white vs red would be 100x more distinguishable. There should rules about minimal necessary contrast between the jerseys. I can't watch some matches so I don't watch them. I like teams with blue, yellow, white colors. Maybe that's why GSW is appealing to me :)
When I play FIFA with friends, I need to tell them which jersey variant to choose so I can comfortably play and have some chances. You cannot do it online games :( I wish I could select what I see on my machine. I wish there was a setting to use artificial jerseys of high contrast. Or make my opponent jerseys always black or always white and let me pick the clothing for my side. There are some colorblind options in FIFA but I don't find them good enough. They don't solve the problem fully.
If it is work related and I cannot decipher it, I will politely complain that someone used colors only to encode some information and I cannot process it. I will recommend to use something additional (words, borders, tooltips, patterns, anything that makes sense).
I also notice that kind of issues when our engineers work on dynamic maps or charts, and I try to bring it to people's attention. It's a lost battle in the grand scheme of things, but I keep fighting.
I believe it's easier in big companies because the probability of having a colorblind stakeholder is higher. In small teams (<= 7) you might not have a single colorblind person who could share their perspective and point out the problem.
I guess it works that way with everything: race, gender, translation and localization, and other disabilities, but I can mostly comment on that one thing.
Hey I'm working on this too! Nothing to show off yet except for this fun animation I made when playing with the core engine: https://imgur.com/a/ELhwWo5.
My inspiration came from Bret Victor's Drawing Dynamic Visualizations (1). Though I'm taking a slightly different approach. Brett’s data is declarative, but drawing is procedural (in steps) where mine is all declarative. I think Brett's approach is more powerful but doesn't lend itself as nicely to normal vector drawing UX.
Why show png's instead of svg's on the webpage when the tech is all about svg? Otherwise, great library! Just thought that it's a missed opportunity to show everyone how awesome svgs are.
This is fantastic. Textures are an excellent alternative for quantifying things in cartographic maps and to reduce the often distracting use of color. I wonder how these patterns would perform if imported into Inkscape, which in my experience becomes painfully slow when too many patterns are used.
I've had this site bookmarked since 2018, all of the comments on the great design just go to show how far simple and concise execution can take a site, still looks brand new.
This is lovely. Just lovely. Reminds me of the Postscript hacks we used to do with early Apple laser printers, back when they were the most powerful computers they shipped. :)
There's a really nice additive effect with patterns that can give a designer a way to show combinations of things together in a way that color really can't (bonus it's better for some visual impairments). For example, take a series of lines for one value:
and a series for another kind of value put them in the same visual space and simple add them together You can also add in vertical, horizontal lines and even line width (and even line color over a baseline color) and you can encode a ton of different values into a single graphical area.