I incorporated this CSS color wheel for the basic set up. But I needed to add another wheel layer on top of the first, to create more of a chart. This proved a bit difficult because instead of creating more pie slices, I had to make another, separate color wheel to create the inner layer. So, in effect, I was creating two color wheels for this project. There was some necessary manipulation to keep them from interfering with each other. I also added tooltips to provide more information on specific wines.
For this project I had to keep track of hundreds of lines of CSS and countless divs. I also learned more about the :before and :after properties, which change how elements are shown in a finalized version on the page. I struggled with and then mastered the text-transform property, used to rotate elements and text.
I’m improving with each project. This is one of the most time-consuming and complex interactives I’ve designed. I am extremely proud with how it turned out.
I hope it is useful to find which wine you want to try. Cheers!