Public
Edited
Apr 3, 2023
Insert cell
Insert cell
import { SankeyChart } from "@d3/sankey"
Insert cell
data = FileAttachment("2019-sankey-v4.csv").csv({ typed: true })
Insert cell
Insert cell
d3.schemeTableau10
Insert cell
colors = [
"#e95e27",
"#891217",
"#b62f18",
"#f6ac59",
"#0e1655",
"#273b80",
"#006fb4",
"#39a9dc",
"#006f3d",
"#7ab51d",
"#e30059"
]
Insert cell
Insert cell
data_2019 = FileAttachment("2019-sankey-v2.csv").csv({ typed: true })
Insert cell
chart_2019_v2 = SankeyChart(
{
links: test
},
{
linkColor,
format: (
(f) => (d) =>
`${f(d)} TWh`
)(d3.format(",.1~f")),
width,
height: 600,
colors
}
)
Insert cell
text_2019 = `Source,Target,Value
Biobased plastics,Primary plastics,2
Fossil-based plastics,Primary plastics,428
Primary plastics,Plastics use,431
Secondary plastics,Plastics use,29
Plastic waste,Collected for recycling,55
Plastic waste,Mismanaged,79
Plastic waste,Incinerated,67
Plastic waste,Landfilled,174
Recycling residues,Plastic waste_2,22
Collected for recycling,Recycling residues,22
Collected for recycling,Plastic scrap,33
Plastic scrap,Process losses,4
Plastic scrap,Secondary plastics,29
Mismanaged,Aquatic leakage,6
Mismanaged,Terrestrial leakage,13
Mismanaged,Open-pit burning,26
Mismanaged,Dump-sites,34`
Insert cell
test = d3.csvParse(text_2019, (d) => {
return {
source: d.Source,
target: d.Target,
value: +d.Value
};
})
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more