Published
Edited
Aug 20, 2019
viewof fontSize = slider("Textgröße", 18, 1, 30, 1)
{
const plot1 = vl.markBar()
.transform(
vl.filter("datum.type === 'Verletzte'")
)
.encode(
//vl.column().fieldN("type"),
vl.y().fieldO("weather").axis({title: "Wetter"}),
vl.x().fieldQ("value").axis({title: "Anzahl Verletzte"})
)
.title("Durchschnittliche Anzahl von Verletzten pro Kollision")
.width(width-200)
.height(100)
const plot2 = vl.markBar()
.transform(
vl.filter("datum.type === 'Tode'")
)
.encode(
//vl.column().fieldN("type"),
vl.y().fieldO("weather").axis({title: "Wetter"}),
vl.x().fieldQ("value").axis({title: "Anzahl Todesfälle"})
)
.title("Durchschnittliche Anzahl von Todesfällen pro Kollision")
.width(width-200)
.height(100)
const diagram = vl.vconcat(plot1, plot2).data(killed_injured_csv)
return renderOrSpec(diagram)
}
scaleWeather = {
const set2 = ["#e41a1c","#377eb8","#4daf4a","#984ea3","#ff7f00","#ffff33","#a65628","#f781bf","#999999"].reverse()
return {
"domain": ["Trocken","Schnee u. Regen","Schnee","Regen"],
//"range": ["#4c78a8","#b279a2","#e45756","#72b7b2"]
"range":set2.slice(4)
}
}
function renderOrSpec(dia) {
dia = dia.config({
axis: {labelFontSize: fontSize*0.9, titleFontSize: fontSize},
legend: {labelFontSize: fontSize*0.9, titleFontSize: fontSize},
title: {fontSize: fontSize}
})
return spec ? dia.toString() : dia.render();
}
function germanFormat(vl) {
vl.vega.timeFormatLocale(de_locale)
vl.vega.formatLocale(de_locale_format)
}
killed_injured_csv = "https://gist.githubusercontent.com/virtuaCode/21762de1590a253c382fc8e215b24154/raw/6bc84cb2905bfd770b14733cd04391d2ddb68a15/injured_killed.csv"
bus_summary = (await d3.csv(bus_snow_or_rain_csv)).map(d => ({name: d.snowOrRain === "true" ? "Schnee-/Regentage" : "Restliche Tage", value: +d.avg}))
bus = (await d3.csv(bus_csv)).map(d => ({name: ["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"][d.day], value: +d.count}))
collisions = (await d3.csv(collisions_csv)).map(d => ({name: ["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"][d.day], value: +d.count}))
d3 = require('d3@5')
bus_snow_or_rain_csv = "https://gist.githubusercontent.com/virtuaCode/b8b74e86227f217b3af8dde6528ff60d/raw/a86bdd72635a13129659c5a3b367c24e72dc6bf9/bus_snow_or_rain.csv";
bus_csv = "https://gist.githubusercontent.com/virtuaCode/b8b74e86227f217b3af8dde6528ff60d/raw/6c2c43701201001a35c5c0bdd61cc6ce249de770/bus.csv";
collisions_csv = "https://gist.githubusercontent.com/virtuaCode/b8b74e86227f217b3af8dde6528ff60d/raw/6c2c43701201001a35c5c0bdd61cc6ce249de770/collisions.csv";
bus_with_weather_csv = 'https://gist.githubusercontent.com/virtuaCode/b8b74e86227f217b3af8dde6528ff60d/raw/6b5d6b8930f11d56200b0f9a735abbace45f2693/bus_with_weather.csv';
collisions_detail_csv = "https://gist.githubusercontent.com/virtuaCode/05b47cacae6998659980f4a25c51199a/raw/aa4fd5095134e83ece2c3b429083caa7b5b27350/collisions_norm.csv"
de_locale = {
return {
"dateTime": "%A, der %e. %B %Y, %X",
"date": "%d.%m.%Y",
"time": "%H:%M:%S",
"periods": ["AM", "PM"],
"days": ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"],
"shortDays": ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
"months": ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"],
"shortMonths": ["Jan", "Feb", "Mrz", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"]
}
}
de_locale_format = {return {
"decimal": ",",
"thousands": ".",
"grouping": [3],
"currency": ["", "\u00a0€"]
}}
embed = require("vega-embed@4.2.2")
import {checkbox,slider} from "@jheer/dom-utilities"
import {vl} from '@vega/vega-lite-api'
import {chart as barchart} from "@virtuacode/bar-chart-library"
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.
