Venn diagram with transitions

This is a venn diagram to explain the changing vocabulary of bycatch and discards compiled by FAO.

I crated a venn diagram in which, once you hover over a set, it highlights the shape and displays the meaning of the word. It displays how I personally view the terms in reference to the other bycatch meanings.

The final result can be viewd here on my research webpage: Fisheries Visualizations. This visualization and research was funded by the project SAF21 - Social science aspects of fisheries for the 21st Century. SAF21 is a project financed under the EU Horizon 2020 Marie Skłodowska-Curie (MSC) – ITN - ETN programme (project 642080).

For more information Databayou

<!DOCTYPE html>
<head>

<style>

.tooltip {   
    position: absolute; /* it could be relative if all over  */
    top: 680px; /*the tooltip starts at the corner*/
    left: 10%;
    width: 600px;
    height: 120px;	
    text-align: left;
    padding: 10px;             
    font: 16px Arial, Verdana, sans-serif;  
    color: gray;	
    background: white;   
	  z-index: 2000;
}
#buttons {
    position:relative;
    top:50%; 
    left:50%;
}
.year {
    background-color: gray;
    color: white;
    font-size : 16px;
    border-radius: 2em;
    border-style: solid;
}
#venn {
    width: 710px;
    margin: 0 auto; 
}
p {
    font-family: Arial, Verdana, sans-serif;
    }

h1 {
    font-size: 26px;
    text-align: center;
    font-family: verdana;
    color: gray;
}
/* unvisited link */
a:link {
    color:  #3CBCBC;
    text-decoration: none;
}

/* visited link */
a:visited {
    color: #54C571;
}

/* mouse over link */
a:hover {
    color: #736AFF;
}

/* selected link */
a:active {
    color: #3CBCBC;
}
</style>

</head>
<body>
    <div id="page">
        <div id="header">
	            <h1>Terms Used for Bycatch and Discards</h1>
			
            <div id="buttons">
  
						    <button name="year1994" 
							        class="year"
                                    type="button" 
                                    value="19977774" 
                                    onclick="nineData()"; >1994</button/>
								   
						    <button name="year2004" 
							        class="year"
                                    type="button" 
                                    value="2004" 
                                    onclick="twoData()"; >2004</button/>

</div>
	      </div>
        
        <div id="venn">
            <script type="text/javascript" src="roundsqvenn.js"></script>
            <script type="text/javascript"></script> 	 
        </div>
	
</body>

https://d3js.org/d3.v3.min.js