Vancouver mapping 102IAT355: Do you have all the data you need? Working with data in d3 and VegaIAT355: Do you have all the data you need? Working with data in d3 and Vega2018 Vancouver Crime DataPassing Signals Between CellsIAT355: Do you have all the data you need? Working with data in d3 and VegaBuilding Up a Data StoryEasing into Vega from Vega-LiteInteraction 2Vega-Lite: Exploring Visual Forms.Data Inspection and CleaningGetting Started with Data
Interaction
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",
axis: {title: ""}
},
y: {field: "temp_max", type: "quantitative"}}
}, {
height: 60,
width: 480,
mark: "area",
encoding: {
x: {
field: "date",
type: "temporal"
},
y: {
field: "temp_max",
type: "quantitative",
axis: {tickCount: 2, gride: false}
}
}
}]
})
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",
encoding: {
x: {field: {repeat: "column"}, type: "quantitative"},
y: {field: {repeat: "row"}, type: "quantitative"},
color: {field: "weather", type: "nominal"}
}
}
})
VegaLite({
data: {values: data},
repeat: {
column: ["temp_max", "wind", "precipitation"],
row: ["precipitation", "wind", "temp_max"]
},
spec: {
mark: "point",
selection: {
brush: {
type: "interval",
}
},
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: [{
mark: { type: "point",filled: "true"},
encoding: {
x: { field: "precipitation", type: "quantitative"},
y: {field: "temp_min", type: "quantitative"},
color: {field: "weather", type: "nominal"}
},
}, {
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: [
{
selection: {brush: {encodings: ["x"], type: "interval"}},
mark: "point",
encoding: {
color: {
condition: {
field: "weather",
selection: "click",
type: "nominal"
},
value: "lightgray"
},
x: {timeUnit: "monthdate", field: "date", type: "temporal"},
y: {field: "temp_max", type: "quantitative"},
size: {field: "precipitation", type: "quantitative", scale: {domain: [1, 50]}},
},
width: 800,
height: 400,
},
{
transform: [{filter: {selection: "brush"}}],
selection: {click: {encodings: ["color"], type: "multi"}},
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",
}
]
})
viewof view = embed({
$schema: 'https://vega.github.io/schema/vega-lite/v3.json',
width: 360,
data: {
values: [
{a: 'A', b: 28}, {a: 'B', b: 55}, {a: 'C', b: 43},
{a: 'D', b: 91}, {a: 'E', b: 81}, {a: 'F', b: 53},
{a: 'G', b: 19}, {a: 'H', b: 87}, {a: 'I', b: 52}
],
name: 'source'
},
selection: {
a: {type: 'single'}
},
mark: 'bar',
encoding: {
x: {field: 'a', type: 'ordinal'},
y: {field: 'b', type: 'quantitative'},
tooltip: {field: 'b', type: 'quantitative'},
color: {
condition: {selection: 'a', value: 'steelblue'},
value: 'grey'
}
}
})
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.
