VegaLite = require("vega-embed@5")
VegaLite({
data: {values: data},
mark: {type: "line"},
encoding: {
x: {timeUnit: "month", field: "date", type: "temporal"},
y: {aggregate: "mean", field: "temp_max", type: "quantitative", defined:false},
color: {
condition: {test: {field: "temp_max", aggregate: "mean", valid: false}, value: "transparent"},
field: "weather", type: "nominal"}
}
})
VegaLite({
data: {values: data},
mark: {type: "line", point: true},
encoding: {
x: {timeUnit: "month", field: "date", type: "temporal"},
y: {aggregate: "mean", field: "temp_max", type: "quantitative", defined:false},
color: {
field: "weather", type: "nominal"}
}
})
VegaLite({
data: {values: DataImpute},
mark: {type: "line", point: true},
encoding: {
x: {timeUnit: "month", field: "date", type: "temporal"},
y: {aggregate: "mean", field: "temp_max", type: "quantitative", defined:false},
color: {
condition: {test: {field: "temp_max", aggregate: "mean", valid: false}, value: "transparent"},
field: "weather", type: "nominal"}
}
})
VegaLite({
data: {values: data},
width: 800,
height: 400,
mark: "point",
encoding: {
x: {timeUnit: "monthdate", field: "date", type: "temporal"},
y: {field: "temp_max", type: "quantitative"},
color: {field: "weather", type: "nominal"}
}
})
VegaLite({
data: {values: data},
width: 800,
height: 400,
mark: "point",
encoding: {
x: {timeUnit: "monthdate", field: "date", type: "temporal"},
y: {field: "temp_max", type: "quantitative"},
color: {field: "weather", type: "nominal"},
size: {field: "precipitation", type: "quantitative"}
}
})
VegaLite({
data: {values: data},
width: 800,
height: 400,
mark: "point",
encoding: {
x: {timeUnit: "monthdate", field: "date", type: "temporal"},
y: {field: "temp_max", type: "quantitative"},
color: {field: "weather", type: "nominal"},
size: {field: "precipitation", type: "quantitative", scale: {domain: [1, 50]}}
}
})
VegaLite({
data: {values: data},
width: 800,
height: 400,
mark: "point",
encoding: {
x: {timeUnit: "monthdate", field: "date", type: "temporal"},
y: {field: "temp_max", type: "quantitative"},
color: {field: "weather", type: "nominal"},
size: {field: "precipitation", type: "quantitative", scale: {domain: [1, 50]}},
shape: {field: "weather", type: "nominal"}
}
})
VegaLite({
data: {values: data},
width: 800,
height: 400,
mark: "trail",
encoding: {
x: {timeUnit: "month", field: "date", type: "temporal"},
y: {aggregate: "mean", field: "temp_max", type: "quantitative"},
size: {aggregate: "mean", field: "precipitation", type: "quantitative"}
}
})
VegaLite({
data: {values: data},
width: 800,
height: 400,
mark: "point",
encoding: {
x: {field: "temp_max", type: "quantitative"},
y: {field: "wind", type: "quantitative"},
color: {field: "weather", type: "nominal"},
size: {field: "precipitation", type: "quantitative", scale: {domain: [1, 50]}}
}
})
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.
