Published unlisted
Edited
Jun 13, 2022
Insert cell
md `# Vega-lite density plot`
Insert cell
Insert cell
import {vl} from "@vega/vega-lite-api-v5";
Insert cell
embed = require("vega-embed@6");
Insert cell
viewof view = embed({
"mark": {"type": "point"},
"data": {
"values": [
{"student_name": "student 0", "e": "100.15", "d": "127.81"},
{"student_name": "student 1", "e": "100.30", "d": "189.94"},
{"student_name": "student 2", "e": "100.15", "d": "105.33"},
{"student_name": "student 3", "e": "99.41", "d": "85.36"},
{"student_name": "student 4", "e": "100.00", "d": "203.70"},
{"student_name": "student 5", "e": "100.15", "d": "139.05"},
{"student_name": "student 19", "e": "100.15", "d": "102.66"},
{"student_name": "student 20", "e": "95.71", "d": "52.96"},
{"student_name": "student 21", "e": "99.85", "d": "99.41"},
{"student_name": "student 22", "e": "98.96", "d": "100.44"},
{"student_name": "student 23", "e": "100.15", "d": "131.07"},
{"student_name": "student 24", "e": "99.56", "d": "76.92"},
{"student_name": "student 25", "e": "100.15", "d": "213.46"},
{"student_name": "student 26", "e": "100.15", "d": "311.24"},
{"student_name": "student 27", "e": "100.15", "d": "21.89"},
{"student_name": "student 28", "e": "96.60", "d": "6.36"},
{"student_name": "student 29", "e": "53.70", "d": "3.70"},
{"student_name": "student 30", "e": "96.75", "d": "46.60"},
{"student_name": "student 31", "e": "100.15", "d": "100.15"},
{"student_name": "student 32", "e": "100.30", "d": "115.68"},
{"student_name": "student 33", "e": "87.13", "d": "103.85"},
{"student_name": "student 34", "e": "100.15", "d": "104.14"},
{"student_name": "student 35", "e": "99.26", "d": "59.17"},
{"student_name": "student 36", "e": "100.15", "d": "171.30"},
{"student_name": "student 37", "e": "99.11", "d": "94.08"},
{"student_name": "student 38", "e": "81.66", "d": "57.40"},
{"student_name": "student 39", "e": "96.01", "d": "154.59"},
{"student_name": "student 90", "e": "1.04", "d": "1.33"},
{"student_name": "student 91", "e": "99.70", "d": "26.18"},
{"student_name": "student 92", "e": "96.30", "d": "78.11"},
{"student_name": "student 93", "e": "99.85", "d": "11.83"},
{"student_name": "student 94", "e": "100.15", "d": "172.93"},
{"student_name": "student 95", "e": "100.00", "d": "198.82"},
{"student_name": "student 96", "e": "100.15", "d": "155.92"},
{"student_name": "student 97", "e": "92.01", "d": "97.19"},
{"student_name": "student 98", "e": "98.52", "d": "71.30"},
{"student_name": "student 99", "e": "100.15", "d": "111.69"},
{"student_name": "student 100", "e": "0.30", "d": "0.30"},
{"student_name": "student 175", "e": "98.96", "d": "91.12"},
{"student_name": "student 176", "e": "100.00", "d": "226.04"},
{"student_name": "student 177", "e": "98.67", "d": "150.89"},
{"student_name": "student 178", "e": "97.49", "d": "68.79"},
{"student_name": "student 179", "e": "100.15", "d": "133.58"},
{"student_name": "student 180", "e": 0, "d": 0},
{"student_name": "student 181", "e": 0, "d": 0},
{"student_name": "student 182", "e": 0, "d": 0},
{"student_name": "student 183", "e": 0, "d": 0},
{"student_name": "student 184", "e": 0, "d": 0},
{"student_name": "student 185", "e": 0, "d": 0},
{"student_name": "student 186", "e": 0, "d": 0},
{"student_name": "student 187", "e": 0, "d": 0},
{"student_name": "student 188", "e": 0, "d": 0},
{"student_name": "student 189", "e": 0, "d": 0},
{"student_name": "student 190", "e": 0, "d": 0},
{"student_name": "student 191", "e": 0, "d": 0}
]
},
"transform": [
{"calculate": "toNumber(datum.d)", "as": "d2"},
{"calculate": "toNumber(datum.e)", "as": "e2"},
{
"bin":{"step":20},
"field":"d2",
"as":"binnedd2"
},
{
"sort": [{"field": "binnedd2"}],
"window": [
{"op": "count", "field": "student_name", "as": "Cumulative Count"}
],
"frame": [null, 0]
}
],
"encoding": {
"y": {
"field": "Cumulative Count",
"type": "quantitative",
"title": "# students"
},
"x": {
"field": "d2",
"type": "quantitative",
"scale": {"domain": [0, 311.24]},
"title": "D"
}
},
"width": 500,
"height": 250
})
Insert cell

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.
Learn more