data = d3.csv("https://vega.github.io/vega-lite/data/seattle-weather.csv")
VegaLite({
data: {values: data},
mark: "tick",
encoding: {
x: {field: "precipitation", type: "quantitative"}
}
})
VegaLite({
data: {values: data},
mark: "bar",
encoding: {
x: {field: "weather", type: "nominal"},
y: {aggregate: "count", field: "*", type: "quantitative"}
}
})
VegaLite({
data: {values: data},
mark: "bar",
encoding: {
x: {field: "weather", type: "nominal"},
y: {aggregate: "count", field: "*", type: "quantitative"},
color: {field: "weather", type: "nominal"}
}
})
VegaLite({
data: {values: data},
mark: "bar",
encoding: {
x: {field: "weather", type: "nominal"},
y: {aggregate: "count", field: "*", type: "quantitative"},
color: {aggregate: "mean", field: "temp_max", type: "quantitative"}
}
})
VegaLite({
data: {values: data},
mark: "bar",
encoding: {
x: {field: "weather", type: "nominal"},
y: {aggregate: "count", field: "*", type: "quantitative"},
color: {aggregate: "mean", field: "temp_max", type: "quantitative", scale: {scheme: "bluepurple"}}
}
})
VegaLite({
data: {values: data},
mark: "bar",
encoding: {
x: {field: "weather", type: "nominal"},
y: {aggregate: "count", field: "*", type: "quantitative"},
color: {aggregate: "mean",
field: "temp_max",
type: "quantitative",
scale: {
domain: [5, 20],
range: ['#8AB9ED', '#FDB813']
}
}
}
})
VegaLite({
data: {values: data},
mark: "line",
encoding: {
x: {timeUnit: "month", field: "date", type: "temporal"},
y: {aggregate: "mean", field: "precipitation", type: "quantitative"}
}
})
VegaLite({
data: {values: data},
mark: {type: "line"},
encoding: {
x: {timeUnit: "month", field: "date", type: "nominal"},
y: {aggregate: "mean", field: "precipitation", type: "quantitative"},
color: {field: "weather", type: "nominal"}
}
})
VegaLite({
data: {values: data},
mark: {type: "line", point: true},
encoding: {
x: {timeUnit: "month", field: "date", type: "nominal"},
y: {aggregate: "mean", field: "precipitation", type: "quantitative"},
color: {field: "weather", type: "nominal"}
}
})
VegaLite({
data: {values: data},
transform: [{
impute: "precipitation",
key: "date",
value: NaN,
method: "value",
groupby: ["weather"],
}],
mark: {type: "line", strokeCap: "square"},
encoding: {
x: {timeUnit: "month", field: "date", type: "nominal"},
y: {aggregate: "mean", field: "precipitation", type: "quantitative"},
color: {field: "weather", type: "nominal"}
}
})
VegaLite({
data: {values: data},
transform: [{
impute: "precipitation",
key: "date",
value: NaN,
method: "value",
groupby: ["weather"],
}],
mark: {type: "line", point: true},
encoding:{
x: {timeUnit: "month", field: "date", type: "nominal"},
y: {aggregate: "mean", field: "precipitation", type: "quantitative"},
color: {
field: "weather", type: "nominal"
}
}
})
VegaLite({
data: {values: data},
transform: [{
impute: "precipitation",
key: "date",
value: NaN,
method: "value",
groupby: ["weather"],
}],
mark: {type: "line", point: true},
encoding:{
x: {timeUnit: "month", field: "date", type: "nominal"},
y: {aggregate: "mean", field: "precipitation", type: "quantitative"},
color: {
condition: {test: {field: "precipitation", aggregate: "mean", valid: false}, value: "transparent"},
field: "weather", type: "nominal"
}
}
})
VegaLite({
data: {values: data},
mark: "bar",
encoding: {
x: {timeUnit: "month", field: "date", type: "ordinal"},
y: {aggregate: "count", field: "weather", type: "quantitative"},
color: {field: "weather", type: "nominal"}
}
})
VegaLite({
data: {values: data},
mark: "area",
encoding: {
x: {timeUnit: "month", field: "date", type: "ordinal"},
y: {aggregate: "mean", field: "precipitation", type: "quantitative"},
color: {field: "weather", type: "nominal"}
}
})
VegaLite({
data: {values: data},
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},
mark: "point",
encoding: {
x: {timeUnit: "monthdate", field: "date", type: "temporal"},
y: {field: "temp_max", type: "quantitative"},
color: {field: "weather", type: "nominal"}
},
width: 800,
height: 400
})
VegaLite({
data: {values: data},
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]}}
},
width: 800,
height: 400
})
VegaLite({
data: {values: data},
hconcat: [
{
mark: "point",
encoding: {
x: {field: "precipitation", type: "quantitative"},
y: {field: "wind", type: "quantitative"},
}
},
{
mark: "point",
encoding: {
x: {field: "temp_max", type: "quantitative"},
y: {field: "wind", type: "quantitative"},
}
}
]
})
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.
