Graph Circles by Coords D3

by jude_pinto

HTML

<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.6/interact.min.js"></script>


<button id= "button_E">Reset
</button>
 

<svg width="950px" height="600px" class = "h2" >
<!--text x="42.5%" y="22" class = "heading">Gender/Sex Eroticism<text-->
2  <circle cx="792" cy="311" r="36" fill="rgba(35, 179, 241,.55)" id = "Porn_E" class= "class"/>


2  <circle cx="433" cy="123" r="100" fill="rgba(241, 234, 34,.55)" id = "Fantasy_E"/>

2  <circle cx="637" cy="455" r="106" fill="rgba(241, 48, 34, .55)" id = "In_Person_E"/>
</svg>
<button id= "submit_button">Submit
</button>

CSS

.h2 {
    border-style: solid;
    border-width: 3px;
    display: block;
    margin: 0 auto;

  text-align: center;
 



  color: black;
  font-family: sans-serif;
  font-size: 22px;
  user-select: none;


    }
    
.heading {
  color: black;
  font-family: sans-serif;
  font-size: 22px;
  display: inline-block;
  text-align: center;
}


#button_E {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 16px;
  position: relative;
  margin-left: 238px;
}
.class{
  position: absolute;
  mix-blend-mode: multiply;
    align-items: center;
}

.resize-handle {
  display: block;
  position: sticky;
  min-height: 24px;
  min-width: 24px;
  max-height: 24px;
  max-width: 24px;
  
  left: 51000px;
  top: 51000px;
  transform: rotate(270deg);
  margin: 0px -20px -34px 0px;
  width: 24px;
  height: 24px;
  border: 6px solid transparent;
  /*
  border-radius: 1px;
  border: solid 1px currentColor;
  */
  cursor: move;
  
}


.move {
  display: none;
  position: absolute;
  min-height: 24px;
  min-width: 24px;
  max-height: 24px;
  max-width: 24px;
  width: 24px;
  height: 24px;
  margin: 40px 100px 0px -45px;
   transform: rotate(270deg);
  border-radius: 1px;
  border: solid 1px currentColor;
  
  cursor: move;
  
}
.resize_arrow{
   min-height: 24px;
  min-width: 24px;
  max-height: 24px;
  max-width: 24px;
  width: 24px;
  height: 24px;
  
}

#submit_button {
  border-radius: 10%;
  background-color: #BD1414; /* Red */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 16px;
  position: relative;
  margin: 20px 510px 100px;
}

JavaScript

// Sexual Ecologies Diagram Code
//By: Jude Pinto
//535 lines of code.

// This code was implemented into a survey on Qualtrics for Aki Gormezano's study on Sexual Ecologies.

//This program has imported the library interact.js, created by Taye. 
//https://interactjs.io/


//Instructions: Drag and resize any circle using a mouse or touch screen. 

//To reset circle positions, press "Reset". To obtain the areas of the circles, areas of intersection, radii, and coordinates, click "Submit".

//---------------------------------------------------------------------------------


//Global Variables
//Usually, global variables are not ideal, however, I implemented them to make the program more legible to those conducting the study.

//Variables contain the initial radius and coordinate values of each circle when the program starts.




//PornE Global Start Values
var Porn_E_radius = document.getElementById("Porn_E").clientWidth/2;
var Porn_E_start = findCentroid(getPos1(Porn_E), getPos2(Porn_E));
var Porn_E_startx=  Porn_E_start.x2;
var Porn_E_starty= Porn_E_start.y2;


//FantasyE Global Start Values
var Fantasy_E_radius = document.getElementById("Fantasy_E").clientWidth/2;
var Fantasy_E_start = findCentroid(getPos1(Fantasy_E), getPos2(Fantasy_E));
var Fantasy_E_startx= Fantasy_E_start.x2;
var Fantasy_E_starty= Fantasy_E_start.y2;

//InPersonE Global Start Values
var In_Person_E_radius = document.getElementById("In_Person_E").clientWidth/2;
var In_Person_E_start =  findCentroid(getPos1(In_Person_E), getPos2(In_Person_E));
var In_Person_E_startx= In_Person_E_start.x2;
var In_Person_E_starty= In_Person_E_start.y2;



//Global Coordinate Dictionaries
//Contain the x and y coordinates of each circle

var CoordinatesX_E = {
  Porn_E: Porn_E_startx,
  Fantasy_E: Fantasy_E_startx,
  In_Person_E: In_Person_E_startx
};


var CoordinatesY_E = {
  Porn_E: Porn_E_starty,
  Fantasy_E: Fantasy_E_starty,
  In_Person_E: In_Person_E_starty
};

//Global Intersection...