Public
Edited
Nov 22, 2022
chart = addTooltips(
Plot.plot({
width: (width, document.body.clientWidth),
height: 400,
marginLeft: 60,
marginRight: 60,
marginTop: 10,
marginBottom: 40,
x: {
ticks: 5,
grid: true,
tickSize: 0,
domain: [0, 3000],
tickFormat: d => `${(d.toLocaleString("de"))}`,
label: "Exporte ->"
},
y: {
ticks: 4,
grid: true,
tickSize: 0,
domain: [0, 20000],
tickFormat: d => `${(d.toLocaleString("de"))}`,
label: "BIP ↑"
},
r: {
range: [0, 40]
},
marks: [
Plot.dot(trade_pop_gdp_wb.filter(d => d.jahr === year & d.land === "China"), {
x: "export",
y: "gdp",
r: "population",
opacity: 0.8,
fill: "#e84f1c",
title: (d) => `${d.land} \n ${d.jahr} \n Exporte: ${(d.export.toLocaleString("de", {minimumFractionDigits: 0, maximumFractionDigits: 0}))} Mrd. US-Dollar \n BIP: ${(d.gdp.toLocaleString("de", {minimumFractionDigits: 0, maximumFractionDigits: 0}))} Mrd. US-Dollar \n Bevölkerung: ${(d.population.toLocaleString("de", {minimumFractionDigits: 0, maximumFractionDigits: 0}))}`
}),
Plot.dot(trade_pop_gdp_wb.filter(d => d.jahr === year & d.land === "Deutschland"), {
x: "export",
y: "gdp",
r: "population",
fill: "#4f80ff",
opacity: 0.8,
title: (d) => `${d.land} \n ${d.jahr} \n Exporte: ${(d.export.toLocaleString("de", {minimumFractionDigits: 0, maximumFractionDigits: 0}))} Mrd. US-Dollar \n BIP: ${(d.gdp.toLocaleString("de", {minimumFractionDigits: 0, maximumFractionDigits: 0}))} Mrd. US-Dollar \n Bevölkerung: ${(d.population.toLocaleString("de", {minimumFractionDigits: 0, maximumFractionDigits: 0}))}`
}),
Plot.text(trade_pop_gdp_wb.filter(d => d.jahr === year & d.land === "Deutschland"), {
x: "export",
y: "gdp",
fill: "#fff",
text: (d) => "DE",
dx: 0,
dy: 0,
textAnchor: "middle",
title: (d) => `${d.land} \n ${d.jahr} \n Exporte: ${(d.export.toLocaleString("de", {minimumFractionDigits: 0, maximumFractionDigits: 0}))} Mrd. US-Dollar \n BIP: ${(d.gdp.toLocaleString("de", {minimumFractionDigits: 0, maximumFractionDigits: 0}))} Mrd. US-Dollar \n Bevölkerung: ${(d.population.toLocaleString("de", {minimumFractionDigits: 0, maximumFractionDigits: 0}))}`
}),
Plot.dot(trade_pop_gdp_wb.filter(d => d.jahr === year & d.land != "China" & d.land != "Deutschland"), {
x: "export",
y: "gdp",
r: "population",
fill: "#99AFC2",
opacity: 0.5,
title: (d) => `${d.land} \n ${d.jahr} \n Exporte: ${(d.export.toLocaleString("de", {minimumFractionDigits: 0, maximumFractionDigits: 0}))} Mrd. US-Dollar \n BIP: ${(d.gdp.toLocaleString("de", {minimumFractionDigits: 0, maximumFractionDigits: 0}))} Mrd. US-Dollar \n Bevölkerung: ${(d.population.toLocaleString("de", {minimumFractionDigits: 0, maximumFractionDigits: 0}))}`
}),
Plot.text(trade_pop_gdp_wb.filter(d => d.jahr === year & (d.land === "China" | d.land === "USA")), {
x: "export",
y: "gdp",
fill: "#fff",
text: (d) => d.land,
dx: 0,
dy: 0,
textAnchor: "middle",
title: (d) => `${d.land} \n ${d.jahr} \n Exporte: ${(d.export.toLocaleString("de", {minimumFractionDigits: 0, maximumFractionDigits: 0}))} Mrd. US-Dollar \n BIP: ${(d.gdp.toLocaleString("de", {minimumFractionDigits: 0, maximumFractionDigits: 0}))} Mrd. US-Dollar \n Bevölkerung: ${(d.population.toLocaleString("de", {minimumFractionDigits: 0, maximumFractionDigits: 0}))}`
})
]
}),
{ opacity: .6, "stroke-width": "1px" }
)
chemie = Plot.plot({
width: (width, document.body.clientWidth),
height: 460,
marginLeft: 20,
marginTop: 20,
marginRight: 60,
marginBottom: 2.5,
y: {
grid: true,
label: "",
axis: "right",
domain: [0,42],
ticks: [1,4,40],
tickFormat: d => `${(d*100).toLocaleString("de")}%`
},
x: {
axis: "top"
},
marks: [
Plot.frame(),
Plot.ruleY([0]),
Plot.text(import_time_china_chemie,
Plot.selectFirst({
text: (d) => d.produkt,
x: (d) => new Date(2008,0,1),
y: 41,
textAnchor: "start",
dx: 5
})
),
Plot.areaY(import_time_china_chemie,
Plot.normalizeY({
x: "date",
y: "wert",
fill: "#99AFC2",
fillOpacity: 0.2,
curve: "natural"
})),
Plot.lineY(import_time_china_chemie,
Plot.normalizeY({
x: "date",
y: "wert",
stroke: "#99AFC2",
strokeWidth: 1,
curve: "natural"
}))
]
})
facet = Plot.plot({
width: (width, document.body.clientWidth),
height: 850,
marginLeft: 20,
marginTop: 0,
marginRight: 60,
fy: {
domain: produkte,
tickFormat: null
},
y: {
grid: true,
label: "",
axis: "right",
domain: [0,6.5],
ticks: [1,4],
tickFormat: d => `${(d*100).toLocaleString("de")}%`
},
x: {
label: "",
tickFormat: d => `${d.toLocaleString("de", {year: "numeric"})}`
},
facet: {
data: import_time_china_filter,
y: "produkt",
label: ""
},
marks: [
Plot.frame(),
Plot.text(import_time_china_filter,
Plot.selectFirst({
text: (d) => d.produkt,
x: (d) => new Date(2008,0,1),
y: 5,
textAnchor: "start",
dx: 5
})
),
Plot.areaY(import_time_china_filter,
Plot.normalizeY({
x: "date",
y: "wert",
fill: "#99AFC2",
fillOpacity: 0.2,
curve: "natural"
})),
Plot.lineY(import_time_china_filter,
Plot.normalizeY({
x: "date",
y: "wert",
stroke: "#99AFC2",
strokeWidth: 1,
curve: "natural"
}))
]
})
credits_facet = md`<div class="mode"><span class="credits">Quelle: Destatis</span></div>`
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.