So had a bit of time to have a play.
The scroll is easy enough.
You just style the scroll bar with css.
And have the scrolling groups right side line up with the rounded rect on top of it so it looks like the scroll bars border.
I did come close to getting a drag to look like it went across the two groups. Chart and swatch.
But did not fully work as expected. Once scrolled the drag would be limited to a new scrollTop or something. More hassle than its worth to figure it out.
Personally think just clicking on a swatch should be the way to go anyway. So thats what this does.
Each swatch has HTML additional Attributes which are used.
Gonna be fun putting them in on all of them. I only did the first left four ( red - grey )
I think I may have some swatch code I wrote that worked of a json that populated swatches with attributes. not dug it out.
But thats the way I would go which would be easier to write out.
Use the swatch id/class name and have an array of json objects like.
{"swatch": "red","blue": "50", "yellow":"30", "white":"80", "black":"10"}
And then some code to iterate through the array/json objects and populate the swatches Additional HTML attributes.
Any way here is your update example. minus the latter.
Click the four left most swatches red-grey
swatch.hype.zip (54.7 KB)