Published
Edited
Feb 6, 2019
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
data = d3.csv("https://vega.github.io/vega-lite/data/seattle-weather.csv")
Insert cell
VegaLite({
data: {values: data},
mark: "tick",
encoding: {
x: {field: "precipitation", type: "quantitative"}
}
})
Insert cell
Insert cell
VegaLite({
data: {values: data},
mark: "bar",
encoding: {
x: {field: "weather", type: "nominal"},
y: {aggregate: "count", field: "*", type: "quantitative"}
}
})
Insert cell
Insert cell
VegaLite({
data: {values: data},
mark: "bar",
encoding: {
x: {field: "weather", type: "nominal"},
y: {aggregate: "count", field: "*", type: "quantitative"},
color: {field: "weather", type: "nominal"}
}
})
Insert cell
Insert cell
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"}
}
})
Insert cell
Insert cell
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"}}
}
})
Insert cell
Insert cell
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']}}
}
})
Insert cell
VegaLite({
data: {values: data},
mark: "bar",
encoding: {
x: {field: "weather", type: "nominal"},
y: {aggregate: "count", field: "*", type: "quantitative"},
color: {field: "weather", type: "nominal", scale: {domain: ["drizzle", "fog"], range: ['#8AB9ED', '#FDB813']}}
}
})
Insert cell
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']}}
}
})
Insert cell
Insert cell
VegaLite({
data: {values: data},
mark: "line",
encoding: {
x: {timeUnit: "month", field: "date", type: "temporal"},
y: {aggregate: "mean", field: "precipitation", type: "quantitative"},
}
})
Insert cell
Insert cell
VegaLite({
data: {values: data},
mark: "line",
encoding: {
x: {timeUnit: "month", field: "date", type: "temporal"},
y: {aggregate: "mean", field: "precipitation", type: "quantitative"},
color: {field: "weather", type: "nominal"},
}
})
Insert cell
Insert cell
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"},
}
})
Insert cell
Insert cell
VegaLite({
data: {values: data},
mark: "area",
encoding: {
x: {timeUnit: "month", field: "date", type: "ordinal"},
y: {aggregate: "count", field: "weather", type: "quantitative"},
color: {field: "weather", type: "nominal"},
}
})
Insert cell
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"},
}
})
Insert cell
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"},
}
})
Insert cell
Insert cell
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
})
Insert cell
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
})
Insert cell
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"},
}
}
]
})
Insert cell
VegaLite({
data: {values: data},
vconcat: [
{
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"},
}
}
]
})
Insert cell

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.
Learn more