2d:null 2e:["$","title",null,{"children":"Makeover monday 43 2019 | Joakim Dalen | Observable"}] 33:T2850,chart={ const svg=d3.select(DOM.svg(plot.width+margin.left+margin.right, plot.height+plot.height+margin.middle+margin.top+margin.bottom)); svg.append("rect") .attr("width", "100%") .attr("height", "100%") .attr("fill", "white"); svg.append("text") .attr("class", "Overskrift") .attr("transform", "translate("+ (margin.left) +","+(120)+")") .text("Should we use ") .style("font", "25px 'Segoe UI'") .style("font-weight", "400") .style("fill", "Black") .style('text-anchor','start') .append("tspan") .text("Number of Suicides ") .style("font", "27px 'Segoe UI'") .style("font-weight", "bold") .append("tspan") .text("or ") .style("font", "25px 'Segoe UI'") .style("font-weight", "400") .append("tspan") .text("Suicide Rates?") .style("font", "27px 'Segoe UI'") .style("font-weight", "bold") svg.append("text") .attr("class", "Overskrift") .attr("transform", "translate("+ (margin.left) +","+(155)+")") .text("The number of suicides is an important number as every single suicide is a horrible tradgedy. However, it ") .style("font", "15px 'Segoe UI'") .style("font-weight", "400") .style("fill", "Black") .style('text-anchor','start') .append("tspan") .text("should by used with care as it may be misleading when comparing different societal groups. The reason for ") .attr('y',20) .attr('x',0) .append("tspan") .text("this is that it patterns will be highly dependent on group sizes. For example, when comparing age groups") .attr('y',40) .attr('x',0) .append("tspan") .text("over time, the pattern seen when looking the number of suicides are much more distinct compared to when") .attr('y',60) .attr('x',0) .append("tspan") .text("looking at suicide rates. While there is a similar pattern, the pattern seen when using number of suicides") .attr('y',80) .attr('x',0) .append("tspan") .text("is clearly a combination of the pattern in suicide rates and population size in specific generations.") .attr('y',100) .attr('x',0) svg.append("text") .attr("class", "Overskrift") .attr("transform", "translate("+ (margin.left-50) +","+(margin.top+plot.height/2)+")") .text("Year") .style("font", "14px 'Segoe UI'") .style("font-weight", "normal") .style("fill", "gray") .style('text-anchor','end') svg.append("text") .attr("class", "Overskrift") .attr("transform", "translate("+ (margin.left-50) +","+(margin.top+plot.height+margin.middle+plot.height/2)+")") .text("Year") .style("font", "14px 'Segoe UI'") .style("font-weight", "normal") .style("fill", "gray") .style('text-anchor','end') svg.append("g") .call(yAxis) .attr('class','yAxis') .attr('transform', 'translate('+(margin.left)+','+(margin.top+1)+')') .style('text-anchor','end') .style("color", "gray") .style('stroke-opacity',0) .style('opacity',1) .style("font", "12px 'Segoe UI' ") // .style("font-weight", "bold") svg.append("g") .call(yAxis) .attr('class','yAxis') .attr('transform', 'translate('+(margin.left)+','+(margin.top+plot.height+margin.middle)+')') .style('text-anchor','end') .style("color", "gray") .style('stroke-opacity',0) .style('opacity',1) .style("font", "12px 'Segoe UI' ") // .style("font-weight", "bold") svg.append("text") .attr("class", "Overskrift") .attr("transform", "translate("+ (margin.left+plot.width+5) +","+(margin.top-30)+")") .text("Age") .style("font", "14px 'Segoe UI'") .style("font-weight", "normal") .style("fill", "gray") .style('text-anchor','end') svg.append("text") .attr("class", "Overskrift") .attr("transform", "translate("+ (margin.left+plot.width+5) +","+(margin.top+plot.height+margin.middle-30)+")") .text("Age") .style("font", "14px 'Segoe UI'") .style("font-weight", "normal") .style("fill", "gray") .style('text-anchor','end') svg.append("g") .call(xAxis) .attr('class','yAxis') .attr('transform', 'translate('+(margin.left)+','+(margin.top)+')') .style('text-anchor','end') .style("color", "gray") .style('stroke-opacity',0) .style('opacity',1) .style("font", "12px 'Segoe UI' ") // .style("font-weight", "bold") svg.append("g") .call(xAxis) .attr('class','yAxis') .attr('transform', 'translate('+(margin.left)+','+(margin.top+plot.height+margin.middle)+')') .style('text-anchor','end') .style("color", "gray") .style('stroke-opacity',0) .style('opacity',1) .style("font", "12px 'Segoe UI' ") // .style("font-weight", "bold") svg.append("text") .attr("class", "Overskrift") .attr("transform", "translate("+ (margin.left+plot.width+5) +","+(margin.top+plot.height+margin.middle+10)+")") .text("Data") .style("font", "12px 'Segoe UI'") .style("font-weight", "normal") .style("fill", "gray") .style('text-anchor','end') .append("tspan") .text("Not") .attr("y", margin.top+plot.height+margin.middle+25) .append("tspan") .attr("transform", "translate("+ (margin.left+plot.width+5) +","+(margin.top+plot.height+margin.middle+40)+")") .text("Availiable") svg.append("text") .attr('y',function(d,i){return margin.top- 40}) .attr('x',function(d,i){return margin.left}) .text("Number of suicides in England and Wales") .style("font", "20px 'Segoe UI'") .style('text-anchor','start') .style('font-style','italic') // .style('font-weight','bold') .attr('opacity',1) .attr('class','SuicideBox') var colorScale = d3.scaleLinear() .domain([0,21]) .range(['white', "black"]) var colorScale2 = d3.scaleLinear() .domain([0,160]) .range(['white', "black"]) svg.append('g') .selectAll('rect') .data(data) .enter() .append('rect') .attr('y',function(d,i){return ((margin.top+(yScale(d.Year))));}) .attr('x',function(d,i) {return ((margin.left+(xScale(d.Age))));}) .attr("width",width) .attr("height",height) .attr('class','square') .style('stroke-width','1') .style('stroke', function(d) { return colorScale2(d.Suicides); }) .style("fill", function(d) { return colorScale2(d.Suicides); }) svg.append("text") .attr('y',function(d,i){return margin.top+plot.height+margin.middle- 40}) .attr('x',function(d,i){return margin.left}) .text("Suicides per 100 000 persons in England and Wales") .style("font", "20px 'Segoe UI'") .style('text-anchor','start') .style('font-style','italic') // .style('font-weight','bold') .attr('opacity',1) .attr('class','SuicideBox') svg.append('g') .selectAll('rect') .data(data) .enter() .append('rect') .attr('y',function(d,i){return ((margin.top+plot.height+margin.middle+(yScale(d.Year))));}) .attr('x',function(d,i) {return ((margin.left+(xScale(d.Age))));}) .attr("width",width) .attr("height",height) .attr('class','square') .style('stroke-width','1') .style('stroke', function(d) { return colorScale(d.Rates); }) .style("fill", function(d) { return colorScale(d.Rates); }) ///Creating footer part 1 svg.append("text") .attr("transform", "translate("+(margin.left+plot.width/2)+","+(plot.height+plot.height+margin.middle+margin.top+margin.bottom/2)+")") .text("Created by: @JoakimDalen || Heavily Inspired by Andy Kriebel @VizWizBI || Data Source: Office for National Statistics (UK)") .style("font", "10px 'Segoe UI'") .attr('text-anchor','middle') .style("fill", "#A9A9A9") svg.append("text") .attr("class", "Overskrift") .attr("transform", "translate("+ (margin.left+plot.width-width*5+30) +","+(margin.top+plot.height+margin.middle+20)+")") .text("Data") .style("font", "8px 'Segoe UI'") .style("font-weight", "normal") .style("fill", "gray") .style('text-anchor','middle') .append("tspan") .attr("y",15) .attr("x",0) .text("Not") .append("tspan") .attr("y",30) .attr("x",0) .text("Availiable") //adding legend //legend var linearGradient = svg.append("defs") .append("linearGradient") .attr("id", "linear-gradient") .attr("gradientTransform", "rotate(0)"); linearGradient.append("stop") .attr("offset", "0%") .attr("stop-color", "white"); linearGradient.append("stop") .attr("offset", "100%") .attr("stop-color", "black"); svg.append('rect') .attr('class','leg') .attr('y',function(d,i){return ((margin.top-45))}) .attr('x',margin.left+plot.width-170) .attr("height",10) .attr('width',100) .style("fill", "url(#linear-gradient)") .style('opacity',1) ///labeling legend svg.append("text") .attr("class", "Overskrift") .attr("transform", "translate("+ (margin.left+plot.width-170)+","+(margin.top-48)+")") .attr('text-anchor','middle') .text("0") .style("fill", 'gray') .style("font", "10px 'Segoe UI'") // .style('font-weight','bold') .append("tspan") .attr("x", 100) .attr("y", 0) .text("160") svg.append('rect') .attr('class','leg') .attr('y',function(d,i){return ((margin.top+plot.height+margin.middle-45))}) .attr('x',margin.left+plot.width-170) .attr("height",10) .attr('width',100) .style("fill", "url(#linear-gradient)") .style('opacity',1) ///labeling legend svg.append("text") .attr("class", "Overskrift") .attr("transform", "translate("+ (margin.left+plot.width-170)+","+(margin.top+plot.height+margin.middle-48)+")") .attr('text-anchor','middle') .text("0") .style("fill", 'gray') .style("font", "10px 'Segoe UI'") // .style('font-weight','bold') .append("tspan") .attr("x", 100) .attr("y", 0) .text("21") return svg.node(); } 34:[] 31:{"id":"99b84a0536b6526f","slug":"makeover-monday-43-2019","title":"Makeover monday 43 2019","thumbnail":"b6db63fda1a86f48b3e5b233fecab33b8eaf3df5c1db4b17a3f35a73f0a0b6af","access_level":"public","create_time":"$D2019-11-18T22:12:43.363Z","update_time":"$D2019-11-19T08:36:59.328Z","view_time":null,"first_public_time":"$D2020-01-10T20:44:27.701Z","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":2901,"publish_version":2901,"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":0,"collection":null,"type":"notebook","body":{"title":"Makeover monday 43 2019","cells":[{"id":1331,"value":"md`# Makeover monday 43 2019`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2790,"value":"\nfullscreen = {\n const button = html`