2d:null 2e:["$","title",null,{"children":"Makeover monday week 4 2020 Bridges v2 | Joakim Dalen | Observable"}] 33:T4281,chart = { let svgNode = DOM.svg(plot.width+margin.left+margin.right, plot.height+margin.top+margin.bottom+plot.between+plot.height2+plot.height3+plot.between2); let svg = d3.select(svgNode).append("g").attr("transform", "translate(" + 0 + "," + 0 + ")"); var linearGradientb = svg.append("defs") .append("linearGradient") .attr("id", "linear-gradientb") .attr("gradientTransform", "rotate(90)") linearGradientb.append("stop") .attr("offset", "0%") .attr("stop-color", textColor2); linearGradientb.append("stop") .attr("offset", "100%") .attr("stop-color", backgroundColor); ///Creating a background with color svg.append("rect") .attr("width", "100%") .attr("height", "100%") .attr("fill", backgroundColor) .attr('opacity',1) var linearGradient = svg.append("defs") .append("linearGradient") .attr("id", "linear-gradient") .attr("gradientTransform", "rotate(90)") linearGradient.append("stop") .attr("offset", "0%") .attr("stop-color", textColor2); linearGradient.append("stop") .attr("offset", "100%") .attr("stop-color", backgroundColor); svg.selectAll('.rect') .data(data2) .enter() .append('rect') .attr('x',function(d){return margin.left+ xScale(d.Year)-25}) .attr('y',function(d){return margin.top+plot.height+plot.between+plot.height2-yScaleh(d.helped)}) .attr('height',function(d){return yScaleh(d.helped)}) .attr('width',function(d){return 50}) .attr('fill',function(d){return "url(#linear-gradient)"}) svg.selectAll('.rect') .data(data2) .enter() .append('rect') .attr('x',function(d){return margin.left+ xScale(d.Year)-25}) .attr('y',function(d){return margin.top+plot.height+plot.between+plot.height2+plot.between2+plot.height3-yScaleb(d.bridges)}) .attr('height',function(d){return yScaleb(d.bridges)}) .attr('width',function(d){return 50}) .attr('fill',function(d){return "url(#linear-gradient)"}) var radialGradient = svg.append("defs") .append("radialGradient") .attr("cx", "50%") //move the "central location" to the top left (default = 50%) .attr("cy", "50%") //move the "central location" to the top left (default = 50%) .attr("r", "50%") //default = 50% .attr("id", "radial-gradient") .attr("gradientTransform", "rotate(0)") radialGradient.append("stop") .attr("offset", "70%") .attr("stop-color", backgroundColor); radialGradient.append("stop") .attr("offset", "100%") .attr("stop-color", textColor); var radialGradient2 = svg.append("defs") .append("radialGradient") .attr("cx", "50%") //move the "central location" to the top left (default = 50%) .attr("cy", "50%") //move the "central location" to the top left (default = 50%) .attr("r", "50%") //default = 50% .attr("id", "radial-gradient2") .attr("gradientTransform", "rotate(0)") radialGradient2.append("stop") .attr("offset", "50%") .attr("stop-color", backgroundColor); radialGradient2.append("stop") .attr("offset", "100%") .attr("stop-color", textColor); /////headli#ne svg.append("text") .attr("class", "Overskrift1") .attr("transform", "translate("+ (margin.left-10) +","+(105)+")") .text("Bridges to Prosperity has provided safe access to necessities for 1.1M people") .style("font", "30px 'Francois One'") .style("fill", textColor) .style('text-anchor','start') svg.append("text") .attr("class", "Overskrift1") .attr("transform", "translate("+ (margin.left-10) +","+(145)+")") .text("Bridges to Prosperity (B2P) envisions a world where poverty caused by rural isolation no longer exists. B2P works with ") .style("font", "19px 'Cabin'") .style("fill", textColor) .style('text-anchor','start') .append('tspan') .text(" isolated communities to create access to essential healthcare, education, and economic opportunities by building ") .attr('x',0) .attr('y',25) .append('tspan') .text(" footbridges over impassable rivers. Since 2001, B2P has build in ") .attr('x',0) .attr('y',50) .append('tspan') .style("font-weight", "400") .text("318 footbridges in 20 countries that collectively ") .style('fill','#003443') .style("font-weight", "600") .append('tspan') .style("font-weight", "400") .text("provide safe access to 1.1 million people") .style('fill','#003443') .attr('x',0) .attr('y',75) .style("font-weight", "600") .append('tspan') .style("font-weight", "400") .text(" and currently operates") .style("fill", textColor) .append('tspan') .text("field programs in ") .append('tspan') .text("Bolivia") .style('fill',textColor) .style("font-weight", "600") .append('tspan') .text(",") .style("font-weight", "400") .style("fill", textColor) .append('tspan') .style("font-weight", "600") .text(" Rwanda ") .style('fill',textColor) .append('tspan') .style("font-weight", "400") .text("and") .style("fill", textColor) .append('tspan') .text(" Uganda.") .style('fill',textColor) .style("font-weight", "600") svg.call(tip); let simulation = d3.forceSimulation(nodes) .force('charge', d3.forceManyBody().strength(-15)) .force('x', d3.forceX().x(function(d) { return margin.left+xScale(d.Year); }).strength(10)) .force("y", d3.forceY(margin.top+plot.height / 2).strength(function(d){if (d.radius>65){return 1} if (d.radius>20 & d.radius<65){return 0.3} else{return 0.1}})) .force('collision', d3.forceCollide(0).radius(function(d){ return d.radius/3.5})) .on('tick', function() { let u = svg.selectAll('.circle') .data(nodes); u.enter() .append('circle') // .style("filter", "url(#glow)") .attr('r', function(d){ return d.radius/3.5-0.2}) // .style('stroke',backgroundColor) .attr('class','circle') .style("stroke",'none') .style("stroke-width",1.5) .style("fill", function(d){if (d.Country=='Uganda'){return ugandaColor} if (d.Country=='Rwanda'){return rwandaColor} if (d.Country=='Bolivia'){return boliviaColor} if (d.Country!='Bolivia' & d.Country!='Rwanda' & d.Country!='Uganda' & d.radius>25) {return "url(#radial-gradient)"} else{return "url(#radial-gradient2)"}}) .style('stroke-opacity',1) .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', 1) .style('fill', 'whitesmoke') .style('stroke-opacity', 1) }) .on('mouseout', function(d) { // hide the tooltip on mouse out tip.hide(); d3.select(this).style('opacity', 1) .style('stroke-opacity', 1) .style("fill", function(d){if (d.Country=='Uganda'){return ugandaColor} if (d.Country=='Rwanda'){return rwandaColor} if (d.Country=='Bolivia'){return boliviaColor} if (d.Country!='Bolivia' & d.Country!='Rwanda' & d.Country!='Uganda' & d.radius>25) {return "url(#radial-gradient)"} else{return "url(#radial-gradient2)"}}) }) .merge(u) .attr('cx', function(d) { return d.x; }) .attr('cy', function(d) { return d.y; }) u.exit().remove(); }); var legendtop=130 var legendleft=margin.left+plot.width-260 svg.append('text') .attr("x",function(d) {return legendleft}) .attr("y",function(d) {return legendtop+2 }) .attr('fill',function(d) {return textColor}) .text('# of people helped') .style('text-anchor','start') .style("font", "15px 'Segoe UI'") .style("font-weight", "600") svg.append('circle') .attr('r', function(d){ return 89.22882628 /4-0.2}) .attr("cx",function(d) {return legendleft+89.22882628/4-0.2}) .attr("cy",function(d) {return legendtop+35}) .attr('stroke',function(d) {return'#002834'}) .attr('fill',function(d) {return "url(#radial-gradient)"}) svg.append('text') .attr("x",function(d) {return legendleft+55}) .attr("y",function(d) {return legendtop+38 }) .attr('fill',function(d) {return textColor}) .text('25 000 ') .style('text-anchor','start') .style("font", "13px 'Segoe UI'") svg.append('circle') .attr('r', function(d){ return 56.4332648 /4-0.2}) .attr("cx",function(d) {return legendleft+89.22882628/4-0.2}) .attr("cy",function(d) {return legendtop+78 }) .attr('stroke',function(d) {return 'none'}) .attr('fill',function(d) {return "url(#radial-gradient)"}) svg.append('text') .attr("x",function(d) {return legendleft+55}) .attr("y",function(d) {return legendtop+81 }) .attr('fill',function(d) {return textColor}) .text('10 000 ') .style('text-anchor','start') .style("font", "13px 'Segoe UI'") svg.append('circle') .attr('r', function(d){ return 17.84576526/4-0.2}) .attr("cx",function(d) {return legendleft+89.22882628/4-0.2}) .attr("cy",function(d) {return legendtop+108 }) .attr('stroke',function(d) {return 'none'}) .attr('fill',function(d) {return "url(#radial-gradient2)"}) svg.append('text') .attr("x",function(d) {return legendleft+55}) .attr("y",function(d) {return legendtop+111 }) .attr('fill',function(d) {return textColor}) .text('1 000 ') .style('text-anchor','start') .style("font", "13px 'Segoe UI'") svg.append('text') .attr("x",function(d) {return legendleft+180}) .attr("y",function(d) {return legendtop+2 }) .attr('fill',function(d) {return textColor}) .text('Country') .style('text-anchor','start') .style("font", "15px 'Segoe UI'") .style("font-weight", "600") svg.append('circle') .attr('r', function(d){ return 40/4-0.2}) .attr("cx",function(d) {return legendleft+190}) .attr("cy",function(d) {return legendtop+26 }) .attr('stroke',function(d) {return'none'}) .attr('fill',function(d) {return rwandaColor}) svg.append('text') .attr("x",function(d) {return legendleft+210}) .attr("y",function(d) {return legendtop+29 }) .attr('fill',function(d) {return textColor}) .text('Rwanda ') .style('text-anchor','start') .style("font", "13px 'Segoe UI'") svg.append('circle') .attr('r', function(d){ return 40/4-0.2}) .attr("cx",function(d) {return legendleft+190}) .attr("cy",function(d) {return legendtop+52 }) .attr('fill',function(d) {return ugandaColor}) svg.append('text') .attr("x",function(d) {return legendleft+210}) .attr("y",function(d) {return legendtop+55 }) .attr('fill',function(d) {return textColor}) .text('Uganda ') .style('text-anchor','start') .style("font", "13px 'Segoe UI'") svg.append('circle') .attr('r', function(d){ return 40/4-0.2}) .attr("cx",function(d) {return legendleft+190}) .attr("cy",function(d) {return legendtop+78 }) .attr('stroke',function(d) {return'none'}) .attr('fill',function(d) {return boliviaColor}) svg.append('text') .attr("x",function(d) {return legendleft+210}) .attr("y",function(d) {return legendtop+81 }) .attr('fill',function(d) {return textColor}) .text('Bolivia ') .style('text-anchor','start') .style("font", "13px 'Segoe UI'") svg.append('circle') .attr('r', function(d){ return 40/4-0.2}) .attr("cx",function(d) {return legendleft+190}) .attr("cy",function(d) {return legendtop+104 }) .attr('stroke',function(d) {return'none'}) .attr('fill',function(d) {return "url(#radial-gradient2)"}) svg.append('text') .attr("x",function(d) {return legendleft+210}) .attr("y",function(d) {return legendtop+107 }) .attr('fill',function(d) {return textColor}) .text('Other ') .style('text-anchor','start') .style("font", "13px 'Segoe UI'") svg.append('text') .attr("x",function(d) {return margin.left+plot.width/2}) .attr("y",function(d) {return margin.top+ yScale(-55) }) .attr('fill',function(d) {return textColor2}) .text('(Estimated) Year of Completion ') .style('text-anchor','middle') .style("font", "16px 'Segoe UI'") svg.append('text') .attr("x",function(d) {return margin.left+plot.width/2}) .attr("y",function(d) {return margin.top+plot.height+plot.between+plot.height2+25 }) .attr('fill',function(d) {return textColor2}) .text('Total number of people helped ') .style('text-anchor','middle') .style("font", "16px 'Segoe UI'") svg.selectAll('.text') .data(data2) .enter() .append("text") .attr("x",function(d) {return margin.left+xScale(d.Year)}) .attr('y',function(d){return margin.top+plot.height+plot.between+plot.height2+plot.between2+plot.height3-yScaleb(d.bridges)-8}) .attr('fill',function(d) {return textColor2}) .style("font", "14px 'Segoe UI'") .text(function(d){return d.bridges}) .style("pointer-events", "none") // prevents jittering when mouseover both label and voronoi .style('text-anchor','middle') svg.append('text') .attr("x",function(d) {return margin.left+plot.width/2}) .attr("y",function(d) {return margin.top+plot.height+plot.between+plot.height2+plot.height3+plot.between2+25 }) .attr('fill',function(d) {return textColor2}) .text('Total number of bridges built') .style('text-anchor','middle') .style("font", "16px 'Segoe UI'") //adding the labels with the name of the sport svg.selectAll('.text') .data(data2) .enter() .append("text") .attr("x",function(d) {return margin.left+xScale(d.Year)}) .attr('y',function(d){return margin.top+plot.height+plot.between+plot.height2-yScaleh(d.helped)-10}) .attr('fill',function(d) {return textColor2}) .style("font", "14px 'Segoe UI'") .text(function(d){return d.helped}) .style("pointer-events", "none") // prevents jittering when mouseover both label and voronoi .style('text-anchor','middle') svg.selectAll('.text') .data(data2) .enter() .append("text") .attr("x",function(d) {return margin.left+xScale(d.Year)}) .attr("y",function(d) {return margin.top+yScale(-50)}) .attr('fill',function(d) {return textColor2}) .style("font", "14px 'Segoe UI'") .text(function(d){return d.Year}) .style("pointer-events", "none") // prevents jittering when mouseover both label and voronoi .style('text-anchor','middle') svg.selectAll('.text') .data(data2) .enter() .append("text") .attr("x",function(d) {return margin.left+xScale(d.Year)}) .attr("y",function(d) {return margin.top+plot.height+plot.between+plot.height2+plot.height3+plot.between2+80}) .attr('fill',function(d) {return textColor2}) .style("font", "14px 'Segoe UI'") .text(function(d){return d.Year}) .style("pointer-events", "none") // prevents jittering when mouseover both label and voronoi .style('text-anchor','middle') svg.append('text') .attr("x",function(d) {return margin.left+plot.width/2}) .attr("y",function(d) {return margin.top+plot.height+plot.between+plot.height2+plot.height3+plot.between2+105}) .attr('fill',function(d) {return textColor2}) .text('(Estimated) Year of Completion ') .style('text-anchor','middle') .style("font", "16px 'Segoe UI'") svg.append('text') .attr("x",function(d) {return legendleft}) .attr("y",function(d) {return legendtop-30 }) .attr('fill',function(d) {return textColor}) .text('Each bubble is a bridge') .style('text-anchor','start') .style("font", "18px 'Segoe UI'") .style("font-weight", "700") ///Creating footer part 1 svg.append("text") .attr("transform", "translate("+(margin.left+plot.width/2)+","+(plot.height+margin.top+margin.bottom+plot.height2+plot.between2+plot.height3+plot.between2-20)+")") .text("Design: @JoakimDalen || Data Source: Bridges to Prosperity") .style("font", "11px 'Segoe UI'") .attr('text-anchor','middle') .attr('class','footer') .attr('opacity',1) .style("fill",textColor) return svgNode; }34:[] 31:{"id":"371d4f5590c832aa","slug":"makeover-monday-week-4-2020-bridges-v2","title":"Makeover monday week 4 2020 Bridges v2","thumbnail":"a9ee80d187f39c18d61f0c73af283d96ca58fa281f00631e71da8852cc61ca07","access_level":"public","create_time":"$D2020-01-30T10:37:05.004Z","update_time":"$D2020-01-30T18:08:22.254Z","view_time":null,"first_public_time":"$D2020-01-30T13:04:40.661Z","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":1354,"publish_version":1354,"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 4 2020 Bridges v2","cells":[{"id":0,"value":"md`# Makeover monday week 4 2020 Bridges v2\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":931,"value":"md`## Click this button for fullscreen (recommended) \n- tooltip will not work in this modus`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"\nfullscreen = {\n const button = html`