Published
Edited
Jun 14, 2021
config = ({
x: "Jahr",
x_ticks: ["1880", "1900", "1920", "1940", "1960", "1980", "2000", "2020"],
y1: "Bruttoschulden",
y1_ticks: [0, 30, 60, 90, 120],
y2: "Langfristzinsen",
y2_ticks: [0, 3, 6, 9, 12],
title1: "Bruttoschulden in Millionen Dollar",
title2: "Langfristzinsen in Prozent"
})
vega(spec_mw)
spec_mw = {
delete spec.data[0].url;
spec.data[0].values = await FileAttachment("schulden@1.csv").text();
spec.data[0].format.parse[config.x] = "date";
spec.data[0].format.parse[config.y1] = "number";
spec.data[0].format.parse[config.y2] = "number";
spec.scales[0].domain.field = config.x;
spec.marks[0].scales[0].domain.field = config.y1;
spec.marks[1].scales[0].domain.field = config.y2;
spec.marks[0].marks[0].encode.enter.x.field = config.x;
spec.marks[0].marks[0].encode.enter.y.field = config.y1;
spec.marks[1].marks[0].encode.enter.x.field = config.x;
spec.marks[1].marks[0].encode.enter.y.field = config.y2;
spec.marks[0].axes[0].values = config.y1_ticks;
spec.marks[0].axes[1].values = config.x_ticks.map((d) => Date.parse(d));
spec.marks[1].axes[0].values = config.y2_ticks;
spec.marks[0].marks[1].encode.enter.text = { value: config.title1 };
spec.marks[0].marks[3].encode.enter.text = { value: config.title2 };
return spec;
}
spec_cw = {
let _s = JSON.parse(JSON.stringify(spec_mw))
_s.width = 630
_s.height = 600
return _s
}
spec_print = {
let _s = JSON.parse(JSON.stringify(spec_mw));
(_s.config.title.font = "UniversNextPro-LightCond"),
(_s.config.axis.labelFont = "UniversNextPro-LightCond");
_s.config.axis.titleFont = "UniversNextPro-MediumCond";
(_s.config.axis.gridColor = "#000000"), (_s.config.axis.gridWidth = 0.2);
_s.config.axis.labelColor = "#000";
_s.marks[0].marks[1].encode.enter.font = {
value: "UniversNextPro-LightCond"
};
_s.marks[0].marks[3].encode.enter.font = {
value: "UniversNextPro-LightCond"
};
return _s;
}
vega = require("vega-embed")
import { svgToCanvas } from "@jonasoesch/nzz-utils"
d3 = require("d3")
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.
