2d:null 2e:["$","title",null,{"children":"Makeover monday week 4 2020 Bridges v3 | Joakim Dalen | Observable"}] 33:T2870,chart = { let svgNode = DOM.svg(plot.width+margin.left+margin.right, plot.height+margin.top+margin.bottom); let svg = d3.select(svgNode).append("g").attr("transform", "translate(" + 0 + "," + 0 + ")"); ///Creating a background with color svg.append("rect") .attr("width", "100%") .attr("height", "100%") .attr("fill", backgroundColor) .attr('opacity',1) /////headli#ne svg.append("text") .attr("class", "Overskrift1") .attr("transform", "translate("+ (margin.left-10) +","+(105)+")") .text("Bridges to Prosperity has provided safe travel for 1.1 million people") .style("font", "34px 'Francois One'") .style("fill", textColor) .style('text-anchor','start') .on('click',click1) 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(-13)) .force('x', d3.forceX().x(function(d) { return margin.left+xScale(d.Year); }).strength(5)) .force("y", d3.forceY(margin.top+plot.height / 2).strength(function(d){if (d.radius>75){return 1} if (d.radius>20 & d.radius<75){return 0.2} 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",textColor) .style("stroke-width",4) .style("fill", function(d){if (d.Country=='Uganda'){return ugandaColor} if (d.Country=='Rwanda'){return rwandaColor} if (d.Country=='Bolivia'){return boliviaColor} else{return otherColor}}) .style('stroke-opacity',0) .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('stroke-opacity', 1) }) .on('mouseout', function(d) { // hide the tooltip on mouse out tip.hide(); d3.select(this).style('opacity', 1) .style('stroke-opacity', 0) }) .merge(u) .attr('cx', function(d) { return d.x; }) .attr('cy', function(d) { return d.y; }) u.exit().remove(); }); //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+yScale(65)}) .attr('fill',function(d) {return'#000a0c'}) .style("font", "13px 'Segoe UI'") .text(function(d){return d.Year}) .style("pointer-events", "none") // prevents jittering when mouseover both label and voronoi .style('text-anchor','middle') 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'none'}) 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 textColor}) .attr('fill',function(d) {return'none'}) 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 textColor}) .attr('fill',function(d) {return'none'}) 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('stroke',function(d) {return'none'}) .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 otherColor}) 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+ plot.height+80 }) .attr('fill',function(d) {return'002834'}) .text('(Estimated) Year of Completion ') .style('text-anchor','middle') .style("font", "13px '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 circle is a bridge') .style('text-anchor','start') .style("font", "18px 'Segoe UI'") .style("font-weight", "700") return svgNode; }34:[] 31:{"id":"f15abb8f353fdffc","slug":"makeover-monday-week-4-2020-bridges-v3","title":"Makeover monday week 4 2020 Bridges v3","thumbnail":"4d8cbc7be9cd140bfb0af31da763f86369183729b5db33bf98e71c6b60e22b5d","access_level":"public","create_time":"$D2020-01-27T20:14:14.065Z","update_time":"$D2020-01-28T16:32:23.774Z","view_time":null,"first_public_time":"$D2020-01-27T20:14:20.613Z","has_unpublished_edits":null,"fork":true,"stars":4,"starred":false,"owner":{"type":"team","id":"45fbd05608299361","login":"joakimdalen","name":"Joakim Dalen","avatar_url":"https://avatars-next.observableusercontent.com/582b1b04bfe67a07a14fb1b63d4b7f6c0bf1ffa608460c432429b7a3fdda80b3","tier":"starter_2024"},"version":1366,"publish_version":1366,"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 4 2020 Bridges v3","cells":[{"id":0,"value":"md`# Makeover monday week 4 2020 Bridges v3\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)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"\nfullscreen = {\n const button = html`