2a:null 2b:["$","title",null,{"children":"Data Visualization Final Project | MGermanos | Observable"}] 30:T45b,chart_bar = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, bar_height]); svg.append("g") .attr("fill", "lightskyblue") .selectAll("rect") .data(gpr_data) .enter().append("rect") .attr("x", (d, i) => gpr_x(i)) .attr("y", d => gpr_y(d.value)) .attr("height", d => gpr_y(100) - gpr_y(d.value)) .attr("width", gpr_x.bandwidth()) .text(d => d) .attr("fill", "#0096C7") .attr("stroke", "#0096C7") .attr("stroke-width", 0) .on("mouseover", function(event,d) { gpr_tooltip.style("visibility", "visible").text(d.value); d3.select(this).attr("fill", "lightskyblue"); }) .on("mousemove", (event,d) => gpr_tooltip.style("top", (event.pageY-10)+"px").style("left", (event.pageX+10)+"px").text("GPR: "+d.value + " - " + "GPI: " + d.value1)) .on("mouseout", function(event,d) { gpr_tooltip.style("visibility", "hidden"); d3.select(this) .attr("fill", "#0096C7") }); svg.append("g") .call(gpr_xAxis); svg.append("g") .call(gpr_yAxis); return svg.node(); }31:T4bc,gdp_chart = { const gdp_tooltip = new GDPTooltip(); const svg = d3.create("svg") .attr("viewBox", [0, 0, main_width, main_height]); svg.append("text") .attr("class", "y label") .attr("text-anchor", "end") .attr("x",-(margin.top + (main_height - margin.top - margin.bottom) / 7)) .attr("y", 0) .attr("dy", ".85em") .attr("transform", "rotate(-90)") .text("GDP% per capita") .attr("font-size","10px"); svg.append("path") .attr("fill", "none") .attr("stroke", "lightskyblue") .attr("stroke-width", 1.5) .attr("stroke-miterlimit", 1) .attr("d", gdp_line(gdp_data)); svg.append("g") .call(gdp_xAxis); svg.append("g") .call(gdp_yAxis); svg.append("g") .attr("fill", "none") .attr("pointer-events", "all") .selectAll("rect") .data(d3.pairs(gdp_data)) .join("rect") .attr("x", ([a, b]) => gdp_x(a.Year)) .attr("height", main_height) .attr("width", ([a, b]) => gdp_x(b.Year) - gdp_x(a.Year)) .on("mouseover", (event, [a]) => gdp_tooltip.show(a)) .on("mouseout", () => gdp_tooltip.hide()); svg.append(() => gdp_tooltip.node); return svg.node(); }32:T774,function bubbles(root) { const svg = d3.select(DOM.svg(width_bubble, height_bubble)); var format = d3.format(",d"), color = d3.scaleOrdinal(["#79C1E2","#219ebc","#035177","#ffb703","#fb8500"]) var tooltip = d3.select("body") .append("div") .style("position", "absolute") .style("font-family", "'Open Sans', sans-serif") .style("font-size", "10px") .style("z-index", "10") .style("background-color", "white") .style("color", "black") .style("border", "solid") .style("border-color", "white") .style("padding", "5px") .style("border-radius", "2px") .style("visibility", "hidden"); var bubble = d3.pack() .size([width_bubble, height_bubble]) .padding(1.5); bubble(root); var node = svg.selectAll(".node") .data(root.children) .enter().append("g") .attr("class", "node") .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); node.append("circle") .attr("r", function(d) { return d.r; }) .style("fill", function(d) { return color(d.data.group); }) .on("mouseover", function(event,d) { tooltip.text(d.data.name + ": " + format(d.value)); tooltip.style("visibility", "visible"); d3.select(this).style("stroke", "black"); }) .on("mousemove", function(event) { return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px"); }) .on("mouseout", function() { d3.select(this).style("stroke", "none"); return tooltip.style("visibility", "hidden"); }); node.append("text") .attr("dy", ".3em") .style("text-anchor", "middle") .style("font", "10px sans-serif") .style("pointer-events", "none") .text(function(d) { return d.data.name.substring(0, d.r / 3); }); return svg.node(); }33:Tc2f,function drawNetworkChart() { var links = data_network.links.map(d => Object.create(d)) var nodes = data_network.nodes.map(d => Object.create(d)) nodes = nodes.filter(node => node.group == random_country); links = links.filter(link => link.group1 == random_country && link.group2==random_country); const radius = 10; var tooltip = d3.select("body") .append("div") .attr("class", "tooltip") .style("opacity", 0); const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id)) .force("charge", d3.forceManyBody().strength(-70)) .force("center", d3.forceCenter(width/2, height_net/2)) .force('collision', d3.forceCollide().radius(function(d) { return 20 })); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height_net]) const link = svg.append("g") .attr("stroke", "transparent") .attr("stroke-opacity", 0) .selectAll("line") .data(links) .join("line") .attr("stroke-width", d => Math.sqrt(d.value) / 3); const node = svg.append("g") .attr("stroke", "#000") .selectAll("circle") .data(nodes) .join("circle") .attr("r", radius) .attr("fill", color_network) .call(drag(simulation)) .on('mouseover.fade', fade(0.1)) .on('mouseout.fade', fade(1)); const textElems = svg.append("g") .selectAll('text') .data(nodes) .join('text') .text(d => d.id+" - "+d.profession) .attr('font-size',12) .attr('font-size',12) .call(drag(simulation)) .on('mouseover.fade', fade(0.1)) .on('mouseout.fade', fade(1)); console.log(textElems.text) simulation.on("tick", (event,d) => { link .attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y); node .attr("cx", function(d) { return d.x = Math.max((radius+1), Math.min(width - (radius+1), d.x)); }) .attr("cy", function(d) { return d.y = Math.max((radius+1), Math.min(height_net - (radius+1), d.y)); }); textElems .attr("x", d => d.x + 10) .attr("y", d => d.y) .attr("visibility", "hidden"); }); function fade(opacity) { return (event,d) => { node.style('opacity', function (o) { console.log(d.index) return isConnected(d, o) ? 1 : opacity }); textElems.style('visibility', function (o) { return isConnected(d, o) ? "visible" : "hidden"}); link.style('stroke-opacity', o => (o.source === d || o.target === d ? 1 : opacity)); if(opacity === 1){ node.style('opacity', 1) textElems.style('visibility', 'hidden') link.style('stroke-opacity', 0.3) } }; } const linkedByIndex = {}; links.forEach(d => { linkedByIndex[`${d.source.index},${d.target.index}`] = 1; }); console.log(linkedByIndex) function isConnected(a, b) { return linkedByIndex[`${a.index},${b.index}`] || linkedByIndex[`${b.index},${a.index}`] || a.index === b.index; } invalidation.then(() => simulation.stop()); return svg.node() }34:T4b2,refugee_count_chart = { const tooltip = new Tooltip(); const svg = d3.create("svg") .attr("viewBox", [0, 0, main_width, ref_plot_height]); svg.append("text") .attr("class", "y label") .attr("text-anchor", "middle") .attr("x",-(margin.top + (ref_plot_height - margin.top - margin.bottom) / 2)) .attr("y", 20) .attr("dy", ".85em") .attr("transform", "rotate(-90)") .text("Refugees in Thousands") .attr("font-size","10px"); svg.append("path") .attr("fill", "none") .attr("stroke", "#D00000") .attr("stroke-width", 1.5) .attr("stroke-miterlimit", 1) .attr("d", line(data_ref)); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); svg.append("g") .attr("fill", "none") .attr("pointer-events", "all") .selectAll("rect") .data(d3.pairs(data_ref)) .join("rect") .attr("x", ([a, b]) => x_ref(a.Year)) .attr("height", ref_plot_height) .attr("width", ([a, b]) => x_ref(a.Year) - x_ref(b.Year)) .on("mouseover", (event, [a]) => tooltip.show(a)) .on("mouseout", () => tooltip.hide()); svg.append(() => tooltip.node); return svg.node(); }35:T4e1,function labels(svg) { let label = svg.append("g") .style("font", "bold 10px var(--sans-serif)") .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_bar((prev.get(d) || d).value)},${y_bar((prev.get(d) || d).rank)})`) .attr("y", y_bar.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_bar((next.get(d) || d).value)},${y_bar((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_bar(d.value)},${y_bar(d.rank)})`) .call(g => g.select("tspan").tween("text", d => textTween((prev.get(d) || d).value, d.value)))); }36:[{"id":"028aa075ddc7c09c028ecfe54fade4aaff6d4df041de91eea2c55e201667e257ca10219621c477b17e99ec0a390e9864d4ef98d60b847758e2f23560318af221","href":"https://static.observableusercontent.com/files/028aa075ddc7c09c028ecfe54fade4aaff6d4df041de91eea2c55e201667e257ca10219621c477b17e99ec0a390e9864d4ef98d60b847758e2f23560318af221","name":"global peace index.csv","type":"text/csv","lastModified":1607367198477.949,"size":222},{"id":"410b9f683f5dae757f580259cb610663cc77fb0b858239e5d3cd0dcb112b127f3b63d69efccc9f57552689bbf5dbdc7cd958a18b59a069031b307d5a0777278b","href":"https://static.observableusercontent.com/files/410b9f683f5dae757f580259cb610663cc77fb0b858239e5d3cd0dcb112b127f3b63d69efccc9f57552689bbf5dbdc7cd958a18b59a069031b307d5a0777278b","name":"gdp.csv","type":"text/csv","lastModified":1607372306852.681,"size":399},{"id":"1926d9091d76205a6ecef786685579f2f767f4df13c789fb21d0165daa1b7ef983d34d5cb687201bfe65c8d7441a05da2bbce66dca634f8dee9122cd91d90af6","href":"https://static.observableusercontent.com/files/1926d9091d76205a6ecef786685579f2f767f4df13c789fb21d0165daa1b7ef983d34d5cb687201bfe65c8d7441a05da2bbce66dca634f8dee9122cd91d90af6","name":"countries_wth_high_diaspora.csv","type":"text/csv","lastModified":1607376077309.473,"size":383},{"id":"545209577e6fb808b123f97bd21613a4201086ffe69a5fab348e35a19bbb4571771bb36d676e3b0d266c5928ad9d622521483b708d430fabdad7c1e354ffe1bc","href":"https://static.observableusercontent.com/files/545209577e6fb808b123f97bd21613a4201086ffe69a5fab348e35a19bbb4571771bb36d676e3b0d266c5928ad9d622521483b708d430fabdad7c1e354ffe1bc","name":"people-11.json","type":"application/json","lastModified":1607386275419.287,"size":490216},{"id":"1e1c9b012aa3be99fdd851e4d80a14906ce446301fe15d7855c2e9cce0a8f29275ba7ee569699e461fd119adcf01399ad3c79eb0f3d0beb43f0ae318ab19534c","href":"https://static.observableusercontent.com/files/1e1c9b012aa3be99fdd851e4d80a14906ce446301fe15d7855c2e9cce0a8f29275ba7ee569699e461fd119adcf01399ad3c79eb0f3d0beb43f0ae318ab19534c","name":"refugees_count-1.csv","type":"text/csv","lastModified":1607388645460.637,"size":393},{"id":"3a740291c4a73332c99a7797ce055fce44acdc98083284e8ae89ce54572f968e40ddecffe28186ea02e3db825a6c4446eb1e5d8d0399693193d31d12d9ae438e","href":"https://static.observableusercontent.com/files/3a740291c4a73332c99a7797ce055fce44acdc98083284e8ae89ce54572f968e40ddecffe28186ea02e3db825a6c4446eb1e5d8d0399693193d31d12d9ae438e","name":"Lebanon asylum-2.csv","type":"text/csv","lastModified":1607388905368.445,"size":6663}] 2e:{"id":"78d5d5269ec2564d","slug":"data-visualization-final-project-main","title":"Data Visualization Final Project","thumbnail":"8998f7fa26b6e3ece6e4e6e96faf66c1cf113323ea479a5665d3563401cfba77","access_level":"public","create_time":"$D2020-12-07T18:40:38.199Z","update_time":"$D2020-12-08T23:32:30.604Z","view_time":null,"first_public_time":"$D2020-12-08T01:20:49.232Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"223e0d53f92103c4","login":"mgermanos","name":"MGermanos","avatar_url":"https://avatars-next.observableusercontent.com/7e05cd831d0dcc007c50d3ce05f35d610f38a5115a17270bc369e103d3415305","tier":"starter_2024"},"version":608,"publish_version":608,"role":null,"authored":false,"authors":[{"type":"individual","id":"e02570945debf735","login":"mgermanos","name":"MGermanos","avatar_url":"https://avatars-next.observableusercontent.com/7e05cd831d0dcc007c50d3ce05f35d610f38a5115a17270bc369e103d3415305","tier":null}],"members":[{"type":"individual","id":"e02570945debf735","login":"mgermanos","name":"MGermanos","avatar_url":"https://avatars-next.observableusercontent.com/7e05cd831d0dcc007c50d3ce05f35d610f38a5115a17270bc369e103d3415305","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Data Visualization Final Project","cells":[{"id":0,"value":"md`# Data Visualization Final Project\n## The Lebanese Diaspora and the Refugees in Lebanon\nCeline Fadel - Manuella Germanos\nThis notebook contains the visualization that are found in the page index.html of the project`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":594,"value":"html`This is part of the final visualization project, below is a link to the rest of the pages
\nSelect country of interest\n
\nThe Lebanese diaspora map\n
\nThe refugees in Lebanon map\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`## Reasons behind the different waves of migration:\nInsecurity`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"bar_height=400","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"gpr_data = Object.assign(d3.csvParse(await FileAttachment(\"global peace index.csv\").text(), ({Year, GPR, GPI}) => ({name: Year, value: +GPR, value1: +GPI})).sort((a, b) => d3.descending(b.name, a.name)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"gpr_x = d3.scaleBand()\n .domain(d3.range(gpr_data.length))\n .range([margin.left, width - margin.right])\n .padding(0.1) ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"gpr_y = d3.scaleLinear()\n .domain([100, d3.max(gpr_data, d => d.value)]).nice()\n .range([bar_height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"gpr_xAxis = g => g\n .attr(\"transform\", `translate(0,${bar_height - margin.bottom})`)\n .style(\"font-size\", \"15px\")\n .call(d3.axisBottom(gpr_x).tickFormat(i => gpr_data[i].name).tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"gpr_yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .style(\"font-size\", \"15px\")\n .call(d3.axisLeft(gpr_y).ticks(null, gpr_data.format))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", -margin.left)\n .attr(\"y\", 10)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"start\")\n .text(gpr_data.y))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"gpr_yTitle = g => g.append(\"text\")\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 15)\n .attr(\"y\", 10)\n .text(\"Frequency\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"gpr_tooltip = d3.select(\"body\")\n .append(\"div\")\n .style(\"position\", \"absolute\")\n .style(\"font-family\", \"'Open Sans', sans-serif\")\n .style(\"font-size\", \"10px\")\n .style(\"z-index\", \"10\")\n .style(\"background-color\", \"white\")\n .style(\"color\", \"black\")\n .style(\"border\", \"solid\")\n .style(\"border-color\", \"white\")\n .style(\"padding\", \"5px\")\n .style(\"border-radius\", \"2px\")\n .style(\"visibility\", \"hidden\"); ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"main_height=150","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"main_width=500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 40})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"md`Fragile economy`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"gdp_data = gdp_csv.concat({Year:2020, GDP:NaN})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"gdp_csv = d3.csvParse(await FileAttachment(\"gdp.csv\").text(),d3.autoType)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"gdp_x = d3.scaleLinear()\n .domain([d3.min(gdp_data, d => d.Year)-1, d3.max(gdp_data, d => d.Year)])\n .range([margin.left, main_width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"gdp_line = d3.line()\n .defined(d => !isNaN(d.GDP))\n .x(d => gdp_x(d.Year))\n .y(d => gdp_y(d.GDP))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"gdp_y = d3.scaleLinear()\n .domain( [d3.min(gdp_data, d => d.GDP)-15,d3.max(gdp_data, d => d.GDP)+15])\n .range([main_height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"gdp_xAxis = g => g\n .attr(\"transform\", `translate(0,${main_height - margin.bottom})`)\n .call(d3.axisBottom(gdp_x).ticks(width / 100).tickSizeOuter(0).tickFormat(d3.format(\"d\")))\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"gdp_yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(gdp_y).ticks(main_height / 40))\n .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"class GDPTooltip {\n constructor() {\n this._GDP = svg``;\n this._Year = svg``;\n this.node = svg`\n \n ${this._GDP}\n ${this._Year}\n \n`;\n }\n show(d) {\n this.node.removeAttribute(\"display\");\n this.node.setAttribute(\"transform\", `translate(${gdp_x(d.Year)},${gdp_y(d.GDP)})`);\n this._GDP.textContent = \"GDP: \" + (d.GDP);\n this._Year.textContent = \"Year: \" + (d.Year);\n }\n hide() {\n this.node.setAttribute(\"display\", \"none\");\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":597,"value":"md`## Reasons behind the different waves of migration:\nInsecurity`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"//BUBBLE","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":391,"value":"width_bubble = 450","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"height_bubble = 450","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"data_bubble = d3.csvParse(await FileAttachment(\"countries_wth_high_diaspora.csv\").text(),d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"function transformToGenericObjectList(flatData) {\n var container = {};\n container.children = [];\n var regionToCountry = {};\n flatData.forEach(entry => {\n if (entry[\"2016\"] !== \"\") {\n container.children.push({group: entry[\"Region\"], value: parseFloat(entry[\"2016\"]), name: entry[\"Country Name\"]});\n }\n });\n \n return container;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"d3.hierarchy(transformToGenericObjectList(data_bubble))\n .sum(function(d) { return d.value; })\n .sort(function(a, b) { a.group < b.group ? -1 : 1 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"bubble_chart=bubbles(d3.hierarchy(transformToGenericObjectList(data_bubble))\n .sum(function(d) { return d.value; })\n .sort(function(a, b) { return b.value - a.value }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"//NETWORK","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"data_network = FileAttachment(\"people-11.json\").json();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"color_network = {\n const scale = d3.scaleOrdinal(d3.schemeBlues[9]);\n return d => scale(d.profession)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"drag = simulation => {\n \n return d3.drag()\n .on(\"start\", (event,d) => {\n if (!event.active) simulation.alphaTarget(0.3).restart();\n d.fx = d.x,d.fy = d.y\n console.log()\n })\n \n .on(\"drag\",(event,d) => (d.fx = event.x, d.fy = event.y))\n \n .on(\"end\", (event,d) => {\n if (!event.active) simulation.alphaTarget(0)\n d.fx = null,d.fy = null\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"height_net = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"countries_to_choose_from=[\"USA\",\"Australia\",\"Venezuela\",\"Argentina\",\"Brazil\",\"Germany\",\"France\"]\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"random_country=countries_to_choose_from[Math.floor(Math.random() * countries_to_choose_from.length)]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"selected_country_network_html=html`${random_country}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"network_chart=drawNetworkChart()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"// Refugee Count ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"formatDate = d3.utcFormat(\"%b %-d, ’%y\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y_ref).ticks(0))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${ref_plot_height - margin.bottom})`)\n .call(d3.axisBottom(x_ref).ticks(main_width / 50).tickSizeOuter(0).tickFormat(d3.format(\"d\")))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"y_ref = d3.scaleLinear()\n .domain( [-300,d3.max(data_ref, d => d.Refugees)])\n .range([ref_plot_height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"x_ref = d3.scaleLinear()\n .domain([1996, d3.max(data_ref, d => d.Year)])\n .range([margin.left, main_width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"line = d3.line()\n .defined(d => !isNaN(d.Refugees))\n .x(d => x_ref(d.Year))\n .y(d => y_ref(d.Refugees))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"data_refugees = d3.csvParse(await FileAttachment(\"refugees_count-1.csv\").text(),d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"data_ref = data_refugees.concat({Year:1996, Count:NaN})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"ref_plot_height=150","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"class Tooltip {\n constructor() {\n this._Refugees = svg``;\n this.node = svg`\n \n ${this._Refugees}\n \n`;\n }\n show(d) {\n this.node.removeAttribute(\"display\");\n this.node.setAttribute(\"transform\", `translate(${x_ref(d.Year)},${y_ref(d.Refugees)})`);\n this._Refugees.textContent = (d.Refugees)+\"K\";\n }\n hide() {\n this.node.setAttribute(\"display\", \"none\");\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"//Bar Chart","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"height_bar = 450","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"width_bar = 750","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"viewof replay = html`