2b:null 2c:["$","title",null,{"children":"Selecting the country of interst and displaying the information | MGermanos | Observable"}] 31:Tee1,time_chart = { let filteredData; if(sorting !== "Time") { filteredData = [].concat.apply([], dataByProfession.map(d=>d.values)); } else { filteredData = data.sort((a,b)=> a.start-b.start); } filteredData.forEach(d=> d.color = d3.color(color(d.Profeession))) if(filteredData.length>0){ let parent = this; if (!parent) { parent = document.createElement("div"); const svg = d3.select(DOM.svg(width, height)); const g = svg.append("g").attr("transform", (d,i)=>`translate(${margin.left} ${margin.top})`); const groups = g .selectAll("g") .data(filteredData) .enter() .append("g") .attr("class", "civ") const tooltip = d3.select(document.createElement("div")).call(createTooltip); const line = svg.append("line").attr("y1", margin.top-10).attr("y2", height-margin.bottom) groups.attr("transform", (d,i)=>`translate(0 ${y(i)})`) groups .each(getRect) .on("mouseover", function(d) { d3.select(this).select("rect").attr("fill", d.color.darker()) tooltip .style("opacity", 1) .html(getTooltipContent(d)) }) .on("mouseleave", function(d) { d3.select(this).select("rect").attr("fill", d.color) tooltip.style("opacity", 0) }) svg .append("g") .attr("transform", (d,i)=>`translate(${margin.left} ${margin.top-10})`) .call(axisTop) svg .append("g") .attr("transform", (d,i)=>`translate(${margin.left} ${height-margin.bottom})`) .call(axisBottom) svg.on("mousemove", function(d) { let [x,y] = d3.mouse(this); x=d3.event.pageX y=d3.event.pageY-70 line.attr("transform", `translate(${x} ,${y})`); if(x>width/2) x-= 100; tooltip .style("left", x + "px") .style("top", y + "px") }) parent.appendChild(svg.node()); parent.appendChild(tooltip.node()); parent.groups = groups; } else { parent = document.createElement("div"); const svg = d3.select(DOM.svg(width, height)); const g = svg.append("g").attr("transform", (d,i)=>`translate(${margin.left} ${margin.top})`); const groups = g .selectAll("g") .data(filteredData) .enter() .append("g") .attr("class", "civ") const tooltip = d3.select(document.createElement("div")).call(createTooltip); const line = svg.append("line").attr("y1", margin.top-10).attr("y2", height-margin.bottom).attr("stroke", "rgba(0,0,0,0.2)").style("pointer-events","none"); groups.attr("transform", (d,i)=>`translate(0 ${y(i)})`) groups .each(getRect) .on("mouseover", function(d) { d3.select(this).select("rect").attr("fill", d.color.darker()) tooltip .style("opacity", 1) .html(getTooltipContent(d)) }) .on("mouseleave", function(d) { d3.select(this).select("rect").attr("fill", d.color) tooltip.style("opacity", 0) }) svg .append("g") .attr("transform", (d,i)=>`translate(${margin.left} ${margin.top-10})`) .call(axisTop) svg .append("g") .attr("transform", (d,i)=>`translate(${margin.left} ${height-margin.bottom})`) .call(axisBottom) svg.on("mousemove", function(d) { let [x,y] = d3.mouse(this); x=d3.event.pageX y=d3.event.pageY line.attr("transform", `translate(${x} 0)`); x=d3.event.pageX y=d3.event.pageY-70 y +=20; if(x>width/2) x-= 100; tooltip .style("left", x + "px") .style("top", y + "px") }) parent.appendChild(svg.node()); parent.appendChild(tooltip.node()); parent.groups = groups; } return parent} else{ return html`No information of successful people from Lebanese descent was found for ${selected_country}` } }32:T65d,chart_donut = { const svg = d3.select(DOM.svg(width, height)) .attr("text-anchor", "middle") .style("font", "12px sans-serif"); const defs = svg.append("defs"); const arcWidth = (outerRadius + innerRadius) / 2; const gradients = defs.selectAll("linearGradient") .data(arcs, d=> d.data.uid.id) .join("linearGradient") .attr("id", d=> d.data.uid.id) .attr("gradientUnits", d=> "userSpaceOnUse") .attr("x1", d=> Math.cos(d.startAngle - Math.PI/2)*(arcWidth)) .attr("y1", d=> Math.sin(d.startAngle - Math.PI/2)*(arcWidth)) .attr("x2", d=> Math.cos(d.endAngle - Math.PI/2)*(arcWidth)) .attr("y2", d=> Math.sin(d.endAngle - Math.PI/2)*(arcWidth)); gradients .append("stop") .attr("offset", "0%") .attr("stop-color", (d,i) => colorScale(i)) gradients .append("stop") .attr("offset", "100%") .attr("stop-color", (d,i) => colorScale(i+1)) const g = svg.append("g") .attr("transform", `translate(${width / 2},${height / 2})`); g.selectAll("path") .data(arcs) .join("path") .attr("fill", d => ( d.data.color === "none" ? "none" : d.data.uid) ) .attr("stroke", d => ( d.data.color === "none" ? "none" : d.data.uid) ) .attr("stroke-width","1px") .attr("d", arc); g.selectAll("text") .data([progress]) .join("text") .attr("text-anchor", "middle") .attr("dy", ".3em") .style("font", "10px sans-serif") .style("max-width", "100%") .style("height", "auto") .attr("text-anchor", "middle") .attr("fill", "black") .text( d => d + "%") .attr("transform", `scale(${ innerRadius/15 })`); return svg.node(); }33:T4c2,chart_line = { const tooltip= new Tooltip(); const svg = d3_line.create("svg") .attr("viewBox", [0, 0, width_line, height_line]); svg.append("text") .attr("class", "y label") .attr("text-anchor", "middle") .attr("x",-(margin_line.top + (height_line - margin_line.top - margin_line.bottom) / 2)) .attr("y", 20) .attr("dy", ".85em") .attr("transform", "rotate(-90)") .text("Number of Lebanese immigrants") .attr("font-size","7px"); svg.append("path") .attr("fill", "none") .attr("stroke", "#0096C7") .attr("stroke-width", 1.5) .attr("stroke-miterlimit", 1) .attr("d", line(data_line)); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); svg.append("g") .attr("fill", "none") .attr("pointer-events", "all") .selectAll("rect") .data(d3_line.pairs(data_line)) .join("rect") .attr("x", ([a, b]) => x_line(a.year)) .attr("height", height_line) .attr("width", ([a, b]) => x_line(b.year) - x_line(a.year)) .on("mouseover", (event, [a]) => tooltip.show(a)) .on("mouseout", () => tooltip.hide()); svg.append(() => tooltip.node); return svg.node(); }34:[{"id":"bd82fe9bd09a331fea52cec90873ab12cee81b555ee90126442576719875ecedc13feccc5e736c456bfa1be8183367f7f0ee86f745f7842b24e874c4a631c31a","href":"https://static.observableusercontent.com/files/bd82fe9bd09a331fea52cec90873ab12cee81b555ee90126442576719875ecedc13feccc5e736c456bfa1be8183367f7f0ee86f745f7842b24e874c4a631c31a","name":"cumulative_immigrants.csv","type":"text/csv","lastModified":1607181508008.636,"size":40418},{"id":"d4e496449407181eda3e90c343a7dc322166c1dc2af88541cd6fc31070b233280f93dd5ce478716478ffa8fa2c67599849b6cc2968b47fa199a3345ef654ee8c","href":"https://static.observableusercontent.com/files/d4e496449407181eda3e90c343a7dc322166c1dc2af88541cd6fc31070b233280f93dd5ce478716478ffa8fa2c67599849b6cc2968b47fa199a3345ef654ee8c","name":"cumulative_immigrants@1.csv","type":"text/csv","lastModified":1607390188127.709,"size":22282},{"id":"7141954e8cca23b5a59c398001aac38242168fa6e9d372a35ecd3cfd76cbdc3210dc29e62c942d481cc68f703735c025e60de3d9f1d535eacd985a0294add4ab","href":"https://static.observableusercontent.com/files/7141954e8cca23b5a59c398001aac38242168fa6e9d372a35ecd3cfd76cbdc3210dc29e62c942d481cc68f703735c025e60de3d9f1d535eacd985a0294add4ab","name":"people@1.csv","type":"text/csv","lastModified":1607389354235.57,"size":10624}] 2f:{"id":"2e02d409468dcb82","slug":"country-selection","title":"Selecting the country of interst and displaying the information","thumbnail":"984857b00996fa15657580305730d9d36529b241b2f3daab893be39d23c6eef2","access_level":"public","create_time":"$D2020-12-05T15:18:28.008Z","update_time":"$D2020-12-09T11:45:37.241Z","view_time":null,"first_public_time":"$D2020-12-05T15:18:43.863Z","fork":true,"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":1271,"publish_version":1271,"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,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Selecting the country of interst and displaying the information","cells":[{"id":0,"value":"md`# Selecting the country of interst and displaying the information\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1233,"value":"html`This is part of the final visualization project, below is a link to the rest of the pages
\nmain notebook (index.html)\n
\nThe Lebanese diaspora map\n
\nThe refugees in Lebanon map\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":840,"value":"viewof selected_country = select({title: '', options:[\"Argentina\",\"Australia\",\"Austria\",\"Belarus\",\"Belgium\",\"Brazil\",\"Bulgaria\",\"Canada\",\"Cyprus\",\"Denmark\",\"Ecuador\",\"Finland\",\"France\",\"Germany\",\"Greece\",\"Hungary\",\"Ireland\",\"Israel\",\"Italy\",\"Lithunia\",\"Mexico\",\"Netherlands\",\"New Zealand\",\"Norway\",\"Poland\",\"Romania\",\"Russia\",\"Spain\",\"Sweden\",\"Switzerland\",\"Syria\",\"Ukraine\",\"UK\",\"USA\",\"Venezuela\"], value:\"Argentina\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":632,"value":"viewof sorting = select({title: '', options:[\"Profession\",\"Time\"], value:\"Time\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":698,"value":"getTooltipContent = function(d) {\nreturn `${d.civilization}\n
\n${d.Profeession} - ${d.Country} \n
\n${formatDate(d.start)} - ${formatDate(d.end)}\n`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":"height = 650","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":62,"value":"\n y= d3.scaleBand()\n .domain(d3.range(data.length))\n .range([0,height - margin.bottom - margin.top])\n .padding(0.2)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"x = d3.scaleLinear()\n .domain([d3.min(data, d => d.start), d3.max(data, d => d.end)])\n .range([0, width - margin.left - margin.right])\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"margin = ({top: 30, right: 150, bottom: 30, left: 30})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":504,"value":"createTooltip = function(el) {\n \n el\n .style(\"position\", \"absolute\")\n .style(\"pointer-events\", \"none\")\n .style(\"top\", 0)\n .style(\"opacity\", 0)\n .style(\"background\", \"white\")\n .style(\"border-radius\", \"5px\")\n .style(\"box-shadow\", \"0 0 10px rgba(0,0,0,.25)\")\n .style(\"padding\", \"10px\")\n .style(\"line-height\", \"1.3\")\n .style(\"font\", \"15px sans-serif\")\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":308,"value":"getRect = function(d){\n const el = d3.select(this);\n const sx = x(d.start);\n const w = x(d.end) - x(d.start);\n const isLabelRight =(sx > width/2 ? sx+w < width : sx-w>0);\n\n el.style(\"cursor\", \"pointer\")\n\n el\n .append(\"rect\")\n .attr(\"x\", sx)\n .attr(\"height\", y.bandwidth())\n .attr(\"width\", w)\n .attr(\"fill\", d.color);\n\n el\n .append(\"text\")\n .text(d.civilization)\n .attr(\"x\",isLabelRight ? sx-5 : sx+w+5)\n .attr(\"y\", 2.5)\n .attr(\"fill\", \"black\")\n .style(\"text-anchor\", isLabelRight ? \"end\" : \"start\")\n .style(\"dominant-baseline\", \"hanging\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":76,"value":"dataByTimeline = d3.nest().key(d=>d.Profeession).entries(data);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":319,"value":"dataByRegion = d3.nest().key(d=>d.Country).entries(data);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":875,"value":"dataByProfession=d3.nest().key(d=>d.Profeession).entries(data);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":124,"value":"axisBottom = d3.axisBottom(x)\n .tickPadding(2)\n .tickFormat(formatDate)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":271,"value":"axisTop = d3.axisTop(x)\n .tickPadding(2)\n .tickFormat(formatDate)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":272,"value":"formatDate = d=> d < 0 ? `${-d}BC` : `${d}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"d3 = require(\"d3@5\",\"d3-array@2\", \"d3-color@2\", \"d3-scale-chromatic@2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"csv =d3.csvParse(await FileAttachment(\"people@1.csv\").text())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":194,"value":"data = csv.map(d=>{\n if(d.Country==selected_country)\nreturn {\n ...d,\n start: +d.start,\n end: +d.end\n}\n}).sort((a,b)=> a.start-b.start).filter(function( d ) {\n return d !== undefined;\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":43,"value":"professions = d3.nest().key(d=>d.Profeession).entries(data).map(d=>d.key)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":64,"value":"timelines = dataByTimeline.map(d=>d.key)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":45,"value":"color = d3.scaleOrdinal([\"#b5d4e9\",\"#93c3df\",\"#6daed5\",\"#4b97c9\",\"#307ebc\",\"#1764aa\",\"#094a90\",\"#08306b\"]).domain(professions)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":901,"value":"progress=(data_line[data_line.length-1].count/TOTAL_NUMBER_OF_IMMIGRANTS*100).toFixed(1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1133,"value":"tecc =data_line[data_line.length-1].count","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":903,"value":"nbArcs=100","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":905,"value":"innerRadius = 220","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":907,"value":"outerRadius = 250","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":909,"value":"arc = {\n return d3.arc().innerRadius(innerRadius).outerRadius(outerRadius);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":910,"value":"pie = d3.pie()\n .padAngle(0)\n .sort(null)\n .value(d => d.value)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1243,"value":"donut_height=150","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":912,"value":"colorScale = d3.scaleSequential(d3.interpolateBlues).domain([0, nbArcs]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":914,"value":"data_bar = d3.range(nbArcs).map((d,i)=>({uid:DOM.uid(), value:(progress/nbArcs)})).concat({uid:DOM.uid(), value: 100-progress, color:\"none\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":917,"value":"arcs = pie(data_bar);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":919,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":961,"value":"actual_number_in_country=html`${data_line[data_line.length-1].count} out of the ${TOTAL_NUMBER_OF_IMMIGRANTS} Lebanese Immigrants registered in the UN resided in ${selected_country}.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":975,"value":"d3_line = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1047,"value":"csv_2=d3.csvParse(await FileAttachment(\"cumulative_immigrants@1.csv\").text())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":923,"value":"data_line = csv_2.map(d =>{\nif(d.country == selected_country)\n return d\n\n}).filter(function( d ) {\n return d !== undefined;\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":928,"value":"class Tooltip {\n constructor() {\n this._count = svg``;\n this.node = svg`\n \n ${this._count}\n \n`;\n }\n show(d) {\n this.node.removeAttribute(\"display\");\n this.node.setAttribute(\"transform\", `translate(${x_line(d.year)},${y_line(d.count)})`);\n this._count.textContent = (d.count);\n }\n hide() {\n this.node.setAttribute(\"display\", \"none\");\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":930,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":932,"value":"width_line=450","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":942,"value":"height_line = 150","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":944,"value":"line = d3_line.line()\n .defined(d => !isNaN(d.count))\n .x(d => x_line(d.year))\n .y(d => y_line(d.count))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":945,"value":"x_line = d3_line.scaleLinear()\n .domain([d3.min(data_line,d =>d.year), d3.max(data_line, d => d.year)])\n .range([margin_line.left, width_line - margin_line.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":951,"value":"y_line = d3_line.scaleLinear()\n .domain( [0,data_line[data_line.length-1].count])\n .range([height_line - margin_line.bottom, margin_line.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":954,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height_line - margin_line.bottom})`)\n .call(d3_line.axisBottom(x_line).ticks(width_line / 50).tickSizeOuter(0).tickFormat(d3_line.format(\"d\")))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":955,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin_line.left},0)`)\n .call(d3_line.axisLeft(y_line).ticks(0))\n // .call(d3.axisLeft(y).ticks(height / 20))\n // .call(g => g.select(\".domain\").remove())\n ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":996,"value":"margin_line = ({top: 20, right: 30, bottom: 30, left: 40})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1040,"value":"TOTAL_NUMBER_OF_IMMIGRANTS=743191","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":338,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":967,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"