For the past two weeks, I have been designing a wine tasting chart to go along with an article about the growing Maryland wine industry. I used a color wheel mentality for the design, mirroring the circular, official wine tasting chart. The graphic is made purely with CSS and JavaScript.
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!