2d:null 2e:["$","title",null,{"children":"Makeover monday week 3 2020 | Joakim Dalen | Observable"}] 33:T2a5f,chart={ ///Creating the canvas 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=Alfa%20Slab%20One, //pick the url under `/* latin */` svg .call(addWebFont, 'ewert', 'https://fonts.gstatic.com/s/suezone/v4/taiJGmd_EZ6rqscQgOFOmos.woff2') 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", "#DCDCDC"); linearGradient.append("stop") .attr("offset", "10%") .attr("stop-color", "whitesmoke"); linearGradient.append("stop") .attr("offset", "70%") .attr("stop-color", "whitesmoke"); linearGradient.append("stop") .attr("offset", "100%") .attr("stop-color", '#DCDCDC'); ///Creating a background with color svg.append("rect") .attr("width", "100%") .attr("height", "100%") .attr("fill", 'url(#linear-gradient') .attr('opacity',1) ///Creating a background with color svg.append("rect") .attr("width", "100%") .attr("height", "100%") .attr("fill", mainColor) .attr('opacity',1) ///Creating a background with color svg.append("rect") .attr("width", '97%') .attr("height", '98%') .attr("x",'1.5%') .attr("y",'1%') .attr("fill", 'url(#linear-gradient') .attr('opacity',1) svg.append("line") .style("stroke", secondaryColor) .attr("x1",margin.left+35) .attr("y1", margin.top-218) .attr("x2",margin.left+35) .attr("y2", margin.top-167) .attr('class','vline') .style('stroke-width',3) .style('stroke',mainColor) ; //Main title svg.append("text") .attr("transform", "translate("+ (margin.left+plot.width/2) +","+(margin.top-200)+")") .text("Reduced sugar consumption among children in the UK") .style("font", "22px 'Segoe UI'") .style("opacity", "1") .style("fill", mainColor) .attr('text-anchor','middle') .style("font-weight", "700") svg.append("text") .attr("transform", "translate("+ (margin.left+42) +","+(margin.top-174)+")") .text("But the intake is still far above the recommended levels") .style("font", "22px 'Segoe UI'") .style("opacity", "1") .style("fill", mainColor) .attr('text-anchor','start') .style("font-weight", "400") /////subtext svg.append("text") .attr("transform", "translate("+ (margin.left+42) +","+(margin.top-135)+")") .text("Results from the National Diet and Nutrition Survey indicate that, among children,") .style("font", "15px 'Muli'") .style("opacity", "1") .style("fill", mainColor) .attr('text-anchor','start') .style("font-weight", "400") .append('tspan') .text("the percentage of calories from free sugar sources was reduced between 2008 ") .style("font-weight", "600") .attr('x',0) .attr('y',18) .append('tspan') .text("and 2016. ") .style("font-weight", "600") .attr('x',0) .attr('y',38) .append('tspan') .text("However, the levels are still are still ") .style("font-weight", "400") .attr('y',38) .append('tspan') .text("far above those recommended by ") .style("font-weight", "600") .append('tspan') .text("the authorities. ") .style("font-weight", "600") .attr('y',56) .attr('x',0) ///calling xAxis var xAxisElements= svg.append("g") .call(xAxis) .attr('class','xAxis') .attr('transform', 'translate('+(margin.left+margin.leftchart)+','+(margin.top)+')') .style("color", tertiaryColor) .style("font", "14px 'Muli'") .style('stroke-width',0.7) .style('stroke-opacity',0.8) xAxisElements.selectAll(".domain").remove() xAxisElements.selectAll("text").remove() xAxisElements.selectAll(".line").remove() .style("pointer-events", "none") // prevents jittering when mouseover both label and voronoi ///labeling yAxis svg.append("text") .attr("class", "Overskrift") .attr("transform", "translate("+ (margin.left+margin.leftchart+chartWidth/2)+","+(margin.top+plot.height+50)+")rotate(0)") .attr('text-anchor','start') .text("Survey Year") .style("fill",secondaryColor) .style("font", "14px 'Muli'") .style('opacity',1) .attr('text-anchor','middle') .style('font-weight','400') .attr('class','yAxis') ///labeling yAxis svg.append("text") .attr("class", "Overskrift") .attr("transform", "translate("+ (margin.left+margin.leftchart)+","+(margin.top+plot.height+15)+")rotate(0)") .attr('text-anchor','start') .text("2008-2010") .style("fill",secondaryColor) .style("font", "12px 'Muli'") .style('opacity',1) .attr('text-anchor','middle') .style('font-weight','400') .attr('class','yAxis') ///labeling yAxis svg.append("text") .attr("class", "Overskrift") .attr("transform", "translate("+ (margin.left+margin.leftchart+chartWidth)+","+(margin.top+plot.height+15)+")rotate(0)") .attr('text-anchor','start') .text("2014-2016") .style("fill",secondaryColor) .style("font", "12px 'Muli'") .style('opacity',1) .attr('text-anchor','middle') .style('font-weight','400') .attr('class','yAxis') ///labeling yAxis svg.append("text") .attr("class", "Overskrift") .attr("transform", "translate("+ (margin.left+margin.leftchart+chartWidth/2)+","+(margin.top-10)+")rotate(0)") .attr('text-anchor','start') .text("Percentage of calories coming from free sugars") .style("fill",mainColor) .style("font", "15px 'Muli'") .style('opacity',1) .attr('text-anchor','middle') .style('font-weight','400') .attr('class','yAxis') ///labeling yAxis svg.append("text") .attr("class", "Overskrift") .attr("transform", "translate("+ (margin.left+margin.leftchart+chartWidth/2)+","+(margin.top+yScale(5)+20)+")rotate(0)") .text("Recommended level of calories from free sugars") .style("fill",'#808080') .style("font", "14px 'Muli'") .style('opacity',1) .attr('text-anchor','middle') .style('font-weight','400') .attr('class','yAxis') ///labeling yAxis svg.append("text") .attr("class", "Overskrift") .attr("transform", "translate("+ (margin.left+margin.leftchart-25)+","+(margin.top+yScale(5)+3)+")rotate(0)") .text("5.0") .style("fill",'#808080') .style("font", "13px 'Muli'") .style('opacity',1) .attr('text-anchor','start') .style('font-weight','300') .attr('class','yAxis') svg.append("line") .style("stroke", secondaryColor) .attr("x1",margin.leftchart+margin.left) .attr("y1", margin.top+yScale(5)) .attr("x2",margin.leftchart+margin.left+chartWidth) .attr("y2", margin.top+ yScale(5)) .attr('class','vline') .style('stroke-dasharray','3,2') .style('stroke-width',0.5) ; //adding the lines var test=svg.append('g') .style("isolation", "isolate") //this avoids that colors mix with the background test.selectAll('path') .data(nest) .enter() .append("path") .attr("d", function(d){return (line(d.values))}) .attr('transform', 'translate('+(margin.left+margin.leftchart)+','+(margin.top)+')') .attr('fill','none') .attr('stroke',function(d) {return mainColor}) .attr('stroke-width',2.5) .attr("class", function(d) { return "sport-" + d.key+" line2" }) .style("mix-blend-mode", "multiply") .style("pointer-events", "none") // prevents jittering when mouseover both label and voronoi //adding the points svg.selectAll('circle') .data(data) .enter() .append("circle") .attr("r",3.5) .attr("cx",function(d) {return margin.left+margin.leftchart+xScale(d.Survey)}) .attr("cy",function(d) {return margin.top+yScale(d.Percentage)}) .attr('fill',function(d) {return mainColor}) .style("isolation", "isolate") .attr("class", function(d) { return "sport-" + d.Age+" circle" }) .style("pointer-events", "none") // prevents jittering when mouseover both label and voronoi //adding the labels with the data values svg.selectAll('.text') .data(data) .enter() .append("text") .attr("x",function(d) {if (d.Survey==1){ return margin.left+margin.leftchart -35} else {return margin.left+margin.leftchart+chartWidth +10}}) .attr("y",function(d) {return margin.top+yScale(d.Percentage)+4}) .attr('fill',mainColor) .style("font", "14px 'Muli'") .text(function(d){return d.Percentage}) .style("opacity", 1) .attr('text-anchor',function(d) {if (d.Survey==4){ return "start"} else {"end"}}) .style("font-weight","400") svg.append("text") .attr("transform", "translate("+ (margin.left+margin.leftchart+chartWidth/2) +","+(margin.top+yScale(15.2))+")rotate(8)") .text("11 - 18 years") .style("font", "14px 'Muli'") .style("opacity", "1") .style("fill", mainColor) .attr('text-anchor','middle') .style("font-weight", "400") svg.append("text") .attr("transform", "translate("+ (margin.left+margin.leftchart+chartWidth/2) +","+(margin.top+yScale(14.3))+")rotate(5)") .text("4- 10 years") .style("font", "14px 'Muli'") .style("opacity", "1") .style("fill", mainColor) .attr('text-anchor','middle') .style("font-weight", "400") svg.append("text") .attr("transform", "translate("+ (margin.left+margin.leftchart+chartWidth/2) +","+(margin.top+yScale(11.9))+")rotate(3)") .text("1.5 - 3 years") .style("font", "14px 'Muli'") .style("opacity", "1") .style("fill", mainColor) .attr('text-anchor','middle') .style("font-weight", "400") ///Creating footer part 1 svg.append("text") .attr("transform", "translate("+(margin.left+plot.width/2)+","+(plot.height+margin.top+margin.bottom-20)+")") .text("Design: @JoakimDalen || Data Source: The National Diet and Nutrition Survey") .style("font", "11px 'Muli'") .attr('text-anchor','middle') .attr('class','footer') .style("fill",secondaryColor) return svg.node(); }34:[] 31:{"id":"64ec7fb05d0f63c1","slug":"makeover-monday-week-3-2020","title":"Makeover monday week 3 2020","thumbnail":"9e2c6df3d40d7f46456ee06cb333e6b9af9982bbb35e41a89b1501ccda404f56","access_level":"public","create_time":"$D2020-01-19T21:04:50.928Z","update_time":"$D2020-01-22T20:03:40.963Z","view_time":null,"first_public_time":"$D2020-01-19T21:11:29.213Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"45fbd05608299361","login":"joakimdalen","name":"Joakim Dalen","avatar_url":"https://avatars-next.observableusercontent.com/582b1b04bfe67a07a14fb1b63d4b7f6c0bf1ffa608460c432429b7a3fdda80b3","tier":"starter_2024"},"version":4320,"publish_version":4320,"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":1,"collection":null,"type":"notebook","body":{"title":"Makeover monday week 3 2020","cells":[{"id":3805,"value":"md`# Makeover monday week 3 2020`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3816,"value":"md`## Click this button for fullscreen (recommended)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3809,"value":"\nfullscreen = {\n const button = html`