2b:null 2c:["$","title",null,{"children":"sankey diagram playground | Sascha Siegmund | Observable"}] 31:T8be,chartBasic = { const svg = d3.create('svg') .attr('height', height) .attr('width', width) .style('font-family', 'sans-serif') .style('font-size', 12) const color = d3.scaleOrdinal(d3.schemeCategory10) const c = d => color(d.category === undefined ? d.name : d.category) const format = d3.format(',.0f') const f = data.units ? d => `${format(d)} ${data.units}` : format const sankey = d3.sankey() .nodeId(d => d.name) .nodeAlign(d3.sankeyJustify) .nodeWidth(15) .nodePadding(10) .extent([[1,5], [width - 1, height - 5]]) const {nodes, links} = sankey(data); // sankey() modifies input directly 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', c) .append('title') .text(d => `${d.name}\n${f(d.value)}`) const link = svg.append('g') .attr('fill', 'none') .attr('stroke-opacity', 0.5) .selectAll('g') .data(links) .join('g') .style('mix-blend-mode', 'multiply') const 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', '0%') .attr('stop-color', d => c(d.source)) gradient.append('stop') .attr('offset', '100%') .attr('stop-color', d => c(d.target)) link.append('path') .attr('d', d3.sankeyLinkHorizontal()) .attr('stroke', d => d.uid) .attr('stroke-width', d => Math.max(1, d.width)) link.append('title') .text(d => `${d.source.name} → ${d.target.name}\n${f(d.value)}`) svg.append('g') .attr('font-family', 'sans-serif') .attr('font-size', 10) .selectAll('text') .data(nodes) .join('text') .attr('x', d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6) .attr('y', d => (d.y1 + d.y0) / 2) .attr('dy', '0.35em') .attr('text-anchor', d => d.x0 < width / 2 ? 'start' : 'end') .text(d => d.name) return svg.node() }32:T92b,chartColor = { const svg = d3.create('svg') .attr('height', height) .attr('width', width) .style('font-family', 'sans-serif') .style('font-size', 12) const color = d3.scaleOrdinal(chroma.scale(['#fafa6e','#2A4858'].map(color => chroma(color).saturate(4))).mode('lch').colors(10)) const c = d => color(d.category === undefined ? d.name : d.category) const format = d3.format(',.0f') const f = data.units ? d => `${format(d)} ${data.units}` : format const sankey = d3.sankey() .nodeId(d => d.name) .nodeAlign(d3.sankeyJustify) .nodeWidth(15) .nodePadding(10) .extent([[1,5], [width - 1, height - 5]]) const {nodes, links} = sankey(data); // sankey() modifies input directly 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', c) .attr('stroke', 'none') .append('title') .text(d => `${d.name}\n${f(d.value)}`) const link = svg.append('g') .attr('fill', 'none') .attr('stroke-opacity', 0.5) .selectAll('g') .data(links) .join('g') .style('mix-blend-mode', 'multiply') const 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', '0%') .attr('stop-color', d => c(d.source)) gradient.append('stop') .attr('offset', '100%') .attr('stop-color', d => c(d.target)) link.append('path') .attr('d', d3.sankeyLinkHorizontal()) .attr('stroke', d => d.uid) .attr('stroke-width', d => Math.max(1, d.width)) link.append('title') .text(d => `${d.source.name} → ${d.target.name}\n${f(d.value)}`) svg.append('g') .attr('font-family', 'sans-serif') .attr('font-size', 10) .selectAll('text') .data(nodes) .join('text') .attr('x', d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6) .attr('y', d => (d.y1 + d.y0) / 2) .attr('dy', '0.35em') .attr('text-anchor', d => d.x0 < width / 2 ? 'start' : 'end') .text(d => d.name) return svg.node() }33:Tb5a,chartGlow = { const svg = d3.create('svg') .attr('height', height) .attr('width', width) .style('font-family', 'sans-serif') .style('font-size', 12) // glow effect see https://www.visualcinnamon.com/2016/06/glow-filter-d3-visualization const defs = svg.append('defs') const filter = defs.append('filter') .attr('id', 'glow') .attr('width','5000%') .attr('height','5000%') filter.append('feGaussianBlur') .attr('stdDeviation', '2') .attr('result', 'coloredBlur') const feMerge = filter.append('feMerge') feMerge.append('feMergeNode').attr('in', 'coloredBlur') feMerge.append('feMergeNode').attr('in', 'SourceGraphic') // --- const color = d3.scaleOrdinal(chroma.scale(['#fafa6e','#2A4858'].map(color => chroma(color).saturate(4))).mode('lch').colors(10)) const c = d => color(d.category === undefined ? d.name : d.category) const format = d3.format(',.0f') const f = data.units ? d => `${format(d)} ${data.units}` : format const sankey = d3.sankey() .nodeId(d => d.name) .nodeAlign(d3.sankeyJustify) .nodeWidth(15) .nodePadding(10) .extent([[1,5], [width - 1, height - 5]]) const {nodes, links} = sankey(data); // sankey() modifies input directly 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', c) .attr('stroke', 'none') .append('title') .text(d => `${d.name}\n${f(d.value)}`) const link = svg.append('g') .attr('fill', 'none') .attr('stroke-opacity', 0.5) .style('filter', 'url(#glow)') .selectAll('g') .data(links) .join('g') .style('mix-blend-mode', 'multiply') const 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', '0%') .attr('stop-color', d => c(d.source)) gradient.append('stop') .attr('offset', '100%') .attr('stop-color', d => c(d.target)) link.append('path') .attr('d', d3.sankeyLinkHorizontal()) .attr('stroke', d => d.uid) .attr('stroke-width', d => Math.max(1, d.width)) link.append('title') .text(d => `${d.source.name} → ${d.target.name}\n${f(d.value)}`) svg.append('g') .attr('font-family', 'sans-serif') .attr('font-size', 10) .selectAll('text') .data(nodes) .join('text') .attr('x', d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6) .attr('y', d => (d.y1 + d.y0) / 2) .attr('dy', '0.35em') .attr('text-anchor', d => d.x0 < width / 2 ? 'start' : 'end') .text(d => d.name) return svg.node() }34:T1126,chartDiffuse = { const svg = d3.create('svg') .attr('height', height) .attr('width', width) .style('font-family', 'sans-serif') .style('font-size', 12) const defs = svg.append('defs') // pencil filter const pencilFilter = defs.append('filter') .attr('id', 'pencilTexture') .attr('width','150%') .attr('height','150%') .attr('x','-20%') .attr('y','-20%') .attr('filterUnits','objectBoundingBox') pencilFilter.append('feGaussianBlur') // glow of original line .attr('stdDeviation', '1.1') .attr('result', 'coloredBlur') pencilFilter.append('feTurbulence') .attr('type','fractalNoise') .attr('baseFrequency', 0.7) .attr('numOctaves', 5) .attr('stitchTiles', 'stitch') .attr('result', 't1') pencilFilter.append('feColorMatrix') .attr('type','matrix') .attr('values','0 0 0 0 0, 0 0 0 0 0, 0 0 0 0 0, 0 0 0 -1.4 1.3') .attr('result','t2') pencilFilter.append('feComposite') .attr('operator','in') .attr('in','SourceGraphic') .attr('in2','t2') .attr('result','SourceTextured') pencilFilter.append('feTurbulence') .attr('type','fractalNoise') .attr('baseFrequency', .5) .attr('numOctaves', 5) .attr('seed', '10') .attr('result', 'f2') pencilFilter.append('feDisplacementMap') .attr('xChannelSelector','R') .attr('yChannelSelector', 'G') .attr('scale', 20) .attr('in', 'SourceTextured') .attr('in2', 'f2') .attr('result', 'f5') pencilFilter.append('feTurbulence') .attr('type','fractalNoise') .attr('baseFrequency', .5) .attr('numOctaves', 5) .attr('seed', '100') .attr('result', 'f3') pencilFilter.append('feDisplacementMap') .attr('xChannelSelector','R') .attr('yChannelSelector', 'G') .attr('scale', 20) .attr('in', 'SourceTextured') .attr('in2', 'f3') .attr('result', 'f6') pencilFilter.append('feBlend') .attr('mode','multiply') .attr('in', 'f5') .attr('in2', 'f4') .attr('result', 'out1') pencilFilter.append('feBlend') .attr('mode','multiply') .attr('in', 'out1') .attr('in2', 'f6') .attr('result', 'out2') // --- const color = d3.scaleOrdinal(chroma.scale(['#fafa6e','#2A4858'].map(color => chroma(color).saturate(4))).mode('lch').colors(10)) const c = d => color(d.category === undefined ? d.name : d.category) const format = d3.format(',.0f') const f = data.units ? d => `${format(d)} ${data.units}` : format const sankey = d3.sankey() .nodeId(d => d.name) .nodeAlign(d3.sankeyJustify) .nodeWidth(15) .nodePadding(10) .extent([[1,5], [width - 1, height - 5]]) const {nodes, links} = sankey(data); // sankey() modifies input directly 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', c) .attr('stroke', 'none') .append('title') .text(d => `${d.name}\n${f(d.value)}`) const link = svg.append('g') .attr('fill', 'none') .attr('stroke-opacity', 0.5) .attr('filter', 'url(#pencilTexture)') .selectAll('g') .data(links) .join('g') .style('mix-blend-mode', 'multiply') const 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', '0%') .attr('stop-color', d => c(d.source)) gradient.append('stop') .attr('offset', '100%') .attr('stop-color', d => c(d.target)) link.append('path') .attr('d', d3.sankeyLinkHorizontal()) .attr('stroke', d => d.uid) .attr('stroke-width', d => Math.max(1, d.width)) link.append('title') .text(d => `${d.source.name} → ${d.target.name}\n${f(d.value)}`) svg.append('g') .attr('font-family', 'sans-serif') .attr('font-size', 10) .selectAll('text') .data(nodes) .join('text') .attr('x', d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6) .attr('y', d => (d.y1 + d.y0) / 2) .attr('dy', '0.35em') .attr('text-anchor', d => d.x0 < width / 2 ? 'start' : 'end') .text(d => d.name) return svg.node() }35:T10ad,chartWatercolor = { const svg = d3.create('svg') .attr('height', height) .attr('width', width) .style('font-family', 'sans-serif') .style('font-size', 12) const defs = svg.append('defs') // pencil filter const pencilFilter = defs.append('filter') .attr('id', 'pencilTexture2') .attr('width','5000%') .attr('height','5000%') .attr('x','-2000%') .attr('y','-2000%') .attr('filterUnits','objectBoundingBox') pencilFilter.append('feTurbulence') .attr('type','fractalNoise') .attr('baseFrequency', .015) .attr('numOctaves', 5) .attr('stitchTiles', 'stitch') .attr('result', 't1') pencilFilter.append('feColorMatrix') .attr('type','matrix') .attr('values','0 0 0 0 0, 0 0 0 0 0, 0 0 0 0 0, 0 0 0 -1.4 1.3') .attr('result','t2') pencilFilter.append('feComposite') .attr('operator','in') .attr('in','SourceGraphic') .attr('in2','t2') .attr('result','SourceTextured') pencilFilter.append('feTurbulence') .attr('type','fractalNoise') .attr('baseFrequency', .05) .attr('numOctaves', 5) .attr('seed', '10') .attr('result', 'f2') pencilFilter.append('feDisplacementMap') .attr('xChannelSelector','R') .attr('yChannelSelector', 'G') .attr('scale', 10) .attr('in', 'SourceTextured') .attr('in2', 'f2') .attr('result', 'f5') pencilFilter.append('feTurbulence') .attr('type','fractalNoise') .attr('baseFrequency', .05) .attr('numOctaves', 5) .attr('seed', '100') .attr('result', 'f3') pencilFilter.append('feDisplacementMap') .attr('xChannelSelector','R') .attr('yChannelSelector', 'G') .attr('scale', 10) .attr('in', 'SourceTextured') .attr('in2', 'f3') .attr('result', 'f6') pencilFilter.append('feBlend') .attr('mode','multiply') .attr('in', 'f5') .attr('in2', 'f4') .attr('result', 'out1') pencilFilter.append('feBlend') .attr('mode','multiply') .attr('in', 'out1') .attr('in2', 'f6') .attr('result', 'out2') // --- const color = d3.scaleOrdinal(chroma.scale(['#fafa6e','#2A4858'].map(color => chroma(color).saturate(4))).mode('lch').colors(10)) const c = d => color(d.category === undefined ? d.name : d.category) const format = d3.format(',.0f') const f = data.units ? d => `${format(d)} ${data.units}` : format const sankey = d3.sankey() .nodeId(d => d.name) .nodeAlign(d3.sankeyJustify) .nodeWidth(15) .nodePadding(10) .extent([[1,5], [width - 1, height - 5]]) const {nodes, links} = sankey(data); // sankey() modifies input directly 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', c) .attr('stroke', 'none') .append('title') .text(d => `${d.name}\n${f(d.value)}`) const link = svg.append('g') .attr('fill', 'none') .attr('stroke-opacity', 0.5) .attr('filter', 'url(#pencilTexture2)') .selectAll('g') .data(links) .join('g') .style('mix-blend-mode', 'multiply') const 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', '0%') .attr('stop-color', d => c(d.source)) gradient.append('stop') .attr('offset', '100%') .attr('stop-color', d => c(d.target)) link.append('path') .attr('d', d3.sankeyLinkHorizontal()) .attr('stroke', d => d.uid) .attr('stroke-width', d => Math.max(1, d.width)) link.append('title') .text(d => `${d.source.name} → ${d.target.name}\n${f(d.value)}`) svg.append('g') .attr('font-family', 'sans-serif') .attr('font-size', 10) .selectAll('text') .data(nodes) .join('text') .attr('x', d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6) .attr('y', d => (d.y1 + d.y0) / 2) .attr('dy', '0.35em') .attr('text-anchor', d => d.x0 < width / 2 ? 'start' : 'end') .text(d => d.name) return svg.node() }36:T1234,chartPencil = { const svg = d3.create('svg') .attr('height', height) .attr('width', width) .style('font-family', 'sans-serif') .style('font-size', 12) const defs = svg.append('defs') // pencil filter const pencilFilter = defs.append('filter') .attr('id', 'pencilTextureClean') .attr('width','140%') .attr('height','140%') .attr('x','-20%') .attr('y','-20%') .attr('filterUnits','objectBoundingBox') pencilFilter.append('feTurbulence') .attr('type','fractalNoise') .attr('baseFrequency', 2) .attr('numOctaves', 5) .attr('stitchTiles', 'stitch') .attr('result', 't1') pencilFilter.append('feColorMatrix') .attr('type','matrix') .attr('values','0 0 0 0 0, 0 0 0 0 0, 0 0 0 0 0, 0 0 0 -1.5 1.5') .attr('result','t2') pencilFilter.append('feComposite') .attr('operator','in') .attr('in','SourceGraphic') .attr('in2','t2') .attr('result','SourceTextured') pencilFilter.append('feTurbulence') .attr('type','fractalNoise') .attr('baseFrequency', .03) .attr('numOctaves', 5) .attr('seed', '1') .attr('result', 'f1') pencilFilter.append('feDisplacementMap') .attr('xChannelSelector','R') .attr('yChannelSelector', 'G') .attr('scale', 5) .attr('in', 'SourceTextured') .attr('in2', 'f1') .attr('result', 'f4') pencilFilter.append('feTurbulence') .attr('type','fractalNoise') .attr('baseFrequency', .03) .attr('numOctaves', 5) .attr('seed', '10') .attr('result', 'f2') pencilFilter.append('feDisplacementMap') .attr('xChannelSelector','R') .attr('yChannelSelector', 'G') .attr('scale', 5) .attr('in', 'SourceTextured') .attr('in2', 'f2') .attr('result', 'f5') pencilFilter.append('feTurbulence') .attr('type','fractalNoise') .attr('baseFrequency', .03) .attr('numOctaves', 5) .attr('seed', '100') .attr('result', 'f3') pencilFilter.append('feDisplacementMap') .attr('xChannelSelector','R') .attr('yChannelSelector', 'G') .attr('scale', 3) .attr('in', 'SourceTextured') .attr('in2', 'f3') .attr('result', 'f6') pencilFilter.append('feBlend') .attr('mode','multiply') .attr('in', 'f5') .attr('in2', 'f4') .attr('result', 'out1') pencilFilter.append('feBlend') .attr('mode','multiply') .attr('in', 'out1') .attr('in2', 'f6') .attr('result', 'out2') // --- const color = d3.scaleOrdinal(chroma.scale(['#fafa6e','#2A4858'].map(color => chroma(color).saturate(4))).mode('lch').colors(10)) const c = d => color(d.category === undefined ? d.name : d.category) const format = d3.format(',.0f') const f = data.units ? d => `${format(d)} ${data.units}` : format const sankey = d3.sankey() .nodeId(d => d.name) .nodeAlign(d3.sankeyJustify) .nodeWidth(15) .nodePadding(10) .extent([[1,5], [width - 1, height - 5]]) const {nodes, links} = sankey(data); // sankey() modifies input directly 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', c) .attr('stroke', 'none') .append('title') .text(d => `${d.name}\n${f(d.value)}`) const link = svg.append('g') .attr('fill', 'none') .attr('stroke-opacity', 0.5) .attr('filter', 'url(#pencilTextureClean)') .selectAll('g') .data(links) .join('g') .style('mix-blend-mode', 'multiply') const 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', '0%') .attr('stop-color', d => c(d.source)) gradient.append('stop') .attr('offset', '100%') .attr('stop-color', d => c(d.target)) link.append('path') .attr('d', d3.sankeyLinkHorizontal()) .attr('stroke', d => d.uid) .attr('stroke-width', d => Math.max(1, d.width)) link.append('title') .text(d => `${d.source.name} → ${d.target.name}\n${f(d.value)}`) svg.append('g') .attr('font-family', 'sans-serif') .attr('font-size', 10) .selectAll('text') .data(nodes) .join('text') .attr('x', d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6) .attr('y', d => (d.y1 + d.y0) / 2) .attr('dy', '0.35em') .attr('text-anchor', d => d.x0 < width / 2 ? 'start' : 'end') .text(d => d.name) return svg.node() }37:T13ec,chartPattern = { const svg = d3.create('svg') .attr('height', height) .attr('width', width) .style('font-family', 'sans-serif') .style('font-size', 12) const color = d3.scaleOrdinal(chroma.scale(['#fafa6e','#2A4858'].map(color => chroma(color).saturate(4))).mode('lch').colors(10)) const c = d => color(d.category === undefined ? d.name : d.category) const defs = svg.append('defs') // pencil filter const pencilFilter = defs.append('filter') .attr('id', 'pencilTexturePattern') .attr('width','140%') .attr('height','140%') .attr('x','-20%') .attr('y','-20%') .attr('filterUnits','objectBoundingBox') pencilFilter.append('feTurbulence') .attr('type','fractalNoise') .attr('baseFrequency', 2) .attr('numOctaves', 5) .attr('stitchTiles', 'stitch') .attr('result', 't1') pencilFilter.append('feColorMatrix') .attr('type','matrix') .attr('values','0 0 0 0 0, 0 0 0 0 0, 0 0 0 0 0, 0 0 0 -1.5 1.5') .attr('result','t2') pencilFilter.append('feComposite') .attr('operator','in') .attr('in','SourceGraphic') .attr('in2','t2') .attr('result','SourceTextured') pencilFilter.append('feTurbulence') .attr('type','fractalNoise') .attr('baseFrequency', .03) .attr('numOctaves', 5) .attr('seed', '1') .attr('result', 'f1') pencilFilter.append('feDisplacementMap') .attr('xChannelSelector','R') .attr('yChannelSelector', 'G') .attr('scale', 5) .attr('in', 'SourceTextured') .attr('in2', 'f1') .attr('result', 'f4') pencilFilter.append('feTurbulence') .attr('type','fractalNoise') .attr('baseFrequency', .03) .attr('numOctaves', 5) .attr('seed', '10') .attr('result', 'f2') pencilFilter.append('feDisplacementMap') .attr('xChannelSelector','R') .attr('yChannelSelector', 'G') .attr('scale', 5) .attr('in', 'SourceTextured') .attr('in2', 'f2') .attr('result', 'f5') pencilFilter.append('feTurbulence') .attr('type','fractalNoise') .attr('baseFrequency', .03) .attr('numOctaves', 5) .attr('seed', '100') .attr('result', 'f3') pencilFilter.append('feDisplacementMap') .attr('xChannelSelector','R') .attr('yChannelSelector', 'G') .attr('scale', 3) .attr('in', 'SourceTextured') .attr('in2', 'f3') .attr('result', 'f6') pencilFilter.append('feBlend') .attr('mode','multiply') .attr('in', 'f5') .attr('in2', 'f4') .attr('result', 'out1') pencilFilter.append('feBlend') .attr('mode','multiply') .attr('in', 'out1') .attr('in2', 'f6') .attr('result', 'out2') // --- const format = d3.format(',.0f') const f = data.units ? d => `${format(d)} ${data.units}` : format const sankey = d3.sankey() .nodeId(d => d.name) .nodeAlign(d3.sankeyJustify) .nodeWidth(15) .nodePadding(10) .extent([[1,5], [width - 1, height - 5]]) const {nodes, links} = sankey(data); // sankey() modifies input directly 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', c) .attr('stroke', 'none') .append('title') .text(d => `${d.name}\n${f(d.value)}`) const link = svg.append('g') .attr('fill', 'none') .attr('stroke-opacity', 0.5) .attr('filter', 'url(#pencilTexturePattern)') .selectAll('g') .data(links) .join('g') .style('mix-blend-mode', 'multiply') const 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) // hatching pattern (gradient) const patterns = defs.selectAll('pattern') .data(links) .join('pattern') .attr('width',4) .attr('height',4) .attr('patternUnits','userSpaceOnUse') .attr('id', d => 'hatchingPencil-' + d.index) .append('path') .attr('d',"M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2") .style('stroke', d => d.uid) .style('stroke-width', 1) // --- gradient.append('stop') .attr('offset', '0%') .attr('stop-color', d => c(d.source)) gradient.append('stop') .attr('offset', '100%') .attr('stop-color', d => c(d.target)) link.append('path') .attr('d', d3.sankeyLinkHorizontal()) .style('stroke', d => 'url(#hatchingPencil-'+ d.index +')') .attr('stroke-width', d => Math.max(1, d.width)) link.append('title') .text(d => `${d.source.name} → ${d.target.name}\n${f(d.value)}`) svg.append('g') .attr('font-family', 'sans-serif') .attr('font-size', 10) .selectAll('text') .data(nodes) .join('text') .attr('x', d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6) .attr('y', d => (d.y1 + d.y0) / 2) .attr('dy', '0.35em') .attr('text-anchor', d => d.x0 < width / 2 ? 'start' : 'end') .text(d => d.name) return svg.node() }38:Tbc2,chartShadow = { const svg = d3.create('svg') .attr('height', height) .attr('width', width) .style('font-family', 'sans-serif') .style('font-size', 12) // shadow effect from https://observablehq.com/@nbremer/drop-shadow-svg-filter const defs = svg.append('defs') const filter = defs.append('filter').attr('id', 'shadow') filter.append('feColorMatrix') .attr('type', 'matrix') .attr('values', `0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0`) filter.append('feGaussianBlur') .attr('stdDeviation', '1.5') .attr('result', 'coloredBlur') const feMerge = filter.append('feMerge') feMerge.append('feMergeNode').attr('in', 'coloredBlur') feMerge.append('feMergeNode').attr('in', 'SourceGraphic') // --- const color = d3.scaleOrdinal(chroma.scale(['#fafa6e','#2A4858'].map(color => chroma(color).saturate(4))).mode('lch').colors(10)) const c = d => color(d.category === undefined ? d.name : d.category) const format = d3.format(',.0f') const f = data.units ? d => `${format(d)} ${data.units}` : format const sankey = d3.sankey() .nodeId(d => d.name) .nodeAlign(d3.sankeyJustify) .nodeWidth(15) .nodePadding(10) .extent([[1,5], [width - 1, height - 5]]) const {nodes, links} = sankey(data); // sankey() modifies input directly const link = svg.append('g') .attr('fill', 'none') .attr('stroke-opacity', 0.5) .style('filter', 'url(#shadow)') .selectAll('g') .data(links) .join('g') .style('mix-blend-mode', 'none') const 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', '0%') .attr('stop-color', d => c(d.source)) gradient.append('stop') .attr('offset', '100%') .attr('stop-color', d => c(d.target)) link.append('path') .attr('d', d3.sankeyLinkHorizontal()) .attr('stroke', d => d.uid) .attr('stroke-width', d => Math.max(1, d.width)) link.append('title') .text(d => `${d.source.name} → ${d.target.name}\n${f(d.value)}`) svg.append('g') .attr('stroke', '#000') .style('filter', 'url(#shadow)') .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', c) .attr('stroke', 'none') .append('title') .text(d => `${d.name}\n${f(d.value)}`) svg.append('g') .attr('font-family', 'sans-serif') .attr('font-size', 10) .selectAll('text') .data(nodes) .join('text') .attr('x', d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6) .attr('y', d => (d.y1 + d.y0) / 2) .attr('dy', '0.35em') .attr('text-anchor', d => d.x0 < width / 2 ? 'start' : 'end') .text(d => d.name) return svg.node() }39:T915,chartMinimal = { const svg = d3.create('svg') .attr('height', height) .attr('width', width) .style('font-family', 'sans-serif') .style('font-size', 12) const color = d3.scaleOrdinal(chroma.scale(['#fafa6e','#2A4858'].map(color => chroma(color).saturate(4))).mode('lch').colors(10)) const c = d => color(d.category === undefined ? d.name : d.category) const format = d3.format(',.0f') const f = data.units ? d => `${format(d)} ${data.units}` : format const sankey = d3.sankey() .nodeId(d => d.name) .nodeAlign(d3.sankeyJustify) .nodeWidth(15) .nodePadding(10) .extent([[1,5], [width - 1, height - 5]]) const {nodes, links} = sankey(data); // sankey() modifies input directly 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', c) .attr('stroke', 'none') .append('title') .text(d => `${d.name}\n${f(d.value)}`) const link = svg.append('g') .attr('fill', 'none') .attr('stroke-opacity', 0.5) .selectAll('g') .data(links) .join('g') .style('mix-blend-mode', 'multiply') const 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', '0%') .attr('stop-color', d => c(d.source)) gradient.append('stop') .attr('offset', '100%') .attr('stop-color', d => c(d.target)) link.append('path') .attr('d', d3.sankeyLinkHorizontal()) .attr('stroke', d => d.uid) .attr('stroke-width', 4) link.append('title') .text(d => `${d.source.name} → ${d.target.name}\n${f(d.value)}`) svg.append('g') .attr('font-family', 'sans-serif') .attr('font-size', 10) .selectAll('text') .data(nodes) .join('text') .attr('x', d => d.x0 < width / 2 ? d.x1 + 6 : d.x0 - 6) .attr('y', d => (d.y1 + d.y0) / 2) .attr('dy', '0.35em') .attr('text-anchor', d => d.x0 < width / 2 ? 'start' : 'end') .text(d => d.name) return svg.node() }3a:[{"id":"d6774e9422bd72369f195a30d3a6b33ff9d41676cff4d89c93511e1a458efb3cfd16cbb7ce3fecdd8dd2466121e10c9bfe57fd73c7520bf358d352a92b898614","href":"https://static.observableusercontent.com/files/d6774e9422bd72369f195a30d3a6b33ff9d41676cff4d89c93511e1a458efb3cfd16cbb7ce3fecdd8dd2466121e10c9bfe57fd73c7520bf358d352a92b898614","name":"energy.csv","type":"text/csv","lastModified":1608058890539.778,"size":2267}] 2f:{"id":"63ac5ebe90406e65","slug":"sankey-diagram-playground","title":"sankey diagram playground","thumbnail":"c25529967fd6d89724095d8b3dc6dcfc4b54412fd4d550b20f45af8d3b840a45","access_level":"public","create_time":"$D2020-12-13T00:36:16.300Z","update_time":"$D2024-11-28T18:51:30.234Z","view_time":null,"first_public_time":"$D2020-12-18T13:52:01.304Z","fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"bc002cf305008bcd","login":"ssiegmund","name":"Sascha Siegmund","avatar_url":"https://avatars-next.observableusercontent.com/5a45ae371c30c037498e6662f34fe1463a4a35a14b5b511f42f25fe648219dcb","tier":"starter_2024"},"version":469,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"bc548c62f8872cf2","login":"ssiegmund","name":"Sascha Siegmund","avatar_url":"https://avatars-next.observableusercontent.com/5a45ae371c30c037498e6662f34fe1463a4a35a14b5b511f42f25fe648219dcb","tier":null}],"members":[{"type":"individual","id":"bc548c62f8872cf2","login":"ssiegmund","name":"Sascha Siegmund","avatar_url":"https://avatars-next.observableusercontent.com/5a45ae371c30c037498e6662f34fe1463a4a35a14b5b511f42f25fe648219dcb","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":5,"collection":{"id":"54dbead08078c4bf","slug":"learn","title":"playgrounds","owner":{"id":"bc002cf305008bcd","login":"ssiegmund","name":"Sascha Siegmund"}},"type":"notebook","body":{"title":"sankey diagram playground","cells":[{"id":0,"value":"md`# sankey diagram playground`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"md `refrences: \nhttps://observablehq.com/@d3/sankey-diagram \nhttps://www.d3-graph-gallery.com/sankey.html \nhttps://observablehq.com/@didoesdigital/18-july-2020-about-sankey-alluvial-parallel-sets-and-parall \nhttps://observablehq.com/@d3/parallel-sets?collection=@d3/d3-sankey`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":82,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":167,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":199,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":212,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":411,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":432,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":446,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":460,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":38,"value":"data = {\n const links = await FileAttachment('energy.csv').csv({typed:true});\n const nodes = Array.from(new Set(links.flatMap(l => [l.source, l.target])), name => ({name, category: name.replace(/ .*/, '')}));\n return {nodes, links, units: \"TWh\"};\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"margin = ({left:40, bottom:40, top:20, right:20})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"width = 900","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":25,"value":"d3 = require(\"d3@6\", \"d3-sankey@0.12\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":29,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":32,"value":"chroma = (await import(\"https://unpkg.com/chroma-js\")).default","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W3a","stdlib":"1","titling":"auto"}} 30:"$2f:body"