2d:null 2e:["$","title",null,{"children":"Sankey Diagram english 2 | Joakim Dalen | Observable"}] 33:T1a25,chart = { const svg=d3.select(DOM.svg(plot.width+margin.left+margin.right, plot.height+margin.top+margin.bottom)); //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, 'Pacifico', 'https://fonts.gstatic.com/s/alfaslabone/v9/6NUQ8FmMKwSEKjnm5-4v-4Jh2dJhew.woff2') svg .call(addWebFont, 'Lato', ' https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjx4wXg.woff2') https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjx4wXg.woff2 ///Creating a background with color svg.append("rect") .attr("width", "100%") .attr("height", "100%") .attr("fill", '#282828') .attr('opacity',1) const {nodes, links} = sankey(data); svg.append('text') .text('The Norwegian National Budget - 2020') .attr('x',margin.left+plot.width/2) .attr('y',120) .attr('text-anchor','middle') .style("fill", '#DCDCDC') .style("font", "45px 'Pacifico'") .attr('font-weight','Bold') svg.append('text') .text('Where does the money come from and where does it go?') .attr('x',margin.left+plot.width/2) .attr('y',175) .attr('text-anchor','middle') .style("fill", '#DCDCDC') .style("font", "37px 'Lato'") .attr('font-weight','500') svg.append('text') .text('Revenue') .attr('x',margin.left) .attr('y',margin.top-40) .attr('text-anchor','start') .attr('fill',colorcat.inn) .style("font", "25px 'Segoe UI Semibold'") svg.append('text') .text('1446 billion NOK in total') .attr('x',margin.left) .attr('y',margin.top-15) .attr('text-anchor','start') .attr('fill',colorcat.inn) .attr('font-size','15px') .attr('font-weight','500') .style("fill", '#DCDCDC') svg.append('text') .text('Expenditures') .attr('x',margin.left+ plot.width) .attr('y',margin.top-40) .attr('text-anchor','end') .attr('fill',colorcat.out) .style("font", "25px 'Segoe UI Semibold'") svg.append('text') .text('1443 billion NOK in total') .attr('x',margin.left+plot.width) .attr('y',margin.top-15) .attr('text-anchor','end') .attr('fill',colorcat.inn) .attr('font-size','15px') .attr('font-weight','500') .style("fill", '#DCDCDC') svg.append('text') .text('The National Budget for 2020') .attr('x',margin.left+ plot.width/2) .attr('y',margin.top-30) .attr('text-anchor','end') .attr('fill','#DCDCDC') .attr('font-size','20px') .attr('font-weight','bold') .attr('text-anchor','middle') .append('tspan') .text('contains a total of') .attr('x',margin.left+ plot.width/2) .attr('y',margin.top-10) .append('tspan') .text('1446 billion NOK') .attr('x',margin.left+ plot.width/2) .attr('y',margin.top+10) svg.append("g") .attr("stroke", "#000") .selectAll("rect") .data(nodes) .join("rect") .attr("x", d => d.x0) .attr("y", d => d.y0) .attr("height", d => d.y1 - d.y0) .attr("width", d => d.x1 - d.x0) .attr("fill", d => color(d.name)) .append("title") .text(d => `${d.name}\n${format(d.value)}`) const link = svg.append("g") .attr("fill", "none") .attr("stroke-opacity", 1) .selectAll("g") .data(links) .join("g") var gradient = link.append("linearGradient") .attr("id", d => (d.uid = DOM.uid("link")).id) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", d => d.source.x1) .attr("x2", d => d.target.x0); gradient.append("stop") .attr("offset", "74%") .attr("stop-color", d => color(d.source.name)); gradient.append("stop") .attr("offset", "100%") .attr("stop-color", d => color(d.target.name)); var gradient2 = link.append("linearGradient") .attr("id", d => (d.uid2 = DOM.uid("link")).id) .attr("gradientUnits", "userSpaceOnUse") .attr("x1", d => d.source.x0) .attr("x2", d => d.target.x1); gradient2.append("stop") .attr("offset", "0%") .attr("stop-color", d => color(d.source.name)); gradient2.append("stop") .attr("offset", "30%") .attr("stop-color", d => color(d.target.name)); link.append("path") .attr("x", d => margin.left) .attr("d", d3.sankeyLinkHorizontal()) .attr("stroke", d => d.uid) .attr("stroke", function(d) {if (d.source.x0 Math.max(1, d.width)); svg.append("g") .style("font", "10px sans-serif") .selectAll("text") .data(nodes) .join("text") .attr("x", function(d) {if (d.node==8) {return ((margin.left+margin.right+ plot.width-100)/2) } if (d.node<=7) {return d.x1 -50 } else {return d.x0 + 50}}) .attr("y", function(d) {if (d.node==8) {return (margin.top-10) } else {return (d.y1 + d.y0) / 2}}) .attr("dy", "0.35em") .attr("text-anchor", function(d) {if (d.node==8) {return 'middle' } if (d.node<=7) {return 'end' } else {return 'start'}}) .text(d => d.name) .attr('font-size','17px') .attr('font-weight','500') .attr('fill',function(d) {if (d.node==8) {return 'none' } if (d.node<=7) {return '#DCDCDC'} else {return '#DCDCDC'}}) svg.append("g") .style("font", "10px sans-serif") .selectAll(".text2") .data(links) .join("text") .attr("x", function(d) {if (d.source.x0 ''+ d.value +' billion' ) .attr('font-size',function(d) {if (d.value<30) {return '10px'} if (d.value<50 & d.value>29) {return '13px'} else {return '15px'}}) .attr('fill','#DCDCDC'); link.append("title") .text(d => `${d.source.name} → ${d.target.name}\n${format(d.value)}`) return svg.node(); }34:T6b5,data = ( { "nodes":[ {"node":0,"name":"Value added tax (VAT)"}, {"node":1,"name":"Tax on income and wealth"}, {"node":2,"name":"Revenues from petroleum activities"}, {"node":3,"name":"Employer's national insurance contributions"}, {"node":4,"name":"National insurance contributions"}, {"node":5,"name":"Tobacco product tax and Alchohol beverage tax"}, {"node":6,"name":"Motor vehicle taxes"}, {"node":7,"name":"Other revenue"}, {"node":8,"name":"National Budget"}, {"node":9,"name":"Norwegian national insurances and pensions"}, {"node":10,"name":"Block grants to Norwegian local goverments"}, {"node":11,"name":"Hospitals"}, {"node":12,"name":"Transport and communication"}, {"node":13,"name":"Defence"}, {"node":14,"name":"Aid"}, {"node":15,"name":"Police"}, {"node":16,"name":"Higher education"}, {"node":17,"name":"Other expenditures"}] , "links":[ {"source":0,"target":8,"value":325.6}, {"source":1,"target":8,"value":291.1}, {"source":2,"target":8,"value":273}, {"source":3,"target":8,"value":202.6}, {"source":4,"target":8,"value":156.5}, {"source":5,"target":8,"value":21.2}, {"source":6,"target":8,"value":22.7}, {"source":7,"target":8,"value":153.7}, {"source":8,"target":9,"value":516.7}, {"source":8,"target":10,"value":179}, {"source":8,"target":11,"value":167.6}, {"source":8,"target":12,"value":75.4}, {"source":8,"target":13,"value":61}, {"source":8,"target":14,"value":37.6}, {"source":8,"target":15,"value":22.2}, {"source":8,"target":16,"value":50.4}, {"source":8,"target":17,"value":333.3}, ]} ) 35:[] 31:{"id":"5e6e31c78f7702c3","slug":"sankey-diagram-english-2","title":"Sankey Diagram english 2","thumbnail":"442d145437d93c0e643674b9595b37201f6aecedb0d5bd2cc1e1f8a8339881b6","access_level":"public","create_time":"$D2019-12-02T19:45:51.695Z","update_time":"$D2019-12-04T07:51:27.266Z","view_time":null,"first_public_time":"$D2019-12-03T07:34:12.715Z","has_unpublished_edits":null,"fork":true,"stars":6,"starred":false,"owner":{"type":"team","id":"45fbd05608299361","login":"joakimdalen","name":"Joakim Dalen","avatar_url":"https://avatars-next.observableusercontent.com/582b1b04bfe67a07a14fb1b63d4b7f6c0bf1ffa608460c432429b7a3fdda80b3","tier":"starter_2024"},"version":1230,"publish_version":1230,"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":2,"collection":null,"type":"notebook","body":{"title":"Sankey Diagram english 2","cells":[{"id":0,"value":"md`# Sankey Diagram english 2\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"\nfullscreen = {\n const button = html`