3f:null 40:["$","title",null,{"children":"Central & South America History | kbnsafoah's Workspace | Observable"}] 46:T16b6,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(); }47:T479,Plot.plot({ aspectRatio: 1, height: 300, width: 1200, x: { tickFormat: (d) => d3.format("d")(d), domain: [1950, 2023], tickSize: 10}, y: { grid: true, label: "Events →", labelAnchor: "center", tickFormat: Math.abs, domain: [0, 11] }, marks: [ Plot.dot( selectedCountryData, Plot.stackY2({ x: (d) => d.year, y: (d) => d.year > 0 ? 1: 0, fill: (d) => d.country, // stroke: "rgba(255, 255, 255, 1)", //strokeWidth: 1.5, /* fill: (d) => { const colorScale = d3.scaleOrdinal() .domain(SA_data.flattenedKeyEvents.map(d => d.country)) .range(d3.schemeCategory10); return colorScale(d.country) }, */ title: "Events", r: 7, }) ) , Plot.tip(selectedCountryData, Plot.stackY2( Plot.pointer({ x: (d) => d.year, y: (d) => d.year > 0 ? 1: -1, filter: (d) => d.event, title: (d) => [d.country, d.year, d.event].join("\n\n"), r: 25, textPadding: 2, pointerSize: 2, fontSize:14 }))), Plot.ruleY([0]) ] }); 48:T41a,SA_data = { const rawData = await d3.json("https://raw.githubusercontent.com/rrenken/d3_south_america/main/SA.json"); const allData = rawData.children; const keyEvents = allData.map(countryData => { // const countryName = countryData.name.replace("El Salvador", "El- Salvador"); const eventyear = countryData.children.find(child => child.name === "Key historical events").children; const firstFourCharactersArray = eventyear.map(eventyear => eventyear.name.substr(0, 4)); const event = eventyear.map(eventyear => eventyear.name.substr(5,)); return { country: countryData.name, year: firstFourCharactersArray, event: event }; }); const flattenedKeyEvents = []; keyEvents.forEach((countryData) => { countryData.year.forEach((year, index) => { flattenedKeyEvents.push({ country: countryData.country.replace("El- Salvador", "El Salvador"), year: parseInt(year, 10), event: countryData.event[index], }); }); }); console.log(keyEvents); return { allData, keyEvents , flattenedKeyEvents }; }49:T1558,function Timeline(data) { // Chart dimensions and configuration const margin = ({ top: 10, right: 20, bottom: 50, left: 20 }); // Increase bottom margin // const width = 1000; // Bar height const barHeight = 15; // Calculate max of the death year and min of the birth year const maxYear = Math.max(...data.map(d => d.death)) + 20; const minYear = Math.min(...data.map(d => d.birth)) - 20; // Compute the y position for each bar const yPos = computeBarYPosition(data, direction); // Calculate the maximum yPos value and the height of the chart const yPosMax = Math.max(...yPos); const yPosMin = Math.min(...yPos); const chartHeight = (yPosMax - yPosMin) * barHeight * 2; const height = chartHeight + margin.top + margin.bottom; // Create X and Y scales const xScale = d3.scaleLinear().domain([minYear, maxYear]).range([margin.left, width - margin.right]); const yScale = d3.scalePoint().domain(d3.range(yPosMin, yPosMax + 1)).range([height - margin.bottom, margin.top]).padding(1.5); // Create the chart const svg = d3.select(document.createElementNS("http://www.w3.org/2000/svg", "svg")) .attr("width", width) .attr("height", height); const centuryStart = Math.ceil(minYear / 1) * 100; const centuries = d3.range(centuryStart, maxYear, 2); // Draw vertical gridlines at every century mark const linesLayer = svg.append("g").attr("class", "lines-layer"); linesLayer.append("g") .selectAll("line") .data(centuries) .join("line") .attr("x1", d => xScale(d)) .attr("x2", d => xScale(d)) .attr("y1", margin.bottom) .attr("y2", chartHeight) .style("stroke", "rgba(0,0,0,0.2)") .style("stroke-dasharray", "2,2"); // Draw x-axis with labels every 20 years, starting from 1700 svg.append("g") .attr("transform", `translate(0,${chartHeight})`) .call(d3.axisBottom(xScale) .tickValues(d3.range(Math.floor(minYear / 20) * 20, maxYear, 10)) .tickFormat(d3.format(".0f")) // Add this line to change the tick format .tickSizeOuter(0)); // Create bars and labels const bars = svg.append("g") .selectAll("g") .data(data) .join("g"); // Create bars bars.append("rect") .attr("x", d => xScale(d.birth)) .attr("width", d => xScale(d.death) - xScale(d.birth)) .attr("y", (d, i) => yScale(yPos[i])) .attr("height", barHeight) .attr("fill", "steelblue"); // Create labels displaying only name bars.append("text") .text(d => d.name) .attr("x", d => xScale(d.birth) + 4) .attr("y", (d, i) => yScale(yPos[i]) + barHeight / 2) .attr("alignment-baseline", "central") .attr("font-size", 12) .attr("fill", "white") .attr("white-space", "nowrap") // .attr("overflow", "hidden") .attr("text-overflow", "ellipsis"); // Mouseover and mouseout events for scrolling labels and showing dates on the timeline bars.on("mouseover", function (event, d) { const bar = d3.select(this); // Show vertical lines and dates along the timeline const lineGroup = svg.append("g") .attr("class", "timeline-hover") .lower(); // Lower the group so that it is positioned behind the bars lineGroup.append("line") .attr("x1", xScale(d.birth)) .attr("x2", xScale(d.birth)) .attr("y1", yScale(yPos[data.indexOf(d)]) + barHeight) // Start from the bottom of the bar .attr("y2", chartHeight) .style("stroke", "rgba(225,0,0,0.3)"); lineGroup.append("line") .attr("x1", xScale(d.death)) .attr("x2", xScale(d.death)) .attr("y1", yScale(yPos[data.indexOf(d)]) + barHeight) // Start from the bottom of the bar .attr("y2", chartHeight) .style("stroke", "rgba(225,0,0,0.3)"); lineGroup.append("text") .text(d.birth) .attr("x", xScale(d.birth)) .attr("y", chartHeight + 30) .attr("text-anchor", "middle") .attr("fill", "red"); // Display birth date in red lineGroup.append("text") .text(d.death) .attr("x", xScale(d.death)) .attr("y", chartHeight + 30) .attr("text-anchor", "middle") .attr("fill", "red"); // Display death date in red // Scroll label if necessary const label = bar.select("text"); const labelWidth = label.node().getComputedTextLength(); const barWidth = xScale(d.death) - xScale(d.birth); if (labelWidth > barWidth - 8) { const scrollAmount = labelWidth - barWidth + 12; // Leave some padding for visual clarity label.interrupt() // Stop any active transition .transition() .duration(2000) .ease(d3.easeQuadInOut) .attr("x", d => xScale(d.birth) + 4 - scrollAmount) .attr("clip-path", 'polygon(0,0,${barWidth},0,${barWidth},${barHeight},0,${barHeight})'); } }) .on("mouseout", function (event, d) { // Hide vertical lines and dates along the timeline svg.selectAll(".timeline-hover").remove(); // Reset the label position to original const label = d3.select(this).select("text"); const currentXPosition = parseFloat(label.attr("x")); const originalXPosition = xScale(d.birth) + 4; if (currentXPosition !== originalXPosition) { label.interrupt() // Stop any active transition .transition() .duration(2000) .ease(d3.easeQuadInOut) .attr("x", originalXPosition); } }); // Return the SVG node as a value return svg.node(); }4a:T48a,function computeBarYPosition(data, direction = "center") { function xOverlaps(a, b) { return a.birth < b.death + 1 && a.death + 1 > b.birth; } const yPos = []; const lastBars = {}; let minRow = 0; let maxRow = 0; data.sort((a, b) => a.birth - b.birth); data.forEach((d, i) => { if (i === 0) { yPos[i] = 0; lastBars[0] = d; return; } let optimalRow; let minDeathYear = Infinity; for (const row of Object.keys(lastBars).map(Number)) { if (!xOverlaps(lastBars[row], d) && lastBars[row]?.death < minDeathYear) { optimalRow = row; minDeathYear = lastBars[row]?.death; } } if (optimalRow === undefined) { if (direction === "top") { optimalRow = maxRow + 1; } else if (direction === "bottom") { optimalRow = minRow - 1; } else { optimalRow = Math.abs(minRow - 1) < maxRow + 1 ? minRow - 1 : maxRow + 1; } } yPos[i] = optimalRow; lastBars[optimalRow] = d; if (optimalRow < minRow) { minRow = optimalRow; } if (optimalRow > maxRow) { maxRow = optimalRow; } }); return yPos; }4b:[] 44:{"id":"ca87fa6d9d0f492a","slug":"central-south-america-history","title":"Central & South America History","thumbnail":"8e3ab8c1a0f843aa02767b2b8c32124fff4dd5f725baac989e50a37052419144","access_level":"public","create_time":"$D2023-11-08T04:44:20.896Z","update_time":"$D2023-11-08T04:44:20.896Z","view_time":null,"first_public_time":"$D2023-11-08T04:44:20.896Z","has_unpublished_edits":null,"fork":{"id":"7c305cc490f55375","slug":"central-south-america-history","title":"Central & South America History","owner":{"id":"93d34a51f1d7cd21","login":"rrenken-ws","name":"rrenken's Workspace"}},"stars":0,"starred":false,"owner":{"type":"team","id":"9781e1ce4baf1500","login":"kbnsafoah-ws","name":"kbnsafoah's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/6de0230ec0e31d9cda17133cc66a053bbd566315eede544df69259f9f43d4380","tier":"starter_2024","bio":"","following":false},"version":1809,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1b9c904990750f93","login":"kbnsafoah","name":"kbnsafoah","avatar_url":"https://avatars-next.observableusercontent.com/2286b3b4b18db029b23fd7573f8d4d9c89470ee6111ab061199b896d9c8cf2d2","tier":null,"bio":"Masters Student reading Geo-Spatial Science at Bowling Green State University, Ohio","following":false}],"members":[{"type":"individual","id":"1b9c904990750f93","login":"kbnsafoah","name":"kbnsafoah","avatar_url":"https://avatars-next.observableusercontent.com/2286b3b4b18db029b23fd7573f8d4d9c89470ee6111ab061199b896d9c8cf2d2","tier":null,"role":"editor"},{"type":"team","id":"9781e1ce4baf1500","login":"kbnsafoah-ws","name":"kbnsafoah's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/6de0230ec0e31d9cda17133cc66a053bbd566315eede544df69259f9f43d4380","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Central & South America History","cells":[{"id":573,"value":"# Central & South America History","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":852,"value":"## General Timeline","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":855,"value":"viewof direction = Inputs.select([\"center\", \"top\", \"bottom\"], {label: \"General Timeline Alignment\", value: \"bottom\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":858,"value":"Timeline(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"## Map and Historical Events","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":553,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1567,"value":"viewof checkboxes = \n\nInputs.checkbox(\n [\"Argentina\", \"Ecuador\", \"Brazil\", \"Colombia\", \"Chile\", \"Uruguay\", \"El Salvador\", \"Peru\", \"Bolivia\", \"Venezuela\", \"Panama\", \"Paraguay\"], \n \n {label: \"Countries\", \n value: [\"Argentina\", \"Ecuador\", \"Brazil\", \"Colombia\", \"Chile\", \"Uruguay\", \"El Salvador\", \"Peru\", \"Bolivia\", \"Venezuela\", \"Panama\", \"Paraguay\"],\n \n \n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1613,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1804,"value":"#### Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1578,"value":"selectedCountryData = SA_data.flattenedKeyEvents.filter(d => checkboxes.includes(d.country));\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1006,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"southAmerica = {\n const sa = await d3.json(\"https://raw.githubusercontent.com/myethiopia/NaturalEarth/master/region_un/GeoJson/region_un_Americas_subunits.json\");\n const names = sa.features.map(feature => feature.properties.name);\n const coordinates = sa.features.map(feature => feature.geometry.coordinates);\n \n console.log(names);\n\n \n return { names, sa, coordinates };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"d3 = require(\"d3@7\", \"d3-tile@1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"d31 = require(\"d3\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1794,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":864,"value":"data = [\n { name: \"Brazil: Military Dictattorship\", birth: 1964, death: 1985 },\n { name: \"Argentina:Dictatorship \", birth: 1976, death: 1985 },\n { name: \"Bolivia: Military dictatorships\", birth: 1964, death: 1982 }, \n { name: \"Chile: Pinochet dictatorship \", birth: 1973, death: 1990 },\n { name: \"Venezuela: Social Crises and Bolivian Revolution\", birth: 1989, death: 2019 },\n { name: \"Peru: Internal Armed Conflict\", birth: 1980, death: 2000 },\n { name: \"Paraguay: Stroessner Dictatorship\", birth: 1954, death: 1989 },\n { name: \"Panama: Military Dictatorship\", birth: 1968, death: 1989 },\n { name: \"El-Salvador: Civil War\", birth: 1980, death: 1992 },\n { name: \"Ecaudor: State Voilence and Political Stability\", birth: 1983, death: 2008 },\n { name: \"Columbia: Internal Armed Conflict\", birth: 1960, death: 2016 },\n { name: \"Uruguay: Military dictatorship\", birth: 1973, death: 1985 },\n\n // add more figures here\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":867,"value":"computeBarYPosition(data, \"center\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":869,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4b","stdlib":"1"}} 45:"$44:body"