Published
Edited
Apr 15, 2019
VegaLite({
data: {values: grantHeadcount},
repeat: {
column: ["Year"],
row: ["TotalHeadcount","AvgGrantPerStudent"]
},
spec: {
mark: "point",
width: 800,
height: 500,
encoding: {
x: {field: {repeat: "column"}, type: "temporal", timeUnit: "year", },
y: {field: {repeat: "row"}, type: "quantitative", aggregate:"sum"},
color: {field: "Sector", type: "nominal"}
}
}
})
VegaLite({
data: {values: grantHeadcount.filter(function(f){return f.Sector == g})},
vconcat: [
{
mark: { type: "point",filled: "true"},
encoding: {
x: {timeUnit: "year", field: "Year", type: "temporal"},
y: {field: "AvgGrantPerStudent", type: "quantitative", aggregate:"sum"},
tooltip: [{field: "Year", timeUnit: "year", type:"temporal"}, {field: "Institution"}, {field: "AvgGrantPerStudent"}
],
color: {
condition: {
field: "Institution",
selection: "click",
scale: {scheme: "dark2"},
type: "nominal"
},
value: "lightgrey"
},
size: {field: "AvgGrantPerStudent", type: "quantitative"},
},
width: 500,
height: 500,
selection: {brush: {encodings: ["x"], type: "interval"}}
},
{
encoding: {
color: {
condition: {
field: "Institution",
selection: "click",
type: "nominal"
},
value: "lightgray"
},
x: {field:"AvgGrantPerStudent",aggregate: "sum", type: "quantitative"},
y: {field: "Sector", type: "nominal"},
tooltip: [{field: "Institution"}, {field:"AvgGrantPerStudent",aggregate: "sum", type: "quantitative" }
],
},
width: 500,
height:50,
mark: "bar",
selection: {click: {encodings: ["color"], type: "multi"}},
transform: [{filter: {selection: "brush"}}]
}
]
})
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.
