Data Scientist at the Austrian Institute for Economic Research and Lecturer at the Vienna University of Economics and Business
Public
Edited
Nov 6, 2024
1 fork
<div>
<h1 class="myClass1" id="myID">Headline</h1>
<p class="myClass1"> Some Text </p>
<p> Some Text </p>
</div>
<style>
p.myClass1 {
color: red;
}
</style>
object = ({
"propertyNew": {propertyWithinProperty: 1, secondProperty: [1, 2, 3]},
myFunctionDouble: inputObject => inputObject.value * 2
})
object.myFunctionDouble({ value: 3 })
object.propertyNew.propertyWithinProperty
JavaScriptObject = ({
"property" : "value1",
"propertyThatIsObject": { propertyWithinProperty: "value2", propertyArray: [ 1, 2, "3" ] }, // this could go one endlessly and change types
propertyThatIsArray: [ 1, 2, "3" ], // notice we can mix types within a given structure
propertyThatIsMethod: x => 5 + x.addNumber // function notation in JS is pretty neat // x => 5 + x.addNumber
})
JavaScriptObject.propertyThatIsMethod({ addNumber: 5 })
JavaScriptObject.property // or JavaScriptObject["property"]
JavaScriptObject.propertyThatIsMethod({ addNumber: 10 })
function myFunction(x) { x + 1 }
alsoMyFunction = x => x + 1
multipleInputsFunction = (x, y) => { x + y }
arrayNew = ["String", 1, 3]
arrayNew[1]
[ 1, 2, "3" ][1]
JavaScriptObject.propertyThatIsArray[1] // notice index starts at 0
"string: " + 2
JavaScriptObject.propertyThatIsArray[1] + JavaScriptObject.propertyThatIsArray[2]
<style>
body {
font-family: Century Gothic;
}
p {
font-size: 16px;
text-align: justify;
}
</style>
import {config} from "@schmoigl/wirtschaftsklimaindex"
config
import {vl} from "@vega/vega-lite-api-v5"
vl
dataRaw = FileAttachment("export@6.csv").csv()
districts = FileAttachment("districts@1.json").json({ typed: true })
districtsGeometries = districts
.objects
.STATISTIK_AUSTRIA_GBEZ_20230301
.geometries
.forEach(d => {
d.id = d.properties.g_name
})
1 == 2 ? "yes" : "no"
data = dataRaw
.filter(d => d.court != "Güssing (fr. Jennersdorf)")
.map(d => ({...d, court: d.court == "Thalgau" ? "Seekirchen am Wallersee" : d.court}))
viewof select1 = Inputs.select(["Bad Ischl", "Amstetten"], {label: "Select one"})
select1
vl.markLine()
.encode(
vl.x().fieldT("year").axis({ tickCount: 5 }),
vl.y().fieldQ("n"),
vl.color().fieldN("court").legend({ fillColor: "red", title: "Name of Court" })
)
.data(data.filter(d => d.court == select1))
.width(width/2)
.height(200)
.config({ font: "Times New Roman" })
.render({ renderer: "svg" })
width
mapBackground = vl
.markGeoshape({
fill : "transparent",
stroke: "black",
strokeWidth: 3,
})
// .project(
// vl.projection("identity").reflectY(true)
// )
// .data(vl.topojson(districts).feature("STATISTIK_AUSTRIA_GBEZ_20230301"))
// .render()
mapBackground1 = vl
.markGeoshape({
stroke: "black",
fill: "red",
strokeWidth: 0.25,
})
.data(vl.topojson(districts).feature("STATISTIK_AUSTRIA_GBEZ_20230301"))
.transform(
vl.lookup("id")
.from(
vl.data(data)
.key("court")
.fields("court", "year", "n")
),
)
.encode(
vl.fill().fieldQ("n").scale({ range: ["white", "red"] }),
// vl.stroke().fieldN("court")
)
.project(
vl.projection("identity").reflectY(true)
)
.render()
mapFill = vl
.markGeoshape({
strokeWidth: 1,
stroke: "white"
})
.transform(
vl.lookup("id")
.from(
vl.data(data)
.key("court")
.fields("court", "year", "n")
),
)
.encode(
vl.fill()
.fieldQ("n")
.scale({
range: colorsMap,
type: "quantile"
})
.legend({
orient: "top",
title: ""
}),
)
// .data(vl.topojson(districts).feature("STATISTIK_AUSTRIA_GBEZ_20230301"))
// .project(
// vl.projection("identity").reflectY(true)
// )
// .render()
vl.layer(mapBackground, mapFill)
.data(
vl.topojson(districts)
.feature("STATISTIK_AUSTRIA_GBEZ_20230301")
)
.project(
vl.projection("identity")
.reflectY(true)
)
.width(600)
.height(300)
.render({ renderer: "svg" })
select = vl
.selectPoint("select")
.fields("court")
.on("click")
.toggle("event")
.init("Bad Ischl")
// .clear("none")
// .nearest(true)
mapBrush = vl
.markGeoshape({
strokeWidth: 1,
// stroke: "black",
// fill: "yellow",
// fill: "transparent"
})
.transform(
vl.lookup("id")
.from(
vl.data(data)
.key("court")
.fields("court", "year", "n")
),
// vl.filter(select)
)
.params(select)
.encode(
vl.stroke()
.if(select, vl.value('black'))
.value('transparent'),
vl.fill()
.if(select, vl.value('yellow'))
.value('transparent'),
)
.project(
vl.projection("identity")
.reflectY(true)
)
map = vl.layer(mapBackground, mapFill, mapBrush)
.data(
vl.topojson(districts)
.feature("STATISTIK_AUSTRIA_GBEZ_20230301")
)
.width(400)
.height(300)
map
.render({ renderer: "svg" })
linesBase = vl
.markLine({
strokeWidth: 0.5,
opacity: 0.2,
stroke: "gray"
})
.encode(
vl.x()
.fieldT("year")
.axis({
grid: false,
}),
vl.y()
.fieldQ("index")
.axis({
domain: false
}),
vl.color()
.fieldN("court")
.legend(null)
)
linesBase
.data(data)
.render({ renderer: "svg" })
linesColor = vl
.markLine({
strokeWidth: 2
})
.transform(
vl.filter(select) // "select.court === datum.court"
)
.encode(
vl.x()
.fieldT("year")
.axis({
grid: false
}),
vl.y()
.fieldQ("index")
.axis({
domain: false,
ticks: false
}),
vl.color()
.fieldN("court")
.scale({
range: colorsDiscrete
})
)
lines = vl.layer(linesBase, linesColor)
.width(300)
.height(300)
view = width > 800 ?
vl.hconcat(map, lines)
.data(data)
.config({
view: { stroke: "transparent" }
})
.render({ renderer: "svg" })
:
vl.vconcat(map, lines)
.data(data)
.config({
view: { stroke: "transparent" }
})
.render({ renderer: "svg" })
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.
