D3 Examples - Venn diagram with transitions

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

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
​
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
      <title>Terms Used for Bycatch and Discards in Fisheries</title> 
​
<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>
​
        <script type="text/javascript" src="rouvennbycatch.json"></script>
        <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
​
</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>
​
    