2e:null 2f:["$","title",null,{"children":"Sankey Diagram statsbudskjettet v2 nye data flowing animation | Joakim Dalen | Observable"}] 34:T25c4,chart = { const svg=d3.select(DOM.svg(plot.width+margin.left+margin.right, plot.height+margin.top+margin.bottom)); //Embedding font// //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, 'alfaslabone', 'https://fonts.gstatic.com/s/alfaslabone/v9/6NUQ8FmMKwSEKjnm5-4v-4Jh2dJhew.woff2') svg .call(addWebFont, 'Lato', ' 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('Statsbudskjettet 2020') .attr('x',margin.left) .attr('y',margin.top/2-25) .attr('text-anchor','start') .style("fill", '#DCDCDC') .style("font", "50px 'alfaslabone'") .attr('font-weight','Bold') svg.append('text') .text('Hvor kommer pengene fra og hva brukes de til?') .attr('x',margin.left) .attr('y',margin.top/2+30) .attr('text-anchor','start') .style("fill", '#DCDCDC') .style("font", "30px 'Lato'") .attr('font-weight','500') svg.append('text') .text('Inntekter') .attr('x',margin.left) .attr('y',margin.top-60) .attr('text-anchor','start') .attr('fill',colorcat.inn) .attr('font-size','22px') .attr('font-weight','bold') svg.append('text') .text('Statens inntekter er på') .attr('x',margin.left) .attr('y',margin.top-35) .attr('text-anchor','start') .attr('fill',colorcat.inn) .attr('font-size','15px') .attr('font-weight','500') .style("fill", '#DCDCDC') .append('tspan') .text('totalt 1446 milliarder') .attr('x',margin.left) .attr('y',margin.top-17) svg.append('text') .text('Overføringer') .attr('x',margin.left+ plot.width/1.5-nodeWidth/2) .attr('y',margin.top-60) .attr('text-anchor','start') .attr('fill',colorcat.out) .attr('font-size','22px') .attr('font-weight','bold') svg.append('text') .text('Statens overføringer er på') .attr('x',margin.left+plot.width/1.5-nodeWidth/2) .attr('y',margin.top-35) .attr('text-anchor','start') .attr('fill',colorcat.inn) .attr('font-size','15px') .attr('font-weight','500') .style("fill", '#DCDCDC') .append('tspan') .text('totalt 1180 milliarder') .attr('x',margin.left+plot.width/1.5-nodeWidth/2) .attr('y',margin.top-17) svg.append('text') .text('Utgifter') .attr('x',margin.left+ plot.width/1.5-nodeWidth/2) .attr('y',margin.top+plot.height+40) .attr('text-anchor','start') .attr('fill',colorcat.out) .attr('font-size','22px') .attr('font-weight','bold') svg.append('text') .text('Statens egne utgifter er på') .attr('x',margin.left+plot.width/1.5-nodeWidth/2) .attr('y',margin.top+plot.height+60) .attr('text-anchor','start') .attr('fill',colorcat.inn) .attr('font-size','15px') .attr('font-weight','500') .style("fill", '#DCDCDC') .append('tspan') .text('totalt 262 milliarder') .attr('x',margin.left+plot.width/1.5-nodeWidth/2) .attr('y',margin.top+plot.height+78) svg.append('text') .text('Statsbudskjettet for 2020') .attr('x',margin.left+ plot.width/3) .attr('y',margin.top-30) .attr('text-anchor','end') .style("fill", '#DCDCDC') .attr('font-size','20px') .attr('font-weight','bold') .attr('text-anchor','middle') .append('tspan') .text(' inneholder 1446 milliarder') .attr('x',margin.left+ plot.width/3) .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", 0.9) .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) .attr("spreadMethod", "reflect"); var colours = ["#7da5b0", "#185060", "#185060" ,"#7da5b0"]; //Append the colors evenly along the gradient gradient.selectAll(".stop") .data(colours) .enter().append("stop") .attr("offset", function(d,i) { return i/(colours.length-1); }) .attr("stop-color", function(d) { return d; }); //Animate the 'x1' attribute from 0% to 100% in 7 seconds //And do this indefinitely gradient.append("animate") .attr("attributeName","x1") .attr("values","0%;100%") .attr("dur","30s") .attr("repeatCount","indefinite"); //Animate the 'x2' attribute from 100% to 200% in 7 seconds gradient.append("animate") .attr("attributeName","x2") .attr("values","100%;200%") .attr("dur","15s") .attr("repeatCount","indefinite"); 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) .attr("spreadMethod", "reflect"); var colours2 = ["#882915", "#bb5944", "#bb5944" ,"#882915"]; //Append the colors evenly along the gradient gradient2.selectAll(".stop") .data(colours2) .enter().append("stop") .attr("offset", function(d,i) { return i/(colours.length-1); }) .attr("stop-color", function(d) { return d; }); //Animate the 'x1' attribute from 0% to 100% in 7 seconds //And do this indefinitely gradient2.append("animate") .attr("attributeName","x1") .attr("values","0%;100%") .attr("dur","30s") .attr("repeatCount","indefinite"); //Animate the 'x2' attribute from 100% to 200% in 7 seconds gradient2.append("animate") .attr("attributeName","x2") .attr("values","100%;200%") .attr("dur","15s") .attr("repeatCount","indefinite"); 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") .selectAll("text") .data(nodes) .join("text") .attr("x", function(d) {if (d.node==13) {return ((margin.left+margin.right+ plot.width-100)/2) } if (d.node<=12) {return d.x1 -40 } if (d.name== "Trygder og pensjoner"|d.name=="Statens egne driftsutgifter") {return d.x1 -40 } else {return d.x0 +40}}) .attr("y", function(d) {if (d.node==13) {return (margin.top-10) } if (d.name== "Trygder og pensjoner"|d.name=="Statens egne driftsutgifter") {return (d.y1 + d.y0) / 2-23} if (d.name== "Rammetilskudd til kommunene") {return (d.y1 + d.y0) / 2+12} else {return (d.y1 + d.y0) / 2}}) .attr("dy", "0.35em") .attr("text-anchor", function(d) {if (d.node==13) {return 'middle' } if (d.node<=12) {return 'end' } if (d.name== "Trygder og pensjoner"|d.name=="Statens egne driftsutgifter") {return 'end' } else {return 'start'}}) .text(d => d.name) .attr('font-size','16px') .attr('font-weight',function(d) {if (d.node==13) {return 'none' } if (d.name== "Trygder og pensjoner"|d.name=="Statens egne driftsutgifter") {return '700'} else {return '500'}}) .attr('fill',function(d) {if (d.node==13) {return 'none' } if (d.node<=12) {return '#dcdcdc'} if (d.name== "Trygder og pensjoner"|d.name=="Statens egne driftsutgifter") {return 'whitesmoke'} 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 +' mrd' ) .attr('font-size',function(d) {if (d.value<20) {return '0px'} if (d.value<30& d.value>=20) {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(); }35:Te6d,data = ( { "nodes":[ {"node":0,"name":"Merverdiavgift"}, {"node":1,"name":"Skatt på formue og inntekt"}, {"node":2,"name":"Arbeidsgiveravgift"}, {"node":3,"name":"Trygdeavgift"}, {"node":4,"name":"Avgifter på alkohol og tobakk"}, {"node":5,"name":"Avgifter på motorvogner"}, {"node":6,"name":"Andre avgifter"}, {"node":7,"name":"Inntekter fra statlig petroleumsvirksomhet"}, {"node":8,"name":"Skatt og avgift på petroleumsvirksomhet"}, {"node":9,"name":"Aksjeutbytte Equinor"}, {"node":10,"name":"Statens pensjonsfond utland inn"}, {"node":11,"name":"Sum renteinntekter og utbytte*"}, {"node":12,"name":"Andre inntekter"}, {"node":13,"name":"Statsbudsjettet"}, {"node":14,"name":"Trygder og pensjoner"}, {"node":15,"name":"Alderspensjon"}, {"node":16,"name":"Sykepenger"}, {"node":17,"name":"Arbeidsavklaringspenger"}, {"node":18,"name":"Uføretrygd"}, {"node":19,"name":"Dagpenger"}, {"node":20,"name":"Helsetjenester"}, {"node":21,"name":"Foreldrepenger"}, {"node":22,"name":"Arbeidsliv"}, {"node":23,"name":"Barnetrygd og kontantstøtte"}, {"node":24,"name":"Rammetilskudd til kommunene"}, {"node":25,"name":"Regionale helseforetak"}, {"node":26,"name":"Transport og kommunikasjon"}, {"node":27,"name":"Forsvaret"}, {"node":28,"name":"Bistand"}, {"node":29,"name":"Politi"}, {"node":30,"name":"Høyere utdanning og fagskoler"}, {"node":31,"name":"Statens pensjonsfond utland ut"}, {"node":32,"name":"Andre utgifter "}, {"node":33,"name":"Statens egne driftsutgifter"}, {"node":34,"name":"Lønn og godtgjørelser"}, {"node":35,"name":"Varer og tjenester "}, {"node":36,"name":"Andre driftsutgifter"}, {"node":37,"name":"Nybygg og anlegg"}, ] , "links":[ {"source":0,"target":13,"value":326}, {"source":1,"target":13,"value":291}, {"source":2,"target":13,"value":273}, {"source":3,"target":13,"value":203}, {"source":4,"target":13,"value":21}, {"source":5,"target":13,"value":23}, {"source":6,"target":13,"value":62}, {"source":7,"target":13,"value":113}, {"source":8,"target":13,"value":140}, {"source":9,"target":13,"value":20}, {"source":10,"target":13,"value":241}, {"source":11,"target":13,"value":36}, {"source":12,"target":13,"value":164}, {"source":13,"target":14,"value":508}, {"source":14,"target":15,"value":244}, {"source":14,"target":16,"value":45}, {"source":14,"target":17,"value":29}, {"source":14,"target":18,"value":101}, {"source":14,"target":19,"value":9}, {"source":14,"target":20,"value":33}, {"source":14,"target":21,"value":21}, {"source":14,"target":22,"value":10}, {"source":14,"target":23,"value":18}, {"source":13,"target":24,"value":179}, {"source":13,"target":25,"value":167.6}, {"source":13,"target":26,"value":75.4}, {"source":13,"target":27,"value":61}, {"source":13,"target":28,"value":37.6}, {"source":13,"target":29,"value":22.2}, {"source":13,"target":30,"value":71}, {"source":13,"target":31,"value":285}, {"source":13,"target":32,"value":185}, {"source":13,"target":33,"value":187}, {"source":33,"target":34,"value":94}, {"source":33,"target":35,"value":62}, {"source":33,"target":36,"value":32}, {"source":13,"target":37,"value":75}, ]} ) 36:[] 32:{"id":"fb555c8ce456b97f","slug":"sankey-diagram-statsbudskjettet-v2-nye-data-flowing-anima","title":"Sankey Diagram statsbudskjettet v2 nye data flowing animation","thumbnail":"62f50813c3c7ec6a667fc97bfbe0e89517838429b1e61a45b1ac2120d129186f","access_level":"public","create_time":"$D2019-12-21T21:05:46.048Z","update_time":"$D2022-05-02T06:56:12.743Z","view_time":null,"first_public_time":"$D2022-05-02T05:55:35.731Z","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":1281,"publish_version":1281,"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":"Sankey Diagram statsbudskjettet v2 nye data flowing animation","cells":[{"id":0,"value":"md`# Sankey Diagram statsbudskjettet v2 nye data flowing animation\n\nThis [Sankey diagram](https://github.com/d3/d3-sankey) visualizes the flow of energy: *supplies* are on the left, and *demands* are on the right. Links show how varying amounts of energy are converted or transmitted before being consumed or lost.\n\nData: Aftenposten\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"\nfullscreen = {\n const button = html`