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},
repeat: {
column: ["temp_max", "wind", "precipitation"],
row: ["precipitation", "wind", "temp_max"]
},
spec: {
mark: "point",
selection: {
brush: {
type: "interval",
resolve: "union"
}
},
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]}}, // need this scale value so that the y-axis doesn't keep changing
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"}}]
}
]
})
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.
