block by zanarmstrong 715809c31b4fff02268818704f84eb55

Color wheeling w/ Chroma.js and d3

Full Screen

Color Wheel

This is basically a d3 pie chart layout with color values applied to each slice using Chroma.js color scales.

Made to go along with the spinning color wheels for my Design 101 class at CCSF. But do to rendering limitations for svgs it won’t have the same effect as out physical spinning wheels. And it’s a subtractive color model so finding a way to darken the center of the wheel and fade to white would possibly be appropriate. I’m not very knowlegeable about that color theory stuff.

You can change the number of colors in thw pie chart by editing the integer in the Number of colors input box and typing enter.

The colors in the scale around the wheel were made with the following function: var scale = chroma.scale([‘red’, ‘purple’,’blue’,’green’, ‘yellow’,’orange’,’red’])

Then with values from 0 to 1 for the values put in and colors in the chroma scale above intermpolated for me. Ending and starting on red might give that color a little more space on the wheel than the others but it makes for a nice looking transition… Though there are probably far more intelligent ways to do it.

So color spaces are a way better way to view the different color schemes. See https://vis4.net/blog/posts/mastering-multi-hued-color-scales/ for far more learned ways to make great multihued color scales and share a better color visualization with me.

forked from mpmckenna8‘s block: Color wheeling w/ Chroma.js and d3

index.html

dod3.js

style.css