3e:null 3f:["$","title",null,{"children":"Sankey Diagram english 2 | treva | Observable"}] 45:T19fd,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('CCI to C3S') .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(); }46:T151d,data = ( { "nodes":[ {"node":0,"name":"Water Vapour CCI"}, {"node":1,"name":"Cloud CCI"}, {"node":2,"name":"Greenhouse Gases CCI"}, {"node":3,"name":"Ozone CCI"}, {"node":4,"name":"Aerosol CCI"}, {"node":5,"name":"Sea Surface Temperature CCI"}, {"node":6,"name":"Sea Surface Salinity CCI"}, {"node":7,"name":"Sea Level CCI"}, {"node":8,"name":"Sea State CCI"}, {"node":9,"name":"Sea Ice CCI"}, {"node":10,"name":"Ocean Colour CCI"}, {"node":11,"name":"Lakes CCI"}, {"node":12,"name":"Snow CCI"}, {"node":13,"name":"Glaciers CCI"}, {"node":14,"name":"Antarctic Ice Sheet CCI"}, {"node":15,"name":"Greenland Ice Sheet CCI"}, {"node":16,"name":"Permafrost CCI"}, {"node":17,"name":"Landcover CCI"}, {"node":18,"name":"High Res Landcover CCI"}, {"node":19,"name":"Biomass CCI"}, {"node":20,"name":"Fire CCI"}, {"node":21,"name":"Soil Moisture CCI"}, {"node":22,"name":"Land Surface Temperature CCI"}, {"node":23,"name":"Vegetation Parameters CCI"}, {"node":24,"name":""}, // GCOS Water Vapour {"node":25,"name":""}, // GCOS Cloud Properties {"node":26,"name":""}, // GCOS Carbon Dioxide {"node":27,"name":""}, // GCOS Methane {"node":28,"name":""}, // GCOS Ozone {"node":29,"name":""}, // GCOS Aerosol {"node":30,"name":""}, // GCOS Precipitation {"node":31,"name":""}, // GCOS Surface Radiation Budget {"node":32,"name":""}, // GCOS Earth Radiation Budget {"node":33,"name":""}, // GCOS Sea Surface Temperature {"node":34,"name":""}, // GCOS Sea Surface Salinity {"node":35,"name":""}, // GCOS Sea Level {"node":36,"name":""}, // GCOS Sea State {"node":37,"name":""}, // GCOS Sea Ice {"node":38,"name":""}, // GCOS Ocean Colour {"node":39,"name":""}, // GCOS Lakes {"node":40,"name":""}, // GCOS Snow Cover {"node":41,"name":""}, // GCOS Glaciers & Ice Caps {"node":42,"name":""}, // GCOS Ice Sheets {"node":43,"name":""}, // GCOS Permafrost {"node":44,"name":""}, // GCOS Landcover {"node":45,"name":""}, // GCOS Above-Ground Biomass {"node":46,"name":""}, // GCOS Fire Disturbance {"node":47,"name":""}, // GCOS Soil Moisture {"node":48,"name":""}, // GCOS Land-Surface Temperature {"node":49,"name":""}, // GCOS Albedo {"node":50,"name":""}, // GCOS FAPAR {"node":51,"name":""}, // GCOS Leaf Area Index {"node":52,"name":"Water Vapour C3S"}, {"node":53,"name":"Cloud C3S"}, {"node":54,"name":"C02 C3S"}, {"node":55,"name":"Methane C3S"}, {"node":56,"name":"Ozone C3S"}, {"node":57,"name":"Aerosol C3S"}, {"node":58,"name":"Precipitation C3S"}, {"node":59,"name":"Surface Radiation C3S"}, {"node":60,"name":"Earth Radiation Busget C3S"}, {"node":61,"name":"Sea Surface Temperature C3S"}, {"node":62,"name":"Sea Level C3S"}, {"node":63,"name":"Sea Ice C3S"}, {"node":64,"name":"Ocean Colour C3S"}, {"node":65,"name":"Lakes C3S"}, {"node":66,"name":"Glaciers C3S"}, {"node":67,"name":"Ice Sheets C3S"}, {"node":68,"name":"Landcover C3S"}, {"node":69,"name":"Fire Disturbance C3S"}, {"node":70,"name":"Soil Moisture C3S"}, {"node":71,"name":"Albedo C3S"}, {"node":72,"name":"FAPAR C3S"}, {"node":73,"name":"Leaf Area Index C3S"} ] , "links":[ {"source":0,"target":24,value:1}, {"source":1,"target":25,value:2}, {"source":2,"target":26,value:3}, {"source":2,"target":27,value:100}, {"source":3,"target":28,value:100}, {"source":4,"target":29,value:100}, {"source":5,"target":33,value:100}, {"source":6,"target":34,value:100}, {"source":7,"target":35,value:100}, {"source":8,"target":36,value:100}, {"source":9,"target":37,value:100}, {"source":10,"target":38,value:100}, {"source":11,"target":39,value:100}, {"source":12,"target":40,value:100}, {"source":13,"target":41,value:100}, {"source":14,"target":42,value:100}, {"source":15,"target":42,value:100}, {"source":16,"target":43,value:100}, {"source":17,"target":44,value:100}, {"source":18,"target":44,value:100}, {"source":19,"target":45,value:100}, {"source":20,"target":46,value:100}, {"source":21,"target":47,value:100}, {"source":22,"target":48,value:100}, {"source":23,"target":50,value:100}, {"source":23,"target":51,value:100}, {"source":24,"target":52,value:100}, {"source":25,"target":53,value:100}, {"source":26,"target":54,value:100}, {"source":27,"target":55,value:100}, {"source":28,"target":56,value:100}, {"source":29,"target":57,value:100}, {"source":30,"target":58,value:100}, {"source":31,"target":59,value:100}, {"source":32,"target":60,value:100}, {"source":33,"target":61,value:100}, {"source":35,"target":62,value:100}, {"source":37,"target":63,value:100}, {"source":38,"target":64,value:100}, {"source":39,"target":65,value:100}, {"source":41,"target":66,value:100}, {"source":42,"target":67,value:100}, {"source":44,"target":68,value:100}, {"source":46,"target":69,value:100}, {"source":47,"target":70,value:100}, {"source":49,"target":71,value:100}, {"source":50,"target":72,value:100}, {"source":51,"target":73,value:100} ]} ) 47:[] 43:{"id":"67328b2d61b2b4bd","slug":null,"title":"Sankey Diagram english 2","thumbnail":"189441f527ef169d9437f7e422f20d01db2732c9eafa6d80b07d5c2254750dda","access_level":"public","create_time":"$D2023-02-11T07:36:33.762Z","update_time":"$D2023-02-11T08:25:22.061Z","view_time":null,"first_public_time":"$D2023-02-11T07:36:33.762Z","has_unpublished_edits":null,"fork":{"id":"5e6e31c78f7702c3","slug":"sankey-diagram-english-2","title":"Sankey Diagram english 2","owner":{"id":"45fbd05608299361","login":"joakimdalen","name":"Joakim Dalen"}},"stars":0,"starred":false,"owner":{"type":"team","id":"980ab5762f0c5fda","login":"climate2023","name":"treva","avatar_url":"https://avatars-next.observableusercontent.com/45864a9a54f6a87217313a27cd74c7b6b8befe08b16d98388d4d0a124b83c4cb","tier":"starter_2024","bio":"","following":false},"version":1266,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1e3c5c41bb4ac527","login":"climate2023","name":"treva","avatar_url":"https://avatars-next.observableusercontent.com/45864a9a54f6a87217313a27cd74c7b6b8befe08b16d98388d4d0a124b83c4cb","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"1e3c5c41bb4ac527","login":"climate2023","name":"treva","avatar_url":"https://avatars-next.observableusercontent.com/45864a9a54f6a87217313a27cd74c7b6b8befe08b16d98388d4d0a124b83c4cb","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"\nfullscreen = {\n const button = html`