spec = { return ({
"$schema": "https://vega.github.io/schema/vega-lite/v4.17.0.json",
"config": {
"view": {
"continuousHeight": 300,
"continuousWidth": 400
}
},
"data": {
"name": "data-c2a3e89ba9d5d1687d5e8c28d630a033"
},
"datasets": {
"data-c2a3e89ba9d5d1687d5e8c28d630a033": [
{
"a": "A",
"b": 28
},
{
"a": "B",
"b": 55
},
{
"a": "C",
"b": 43
},
{
"a": "D",
"b": 91
},
{
"a": "E",
"b": 81
},
{
"a": "F",
"b": 53
},
{
"a": "G",
"b": 19
},
{
"a": "H",
"b": 87
},
{
"a": "I",
"b": 52
}
]
},
"encoding": {
"x": {
"field": "a",
"type": "nominal"
},
"y": {
"field": "b",
"type": "quantitative"
}
},
"mark": "bar"
})}
embed = require("vega-embed@6")
viewof chart1 = embed(spec)
data = [
{
"a": "A",
"b": 28
},
{
"a": "B",
"b": 55
},
{
"a": "C",
"b": 43
},
{
"a": "D",
"b": 91
},
{
"a": "E",
"b": 81
},
{
"a": "F",
"b": 53
},
{
"a": "G",
"b": 19
},
{
"a": "H",
"b": 87
},
{
"a": "I",
"b": 52
}
]
filtered_spec = {
return ({
"$schema": "https://vega.github.io/schema/vega-lite/v4.17.0.json",
"config": {
"view": {
"continuousHeight": 300,
"continuousWidth": 400
}
},
"data": {
"name": "data-c2a3e89ba9d5d1687d5e8c28d630a033"
},
"datasets": {
"data-c2a3e89ba9d5d1687d5e8c28d630a033": data
},
"encoding": {
"x": {
"field": "a",
"type": "nominal"
},
"y": {
"field": "b",
"type": "quantitative"
}
},
"mark": "bar"
})}
viewof chart2 = embed(filtered_spec)
viewof min_value = Inputs.range([d3.min(data, d => d.b)-1, d3.max(data, d => d.b)-1], {value: d3.max(data, d => d.b), step: 1, label: "Min Value"})
filtered_data = data.filter(d => d.b > min_value)
viewof chart = embed(filtered_spec_dynamic_data)
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.
