md`# Dart Analyse`
md`## 2019`
spec = `{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"title": "Top N 180's of all players",
"data": {
"url": "https://gist.githubusercontent.com/O1lpunch3r/d00d37a69586fa1437804881a82f40a6/raw/15809a7bedf7081869e8c518a52fa4d430bbb3eb/Dart_transformed_data.csv"
},
"vconcat": [
{
"transform": [
{
"filter": {
"selection": "time"
}
},
{
"aggregate": [
{
"op": "sum",
"field": "total-hundretEighties",
"as": "aggregate_value"
}
],
"groupby": [
"name"
]
},
{
"window": [
{
"op": "row_number",
"as": "rank"
}
],
"sort": [
{
"field": "aggregate_value",
"order": "descending"
}
]
},
{
"calculate": "datum.rank < 60 ? datum.name : 'All Others'",
"as": "ranked_name"
}
],
"layer": [
{
"mark": {
"type": "bar"
},
"encoding": {
"x": {
"field": "aggregate_value",
"type": "quantitative",
"title": "Sum 180's",
"format": "d",
"axis": {"tickMinStep": 1}
},
"y": {
"sort": {
"op": "mean",
"field": "aggregate_value",
"order": "descending"
},
"field": "ranked_name",
"type": "nominal",
"title": "Player"
}
}
},
{
"mark": {
"type": "rule",
"color": "red"
},
"encoding": {
"x": {
"aggregate": "mean",
"field": "aggregate_value",
"type": "quantitative",
"title": null
}
}
}
],
"width": 700,
"height": 600
},
{
"layer": [
{
"mark": {
"type": "bar"
},
"selection": {
"time": {
"type": "multi",
"encodings": [
"x"
]
}
},
"encoding": {
"x": {
"field": "date",
"timeUnit": "month",
"type": "nominal",
"axis": {
"title": "months",
"titleAnchor": "start"
}
},
"y": {
"type": "quantitative",
"field": "total-hundretEighties",
"aggregate": "sum",
"axis": null
},
"color": {
"condition": {
"selection": "time"
},
"value": "grey"
}
}
}
],
"width": 700
}
],
"transform": [
{
"filter": {
"field": "date",
"range": [
{
"year": 2019,
"month": "jan",
"date": 1
},
{
"year": 2019,
"month": "dec",
"date": 31
}
]
}
},
{
"timeUnit": "yearmonth",
"field": "date",
"as": "date"
}
]
}`
vegalite(JSON.parse(spec))
vegalite = require("@observablehq/vega-lite@0.2");
d3 = require("d3-fetch@1")
import {slider, menu, checkbox} from "@jheer/dom-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.
