Published
Edited
Apr 14, 2020
1 fork
1 star
md`## Libraries`
d3 = require('d3@5')
VegaLite = require('@observablehq/vega-lite')
import {select, radio} from "@jashkenas/inputs"
embed = require('vega-embed@3')
md`## Import Dataset`
import {select_distribution, distribution, randomDistributions, draw_histogram_from_buckets, draw_values, draw_buckets, x, y, max, colors} from "@d3/d3-bin"
mathGradeArray = d3.csv("https://gist.githubusercontent.com/RebSin/5447cca850134e6194c733d054a7ac31/raw/25f6f9c3aebde4bfe48d7d299c3247c1ef1876e2/student-mat.csv")
VegaLite({
data: {values: mathGradeArray},
"title": "Impact of workday alcohol consumption and absence on "+period,
"vconcat": [
{
"encoding": {
"tooltip": [
{"field": "sex", "type": "nominal"},
{"field": period, "type": "quantitative"}
],
"color": {
"condition": {
"title": "Mean of "+period,
"aggregate": "mean",
"field": period,
"scale": {
"domain": [0, 20]
},
"selection": "brush",
"type": "quantitative"
},
"value": "lightgray"
},
"x": {
"axis": {"title": "Workday alcohol consumption"},
"field": "Dalc",
"scale": {"domain": [0, 6]},
"type": "quantitative"
},
"y": {
"axis": {"title": "Weekend alcohol consumption"},
"field": "Walc",
"scale": {"domain": [0, 6]},
"type": "quantitative"
},
},
"width": 300,
"height": 300,
"mark": {"type": "circle"},
"selection": {"brush": {"type": "interval"}},
"transform": [{"filter": {"selection": "click"}}]
},
{
"encoding": {
"color": {
"condition": {
"field": period,
"selection": "click",
"type": "nominal"
},
"value": "lightgray"
},
"x": {"title": "Number of students", "aggregate": "count", "type": "quantitative"},
"y": {"title": period, "field": period, "bin": {"maxbins": 4}, "type": "nominal"}
},
"width": 600,
"mark": {"type": "bar"},
"selection": {"click": {"encodings": ["color"], "type": "multi"}},
"transform": [{"filter": {"selection": "brush"}}]
}
]
})
md` ### Reference`
md` https://observablehq.com/@jashkenas/inputs#selectDemo`
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.
