<div id="myModal" class="modal">

<!-- Modal content -->

<div class="modal-content">

<p>Hey there! We are a group of data visualization students with a collective interest in gender, sexuality, and cultural and sociological trends surrounding these themes. <br> </br> This semester, we set out to create an interactive visualization that represents both the social and political trends surrounding perception of queer people/identities. We worked with data from the world values survey, where survey participants from different countries were asked to report on a scale of 1-10 how justifiable they believed homosexuality to be, with 1 being not at all and 10 being entirely justifiable <br> </br> Using this data, we were able to create a map that shows users the reported yearly average of how justifiable different countries found homosexuality to be. Within the map we also encoded representations of the legalization of homosexuality, represented by the yellow diamond. Use this map to explore how global opinion on homosexuality and the legal status of homosexuality have changed over time.

<br> </br> We are so happy to share our project with you, please enjoy!

- Arushi, Daisy, Diego, Jeanie, and Morgan. <br> </br>

<strong> Click on Antarctica below to begin exploring! </strong>

</p>

</div>

const svg = d3.create("svg").attr("viewBox", `0 0 ${width} ${height}`);

const tooltip = d3.select("body").append("div")

.attr("class", "tooltip")

.style("position", "absolute")

.style("visibility", "hidden");

// Function to handle click events

function handleClick(event, d) {

closeModal();

}

// function to close modal

function closeModal() {

const myModal = document.getElementById("myModal");

myModal.style.display = "none";

}

const sizeScale = d3.scaleSqrt().domain([0, d3.max(dataJoined, d => d.pop_size)]).range([5, 50]);

const colorScale = d3.scaleSequential(d3.interpolateBlues).domain([1, d3.max(dataJoined, d => d.mean_homo)]);

svg.selectAll("path")

.data(countries.features)

.enter()

.append("g")

.attr("class", "country-group")

.each(function (d) {

const countryGroup = d3.select(this);

// Append path element

countryGroup.append("path")

.attr("d", path)

.attr("stroke", "#111")

.attr("stroke-width", 0.5)

.attr("fill", "none")

// Tooltip functionality

.on("mouseover", function (event, d) {

let text = d.properties.name

const mean_homo = d.properties.dataJoined.get(year)[0].mean_homo

const mean_homo_rounded = Math.round((mean_homo + Number.EPSILON) * 100) / 100

text = text + "\nJustifiability: " + mean_homo_rounded

const year_to_show = d.properties.dataJoined.get(year)[0].displayed_year

text = text + "\nThis value is from: " + year_to_show

showToolTip(text, [event.pageX, event.pageY])

})

.on("mousemove", function (event) {

d3.select(".tooltip")

.style("top", event.pageY - 10 + "px")

.style("left", event.pageX + 10 + "px")

})

.on("mouseout", function () {

d3.select(".tooltip").style("visibility", "hidden")

})

.on("click", handleClick)

});

svg.selectAll("g")

.data(countries.features)

.each(function (d) {

const countryGroup = d3.select(this);

// Append star symbol if when_legal equals the displayed year and not already added

const whenLegalYear = d.properties.dataJoined?.get(year) ? d.properties.dataJoined.get(year)[0].when_legal : null;

const symbolAdded = whenLegalYear !== null && whenLegalYear <= year;

console.log("Symbol Added:", symbolAdded); // Log the presence of the symbolAdded condition

const [x, y] = path.centroid(d);

const countryArea = path.area(d);

// Append circle for population size and color based on rating

countryGroup.append("circle")

.attr("class", "bubble")

.attr("cx", x)

.attr("cy", y)

.attr("r", sizeScale(d.properties.dataJoined?.get(year)[0].pop_size))

// .attr("fill", colorScale(d.properties.dataJoined.get(year)[0].mean_homo))

.attr("fill", d => d.properties.dataJoined?.get(year) && !isNaN(d.properties.dataJoined?.get(year)[0].mean_homo)

? cScale(d.properties.dataJoined.get(year)[0].mean_homo)

: "lightgrey")

.style("opacity", 0.5);

if (symbolAdded) {

const [x, y] = path.centroid(d);

const countryArea = path.area(d);

const symbolSize = Math.log(countryArea) * 2; // Adjust the scaling factor as needed

console.log("Symbol Size:", symbolSize); // Log the symbol size

countryGroup.append("text")

.attr("class", "symbol")

.attr("x", x)

.attr("y", y)

.text("\u2726") // Unicode for six-pointed star symbol

.attr("text-anchor", "middle")

.attr("alignment-baseline", "middle")

.style("font-size", `${symbolSize}px`)

.style("fill", "orange");

}

});

svg.selectAll("g")

.on("mouseover", function (event, d) {

let text = d.properties.name

const mean_homo = d.properties.dataJoined.get(year)[0].mean_homo

const mean_homo_rounded = Math.round((mean_homo + Number.EPSILON) * 100) / 100

text = text + "\nJustifiability: " + mean_homo_rounded

const year_to_show = d.properties.dataJoined.get(year)[0].displayed_year

text = text + "\nThis value is from: " + year_to_show

showToolTip(text, [event.pageX, event.pageY])

})

.on("mousemove", function (event) {

d3.select(".tooltip")

.style("top", event.pageY - 10 + "px")

.style("left", event.pageX + 10 + "px")

})

.on("mouseout", function () {

d3.select(".tooltip").style("visibility", "hidden")

});

return svg.node();

// function showToolTip(text, [x, y]) {

// tooltip.style("visibility", "visible").html(text);

// }

};

// get modal

var modal = document.getElementById("myModal");

// get close button

var closeButton = document.getElementsByClassName("close");

// function to open modal

function openModal() {

modal.style.display = "block";

}

// function to close modal

function closeModal() {

modal.style.display = "none";

console.log("Closing modal");

}

// close modal if user clicks outside of it

window.onclick = function(event) {

if (event.target == Modal) {

closeModal();

}

};

/* The Modal (background) */

.modal {

display: visible;

position: fixed;

z-index: 1;

left: 200px;

top: 40px;

width: 60%;

height: 0%;

overflow: fixed;

background-color: rgba(0, 0, 0, 0.4);

}

/* Modal Content */

.modal-content {

background-color: #fefefe;

margin: 50px;

padding: 10px;

border: 1px solid #888;

width: 90%;

font-size: 20px;

}

/* The Close Button -- removed since it was USELESS */

.close {

color: #aaaaaa;

float: right;

font-size: 30px;

font-weight: bold;

cursor: pointer;

}

.close:hover,

.close:focus {

color: #000;

text-decoration: none;

}

.bubble {

stroke: #000;

stroke-width: 0.5px;

}

dataJoined = data.map(d => {

const matchingRow = legalityData.find(row => row.country === d.country);

const matchingPop = popsize4.find(row => row.country === d.country);

console.log(matchingRow)

// Add the new property 'when_legal' based on the additional data

return {

...d,

when_legal: matchingRow ? +matchingRow.year : null,

pop_size: matchingPop ? +matchingPop[d.year] : null,

}