2d:null 2e:["$","title",null,{"children":"Makeover Monday week 2/2020 | Joakim Dalen | Observable"}] 33:T362c,chart={ const svg=d3.select(DOM.svg(plot.width+margin.left+margin.right, plot.height+margin.top+margin.bottom)); //Embedding font//< //write api for font in browser //in this case fromFrom https://fonts.googleapis.com/css?family=Alatsi, //pick the url under `/* latin */` svg .call(addWebFont, 'Suez One', 'https://fonts.gstatic.com/s/bebasneue/v1/JTUSjIg69CK48gW7PXoo9Wlhyw.woff2') const defs = svg.append("defs") //Create hatched pattern for pink pattern const hatch_pattern_1 = defs .append("pattern") .attr("id", "hatch-1") .attr("width", 2.2) .attr("height", 2.2) .attr("patternTransform", `rotate(45)`) .attr("patternUnits","userSpaceOnUse") //used to make the pattern independent of location of circle //Add the actual pattern shape hatch_pattern_1.append("rect") .attr("width", 2.2/2) .attr("height", 2.2) .style("fill", "#d6d9d8") // create the linear gradient for the background var linearGradient = svg.append("defs") .append("linearGradient") .attr("id", "linear-gradient") .attr("gradientTransform", "rotate(90)") .attr("spreadMethod", "reflect "); linearGradient.append("stop") .attr("offset", "0%") .attr("stop-color", "#204135"); linearGradient.append("stop") .attr("offset", "100%") .attr("stop-color", "#37574c"); svg.append("rect") .attr("width", "100%") .attr("height", "100%") .style("fill", 'url(#linear-gradient') svg.append("text") .attr("class", "Overskrift") .attr("transform", "translate("+ (margin.left+plot.width/2) +","+(130)+")") .text("The US lags behind in banning harmful pesticides") .style("font", "35px 'Suez One'") .style("opacity", "1") .style("fill", '#d6d9d8') .style("font-weight","400") .attr('text-anchor','middle') .on('click',click1) svg.append("text") .attr("class", "header1") .attr("transform", "translate("+ (margin.left+plot.width/2) +","+(margin.top+plot.height-180)+")") .text("Currently there are 343 approved pesticides in US") .style("font", "17px 'Segoe UI'") .style("opacity", 1) .style("fill", '#d6d9d8') .style("font-weight","400") .attr('text-anchor','middle') svg.append("text") .attr("class", "header2") .attr("transform", "translate("+ (margin.left+plot.width/2) +","+(margin.top+plot.height-180)+")") .text("85 of these are banned in EU, Brasil and/or China") .style("font", "17px 'Segoe UI'") .style("opacity", 0) .style("fill", '#d6d9d8') .style("font-weight","400") .attr('text-anchor','middle') svg.append("text") .attr("class", "header3") .attr("transform", "translate("+ (margin.left+chartwidth+marginchart+chartwidth/2) +","+(margin.top+plot.height-250)+")") .text("Most of these are only banned by one of the ") .style("font", "16px 'Segoe UI'") .style("opacity", 0) .style("fill", '#d6d9d8') .style("font-weight","400") .attr('text-anchor','start') .append('tspan') .text("other agricultural producers, but 18 of them ") .attr('x',0) .attr('y',20) .append('tspan') .text("are banned by the EU, Brasil and China ") .attr('x',0) .attr('y',40) svg.append("text") .attr("class", "advance1") .attr("transform", "translate("+ ( margin.left+plot.width) +","+(margin.top+plot.height-30)+")") .text("Click to continue") .style("font", "18px 'Segoe UI'") .style("opacity", "1") .style("fill", '#d6d9d8') .style("font-weight","400") .attr('text-anchor','end') .on('click',click1) .on("mouseover", function(d) { d3.select(this).style("cursor", "pointer"); }, "mouseout", function(d) { d3.select(this).style("cursor", "default"); } ) svg.append("text") .attr("class", "advance2") .attr("transform", "translate("+ ( margin.left+plot.width) +","+(margin.top+plot.height-30)+")") .text("Click again") .style("font", "18px 'Segoe UI'") .style("opacity", "0") .style("fill", '#d6d9d8') .style("font-weight","400") .attr('text-anchor','end') .on('click',click2) .style("pointer-events", "none") .on("mouseover", function(d) { d3.select(this).style("cursor", "pointer"); }, "mouseout", function(d) { d3.select(this).style("cursor", "default"); } ) svg.append("text") .attr("class", "advance3") .attr("transform", "translate("+ ( margin.left+plot.width) +","+(margin.top+plot.height-30)+")") .text("Click once more") .style("font", "18px 'Segoe UI'") .style("opacity", "0") .style("fill", '#d6d9d8') .style("font-weight","400") .attr('text-anchor','end') .on('click',click3) .style("pointer-events", "none") .on("mouseover", function(d) { d3.select(this).style("cursor", "pointer"); }, "mouseout", function(d) { d3.select(this).style("cursor", "default"); } ) svg.append("text") .attr("class", "advance4") .attr("transform", "translate("+ ( margin.left+plot.width) +","+(margin.top+plot.height-30)+")") .text("Restart") .style("font", "18px 'Segoe UI'") .style("opacity", 0) .style("fill", '#d6d9d8') .style("font-weight","400") .attr('text-anchor','end') .on('click',click4) .style("pointer-events", "none") .on("mouseover", function(d) { d3.select(this).style("cursor", "pointer"); }, "mouseout", function(d) { d3.select(this).style("cursor", "default"); } ) svg.append('g') .selectAll('rect') .data(data) .enter() .append('rect') .attr('class','square') .attr('y', function(d) {return margin.top+ d.row*sqwidthi2-1}) .attr('x', function(d) {return margin.left+plot.width/4+d.rowranki2*sqwidthi2}) .attr("width",sqwidthi2-2) .attr("height",sqwidthi2-2) .style('stroke-width','0') .style('stroke','gray') .style('stroke-opacity','1') .style("opacity",1 ) .style('fill',function(d) {if (d.test==0){return '#d6d9d8'} else {return '#d6d9d8'}}) svg.append("text") .attr("class", "labels") .attr("transform", "translate("+ (margin.left+chartwidth/2) +","+(margin.top-30)+")") .text("Approved in EU,") .style("font", "14px 'Segoe UI'") .style("opacity", 1) .style("fill", '#6e857d') .style("font-weight","400") .attr('text-anchor','middle') .style("opacity",0 ) .append('tspan') .text("Brasil and China") .attr('x',0) .attr('y',15) svg.append("text") .attr("class", "labels") .attr("transform", "translate("+ (margin.left+chartwidth/2) +","+(margin.top+310 )+")") .text("258") .style("font", "14px 'Segoe UI'") .style("opacity", 1) .style("fill", '#6e857d') .style("font-weight","300") .attr('text-anchor','middle') .style("opacity",0 ) svg.append("text") .attr("class", "labels") .attr("transform", "translate("+ (margin.left+chartwidth+marginchart+chartwidth/2) +","+(margin.top-30)+")") .text("Banned by one") .style("font", "14px 'Segoe UI'") .style("opacity", 1) .style("fill", '#d6d9d8') .style("font-weight","300") .attr('text-anchor','middle') .style("opacity",0 ) .append('tspan') .text("of the producers") .attr('x',0) .attr('y',15) svg.append("text") .attr("class", "labels") .attr("transform", "translate("+ (margin.left+chartwidth+marginchart+chartwidth/2) +","+(margin.top+73)+")") .text("52") .style("font", "14px 'Segoe UI'") .style("opacity", 1) .style("fill", '#d6d9d8') .style("font-weight","300") .attr('text-anchor','middle') .style("opacity",0 ) svg.append("text") .attr("class", "labels") .attr("transform", "translate("+ (margin.left+chartwidth*2+marginchart*2+chartwidth/2) +","+(margin.top-30)+")") .text("Banned by two") .style("font", "14px 'Segoe UI'") .style("opacity", 1) .style("fill", '#d6d9d8') .style("font-weight","300") .attr('text-anchor','middle') .style("opacity",0 ) .append('tspan') .text("of the producers") .attr('x',0) .attr('y',15) svg.append("text") .attr("class", "labels") .attr("transform", "translate("+ (margin.left+chartwidth*2+marginchart*2+chartwidth/2) +","+(margin.top+35)+")") .text("14") .style("font", "14px 'Segoe UI'") .style("opacity", 1) .style("fill", '#d6d9d8') .style("font-weight","300") .attr('text-anchor','middle') .style("opacity",0 ) svg.append("text") .attr("class", "labels") .attr("transform", "translate("+ (margin.left+chartwidth*3+marginchart*3+chartwidth/2) +","+(margin.top-30)+")") .text("Banned by three") .style("font", "14px 'Segoe UI'") .style("opacity", 1) .style("fill", '#d6d9d8') .style("font-weight","300") .attr('text-anchor','middle') .style("opacity",0 ) .append('tspan') .text("of the producers") .attr('x',0) .attr('y',15) svg.append("text") .attr("class", "labels") .attr("transform", "translate("+ (margin.left+chartwidth*3+marginchart*3+chartwidth/2) +","+(margin.top+35)+")") .text("18") .style("font", "14px 'Segoe UI'") .style("opacity", 1) .style("fill", '#d6d9d8') .style("font-weight","300") .attr('text-anchor','middle') .style("opacity",0 ) svg.append("text") .attr("class", "yaxistitle") .attr("transform", "translate("+ (margin.left) +","+(margin.top+plot.height/2)+")") .text("Millions of ") .style("font", "14px 'Segoe UI'") .style("opacity", 1) .style("fill", '#a7b2af') .style("font-weight","400") .attr('text-anchor','start') .style("opacity",0 ) .append('tspan') .text('lbs') .style("font-weight","600") .style('fill','#d6d9d8') .append('tspan') .style("fill", 'a7b2af') .style("font-weight","400") .text("Pesticides Used in") .attr('x',0) .attr('y',15) .append('tspan') .text("US. Agriculture") .attr('x',0) .attr('y',30) svg.append("text") .attr("class", "labbar") .attr("transform", "translate("+ (margin.left+plot.width/2-100)+","+(margin.top+plot.height-plot.height/4+20)+")") .text("Approved in EU,") .style("font", "14px 'Segoe UI'") .style("opacity", 0) .style("fill", '#a7b2af') .style("font-weight","400") .attr('text-anchor','middle') .append('tspan') .text("Brasil and China") .attr('x',0) .attr('y',15) svg.append("text") .attr("class", "labbar") .attr("transform", "translate("+ (margin.left+plot.width/2+50)+","+(margin.top+plot.height-plot.height/4+20)+")") .text("Banned by atleast") .style("font", "14px 'Segoe UI'") .style("opacity", 0) .style("fill", '#d6d9d8') .style("font-weight","300") .attr('text-anchor','middle') .append('tspan') .text("one of the producers") .attr('x',0) .attr('y',15) svg.append('g') .selectAll('.text') .data(data2) .enter() .append("text") .attr("class", "labbar") .attr('x',function(d){return margin.left+150+xScale(d.Category)+xScale.bandwidth()/2-26}) .attr('y',function(d){return margin.left+plot.height-yScale(d.Percentage)-10}) .text(function(d){return d.Pounds+" lbs"}) .style("font", "16px 'Segoe UI'") .style("opacity",0) .style("fill", function(d){ if (d.Category=='US'){return '#6e857d'} else {return '#d6d9d8'}}) .style("font-weight", function(d){ if (d.Category=='US'){return '400'} else {return '400'}}) .attr('text-anchor','middle') svg.append("text") .attr("class", "header4") .attr("transform", "translate("+ (margin.left+300) +","+(margin.top-0)+")") .text("The pesticides banned in the other ") .style("font", "15.5px 'Segoe UI'") .style("opacity",0) .style("fill", '#d6d9d8') .style("font-weight","400") .attr('text-anchor','start') .append('tspan') .text("countries are commonly used in the US. ") .attr('x',0) .attr('y',18) svg.append("text") .attr("class", "header4") .attr("transform", "translate("+ (margin.left+plot.width-300) +","+(margin.top+plot.height-360)+")") .text("A total 328 million lbs of these ") .style("font", "15.5px 'Segoe UI'") .style("opacity",0) .style("fill", '#d6d9d8') .style("font-weight","400") .attr('text-anchor','start') .append('tspan') .text("pesticides were used in the US in 2016. ") .attr('x',0) .attr('y',18) .append('tspan') .text(" This is about 27 percent of the US's ") .attr('x',0) .attr('y',36) .append('tspan') .text("total usage.") .attr('x',0) .attr('y',54) ///Creating footer part 1 svg.append("text") .attr("transform", "translate("+(margin.left+plot.width+margin.right-110)+","+(plot.height+margin.top+margin.bottom-10)+")") .text("Design: @JoakimDalen || Color inspiration: Ludovic Tavernier || Data Source: https://ehjournal.biomedcentral.com/articles/10.1186/s12940-019-0488-0 ") .style("font", "11px 'Segoe UI'") .attr('text-anchor','end') .style("fill", " #a7b2af") .style("opacity",0.7) return svg.node(); } 34:T63d,function click2(elemData) { d3.select('svg') .selectAll('.square') .transition()//Set transition .delay(0) .duration(1500) .attr('y', function(d) {return margin.top+ d.grouprow*sqwidth-1}) .attr('x', function(d) {return margin.left+(d.test*(chartwidth+marginchart)+d.rowrank*sqwidth)}) .attr("width",sqwidth-2) .attr("height",sqwidth-2) .transition()//Set transition .delay(0) .duration(0) .style('fill',function(d) {if (d.test==0){return '#6e857d'} if (d.test==1 & d.grouprow<=3|(d.test==1 & d.grouprow==4 & d.rowrank<=3)|d.test==3){return '6e857d'} else {return '6e857d'}}) .transition()//Set transition d3.select('svg') .selectAll('.labels') .transition()//Set transition .delay(1500) .duration(200) .style('opacity',1) d3.select('svg') .selectAll('.header2') .transition()//Set transition .delay(0) .duration(300) .style("opacity", 0) d3.select('svg') .selectAll('.header3') .transition()//Set transition .delay(1300) .duration(300) .style("opacity", 1) d3.select('svg') .select('.advance2') .transition()//Set transition .delay(0) .duration(200) .style("opacity", 0) .style("pointer-events", "none") d3.select('svg') .select('.advance3') .transition()//Set transition .delay(0) .duration(200) .style("opacity", 1) .style("pointer-events", "all") }35:Ta6f,function click3(elemData) { d3.select('svg') .selectAll('.square') .transition()//Set transition .delay(0) .duration(600) .attr('y', function(d) {if (d.test==0) {return margin.top-plot.height/4+yScale(27.3)} else{return margin.top-plot.height/4+yScale(72.7)}} ) .attr('x', function(d) {if (d.test==0) {return margin.left+plot.width/4+xScale("US")} {return margin.left+plot.width/4+xScale("Banned in at Least 1")}}) .attr("width",sqwidth-2) .attr("height",sqwidth-2) .style('fill',function(d) {if (d.test==0){return '#6e857d'} else {return '#d6d9d8'}}) .transition()//Set transition .delay(500) .duration(0) .attr('opacity',1) .attr("height",function(d) {return yScale(d.Percentage)}) .attr("width",100) d3.select("svg") .selectAll('.rect') .data(data2) .enter() .append('rect') .attr('y', function(d) {return margin.top+plot.height-plot.height/4-yScale(d.Percentage)}) .attr('x', function(d) {return margin.left+plot.width/4+xScale(d.Category)}) .attr("height",function(d) {return 0}) .attr('opacity',0) .style('fill',function(d) {if (d.Category=='US'){return '#6e857d'} else {return '#d6d9d8'}}) .attr("class", "rectbar") .transition() .delay(600) .duration(1000) .attr('opacity',1) .attr("height",function(d) {return yScale(d.Percentage)}) .attr("width",100) d3.select('svg') .selectAll('.yaxistitle') .transition()//Set transition .delay(1700) .duration(300) .style('opacity',1) d3.select('svg') .selectAll('.labbar') .transition()//Set transition .delay(1700) .duration(300) .style("opacity", 1) d3.select('svg') .selectAll('.labels') .transition()//Set transition .delay(0) .duration(200) .style('opacity',0) d3.select('svg') .select('.advance3') .transition()//Set transition .delay(0) .duration(200) .style("opacity", 0) .style("pointer-events", "none") d3.select('svg') .select('.advance4') .transition()//Set transition .delay(0) .duration(200) .style("opacity", 1) .style("pointer-events", "all") d3.select('svg') .selectAll('.header3') .transition()//Set transition .delay(0) .duration(300) .style("opacity", 0) d3.select('svg') .selectAll('.header4') .transition()//Set transition .delay(1600) .duration(300) .style("opacity", 1) }36:T6a1,function click4(elemData) { d3.select('svg') .select('.advance4') .transition()//Set transition .delay(0) .duration(200) .style("opacity", 0) .style("pointer-events", "none") d3.select('svg') .select('.advance1') .transition()//Set transition .delay(0) .duration(200) .style("opacity", 1) .style("pointer-events", "all") d3.select('svg') .selectAll('.rectbar') .remove() d3.select('svg') .selectAll('.labbar') .style("opacity", 0) d3.select('svg') .selectAll('.yaxistitle') .style("opacity", 0) d3.select('svg') .selectAll('.square') .transition()//Set transition .delay(0) .duration(0) .style('fill',function(d) {if (d.test==0){return 'd6d9d8'} else {return 'd6d9d8'}}) .transition()//Set transition .delay(0) .duration(1000) .attr('y', function(d) {return margin.top+ d.row*sqwidthi2-1}) .attr('x', function(d) {return margin.left+plot.width/4+d.rowranki2*sqwidthi2}) .attr("width",sqwidthi2-2) .attr("height",sqwidthi2-2) .style('stroke-width','0') .style('stroke','gray') .style('stroke-opacity','1') .style("opacity",1 ) .style('fill',function(d) {if (d.test==0){return 'd6d9d8'} else {return 'd6d9d8'}}) d3.select('svg') .select('.header1') .transition()//Set transition .delay(0) .duration(200) .style("opacity", 1) d3.select('svg') .selectAll('.header4') .transition()//Set transition .delay(0) .duration(0) .style("opacity", 0) }37:T8d7,header=[{"KillerGroup":"Arya Stark","x":2,"y":132,"n":68,"Header":"Arya Stark: 68"},{"KillerGroup":"Baratheon of Dragonstone","x":880,"y":306,"n":39,"Header":"House Baratheon of Dragonstone: 39"},{"KillerGroup":"Baratheon of King's Landing","x":880,"y":364,"n":36,"Header":"House Baratheon of King's Landing: 36"},{"KillerGroup":"Barristan Selmy","x":2,"y":654,"n":15,"Header":"Barristan Selmy: 15"},{"KillerGroup":"Beasts","x":1170,"y":538,"n":13,"Header":"Beasts: 13"},{"KillerGroup":"Bronn","x":2,"y":364,"n":27,"Header":"Bronn: 27"},{"KillerGroup":"Cersei Lannister","x":2,"y":74,"n":199,"Header":"Cersei Lannister: 199"},{"KillerGroup":"Daario Naharis","x":2,"y":422,"n":22,"Header":"Daario Naharis: 22"},{"KillerGroup":"Daenerys Targaryen","x":2,"y":-34,"n":1008,"Header":"Daenerys Targaryen: 1008"},{"KillerGroup":"Dothraki","x":880,"y":480,"n":35,"Header":"Dothraki: 35"},{"KillerGroup":"Free Folk","x":340,"y":654,"n":41,"Header":"Free Folk: 41"},{"KillerGroup":"Grey Worm","x":2,"y":248,"n":34,"Header":"Grey Worm: 34"},{"KillerGroup":"Greyjoy","x":880,"y":422,"n":31,"Header":"House Greyjoy: 31"},{"KillerGroup":"House Bolton","x":340,"y":538,"n":50,"Header":"House Bolton: 50"},{"KillerGroup":"House Frey","x":340,"y":596,"n":30,"Header":"House Frey: 30"},{"KillerGroup":"Jon Snow","x":2,"y":190,"n":51,"Header":"Jon Snow: 51"},{"KillerGroup":"Lannister","x":340,"y":480,"n":57,"Header":"House Lannister: 57"},{"KillerGroup":"Other","x":880,"y":654,"n":96,"Header":"Other: 96"},{"KillerGroup":"Ramsay Bolton","x":2,"y":538,"n":19,"Header":"Ramsay Bolton: 19"},{"KillerGroup":"Sandor \"\"the Hound\"\" Clegane","x":2,"y":306,"n":31,"Header":'Sandor "the Hound" Clegane: 31'},{"KillerGroup":"Sons of the Harpy","x":880,"y":538,"n":38,"Header":"Sons of the Harpy: 38"},{"KillerGroup":"Stark","x":340,"y":422,"n":67,"Header":"House Stark: 67"},{"KillerGroup":"The Nights Watch","x":340,"y":306,"n":76,"Header":"The Nights Watch: 76"},{"KillerGroup":"The Unsullied","x":880,"y":596,"n":20,"Header":"The Unsullied: 20"},{"KillerGroup":"Theon Greyjoy","x":2,"y":596,"n":19,"Header":"Theon Greyjoy: 19"},{"KillerGroup":"Tormund","x":2,"y":480,"n":20,"Header":"Tormund: 20"},{"KillerGroup":"White walkers","x":340,"y":364,"n":82,"Header":"White walkers: 82"}] 38:[] 31:{"id":"4616ba7505d3be34","slug":"makeover-monday-week-2-2020","title":"Makeover Monday week 2/2020","thumbnail":"d448610d4404bdd12d89c215a92d3371683b070afed6243809205f4d43f79f0b","access_level":"public","create_time":"$D2020-01-12T13:21:49.884Z","update_time":"$D2021-05-21T18:25:47.877Z","view_time":null,"first_public_time":"$D2020-01-12T22:03:36.329Z","has_unpublished_edits":null,"fork":{"id":"5bd664a983d9a33c","slug":"makeover-monday-week-27-2019","title":"Makeover Monday week 27/2019","owner":{"id":"45fbd05608299361","login":"joakimdalen","name":"Joakim Dalen"}},"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":4921,"publish_version":4921,"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":3,"collection":null,"type":"notebook","body":{"title":"Makeover Monday week 2/2020","cells":[{"id":1331,"value":"md`# Makeover Monday week 2/2020`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4204,"value":"md`### Press button for fullscreen`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3180,"value":"\nfullscreen = {\n const button = html`