2d:null 2e:["$","title",null,{"children":"Makeover monday week 28 final | Joakim Dalen | Observable"}] 33:T2831,chart={ ///Creating the canvas const svg=d3.select(DOM.svg(plot.width+margin.left+margin.right, plot.height+margin.top+margin.bottom)); ///Creating background const background = svg.append('rect') .attr("width", "100%") .attr("height", "100%") .style("fill", "#F5F5F5") .attr('opacity',1) .attr('class','background') const g = svg .append('g') .attr('transform', `translate(${margin.left }, ${margin.top})`) //adding the lines const countries = g.selectAll('.countries') .data(nest) .enter().append('g') .attr('class', 'countries2'); svg.call(tip); countries.selectAll('rect') .data(function(d) { return d.values;}) .enter() .append("rect") .attr("x", function(d,i){return d.col*(mulwidth+mulXPad)+xScale(d.Year)}) .attr("y", function(d,i){return d.row*mulYPad-yScale(d.Value)}) .attr('width',function(d,i){return xScale.bandwidth()-0.2}) .attr('height',function(d,i){return yScale(d.Value)}) .style('fill','#4C5371') .attr('class','rect') .on('mouseover', function(d) { // show the tooltip on mouse over tip.show(d, this); // when the bar is mouse-overed, we slightly decrease opacity of the bar. d3.select(this).style('opacity', 0.7); }) .on('mouseout', function(d) { // hide the tooltip on mouse out tip.hide(); d3.select(this).style('opacity', 1) }); svg.selectAll('text') .data(data.filter(function(d){return d.Year ==2018})) .enter() .append('text') .attr("class","label") .text(function(d,i) {if (d.Year==2018){return d.Country} else{return 0}}) .attr("x", function(d,i){return margin.left+ d.col*(mulwidth+mulXPad)+xScale.bandwidth()*5}) .attr("y", function(d,i){return margin.top+d.row*mulYPad+20}) .style('fill','grey') .style("font", "14px 'Calibri'") .style("text-anchor", "middle") ///calling xAxis //calling x-axis var xAxisElements= svg.append("g") .append("g") .call(xAxis) .attr('class','xAxis') .attr('transform', 'translate('+margin.left+','+(margin.top-mulHeight+20)+')') .attr('text-anchor',"middle") .style("font", "10px 'Verdana' ") .style("font-weight", "200") .style('color','darkgrey') .style('stroke-width','0.3') svg.append("text") .attr("class", "Overskrift") .attr("transform", "translate("+ (margin.left+mulwidth/2)+","+(margin.top-mulHeight+0)+")") .attr('text-anchor','middle') .text("Year") .style("fill", "darkgrey") .style("color", "darkgrey") .style("font", "14px 'Calibri'") //calling y-axis var yAxisElements= svg.append("g") .append("g") .call(yAxis2) .attr('class','yAxis2') .attr('transform', 'translate('+(margin.left-10+plot.width)+','+(margin.top-mulHeight)+')') .style("font", "10px 'Verdana' ") .style("font-weight", "200") .style('color','darkgrey') .style('stroke-width','0.3') yAxisElements.selectAll(".domain").remove() svg.append("text") .attr("class", "yTitle") .attr("transform", "translate("+ (margin.left-85)+","+(margin.top-130)+") rotate(270)") .attr('text-anchor','middle') .text("Number of Asylum Seekers") .style("fill", "darkgrey") .style("color", "darkgrey") .style("font", "14px 'Calibri'") const headerbg = svg.append('rect') .attr("width", plot.width-(mulwidth+mulXPad )) .attr("height", margin.top-200) .attr("x", margin.left+mulwidth+mulXPad/2) .attr("y", 100) .style("fill", "#F5F5F5") .attr('opacity',1) .attr("class", "hb1") const headerbg2 = svg.append('rect') .attr("width", plot.width-(mulwidth+mulXPad )) .attr("height", margin.top-50) .attr("x", margin.left+(mulwidth+mulXPad)*4-(mulXPad/2)) .style("fill", "#F5F5F5") .attr('opacity',1) .attr("class", "hb2") //Main title svg.append("text") .attr("class", "Overskrift") .attr("transform", "translate("+ (margin.left+140) +","+(100)+")") .text("Asylum Seekers in Europe During the Last Decade") .style("font", "29px 'Calibri'") .style("opacity", "1") .style("fill", '#505050') .style("font-weight","bold") .attr('text-anchor','start') //Writing the depressive context svg.append("text") .attr("class", "Overskrift") .attr("transform", "translate("+ (margin.left+140) +","+(135)+")") .text(' The "European Migrant Crisis" began in 2015. In this period Europe had an enormous and') .style("font", "15px 'Calibri'") .style("fill", 'gray') .style('text-anchor','start') .attr('opacity',1) .attr('class','legend') .append("tspan") .append("tspan") .attr("x", 0) .attr("y", 17) .text("unprecedented wave of both war refugees from the Syrian Civil War and economic migrants from ") .append("tspan") .attr("x", 0) .attr("y", 34) .text("the Near East and Africa.") svg.append("text") .attr("class", "Overskrift") .attr("transform", "translate("+ (margin.left+140) +","+(195)+")") .text('In absolute numbers, Germany received the majority of the applications. However, if you consider') .style("font", "15px 'Calibri'") .style("fill", 'gray') .style('text-anchor','start') .attr('opacity',1) .attr('class','legend') .append("tspan") .append("tspan") .attr("x", 0) .attr("y", 17) .text("the population of the country, Sweden recieved the highest amount of application relative to ") .append("tspan") .attr("x", 0) .attr("y", 34) .text("its population .") svg.append("text") .attr("class", "Overskrift") .attr("transform", "translate("+ (margin.left+140) +","+(255)+")") .text('In both Germany and Sweden, as well as other countries experiencing similar increase in') .style("font", "15px 'Calibri'") .style("fill", 'gray') .style('text-anchor','start') .attr('opacity',1) .attr('class','legend') .append("tspan") .append("tspan") .attr("x", 0) .attr("y", 17) .text("applications, this has lead to increasingly strict policies for granting asylum.") //calling y-axis var yAxisElements= svg.append("g") .append("g") .call(yAxis3) .attr('class','yAxis3') .attr('transform', 'translate('+(margin.left-10+plot.width)+','+(margin.top+1*mulYPad-30)+')') .style("font", "10px 'Verdana' ") .style("font-weight", "200") .style('color','darkgrey') .style('stroke-width','0.3') yAxisElements.selectAll(".domain").remove() ///Creating footer part 1 svg.append("text") .attr("transform", "translate("+(margin.left+plot.width/2)+","+(plot.height+margin.top+margin.bottom-10)+")") .text("Design: @JoakimDalen || Source: Eurostat") .style("font", "10px 'Segoe UI'") .attr('text-anchor','middle') .style("fill", "#A9A9A9") svg.append("text") .attr("transform", "translate("+ (margin.left+140) +","+(350)+")") .text('Absolute numbers') .style("font", "16px 'Calibri'") .style('fill',' #383838') .style("font-weight", "600") svg.append("text") .attr("class", "lab") .attr("id", "lab0") .attr("transform", "translate("+ (margin.left+160) +","+(370)+")") .text('Total Applications') .style("font", "16px 'Calibri'") .style("font-weight","bold") .on('click',Total) .on("mouseover", function(d) { d3.select(this).style("cursor", "pointer"); }, "mouseout", function(d) { d3.select(this).style("cursor", "default"); } ) .style('fill','#4C5371') svg.append("text") .attr("class", "lab") .attr("id", "lab1") .attr("transform", "translate("+ (margin.left+160) +","+(390)+")") .text('Accepted Applications') .style("font", "16px 'Calibri'") .style('fill','grey') .on('click',Accepted) .on("mouseover", function(d) { d3.select(this).style("cursor", "pointer"); }, "mouseout", function(d) { d3.select(this).style("cursor", "default"); } ) svg.append("text") .attr("class", "lab") .attr("id", "lab2") .style('fill','grey') .attr("transform", "translate("+ (margin.left+160) +","+(410)+")") .text('Rejected Applications') .style("font", "16px 'Calibri'") .on('click',Rejected) .on("mouseover", function(d) { d3.select(this).style("cursor", "pointer");}, "mouseout", function(d) { d3.select(this).style("cursor", "default"); } ) svg.append("text") .attr("transform", "translate("+ (margin.left+510) +","+(350)+")") .text('Per Million Capita') .style("font", "16px 'Calibri'") .style('fill',' #383838') .style("font-weight", "600") svg.append("text") .attr("class", "lab") .attr("id", "lab3") .style('fill','grey') .attr("transform", "translate("+ (margin.left+530) +","+(370)+")") .text('Total Applications') .style("font", "16px 'Calibri'") .on('click',RTotal) .on("mouseover", function(d) { d3.select(this).style("cursor", "pointer");}, "mouseout", function(d) { d3.select(this).style("cursor", "default"); } ) svg.append("text") .attr("class", "lab") .attr("id", "lab4") .style('fill','grey') .attr("transform", "translate("+ (margin.left+530) +","+(390)+")") .text('Accepted Applications') .style("font", "16px 'Calibri'") .on('click',RAccepted) .on("mouseover", function(d) { d3.select(this).style("cursor", "pointer");}, "mouseout", function(d) { d3.select(this).style("cursor", "default"); } ) svg.append("text") .attr("class", "lab") .attr("id", "lab5") .style('fill','grey') .attr("transform", "translate("+ (margin.left+530) +","+(410)+")") .text('Rejected Applications') .style("font", "16px 'Calibri'") .on('click',RRejected) .on("mouseover", function(d) { d3.select(this).style("cursor", "pointer");}, "mouseout", function(d) { d3.select(this).style("cursor", "default"); } ) return svg.node(); }34:T6b1,Total =function() { d3.selectAll(".rect") .data(data) .transition() .duration(500) .ease(d3.easeLinear) .attr('height',function(d,i){return yScale(d.Value)}) .attr("y", function(d,i){return d.row*mulYPad-yScale(d.Value)}) .style('fill',"#4C5371") d3.selectAll(".lab") .style('fill','grey') .style("font-weight",'normal') d3.select('#lab0') .style('fill','4C5371') .style("font-weight",'bold'); d3.select('.hb1') .transition() .duration(500) .attr("height", margin.top-200) d3.select('.hb2') .transition() .duration(500) .attr("height", margin.top-50) d3.select('.yAxis2') .remove() var yAxisElements=d3.select("svg") .append("g") .call(yAxis2) .attr('class','yAxis2') .attr('transform', 'translate('+(margin.left-10+plot.width)+','+(margin.top-mulHeight)+')') .style("font", "10px 'Verdana' ") .style("font-weight", "200") .style('color','darkgrey') .style('stroke-width','0.3') .lower() yAxisElements.selectAll(".domain").remove() d3.select('.background') .lower() d3.select('.yAxis3') .remove() //calling y-axis var yAxisElements=d3.select("svg") .append("g") .call(yAxis3) .attr('class','yAxis3') .attr('transform', 'translate('+(margin.left-10+plot.width)+','+(margin.top+1*mulYPad-30)+')') .style("font", "10px 'Verdana' ") .style("font-weight", "200") .style('color','darkgrey') .style('stroke-width','0.3') yAxisElements.selectAll(".domain").remove() d3.select('.yTitle') .transition() .duration(500) .text("Number of Asylum Seekers") } 35:T6b7,Accepted =function() { d3.selectAll(".rect") .data(data2) .transition() .duration(500) .ease(d3.easeLinear) .attr('height',function(d,i){return yScale(d.Value)}) .attr("y", function(d,i){return d.row*mulYPad-yScale(d.Value)}) .style('fill',"425F67") d3.selectAll(".lab") .style('fill','grey') .style("font-weight",'normal') d3.select('#lab1') .style('fill','425F67') .style("font-weight",'bold'); d3.select('.hb1') .transition() .duration(500) .attr("height", margin.top-200) d3.select('.hb2') .transition() .duration(500) .attr("height", margin.top-50) d3.select('.yAxis2') .remove() var yAxisElements=d3.select("svg") .append("g") .call(yAxis2) .attr('class','yAxis2') .attr('transform', 'translate('+(margin.left-10+plot.width)+','+(margin.top-mulHeight)+')') .style("font", "10px 'Verdana' ") .style("font-weight", "200") .style('color','darkgrey') .style('stroke-width','0.3') .lower() yAxisElements.selectAll(".domain").remove() d3.select('.background') .lower() d3.select('.yAxis3') .remove() //calling y-axis var yAxisElements=d3.select("svg") .append("g") .call(yAxis3) .attr('class','yAxis3') .attr('transform', 'translate('+(margin.left-10+plot.width)+','+(margin.top+1*mulYPad-30)+')') .style("font", "10px 'Verdana' ") .style("font-weight", "200") .style('color','darkgrey') .style('stroke-width','0.3') yAxisElements.selectAll(".domain").remove() d3.select('.yTitle') .transition() .duration(500) .text("Number of Asylum Seekers") } 36:T5e4,Rejected =function() { d3.selectAll(".rect") .data(data3) .transition() .duration(500) .ease(d3.easeLinear) .attr('height',function(d,i){return yScale(d.Value)}) .attr("y", function(d,i){return d.row*mulYPad-yScale(d.Value)}) .style('fill',"#A66B68") d3.selectAll(".lab") .style('fill','grey') .style("font-weight",'normal') d3.select('#lab2') .style('fill','A66B68') .style("font-weight",'bold'); d3.select('.yAxis2') .remove() var yAxisElements=d3.select("svg") .append("g") .call(yAxis2) .attr('class','yAxis2') .attr('transform', 'translate('+(margin.left-10+plot.width)+','+(margin.top-mulHeight)+')') .style("font", "10px 'Verdana' ") .style("font-weight", "200") .style('color','darkgrey') .style('stroke-width','0.3') .lower() yAxisElements.selectAll(".domain").remove() d3.select('.background') .lower() d3.select('.yAxis3') .remove() //calling y-axis var yAxisElements=d3.select("svg") .append("g") .call(yAxis3) .attr('class','yAxis3') .attr('transform', 'translate('+(margin.left-10+plot.width)+','+(margin.top+1*mulYPad-30)+')') .style("font", "10px 'Verdana' ") .style("font-weight", "200") .style('color','darkgrey') .style('stroke-width','0.3') yAxisElements.selectAll(".domain").remove() d3.select('.yTitle') .transition() .duration(500) .text("Number of Asylum Seekers") } 37:T6a6,RTotal =function() { d3.selectAll(".rect") .data(datar) .transition() .duration(500) .ease(d3.easeLinear) .attr('height',function(d,i){return yScaler(d.Value)}) .attr("y", function(d,i){return d.row*mulYPad-yScaler(d.Value)}) .style('fill',"#4C5371") d3.selectAll(".lab") .style('fill','grey') .style("font-weight",'normal') d3.select('#lab3') .style('fill','4C5371') .style("font-weight",'bold'); d3.select('.hb1') .transition() .duration(500) .attr("height", margin.top-400) d3.select('.hb2') .transition() .duration(500) .attr("height", margin.top-400) d3.select('.yAxis2') .remove() var yAxisElements=d3.select("svg") .append("g") .call(yAxis2r) .attr('class','yAxis2') .attr('transform', 'translate('+(margin.left-10+plot.width)+','+(margin.top-mulHeight)+')') .style("font", "10px 'Verdana' ") .style("font-weight", "200") .style('color','darkgrey') .style('stroke-width','0.3') .lower() yAxisElements.selectAll(".domain").remove() d3.select('.background') .lower() d3.select('.yAxis3') .remove() var yAxisElements= d3.select("svg") .append("g") .call(yAxis3r) .attr('class','yAxis3') .attr('transform', 'translate('+(margin.left-10+plot.width)+','+(margin.top-2*mulYPad-90)+')') .style("font", "10px 'Verdana' ") .style("font-weight", "200") .style('color','darkgrey') .style('stroke-width','0.3') yAxisElements.selectAll(".domain").remove() d3.select('.yTitle') .transition() .duration(500) .text("Asylum Seekers Per Million Capita") } 38:T6a9,RAccepted =function() { d3.selectAll(".rect") .data(data2r) .transition() .duration(500) .ease(d3.easeLinear) .attr('height',function(d,i){return yScaler(d.Value)}) .attr("y", function(d,i){return d.row*mulYPad-yScaler(d.Value)}) .style('fill',"#425F67") d3.selectAll(".lab") .style('fill','grey') .style("font-weight",'normal') d3.select('#lab4') .style('fill','425F67') .style("font-weight",'bold'); d3.select('.hb1') .transition() .duration(500) .attr("height", margin.top-400) d3.select('.hb2') .transition() .duration(500) .attr("height", margin.top-400) d3.select('.yAxis2') .remove() var yAxisElements=d3.select("svg") .append("g") .call(yAxis2r) .attr('class','yAxis2') .attr('transform', 'translate('+(margin.left-10+plot.width)+','+(margin.top-mulHeight)+')') .style("font", "10px 'Verdana' ") .style("font-weight", "200") .style('color','darkgrey') .style('stroke-width','0.3') .lower() yAxisElements.selectAll(".domain").remove() d3.select('.background') .lower() d3.select('.yAxis3') .remove() var yAxisElements= d3.select("svg") .append("g") .call(yAxis3r) .attr('class','yAxis3') .attr('transform', 'translate('+(margin.left-10+plot.width)+','+(margin.top-2*mulYPad-90)+')') .style("font", "10px 'Verdana' ") .style("font-weight", "200") .style('color','darkgrey') .style('stroke-width','0.3') yAxisElements.selectAll(".domain").remove() d3.select('.yTitle') .transition() .duration(500) .text("Asylum Seekers Per Million Capita") } 39:T6a6,RRejected =function() { d3.selectAll(".rect") .data(data3r) .transition() .duration(500) .ease(d3.easeLinear) .attr('height',function(d,i){return yScaler(d.Value)}) .attr("y", function(d,i){return d.row*mulYPad-yScaler(d.Value)}) .style('fill',"#A66B68") d3.selectAll(".lab") .style('fill','grey') .style("font-weight",'normal') d3.select('#lab5') .style('fill','A66B68') .style("font-weight",'bold'); d3.select('.hb1') .transition() .duration(500) .attr("height", margin.top-400) d3.select('.hb2') .transition() .duration(500) .attr("height", margin.top-400) d3.select('.yAxis2') .remove() var yAxisElements=d3.select("svg") .append("g") .call(yAxis2r) .attr('class','yAxis2') .attr('transform', 'translate('+(margin.left-10+plot.width)+','+(margin.top-mulHeight)+')') .style("font", "10px 'Verdana' ") .style("font-weight", "200") .style('color','darkgrey') .style('stroke-width','0.3') .lower() yAxisElements.selectAll(".domain").remove() d3.select('.background') .lower() d3.select('.yAxis3') .remove() var yAxisElements= d3.select("svg") .append("g") .call(yAxis3r) .attr('class','yAxis3') .attr('transform', 'translate('+(margin.left-10+plot.width)+','+(margin.top-2*mulYPad-90)+')') .style("font", "10px 'Verdana' ") .style("font-weight", "200") .style('color','darkgrey') .style('stroke-width','0.3') yAxisElements.selectAll(".domain").remove() d3.select('.yTitle') .transition() .duration(500) .text("Asylum Seekers Per Million Capita") } 3a:[] 31:{"id":"0fd064190aed6a5b","slug":"makeover-monday-week-28-final","title":"Makeover monday week 28 final","thumbnail":"df2b77bcb059b7847225efde758571f440f061abe80dbfea6adc2a48288fb385","access_level":"public","create_time":"$D2019-07-15T18:25:16.887Z","update_time":"$D2020-01-17T13:57:41.208Z","view_time":null,"first_public_time":"$D2019-07-15T21:09:43.753Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"45fbd05608299361","login":"joakimdalen","name":"Joakim Dalen","avatar_url":"https://avatars-next.observableusercontent.com/582b1b04bfe67a07a14fb1b63d4b7f6c0bf1ffa608460c432429b7a3fdda80b3","tier":"starter_2024"},"version":4249,"publish_version":4249,"role":null,"authored":false,"authors":[{"type":"individual","id":"dc05f11c6819093b","login":"joakimdalen","name":"Joakim Dalen","avatar_url":"https://avatars-next.observableusercontent.com/582b1b04bfe67a07a14fb1b63d4b7f6c0bf1ffa608460c432429b7a3fdda80b3","tier":null}],"members":[{"type":"individual","id":"dc05f11c6819093b","login":"joakimdalen","name":"Joakim Dalen","avatar_url":"https://avatars-next.observableusercontent.com/582b1b04bfe67a07a14fb1b63d4b7f6c0bf1ffa608460c432429b7a3fdda80b3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Makeover monday week 28 final","cells":[{"id":0,"value":"md`# Makeover monday week 28 final`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3313,"value":"\nfullscreen = {\n const button = html`