3f:null 40:["$","title",null,{"children":"CS7250 Final Project: | Bishal Agrawal's Workspace | Observable"}] 46:T773,# CS7250 Final Project: __Project members:__ - Bishal Agrawal - Mehul Jain In the ever-evolving realm of global security, the specter of terrorism persists as a multifaceted challenge. Understanding the intricate patterns and evolving trends of terrorist attacks stands pivotal in shaping informed policy decisions and bolstering counterterrorism strategies. This project embarks on an exploration of the Global Terrorism Database (GTD) to visually dissect and analyze terrorist incidents spanning the years 1970 to 2020. Through immersive and interactive data visualizations, our endeavor is to shed light on several pivotal inquiries: - Which countries have experienced the most terrorist attacks? - How have the dynamics and trajectories of global terrorism transformed over time? - What are the relationships between terrorist groups, attack types, and targets? - How does geographical location influence the prevalence and nature of terrorist attacks? ### Our dataset: __Source:__ https://www.start.umd.edu/gtd/ The dataset utilized for this visualization project stems from the Global Terrorism Database (GTD) stands as a robust open-source repository, chronicling terrorist incidents worldwide from 1970 to 2020, with ongoing yearly updates. Compiled by the National Consortium for the Study of Terrorism and Responses to Terrorism (START) at the University of Maryland, the database meticulously details over 200,000 attacks encompassing various forms of terrorist activities. The GTD offers a comprehensive portrayal of events, ranging from bombings, assassinations, and kidnappings, including incident date and location, weapon deployment, target nature, casualty count, and the associated perpetrating group, leveraging a rich repository of information gleaned from more than 4,000,000 news articles and 25,000 news sources, reflecting a comprehensive spectrum of global terrorist incidents. 47:Tbe7,chart = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .attr("style", "max-width: 100%; height: auto;"); const categories = Array.from(new Set(data.map((d) => d.category))); const chartTitle = "Global Terror: Racing Through Time and Regions, 1970-2020"; svg .append("text") .attr("x", width / 2) .attr("y", 20) // Adjust the vertical position of the title .text(chartTitle) // .style("font-size", "24px") .style("font-weight", "bold") .style("text-anchor", "middle") .style("font", "bold 24px var(--sans-serif)"); // Create a legend container in the SVG const legend = svg .append("g") .attr("class", "legend") .attr("transform", `translate(${width - 190}, 220)`); // Append legend title legend .append("text") .attr("x", 0) .attr("y", -10) // Adjust the position of the title relative to the legend .text("Region") .style("font", "bold 14px var(--sans-serif)") .style("font-variant-numeric", "tabular-nums") .attr("fill", "black"); // Add legend items based on categories const legendItems = legend .selectAll(".legend-item") .data(categories) .enter() .append("g") .attr("class", "legend-item") .attr("transform", (d, i) => `translate(0, ${i * 20})`); // Adjust vertical spacing as needed legendItems .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", 15) .attr("height", 15) .attr("fill", (d) => color1(d)) // Use your color scale here .attr("fill-opacity", 0.7); legendItems .append("text") .attr("x", 20) .attr("y", 10) .style("font", "bold 12px var(--sans-serif)") .style("font-variant-numeric", "tabular-nums") .text((d) => d); // Use your category value here const updateBars = bars(svg); const updateAxis = axis(svg); const updateLabels = labels(svg); const updateTicker = ticker(svg); invalidation.then(() => svg.interrupt()); return Object.assign(svg.node(), { update(keyframe) { const transition = svg .transition() .duration(duration) .ease(d3.easeLinear); // Extract the top bar’s value. x.domain([0, keyframe[1][0].value]); updateAxis(keyframe, transition); updateBars(keyframe, transition); updateLabels(keyframe, transition); updateTicker(keyframe, transition); const [date, data] = keyframe; // Check if the current year is an annotation year svg.selectAll(".annotation").remove(); if (isAnnotationYear(date)) { // Clear existing annotations before adding a new one svg.selectAll(".annotation").remove(); //let annotationMessage = `message_${date.getFullYear()}`; // Display the annotation message const annotation = displayAnnotation(svg, date.getFullYear()); annotation.attr("class", "annotation"); // Add a class for easier removal } return svg.node(); } }); }48:Tb69,function displayAnnotation(svg, year) { const messages = { 1980: "1970 - 1980; Western Europe (UK, Italy, Spain) saw a surge in terrorism alongside the US and El Salvador. This period witnessed a rise in left-wing, right-wing extremism, and separatist movements, reflecting diverse geopolitical challenges in European region", 1990: "1981 - 1990; Central and South America saw an increase in terrorist incidents. El Salvador was embroiled in a brutal civil war between the leftist Farabundo Martí National Liberation Front (FMLN) and the right-wing military government.", 2000: "1991 - 2000; Colombia and Peru continued facing significant terrorist activity amid internal conflicts in South America. Appearance of India in top ranks indicates escalating regional conflicts and insurgencies.", 2010: "2001 - 2010; Colombia's continues to be in top. Iraq's prominence linked to the aftermath of the 9/11 attacks and the subsequent United States-led invasion of Iraq in 2003.", 2019: "2011 - 2020; In Iraq, groups like Al-Qaeda exploit the power vacuum following the 2003 invasion, while Taliban grows in Afghanistan. Pakistan, faces challenges from various separatist and sectarian groups." // Add more years and their respective messages as needed }; const message = messages[year] || "No annotation for this year"; const annotation = svg.append("g").attr("class", "annotation"); const messageParts = message.split("; "); // Splitting the messageconst messageParts = message.split(", "); // Splitting the message const textGroup = annotation .append("text") .attr("x", 545) .attr("y", 400) .style("font", "bold 14px var(--sans-serif)"); const lineHeight = 18; // Adjust as needed const maxWidth = 300; // Adjust as needed const wrapText = (text, x, y, lineHeight, maxWidth) => { const words = text.split(" "); let line = ""; let lineNumber = 0; let tspan = textGroup .append("tspan") .attr("x", x) .attr("y", y) .attr("dy", 0); words.forEach((word, i) => { const testLine = `${line}${word} `; const metrics = tspan.node().getComputedTextLength(); if (metrics > maxWidth && i > 0) { line = word + " "; lineNumber += 1; tspan = textGroup .append("tspan") .attr("x", x) .attr("y", y) .attr("dy", lineNumber * lineHeight) .text(line); } else { line = testLine; tspan.text(line); } }); }; messageParts.forEach((part, index) => { if (index === 0) { textGroup .append("tspan") .text(part) .style("font", "bold 30px var(--sans-serif)") .style("fill", index === 0 ? "rgba(62, 111, 181, 1.0)" : "black") .attr("dx", 3) .attr("dy", 0); } else { wrapText(part, 550, 420, lineHeight, maxWidth); } }); return annotation; }49:T75a,function labels(svg) { let label = svg .append("g") .style("font", "bold 12px var(--sans-serif)") .style("font-variant-numeric", "tabular-nums") .attr("text-anchor", "end") .selectAll("text"); return ([date, data], transition) => (label = label .data(data.slice(0, n), (d) => d.name) .join( (enter) => enter .append("text") .attr( "transform", (d) => `translate(${x((prev.get(d) || d).value)},${y( (prev.get(d) || d).rank )})` ) .attr("y", y.bandwidth() / 2) .attr("x", -6) .attr("dy", "-0.25em") .text((d) => d.name) .call((text) => text .append("tspan") .attr("fill-opacity", 0.7) .attr("font-weight", "normal") .attr("x", -6) .attr("dy", "1.15em") ), (update) => update, (exit) => exit .transition(transition) .remove() .attr( "transform", (d) => `translate(${x((next.get(d) || d).value)},${y( (next.get(d) || d).rank )})` ) .call((g) => g .select("tspan") .tween("text", (d) => textTween(d.value, (next.get(d) || d).value) ) ) ) .call((bar) => bar .transition(transition) .attr("transform", (d) => `translate(${x(d.value)},${y(d.rank)})`) .call((g) => g .select("tspan") .tween("text", (d) => textTween((prev.get(d) || d).value, d.value) ) ) )); }4a:Teb1,chart1 = { // Specify the chart’s dimensions. const width = 1200; const height = 720; const marginTop = 40; const marginRight = 20; const marginBottom = 30; const marginLeft = 30; // Create the positional scales. const x = d3 .scaleUtc() .domain(d3.extent(filterData(), (d) => d.iyear)) .range([marginLeft, width - marginRight]); const y = d3 .scaleLinear() .domain([0, d3.max(filterData(), (d) => d.eventid)]) .nice() .range([height - marginBottom, marginTop]); // Create the SVG container. const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr( "style", "max-width: 100%; height: auto; overflow: visible; font: 10px sans-serif;" ); // add title svg .append("text") .attr("x", width / 2) .attr("y", 10) .attr("text-anchor", "middle") //.attr("font-size", "24px") .attr("font-weight", "bold") .style("font", "bold 24px var(--sans-serif)") .text("Top 20 Nations' Attack Trends"); // Replace with your desired title // Add the horizontal axis. svg .append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call( d3 .axisBottom(x) .ticks(width / 80) .tickSizeOuter(0) ); // Add the vertical axis. svg .append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y)) .call((g) => g.select(".domain").remove()) .call((g) => g .append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text("↑ data (%)") ); // Compute the points in pixel space as [x, y, z], where z is the name of the series. const points = filterData().map((d) => [ x(d.iyear), y(d.eventid), d.country_txt ]); // Group the points by series. const groups = d3.rollup( points, (v) => Object.assign(v, { z: v[0][2] }), (d) => d[2] ); // Draw the lines. const line = d3.line(); const path = svg .append("g") .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .selectAll("path") .data(groups.values()) .join("path") .style("mix-blend-mode", "multiply") .attr("d", line); // Add an invisible layer for the interactive tip. const dot = svg.append("g").attr("display", "none"); dot.append("circle").attr("r", 2.5); dot.append("text").attr("text-anchor", "middle").attr("y", -8); svg .on("pointerenter", pointerentered) .on("pointermove", pointermoved) .on("pointerleave", pointerleft) .on("touchstart", (event) => event.preventDefault()); return svg.node(); // When the pointer moves, find the closest point, update the interactive tip, and highlight function pointermoved(event) { const [xm, ym] = d3.pointer(event); const i = d3.leastIndex(points, ([x, y]) => Math.hypot(x - xm, y - ym)); const [x, y, k] = points[i]; path .style("stroke", ({ z }) => (z === k ? null : "#ddd")) .filter(({ z }) => z === k) .raise(); dot.attr("transform", `translate(${x},${y})`); dot.select("text").text(k); svg.property("value", filterData()[i]).dispatch("input", { bubbles: true }); } function pointerentered() { path.style("mix-blend-mode", null).style("stroke", "#ddd"); dot.attr("display", null); } function pointerleft() { path.style("mix-blend-mode", "multiply").style("stroke", null); dot.attr("display", "none"); svg.node().value = null; svg.dispatch("input", { bubbles: true }); } }4b:T1222,function multiAutoSelect(config = {}) { const { value, title, description, disabled, autocomplete = "off", placeholder, size, options, label = "", list = DOM.uid("autoSelect").id, attr = (d) => d, // an accessor on what attribute of the object to use postRender = (d) => d // A function called after each element has been rendered, receives: // d: datum // button: the button used for deleting // ele: the html element // fm: the overall widget, useful for changing the return value of the widget using fm.value } = Array.isArray(config) ? { options: config } : config; const optionsMap = new Map(options.map((o) => ["" + attr(o), o])); // We need the map with strings const onAction = (fm) => { const addToSelected = (d) => { if ( optionsMap.has(fm.input.value) && // It is an option fm.value.map((d) => "" + d).indexOf(fm.input.value) === -1 // If it hasn't been selected. Need to convert to strings to do the comparison for numbers ) { fm.value.push(optionsMap.get(fm.input.value)); renderSelection(); fm.input.value = ""; fm.dispatchEvent(new Event("input", { bubbles: true })); } }; const renderSelected = (d) => { const button = html``; const ele = html`${attr( d )} ${button}`; button.addEventListener("click", (e) => { fm.value.splice(fm.value.indexOf(d), 1); // remove the element directly ele.remove(); fm.dispatchEvent(new Event("input", { bubbles: true })); fm.input.focus(); }); // Highlight the dragging element position ele.addEventListener("dragover", (e) => { ele.style["border-color"] = "orange"; }); // Update back to default color ele.addEventListener("dragleave", (e) => { ele.style["border-color"] = "#ccc"; }); // Update back to default color ele.addEventListener("dragend", (e) => { ele.style["border-color"] = "#ccc"; }); // Call nested selection to re-render inner elements postRender(d, button, ele, fm); return ele; }; function renderSelection() { for (let o of fm.value) { //Check if the element is already selected if ( ![...fm.output.childNodes] .map((d) => { // + for integer let data = d.firstChild?.data?.trim(); return isNaN(+data) ? data : +data; }) .includes(attr(o)) ) { fm.output.appendChild(renderSelected(o)); } } Sortable.create(fm.output); //Update event will be triggered when the user drag the selected components Sortable.utils.on(fm.output, "update", () => { fm.value = [...fm.output.childNodes].map((a) => a.childNodes[0].nodeValue.trim() ); fm.dispatchEvent(new Event("input", { bubbles: true })); }); } fm.input.value = ""; fm.value = value ? Array.isArray(value) ? value.filter((d) => optionsMap.has(d)) : [value] : []; fm.onsubmit = (e) => { e.preventDefault(); addToSelected(); }; fm.input.addEventListener("input", function (e) { e.stopPropagation(); console.log("input", e); // Avoid adding the selection when still writing. Happens with numbers 🤷🏼‍♂️ if ( e.inputType === "insertReplacementText" || e.inputType === undefined // triggered when selecting from the datalist ) { addToSelected(); } }); renderSelection(); }; const form = input({ type: "text", title, description, attributes: { disabled }, action: onAction, form: html` ` }); form.output.style["margin-left"] = "0px"; form.style["min-height"] = "2.5em"; return form; }4c:T17b6,tree_chart = { // Specify the chart’s dimensions. const width = 1200; const height = 720; const marginTop = 50; // This custom tiling function adapts the built-in binary tiling function // for the appropriate aspect ratio when the treemap is zoomed-in. function tile(node, x0, y0, x1, y1) { d3.treemapBinary(node, 0, 0, width, height); for (const child of node.children) { child.x0 = x0 + (child.x0 / width) * (x1 - x0); child.x1 = x0 + (child.x1 / width) * (x1 - x0); child.y0 = y0 + (child.y0 / height) * (y1 - y0); child.y1 = y0 + (child.y1 / height) * (y1 - y0); } } // Compute the layout. const hierarchy = d3 .hierarchy(getSelectedJson(treemap_type)) .sum((d) => d.value) .sort((a, b) => b.value - a.value); const root = d3.treemap().tile(tile)(hierarchy); // Create the scales. const x = d3.scaleLinear().rangeRound([0, width]); const y = d3.scaleLinear().rangeRound([0, height]); // Formatting utilities. const format = d3.format(",d"); const name = (d) => d .ancestors() .reverse() .map((d) => d.data.name) .join("/"); // Create the SVG container. const svg = d3 .create("svg") .attr("viewBox", [0.5, -marginTop + 0.5, width, height + marginTop]) .attr("width", width) .attr("height", height + marginTop) .attr("style", "max-width: 100%; height: auto;") .style("font", "11px sans-serif"); // Create a sequential color scale const colorScale = d3 .scaleSequential(d3.schemeTableau10) .domain([0, d3.max(root.descendants(), (d) => d.depth)]); // Display the root. let group = svg .append("g") .attr("transform", "translate(0, 25)") .call(render, root); svg .append("text") .attr("x", width / 2) .attr("y", -32) .attr("text-anchor", "middle") .attr("font-size", "24px") .attr("font-weight", "bold") .style("font", "bold 24px var(--sans-serif)") .text(getSelectedTitle(treemap_type)); // Replace with your desired title function render(group, root) { const node = group .selectAll("g") .data(root.children.concat(root)) .join("g"); node .filter((d) => (d === root ? d.parent : d.children)) .attr("cursor", "pointer") .on("click", (event, d) => (d === root ? zoomout(root) : zoomin(d))); // Create "Go Back" button if the current root has a parent if (root.parent) { const backButton = svg .append("g") .attr("cursor", "pointer") .attr("transform", "translate(10, 10)") .on("click", () => zoomout(root)) .attr("class", "backButton"); // Adding class to backButton; backButton .append("rect") .attr("class", "backButtonRect") .attr("x", -5) .attr("y", -65) .attr("width", 100) .attr("height", 25) //.attr("fill", "#f2f2f2"); .attr("fill", "#000000"); backButton .append("text") .attr("class", "backButtonText") .attr("x", 0) .attr("y", -45) .text("\u25C0 Go Back") .attr("font-size", "16px") .attr("font-weight", "bold") .attr("fill", "#FFFFFF"); } node.append("title").text((d) => `${name(d)}\n${format(d.value)}`); node .append("rect") .attr("id", (d) => (d.leafUid = DOM.uid("leaf")).id) .attr("fill", (d) => (d === root ? "#fff" : colorScale(d.depth))) // Use color scale here .attr("stroke", "#fff"); node .append("clipPath") .attr("id", (d) => (d.clipUid = DOM.uid("clip")).id) .append("use") .attr("xlink:href", (d) => d.leafUid.href); node .append("text") .attr("clip-path", (d) => d.clipUid) .attr("font-weight", (d) => (d === root ? "bold" : null)) .selectAll("tspan") .data((d) => (d === root ? name(d) : d.data.name) .split(/(?=[A-Z][^A-Z])/g) .concat(format(d.value)) ) .join("tspan") .attr("x", 3) .attr( "y", (d, i, nodes) => `${(i === nodes.length - 1) * 0.3 + 1.1 + i * 0.9}em` ) .attr("fill-opacity", (d, i, nodes) => i === nodes.length - 1 ? 0.7 : null ) .attr("font-weight", (d, i, nodes) => i === nodes.length - 1 ? "normal" : null ) .text((d) => d); group.call(position, root); } function position(group, root) { group .selectAll("g") .attr("transform", (d) => d === root ? `translate(0,-30)` : `translate(${x(d.x0)},${y(d.y0)})` ) .select("rect") .attr("width", (d) => (d === root ? width : x(d.x1) - x(d.x0))) .attr("height", (d) => (d === root ? 30 : y(d.y1) - y(d.y0))); } // When zooming in, draw the new nodes on top, and fade them in. function zoomin(d) { const group0 = group.attr("pointer-events", "none"); const group1 = (group = svg.append("g").call(render, d)); x.domain([d.x0, d.x1]); y.domain([d.y0, d.y1]); svg .transition() .duration(750) .call((t) => group0.transition(t).remove().call(position, d.parent)) .call((t) => group1 .transition(t) .attrTween("opacity", () => d3.interpolate(0, 1)) .call(position, d) ); } // When zooming out, draw the old nodes on top, and fade them out. function zoomout(d) { const group0 = group.attr("pointer-events", "none"); const group1 = (group = svg.insert("g", "*").call(render, d.parent)); x.domain([d.parent.x0, d.parent.x1]); y.domain([d.parent.y0, d.parent.y1]); svg .transition() .duration(750) .call((t) => group0 .transition(t) .remove() .attrTween("opacity", () => d3.interpolate(1, 0)) .call(position, d) ) .call((t) => group1.transition(t).call(position, d.parent)); if (!d.parent.parent) { svg.selectAll("g > rect.backButtonRect").remove(); svg.selectAll("g > text.backButtonText").remove(); } } return svg.node(); }4d:T5cc,chart4 = { const svg = d3 .create("svg") .style("display", "block") .attr("viewBox", [0, 0, width4, height4]); const defs = svg.append("defs"); const _outline = defs.append("path").attr("id", "outline").datum(outline); defs .append("clipPath") .attr("id", "clip") .append("use") .attr("xlink:href", new URL("#outline", location)); const g = svg .append("g") .attr("clip-path", `url(${new URL("#clip", location)})`); g.append("use") .attr("xlink:href", new URL("#outline", location)) .attr("fill", "white"); const _countries = g .append("g") .selectAll("path") .data(countries.features) .join("path") .attr("fill", (d) => color(data4.get(d.properties.name))); _countries.append("title").text( (d) => `${d.properties.name} Number of Attacks: ${ data4.has(d.properties.name) ? data4.get(d.properties.name) : 0 }` ); const _borders = g .append("path") .datum(topojson.mesh(world, world.objects.countries, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-linejoin", "round"); svg .append("use") .attr("xlink:href", new URL("#outline", location)) .attr("fill", "none") .attr("stroke", "black"); function render() { _outline.attr("d", path); _countries.attr("d", path); _borders.attr("d", path); } return svg .call(zoom(projection).on("zoom.render", render)) .call(render) .node(); }4e:T54d,rename = new Map([ ["Antigua and Barbuda", "Antigua and Barb."], ["Bolivia (Plurinational State of)", "Bolivia"], ["Bosnia and Herzegovina", "Bosnia and Herz."], ["Brunei Darussalam", "Brunei"], ["Central African Republic", "Central African Rep."], ["Cook Islands", "Cook Is."], ["Democratic People's Republic of Korea", "North Korea"], ["Democratic Republic of the Congo", "Dem. Rep. Congo"], ["Dominican Republic", "Dominican Rep."], ["Equatorial Guinea", "Eq. Guinea"], ["Iran (Islamic Republic of)", "Iran"], ["Lao People's Democratic Republic", "Laos"], ["Marshall Islands", "Marshall Is."], ["Micronesia (Federated States of)", "Micronesia"], ["Republic of Korea", "South Korea"], ["Republic of Moldova", "Moldova"], ["Russian Federation", "Russia"], ["Saint Kitts and Nevis", "St. Kitts and Nevis"], ["Saint Vincent and the Grenadines", "St. Vin. and Gren."], ["Sao Tome and Principe", "São Tomé and Principe"], ["Solomon Islands", "Solomon Is."], ["South Sudan", "S. Sudan"], ["Swaziland", "eSwatini"], ["Syrian Arab Republic", "Syria"], ["United States", "United States of America"], ["The former Yugoslav Republic of Macedonia", "Macedonia"], // ["Tuvalu", ?], ["United Republic of Tanzania", "Tanzania"], ["Venezuela (Bolivarian Republic of)", "Venezuela"], ["Viet Nam", "Vietnam"] ])4f:Ta4e,## Conclusion: Our exploration of the Global Terrorism Database (GTD) through a multifaceted visualization journey has shed light on the complex and evolving nature of terrorism across the globe. From the dynamic rise and fall of attack numbers depicted in the racing bar chart to the multi-line chart's nuanced portrayal of regional trends over time, each visualization offered a unique perspective on this critical issue. **Key Takeaways:** - **Global Surge:** The racing bar chart paints a stark picture, revealing a concerning global upward trend in terrorist attacks over the past five decades. This highlights the need for continued vigilance and international cooperation in combating this persistent threat. - **Regional Variations:** The multi-line chart dives deeper, showcasing the diverse landscape of terrorism across regions. The Middle East and North Africa stand out as hotspots, while South Asia and Sub-Saharan Africa also exhibit significant activity. This underscores the importance of tailored counterterrorism strategies that address the specific dynamics of each region. - **Complexity Within:** The treemap's intricate hierarchy unveils the multilayered nature of terrorism. By delving into the data's structure, we can identify dominant attack types, prominent terrorist groups, and even potential relationships between different factors. This granular understanding is crucial for developing effective interventions that tackle the root causes of terrorism. - **Spatial Distribution:** The chloropleth map offered a glimpse into the geographical distribution of terrorist activity. This visual representation can inform resource allocation and prioritize areas requiring heightened security measures. **Moving Forward:** Our visualization journey is just the beginning. By continuously analyzing and interpreting data from the GTD and other sources, we can gain a deeper understanding of the ever-shifting landscape of terrorism. This knowledge can empower us to: - **Develop more effective counterterrorism strategies:** Tailored to specific regions, attack types, and terrorist groups. - **Allocate resources efficiently:** Focusing on areas with the highest concentration of activity. - **Promote international cooperation:** Sharing data and expertise to combat this global threat. - **Raise awareness and understanding:** Countering misinformation and fostering informed public discourse. The fight against terrorism is complex and ongoing. However, by harnessing the power of data visualization and embracing a critical and collaborative approach, we can work towards a safer and more peaceful world.50:[{"id":"7e2c77b299680f9bfe3724add86a27508826212e5924bba38fb2f55d5a4bc42c0f4e0bee39c356cb0b1bdde48fbab0b2fb1f5d001539f67ec3cac1215d87039d","href":"https://static.observableusercontent.com/files/7e2c77b299680f9bfe3724add86a27508826212e5924bba38fb2f55d5a4bc42c0f4e0bee39c356cb0b1bdde48fbab0b2fb1f5d001539f67ec3cac1215d87039d","name":"country_data.csv","type":"text/csv","lastModified":1702347289402.289,"size":21487},{"id":"c182e66fb760790fa600d7cafc82f82b3003155b4f0d97278ac6462b566a989bbbc9d485166991e3538d72c5c23b707afea1ad188c65748cc059c8b132616793","href":"https://static.observableusercontent.com/files/c182e66fb760790fa600d7cafc82f82b3003155b4f0d97278ac6462b566a989bbbc9d485166991e3538d72c5c23b707afea1ad188c65748cc059c8b132616793","name":"global_terrorism_top20.csv","type":"text/csv","lastModified":1702354002123.047,"size":18940},{"id":"f31f63401b41678af19f2a1a8237d6322154caee0af92ebd9b1079844309313412d2d8444202ad01fd3fe6c26de821b31e0e02f10fc329fc0727c5c374a505f1","href":"https://static.observableusercontent.com/files/f31f63401b41678af19f2a1a8237d6322154caee0af92ebd9b1079844309313412d2d8444202ad01fd3fe6c26de821b31e0e02f10fc329fc0727c5c374a505f1","name":"treemap_dict.json","type":"application/json","lastModified":1702365982553.248,"size":71484},{"id":"b9dbef1893ec635cac87e4b637bc2c197fa262793240fbbf3509bb269a2010271dd6a6aa0991f83fe7d564d9484d4afeead5500c17fe23ba65b0a7fa3517f274","href":"https://static.observableusercontent.com/files/b9dbef1893ec635cac87e4b637bc2c197fa262793240fbbf3509bb269a2010271dd6a6aa0991f83fe7d564d9484d4afeead5500c17fe23ba65b0a7fa3517f274","name":"treemap_regions_dict-1.json","type":"application/json","lastModified":1702365982892.019,"size":585840},{"id":"1dc88ec9dec4f13991f48c3428463b9a75aa3aadc693a3bc4eeb36ca0f01a4bba975c6991a6f20f6101e88770c6d89355b23bc16fd42ddf604a9ce6f272bc716","href":"https://static.observableusercontent.com/files/1dc88ec9dec4f13991f48c3428463b9a75aa3aadc693a3bc4eeb36ca0f01a4bba975c6991a6f20f6101e88770c6d89355b23bc16fd42ddf604a9ce6f272bc716","name":"treemap_country_dict.json","type":"application/json","lastModified":1702365983436.443,"size":2116716},{"id":"cb44b64b092031e617b9c6718329f07f3a9d7614fea26e21699a2a1fb897c3b6feaa7fd1aebc215ddc7ca6dd9d42cc70b8c9af40373d994fec69f928d57c084a","href":"https://static.observableusercontent.com/files/cb44b64b092031e617b9c6718329f07f3a9d7614fea26e21699a2a1fb897c3b6feaa7fd1aebc215ddc7ca6dd9d42cc70b8c9af40373d994fec69f928d57c084a","name":"yearly_attacks_country.csv","type":"text/csv","lastModified":1702372576197.081,"size":72457}] 44:{"id":"2fa8667f48b89498","slug":"cs7250-final-project","title":"CS7250 Final Project:","thumbnail":"69d8de9a37f24170a0d30427f6b23135a34aead307c81aa2dd306beda973fcc3","access_level":"public","create_time":"$D2023-12-12T02:10:16.124Z","update_time":"$D2023-12-13T01:29:55.492Z","view_time":null,"first_public_time":"$D2023-12-12T02:10:16.124Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"2d489f4220d80d91","login":"bishal-agrawal-ws","name":"Bishal Agrawal's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/716bb405d2d8bdddb0115512219792e7309a29cf9d391e87be91432c770dde7f","tier":"starter_2024","bio":"","following":false},"version":509,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6681ed4d21d146e7","login":"bishal-agrawal","name":"Bishal Agrawal","avatar_url":"https://avatars-next.observableusercontent.com/1b829f0d08fff17af5fe3a8860ff3aa243f03acaa0a7290992c5b8f94592bb18","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"6681ed4d21d146e7","login":"bishal-agrawal","name":"Bishal Agrawal","avatar_url":"https://avatars-next.observableusercontent.com/1b829f0d08fff17af5fe3a8860ff3aa243f03acaa0a7290992c5b8f94592bb18","tier":null,"role":"editor"},{"type":"team","id":"2d489f4220d80d91","login":"bishal-agrawal-ws","name":"Bishal Agrawal's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/716bb405d2d8bdddb0115512219792e7309a29cf9d391e87be91432c770dde7f","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":"CS7250 Final Project:","cells":[{"id":0,"value":"$46","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":116,"value":"## Viz 1: Which countries have experienced the most terrorist attacks?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":469,"value":"__Objective:__ To reveal the top 10 countries most impacted by terrorism over a five-decade period (1970-2020) and how their ranking has changed over time.\n\n__Rationale:__ This dynamic chart effectively tracks the evolving trajectories of terrorist activity across countries and decades. The bars trace the changing landscape of terrorism, allowing users to easily compare and contrast the prevalence of attacks between countries and observe how their rankings have shifted over time.\n\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":83,"value":"viewof keyframe = Scrubber(keyframes, {\n format: ([date]) => formatDate(date),\n delay: duration,\n loop: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"viewof duration = Inputs.range([45, 90], {\n step: 1,\n label: \"Animation duration (Seconds)\",\n value: 60,\n width: 200\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":472,"value":"### Insights:\n\n- The Middle East and North Africa consistently dominates, with Iraq, Afghanistan, and Pakistan leading the pack.\n- South Asia and Sub-Saharan Africa show significant activity, while North America and Western Europe have relatively lower levels.\n- The 1970s and 1980s witnessed a surge in attacks, followed by a decline in the 1990s and early 2000s. However, the 2010s saw another rise, driven by conflicts in the Middle East and Africa.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"// Add a function to check if a particular year matches the annotation years\nfunction isAnnotationYear(year) {\n return [1980, 1990, 2000, 2010, 2019].includes(year.getFullYear());\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"data = FileAttachment(\"country_data.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"update = chart.update(keyframe)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"n = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"names = new Set(data.map(d => d.name))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"datevalues = Array.from(\n d3.rollup(\n data,\n ([d]) => d.value,\n (d) => +d.date,\n (d) => d.name\n )\n)\n .map(([date, data]) => [new Date(date), data])\n .sort(([a], [b]) => d3.ascending(a, b))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"function rank(value) {\n const data = Array.from(names, (name) => ({ name, value: value(name) }));\n data.sort((a, b) => d3.descending(a.value, b.value));\n for (let i = 0; i < data.length; ++i) data[i].rank = Math.min(n, i);\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"k = 10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"keyframes = {\n const keyframes = [];\n let ka, a, kb, b;\n const pauseYears = new Set([1980, 1990, 2000, 2010, 2020]);\n\n for ([[ka, a], [kb, b]] of d3.pairs(datevalues)) {\n for (let i = 0; i < k; ++i) {\n const t = i / k;\n const currentDate = new Date(ka * (1 - t) + kb * t);\n\n if (pauseYears.has(currentDate.getFullYear())) {\n // Adding multiple duplicate keyframes for longer pause\n for (let j = 0; j < 6; ++j) {\n keyframes.push([currentDate, rank((name) => a.get(name) || 0)]);\n }\n } else {\n keyframes.push([\n new Date(ka * (1 - t) + kb * t),\n rank((name) => (a.get(name) || 0) * (1 - t) + (b.get(name) || 0) * t)\n ]);\n }\n }\n }\n keyframes.push([new Date(kb), rank((name) => b.get(name) || 0)]);\n return keyframes;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"nameframes = d3.groups(\n keyframes.flatMap(([, data]) => data),\n (d) => d.name\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"prev = new Map(\n nameframes.flatMap(([, data]) => d3.pairs(data, (a, b) => [b, a]))\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"next = new Map(nameframes.flatMap(([, data]) => d3.pairs(data)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"function bars(svg) {\n let bar = svg.append(\"g\").attr(\"fill-opacity\", 0.6).selectAll(\"rect\");\n\n return ([date, data], transition) =>\n (bar = bar\n .data(data.slice(0, n), (d) => d.name)\n .join(\n (enter) =>\n enter\n .append(\"rect\")\n .attr(\"fill\", color2)\n .attr(\"height\", y.bandwidth())\n .attr(\"x\", x(0))\n .attr(\"y\", (d) => y((prev.get(d) || d).rank))\n .attr(\"width\", (d) => x((prev.get(d) || d).value) - x(0)),\n (update) => update,\n (exit) =>\n exit\n .transition(transition)\n .remove()\n .attr(\"y\", (d) => y((next.get(d) || d).rank))\n .attr(\"width\", (d) => x((next.get(d) || d).value) - x(0))\n )\n .call((bar) =>\n bar\n .transition(transition)\n .attr(\"y\", (d) => y(d.rank))\n .attr(\"width\", (d) => x(d.value) - x(0))\n ));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"function textTween(a, b) {\n const i = d3.interpolateNumber(a, b);\n return function(t) {\n this.textContent = formatNumber(i(t));\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"formatNumber = d3.format(\",d\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"tickFormat = undefined // override as desired","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"function axis(svg) {\n const g = svg.append(\"g\").attr(\"transform\", `translate(0,${marginTop})`);\n\n const axis = d3.axisTop(x)\n .ticks(width / 160, tickFormat)\n .tickSizeOuter(0)\n .tickSizeInner(-barSize * (n + y.padding()));\n\n return (_, transition) => {\n g.transition(transition).call(axis);\n g.select(\".tick:first-of-type text\").remove();\n g.selectAll(\".tick:not(:first-of-type) line\").attr(\"stroke\", \"white\");\n g.select(\".domain\").remove();\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"function ticker(svg) {\n const now = svg\n .append(\"text\")\n .style(\"font\", `bold ${barSize}px var(--sans-serif)`)\n .style(\"font-variant-numeric\", \"tabular-nums\")\n .attr(\"text-anchor\", \"end\")\n .attr(\"x\", width - 6)\n .attr(\"y\", marginTop + barSize * (n - 0.45))\n .attr(\"dy\", \"0.32em\")\n .text(formatDate(keyframes[0][0]));\n\n return ([date], transition) => {\n transition.end().then(() => now.text(formatDate(date)));\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"formatDate = d3.utcFormat(\"%Y\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"color2 = {\n const scale = d3.scaleOrdinal(d3.schemeTableau10);\n if (data.some((d) => d.category !== undefined)) {\n const categoryByName = new Map(data.map((d) => [d.name, d.category]));\n scale.domain(categoryByName.values());\n return (d) => scale(categoryByName.get(d.name));\n }\n return (d) => scale(d.name);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"color1 = {\n const scale = d3.scaleOrdinal(d3.schemeTableau10);\n const categoryByName = new Map(\n data.map((d) => [d.category, scale(d.category)])\n );\n\n return (d) => categoryByName.get(d);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"x = d3.scaleLinear([0, 1], [marginLeft, width - marginRight])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"y = d3\n .scaleBand()\n .domain(d3.range(n + 1))\n .rangeRound([marginTop, marginTop + barSize * (n + 1 + 0.1)])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"height = marginTop + barSize * n + marginBottom + 30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"barSize = 48;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"marginTop = 50;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"marginBottom = 6","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"marginRight = 6","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"marginLeft = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"## Viz 2: How have the dynamics and trajectories of global terrorism transformed over time?\n__Objective:__ Uncover nuanced yearly trends in terrorism across the top 20 countries with the highest attack rates.\n\n__Rationale:__ This engaging plot empowers users to scrutinize annual terrorism trends within the top 20 affected countries. The interactive features facilitate a detailed analysis of individual countries, fostering exploration of intricate temporal patterns. It also brings out counterintuitive observations about countries that are affected by terrorism.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":128,"value":"viewof mas = multiAutoSelect({\n options: countryReturn(),\n placeholder: \"Select country\",\n value: countryReturn(),\n label: \"Select Country: \"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"### Insights:\n- The number of terrorist attacks has increased significantly over the past five decades, from around 5,000 in 1970 to over 25,000 in 2020. This suggests a worrying upward trend in global terrorism.\n- The rate of increase has not been constant, with steeper rises in the 1970s and 2010s and a relative plateau in the 1990s and early 2000s. This indicates that factors influencing terrorism are complex and dynamic.\n- While the overall trend is upwards, some countries exhibit temporary drops or plateaus in their attack numbers. This could be due to various factors like changes in government policies, counterterrorism efforts, or the dynamics of specific militant groups.\n- The lines have different slopes, indicating that some countries have experienced a faster rise in attacks than others. Notably, Iraq, Afghanistan, and Pakistan have the steepest inclines, suggesting ongoing intense conflict and instability.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":124,"value":"function countryReturn() {\n return Array.from(new Set(data1.map((d) => d.country_txt)));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"function filterData() {\n return data1.filter((d) => mas.includes(d.country_txt));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"import { input, usa } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"Sortable = require(\"sortablejs\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"data1 = FileAttachment(\"global_terrorism_top20.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"d = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"## Viz 3: What are the relationships between terrorist groups, attack types, and targets?\n\n__Objective:__ Illuminate the intricate relationships among terrorist groups, attack types, and targets through a hierarchical representation.\n\n__Rationale:__ This expansive visualization method adeptly unveils the interplay between terrorist groups, attack types, and targets. The hierarchical structure facilitates an insightful journey from overarching categories to specific details, allowing users to grasp the nuanced relationships within the data.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":187,"value":"viewof treemap_type = Inputs.select(jsonFile, {\n value: \"terror group - attack type - target type\",\n label: \"Select desirable treemap hierarchy:\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"### Insights:\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":495,"value":"- Using the first type of tree map, we can understand the attack types usually carried by different terrorist groups. For example, the most common attack type carried out by Taliban is Bombing, and their most common target types are private citizens, military and police.\n- The treemap ('Year - Region - Terror group') helps identify areas deserving further attention, such as regions with concentrated attacks, dominant attack methods, or specific terrorist groups.\n- The treemap serves as a starting point for deeper exploration of the underlying data. You can investigate specific sections further to gain more granular insights.\n- Furthermore, we can also investigate the major terrorist groups active in a particular year and region. For example, in 2017, Al- Shabaab and Boko Haram were the two most active terrorists groups in Sub-Saharan Africa.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":181,"value":"jsonFile=['Terror group - Attack type - Target type',\n 'Year - Region - Terror group',\n 'Country - Year - City']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"function getSelectedJson(selectedOption){\n\n if (selectedOption=='Terror group - Attack type - Target type'){\n return treemap_data\n }\n if (selectedOption=='Country - Year - City'){\n return treemap_country_data\n }\n if (selectedOption=='Year - Region - Terror group'){\n return treemap_regions_data\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"function getSelectedTitle(selectedOption) {\n if (selectedOption == \"Terror group - Attack type - Target type\") {\n return \"Hierarchical View of Terrorist Groups their Tactics and Targets\";\n }\n if (selectedOption == \"Country - Year - City\") {\n return \"Hierarchical View of Terrorism Geographical Roots at different Timeframes\";\n }\n if (selectedOption == \"Year - Region - Terror group\") {\n return \"Hierarchical View of Terrorism Across different Time, Regions and Terrorist Groups\";\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"treemap_data = FileAttachment(\"treemap_dict.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"treemap_country_data = FileAttachment(\"treemap_country_dict.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"treemap_regions_data = FileAttachment(\"treemap_regions_dict-1.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"## Viz 4: How does geographical location influence the prevalence and nature of terrorist attacks?\n\n**Objective:** Presenting prominent terrorism hotspots worldwide, emphasizing geographic regions within user-defined timeframes.\n\n**Rationale:** This map serves as a powerful tool for visualizing the global landscape of terrorist attacks, providing a comprehensive view of their prevalence. The user-configurable timeframe facilitates targeted analysis of specific periods, enhancing the depth of insights.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":324,"value":"// Cell for the range slider\nviewof selectedRange = interval([1970, 2020], {\n step: 1.0,\n value: [2010, 2020],\n label: \"Select Start End Year Interval\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"viewof mapOr = Inputs.select([\"Flat\", \"Spherical\"], {\n value: \"Flat\",\n label: \"Select map orientation\",\n disabled: [\"Y\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"legend({ color, title: \"Number of Attacks\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":499,"value":"### Insights:\n\n- This map uses color to represent data variations across geographical areas. In the context of terrorism, it shows the number of attacks in different countries or regions.\n- By selecting the year range using the sliders, global terrorism hotspots can be analyzed. During the last decade, India, Pakistan, Iraq and Afghanistan seem to be a hotspot of terrorist activities.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":330,"value":"// Define data cell to sum attacks within a range of years for each country\ndata4 = {\n const startYear = selectedRange[0];\n const endYear = selectedRange[1];\n\n // Summing up attacks for each country within the selected range\n const summedAttacks = new Map();\n\n // Loop through each country's array of attack objects and sum attacks within the range\n data_raw.forEach((attacksArray, country) => {\n let totalAttacks = 0;\n attacksArray.forEach(({ attacks, year }) => {\n if (year >= startYear && year <= endYear) {\n totalAttacks += attacks;\n }\n });\n summedAttacks.set(country, totalAttacks);\n });\n\n return summedAttacks;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"// Define data_raw cell using Map for storing country-wise attack data\ndata_raw = {\n const parsedData = d3.csvParse(\n await FileAttachment(\"yearly_attacks_country.csv\").text(),\n ({ country, attacks, year }) => ({\n country: rename.get(country) || country,\n attacks: +attacks,\n year: +year\n })\n );\n\n const countryData = new Map();\n parsedData.forEach(({ country, attacks, year }) => {\n if (!countryData.has(country)) {\n countryData.set(country, []);\n }\n countryData.get(country).push({ attacks, year });\n });\n\n const dataMap = countryData;\n dataMap.title = \"Number of Terrorist Attacks\";\n return dataMap;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"color = d3\n .scaleSequential()\n .domain(d3.extent(Array.from(data4.values())))\n .interpolator(d3.interpolateReds)\n .unknown(\"#ccc\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"projection = mapOr === \"Spherical\"\n ? d3.geoOrthographic().rotate([-50, -25])\n : d3\n .geoMercator()\n .scale((width4 + 1) / 2 / Math.PI)\n .translate([width4 / 2, 450 / 1.5])\n .precision(0.1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"width4 = mapOr === \"Spherical\" ? 600 : 850","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"height4 = mapOr === \"Spherical\"\n ? (() => {\n const [[x0, y0], [x1, y1]] = d3\n .geoPath(projection.fitWidth(width4 / 1.7, outline))\n .bounds(outline);\n const dy = Math.ceil(y1 - y0),\n l = Math.min(Math.ceil(x1 - x0), dy);\n projection\n .scale(((projection.scale() * (l - 1)) / l) * 1.0)\n .precision(0.2);\n return dy;\n })()\n : 450 // Default height for Flat projection","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"outline = ({type: \"Sphere\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"countries = topojson.feature(world, world.objects.countries)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"world = fetch(\n \"https://cdn.jsdelivr.net/npm/visionscarto-world-atlas@0.1.0/world/110m.json\"\n).then((d) => d.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"import { zoom } with { d3 } from \"@d3/versor-zooming\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"import { legend } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"import { interval } from \"@mootari/range-slider\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"$4f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W50","stdlib":"1"}} 45:"$44:body"