Public
Edited
Apr 17
Inputs.table(restaurants, { width: 300 })
// here is the very early beginnings of a plot
// revise/expand the code or replace it with an image generated elsewhere
render({
mark: 'bar', // TODO
data: { values: restaurants },
encoding: {
"x": { field: "lat", type : 'Q'},//, bin: true },
"y": {"aggregate": "count"}//,
//color: {field: 'key', scale: {scheme: 'tableau20'}}
}
})
// put code here
render({
data: { values: restaurants },
layer:[
{
transform: [{ calculate: '"Mean"', as: "statType" }],
"mark": {type: "tick"},
"encoding": {
x: {"field": "lat", "type": "Q", aggregate: "mean",
scale:{
domain:[47.65, 47.67]
},},
color: {"field": "statType",
type: "nominal",
legend: { title: "Statistic Value" }}
}
},
{
transform: [{ calculate: '"Max"', as: "statType" }],
"mark": {type: "tick"},
"encoding": {
x: {"field": "lat", "type": "Q", aggregate: "max",
scale:{
domain:[47.65, 47.67]
},},
color: {"field": "statType",
type: "nominal",
legend: { title: "Statistic Value" }}
}
},
{
transform: [{ calculate: '"Min"', as: "statType" }],
"mark": {type: "tick"},
"encoding": {
x: {"field": "lat", "type": "Q", aggregate: "min",
scale:{
domain:[47.65, 47.67]
},},
color: {"field": "statType",
type: "nominal",
legend: { title: "Statistic Value" }}
}
},
{
"mark": {type: "bar", opacity: 0.3, color: "orange"},
"encoding": {
"x": {"field": "lat", aggregate:"q1",
scale:{
domain:[47.65, 47.67]
},
},
"x2": {"field": "lat", aggregate:"q3"},
}
}
]
})
// Histogram
// here is the very early beginnings of a plot
// revise/expand the code or replace it with an image generated elsewhere
render({
mark: 'bar', // TODO
data: { values: restaurants },
encoding: {
"x": { field: "lat", type : 'Q', bin: {"maxbins": 30}, },
"y": {"aggregate": "count"}
}
})
// Histogram
// here is the very early beginnings of a plot
// revise/expand the code or replace it with an image generated elsewhere
render({
mark: 'bar', // TODO
data: { values: restaurants },
encoding: {
"x": { field: "lat", type : 'Q', bin: {"maxbins": 30}, },
"y": {"aggregate": "count"},
color: {field: 'key', scale: {scheme: 'tableau20'}}
}
})
// put code here
render({
data: { values: restaurants },
layer:[
{
transform: [{ calculate: '"Mean"', as: "statType" }],
"mark": {type: "tick"},
"encoding": {
x: {"field": "lat", "type": "Q", aggregate: "mean",
scale:{
domain:[47.65, 47.67]
},},
y: {"field": "key", "type": "N"},
color: {"field": "statType",
type: "nominal",
legend: { title: "Statistic Value" }}
}
},
{
transform: [{ calculate: '"Max"', as: "statType" }],
"mark": {type: "tick"},
"encoding": {
x: {"field": "lat", "type": "Q", aggregate: "max",
scale:{
domain:[47.65, 47.67]
},},
y: {"field": "key", "type": "N"},
color: {"field": "statType",
type: "nominal",
legend: { title: "Statistic Value" }}
}
},
{
transform: [{ calculate: '"Min"', as: "statType" }],
"mark": {type: "tick"},
"encoding": {
x: {"field": "lat", "type": "Q", aggregate: "min",
scale:{
domain:[47.65, 47.67]
},},
y: {"field": "key", "type": "N"},
color: {"field": "statType",
type: "nominal",
legend: { title: "Statistic Value" }}
}
},
{
"mark": {type: "bar", opacity: 0.4, color: "orange"},
"encoding": {
"x": {"field": "lat", aggregate:"q1",
scale:{
domain:[47.65, 47.67]
},
},
"x2": {"field": "lat", aggregate:"q3"},
"y": {"field": "key", "type": "N"},
color: {"field": "key", "type": "N"}
}
}
]
})
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.
