Designing a wine tasting chart

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!

Published by

Marlena Chertock

Marlena is a digital storyteller and poetry editor at District Lit. Her first poetry book, On that one-way trip to Mars, is available from Bottlecap Press.

Leave a reply