vegalite(
{
data: {values: data},
hconcat: [
{
mark: { type: "point",filled: "true"},
encoding: {
x: { field: "precipitation", type: "quantitative"},
y: {field: "wind", type: "quantitative"},
color: {field: "weather", type: "nominal"}
},
},
{
mark: {type: "point",filled: "true"},
encoding: {
x: { field: "temp_max", type: "quantitative"},
y: {field: "wind", type: "quantitative"},
color: {field: "weather", type: "nominal"}
},
}]
})
PW = vegalite(
{
data: {values: data},
mark: {type: "point",filled: "true"},
encoding: {
x: { field: "precipitation", type: "quantitative"},
y: {field: "wind", type: "quantitative"},
color: {field: "weather", type: "nominal"}
}
})
TW = vegalite(
{
data: {values: data},
mark: {type: "point",filled: "true"},
encoding: {
x: { field: "temp_max", type: "quantitative"},
y: {field: "wind", type: "quantitative"},
color: {field: "weather", type: "nominal"}
}
})
html`<table style="width:100%">
<tr>
<td>${TW}</td>
<td>${PW}</td>
</tr>
</table>`
vegalite({
data: {values: data},
repeat: {
column: ["temp_max", "wind", "precipitation"],
row: ["precipitation", "wind", "temp_max"]
},
spec: {
mark: "point",
encoding: {
x: {field: {repeat: "column"}, type: "quantitative"},
y: {field: {repeat: "row"}, type: "quantitative"},
color: {field: "weather", type: "nominal"}
}
}
})
vegalite({
data: {values: data},
facet: {column: {field: "weather", type: "nominal"}},
spec: {
width: 120,
height: 120,
mark: "bar",
encoding: {
x: {bin: "true", field: "wind", type: "quantitative"},
y: {aggregate: "count", type: "quantitative"}
}
}
})
vegalite({
data: {values: data},
mark: "bar",
encoding: {
x: {field: "weather", type: "nominal"},
y: {aggregate: "count", field: "*", type: "quantitative"},
tooltip: [
{field: "weather", type: "nominal"},
{aggregate: "mean", field: "precipitation", type: "quantitative"}
]
}
})
vegalite({
data: {values: data},
vconcat: [
{
mark: "area",
width: 480,
encoding: {
x: {
field: "date",
type: "temporal",
scale: {domain: {selection: "brush"}},
axis: {title: ""}
},
y: {field: "temp_max", type: "quantitative"}}
}, {
height: 60,
width: 480,
mark: "area",
selection: {
brush: {type: "interval", encodings: ["x"]}
},
encoding: {
x: {
field: "date",
type: "temporal"
},
y: {
field: "temp_max",
type: "quantitative",
axis: {tickCount: 2, gride: false}
}
}
}]
})
vegalite(
{
data: {values: data},
vconcat: [
{
mark: {type: "point",filled: "true"},
encoding:
{
x: { field: "precipitation", type: "quantitative"},
y: {field: "wind", type: "quantitative"},
tooltip: [{field: "date", type: "monthdate"}, { field: "temp_max", type: "quantitative"}],
color: {condition: {selection: "plotbrush", field: "weather", type: "nominal"}, value: "grey"}
},
selection: {plotbrush: {type: "interval",resolve: "intersect"}},
transform: [{filter: {selection: "brush"}}]
},
{
height: 100,
width: 480,
mark: "line",
encoding:
{
x: {timeUnit: "monthdate", field: "date", type: "temporal"},
y: { field: "wind", type: "quantitative", axis: {tickCount: 2, gride: false}},
color: {selection: "brush", field: "weather", type: "nominal"}
},
selection: {"brush": {encodings: ["x"], type: "interval", resolve: "intersect"}},
transform: [{filter: {selection: "plotbrush"}}]
}]
})
vegalite({
data: {values: data},
repeat: {
column: ["temp_max", "wind", "precipitation"],
row: ["precipitation", "wind", "temp_max"]
},
spec: {
mark: "point",
selection: {
brush: {
type: "interval",
resolve: "intersect"
},
},
encoding: {
x: {field: {repeat: "column"}, type: "quantitative"},
y: {field: {repeat: "row"}, type: "quantitative"},
color: {condition: {selection: "brush", field: "weather", type: "nominal"}, value: "grey"}
}
}
})
vegalite(
{
data: {values: data},
hconcat: [
{
selection: {brush: {type: "interval"}
},
mark: { type: "point",filled: "true"},
encoding: {
x: { field: "precipitation", type: "quantitative"},
y: {field: "temp_min", type: "quantitative"},
color: {field: "weather", type: "nominal"}
},
}, {
transform: [
{filter: {selection: "brush"}}
],
mark: {type: "point",filled: "true"},
encoding: {
x: { field: "temp_max", type: "quantitative", scale: {domain: [-5, 40]}},
y: {field: "wind", type: "quantitative", scale: {domain: [0, 10]}},
color: {field: "weather", type: "nominal"}
},
}]
})
vegalite({
data: {values: data},
repeat: {column: ["wind", "precipitation", "temp_max"]},
spec: {
width: 120,
height: 120,
layer: [{
selection: {brush: {type: "interval", encodings: ["x"]}
},
mark: "bar",
encoding: {
y: {aggregate: "count", type: "quantitative"},
x: {field: {repeat: "column"}, bin: "true", type: "quantitative"}
}
}, {
transform: [{filter: {selection: "brush"}}],
mark: "bar",
encoding: {
y: {aggregate: "count", type: "quantitative"},
x: { field: {repeat: "column"}, bin: "true", type: "quantitative"},
color: {value: "goldenrod"}
}
}]
}
})
vegalite({
data: {values: data},
vconcat: [
{
mark: "point",
encoding: {
x: {timeUnit: "monthdate", field: "date", type: "temporal"},
y: {field: "temp_max", type: "quantitative"},
color: {
condition: {
field: "weather",
selection: "click",
type: "nominal"
},
value: "lightgray"
},
size: {field: "precipitation", type: "quantitative", scale: {domain: [1, 50]}},
},
width: 800,
height: 400,
selection: {brush: {encodings: ["x"], type: "interval"}}
},
{
encoding: {
color: {
condition: {
field: "weather",
title: "weather",
selection: "click",
type: "nominal"
},
value: "lightgray"
},
x: {aggregate: "count", type: "quantitative"},
y: {field: "weather", type: "nominal"}
},
width: 800,
mark: "bar",
selection: {click: {encodings: ["color"], type: "multi"}},
transform: [{filter: {selection: "brush"}}]
}
]
})
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.