viewof bg_data_recent = aq.from(base_bg_data).filter(d => d.playingtime <= 300).view(5)
minPlayerCounts = uniqueValid(base_bg_data, d => d.minplayers, true);
viewof bg_dashboard = embed({
$schema: 'https://vega.github.io/schema/vega-lite/v5.json',
"title": {
"text":"What Should You Play?",
"subtitle":"Balance player count, playtime, and complexity to find the best games for you"},
"data": {"values": bg_data_recent},
"vconcat":[
{
"width": width-150,
"height": 400,
"params": [{
"name": "grid",
"select": "interval",
"bind": "scales"
},
{
"name": "requiredCount",
"select": {"type": "point", "fields": ["minplayers"]},
"bind": {"input": "select", "options": minPlayerCounts}
}],
"transform": [{"filter": {"param": "requiredCount"}}],
"mark": {"type": "circle", "opacity": 1, "size":15},
"encoding": {
"x": {
"field": "averageweight",
"type": "quantitative",
"title": "Average Complexity"
},
"y": {
"field": "average",
"type": "quantitative",
"title": "Average Rating"
},
"color": {
"condition": {
"param": "brush",
"value": "rebeccapurple"
},
"value": "lightgrey"
},
"tooltip": [
{"field": 'primary', "title": "Boardgame"},
{"field": 'playingtime', "title": "Playtime"},
{"field": 'minplayers', "title": "MinPlayers"},
{"field": 'description', "title": "Description"}
]
}
},
{"layer": [
{
"width": width-150,
"height": 100,
"mark": "bar",
"params": [{
"name": "brush",
"select": {"type": "interval", "encodings": ["x"]}
}],
"encoding": {
"y": {
"aggregate": "count",
"title": "Number of Games"
},
"x": {
"field": "playingtime",
"bin": {"step":15},
"title": "Average Playtime"
},
"color": {"value": "lightgrey"}
}},
{
"transform": [{"filter": {"param": "brush"}}, {"filter": {"param": "requiredCount"}}],
"mark": "bar",
"encoding": {
"x": {"field": "playingtime", "bin": {"step":15}},
"y": {"aggregate": "count"},
"color": {"value": "rebeccapurple"}
}
}
]}
]
})
import {uniqueValid} from "@jonfroehlich/data-utilities";
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.
