svg = { SA_data.allData.forEach(country => { if (country.name === "El- Salvador") { country.name = "El Salvador"; } }) const width = 750; const height = 300; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); svg.append("rect") .attr("width", width) .attr("height", height) .attr("fill", "rgba(0, 175, 250, 0.3)"); const projection = d3.geoMercator() .center([-10, -20]) .scale(200) .translate([width / 2, height / 2 - 20]); const path = d3.geoPath().projection(projection); const focusColor = "rgba(255, 255, 245, 1)"; const otherColor = "rgba(255, 255, 255, 0)"; // filter for target countries const selectedCountries = `${checkboxes}`; //["Argentina", "Ecuador", "Brazil", "Colombia", "Chile", "Uruguay", "El Salvador", "Peru", "Bolivia", "Venezuela", "Panama", "Paraguay"]; // Render the full map svg.selectAll("path") .data(southAmerica.sa.features) .join("path") .attr("d", path) .attr("fill", d => { const countryName = d.properties.name; const fillColor = selectedCountries.includes(countryName) ? focusColor : otherColor; return fillColor; } ) .attr("stroke", "rgba(0, 0, 0, .15") .attr("stroke-width", 0.5) .on("click", function(event, d) { const countryName = d.properties.name; updateSelectedCountry(countryName); }); svg.selectAll("path") .filter(d => selectedCountries.includes(d.properties.name)) .on("mouseover", function(event, d) { d3.select(this).attr("fill", "rgba(255, 230, 230, 1)"); d3.select(this).attr("stroke", "rgba(0, 0, 0, 1"); d3.select(this).attr("stroke-width", 1); }) .on("mouseout", function(event, d) { const countryName = d.properties.name; const fillColor = selectedCountries.includes(countryName) ? focusColor: otherColor; d3.select(this).attr("fill", fillColor); d3.select(this).attr("stroke", "rgba(0, 0, 0, .15"); d3.select(this).attr("stroke-width", 0.5); }); const zoom = d3.zoom() .scaleExtent([0, 5]) .on("zoom", zoomed); svg.call(zoom); function zoomed(event) { svg.selectAll("path") .attr("transform", event.transform); svg. selectAll("text") .attr("transform", event.transform); } // filter the names array based on those countries const filteredNames = southAmerica.names.filter(name => selectedCountries.includes(name)); // Location of Names manually const namePositions = [ { name: "Argentina", coordinates: [-64,-30] }, { name: "Ecuador", coordinates: [-84.5,0] }, { name: "Brazil", coordinates: [-50,-13] }, { name: "Columbia", coordinates: [-72.5, 3.5] }, { name: "Chile", coordinates: [-74,-25] }, { name: "Uruguay", coordinates: [-50,-35.5] }, { name: "El Salvador", coordinates: [-97,12.5] }, { name: "Peru", coordinates: [-81,-10] }, { name: "Bolivia", coordinates: [-64.5,-17] }, { name: "Venezuela", coordinates: [-66.5, 8] }, { name: "Panama", coordinates: [-86, 6.5] }, { name: "Paraguay", coordinates: [-59,-23] }, ] // Label countries with their names svg.selectAll("text") .data(namePositions) .enter() .append("text") .attr("x", (d => projection(d.coordinates)[0])) .attr("y", (d => projection(d.coordinates)[1])) .text(d => d.name) .attr("font-size", "8px") .attr("text-anchor", "middle") .attr("alignment-baseline", "middle") .attr("fill", "black"); /* // right side panel svg.append("rect") .attr("width", 400) .attr("height", 275) .attr("fill", "rgba(255, 255, 255, .75)") .attr("x", width - 410) .attr("y", 10); */ function getTextContent(countryName) { const countryData = SA_data.allData.find(country => country.name === countryName); if (!countryData || !countryData.children) { return ''; } const relevantChildren = countryData.children.filter(child => child.name !== "Key historical events"); if (!relevantChildren || relevantChildren.length === 0) { return ''; } const textContent = relevantChildren.map(child => { const originalText = child.name; const truncatedText = originalText.slice(0, 50) + (originalText.length > 50 ? '...' : ''); return `

${truncatedText}

${originalText}

`; }).join('
'); return textContent; } // Specify the country you want to display (e.g., Argentina) let countryToShow = "Argentina"; function updateSelectedCountry(countryName) { countryToShow = countryName; const foreignObject = d3.select("#countryDetails"); foreignObject.html(`

${countryToShow}:

${getTextContent(countryToShow)}

`); } // Create a foreignObject specifically for the selected country svg.append("foreignObject") .attr("id", "countryDetails") //.attr("x", projection(namePositions.find(d => d.name === countryToShow).coordinates)[0] + 10) // Adjust the x and y positions //.attr("y", projection(namePositions.find(d => d.name === countryToShow).coordinates)[1] - 10) .attr("x", width - 440) .attr("y", 10) .attr("width", 420) .attr("height", 275) .html(`

${countryToShow}:

${getTextContent(countryToShow)}

`) .attr("font-size", "10px") .attr("text-anchor", "middle") .attr("alignment-baseline", "middle") .attr("fill", "rgba(255, 255, 255, .75)"); updateSelectedCountry("Argentina"); return svg.node(); }