VegaLite({
data: {values: Cars},
mark: "circle",
selection: {
//this part below is a custom name that you can call it whatever
pts: {type: "single", on: "click"} //can also use 'mouseover' as a selection type
},
encoding: {
x: {field: "Horsepower", type: "quantitative"},
y: {field: "Miles_per_Gallon", type: "quantitative"},
color: {
condition: {
// below is a conditional statement (if the data are within this selection, they have certain encoding attributes
selection: "pts",
field: "Origin", type: "nominal"
},
value: "gray"
},
tooltip: {field: "Cylinders", type: "quantitative"}
// this tooltip shows the individual point's Cylinders value
}
})
VegaLite({
data: {values: Cars},
mark: "circle",
encoding: {
x: {field: "Horsepower", type: "quantitative"},
y: {field: "Miles_per_Gallon", type: "quantitative"}
}
})
VegaLite({
data: {values: Cars},
mark: "circle",
encoding: {
x: {field: "Horsepower", type: "quantitative"},
y: {field: "Miles_per_Gallon", type: "quantitative"},
color: {
field: "Origin", type: "nominal"
}
}
})
VegaLite({
data: {values: Cars},
mark: "circle",
selection: {
area: {type: "interval"}
// this selection type is used to draw a rectangle selection window to select points
},
encoding: {
x: {field: "Horsepower", type: "quantitative"},
y: {field: "Miles_per_Gallon", type: "quantitative"},
color: {
condition: {
selection: "area",
field: "Origin", type: "nominal"
},
value: "gray"
}
}
})
VegaLite({
data: {values: Cars},
mark: "circle",
selection: {
Country: {
type: "single",
fields: ["Origin"],
bind: {input: "select", options: [null, "Europe", "Japan", "USA"]}
// this creates a dropdown of countries to show their selections only if chosen
}
},
encoding: {
x: {field: "Horsepower", type: "quantitative"},
y: {field: "Miles_per_Gallon", type: "quantitative"},
color: {
condition: {
selection: "Country",
field: "Miles_per_Gallon", type: "quantitative"
},
value: 10
}
}
})
VegaLite({
data: {values: Cars},
mark: "circle",
selection: {
area: {type: "interval"}
},
encoding: {
x: {field: "Horsepower", type: "quantitative"},
y: {field: "Weight_in_lbs", type: "quantitative"},
color: {field: "Origin", type: "nominal"},
size: {
condition: {
selection: "area",
value: 20},
value: 5
},
fillOpacity: {
condition: {
selection: "area",
value: 1},
value: .5
//switch the values around if you want to see clearer
//fillOpacity values range between 0 and 1
}
}
})
viewof Sort = menu('Sort', ["ascending", "descending"])
// sorting dropdown
VegaLite({
data: {values: Cars},
mark: "bar",
encoding: {
x: {field: "Origin", type: "nominal", sort: {encoding: "y", order: Sort}},
// order: descending was the previous iteration. Sort allows you to choose ascending or descending
y: {aggregate: "median", field: "Horsepower"}
// this is using Horsepower to sort the X axis - countries
}
})
VegaLite({
data: {values: Cars},
mark: "bar",
encoding: {
x: {field: "Cylinders", type: "nominal", sort: {op: "average", field: field, order: Sort}},
y: {aggregate: "median", field: "Horsepower"}
}
})
viewof range = rangeSlider({
min: d3.min(Cars, d => d.Acceleration),
max: d3.max(Cars, d => d.Acceleration),
value: this ? this.value : [9, 18],
// this sets the default minimum and maximum value of the range slider
title: 'Acceleration',
description: 'filtering by acceleration'
})
// new Vega with rangeSlider
VegaLite({
data: {values: Cars},
transform: [
{filter: {field: "Acceleration", lte: range[1]}}, // lte = less than or equal to - gotta put 1 bc that's 2nd value
{filter: {field: "Acceleration", gte: range[0]}}, // gte = greater than or equal to
],
mark: "circle",
encoding: {
x: {field: "Horsepower", type: "quantitative"},
y: {field: "Miles_per_Gallon", type: "quantitative"},
color: {field: "Origin", type: "nominal"}
}
})
// old Vega
VegaLite({
data: {values: Cars},
mark: "circle",
encoding: {
x: {field: "Horsepower", type: "quantitative"},
y: {field: "Miles_per_Gallon", type: "quantitative"},
color: {field: "Origin", type: "nominal" }
}
})
//old
VegaLite({
data: {values: weather},
mark: { type: "point",filled: "true"},
encoding: {
x: { field: "precipitation", type: "quantitative"},
y: {field: "wind", type: "quantitative"},
color: {field: "weather", type: "nominal"}
}
})
VegaLite({
data: {values: weather},
//horizontal concat, can also be vconcat
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: "max_temp", type: "quantitative"},
y: {field: "wind", type: "quantitative"},
color: {field: "weather", type: "nominal"}
}
}
]
})
VegaLite({
data: {values: weather},
repeat: { // good way to create a scatter plot matrix
column: ["temp_max", "wind", "precipitation"],
row: ["precipitation", "wind", "temp_max"]
},
// we have to give a generic specification to Vega Lite about where to fill in these values
spec: {
mark: "point",
encoding: {
x: {field: {repeat: "column"}, type: "quantitative"},
y: {field: {repeat: "row"}, type: "quantitative"},
color: {field: "weather", type: "nominal"}
}
}
})
VegaLite({
data: {values: weather},
facet: {column: {field: "weather", type: "nominal"}},
// faceting accesses the internal field and uses that to define a new visualization, like a filter
// creating a different histogram for various values but keeping one constant, in this case wind.
spec: {
width: 120,
height: 120,
mark: "bar",
encoding: {
x: {field: "wind", type: "quantitative", bin: "true"},
y: {aggregate: "count", type: "quantitative"}
}
}
})
VegaLite(
{
data: {values: weather},
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]}},
color: {field: "weather", type: "nominal"}
},
}]
})
VegaLite({
data: {values: weather},
repeat: {
column: ["temp_max", "wind"],
row: ["precipitation", "temp_max"]
},
spec: {
mark: "point",
selection: {
brush: {
type: "interval",
resolve: "intersect"
// this is for when there are multiple brushes intersecting in one selection
}
},
encoding: {
x: {field: {repeat: "column"}, type: "quantitative"},
y: {field: {repeat: "row"}, type: "quantitative"},
color: {
condition: {
selection: "brush",
field: "weather", type: "nominal"},
value: "gray"}
}
}
})
VegaLite({
data: {values: weather},
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, grid: false}
}
}
}]
})
weather = d3.csv("https://vega.github.io/vega-lite/data/seattle-weather.csv")
import {slider, menu, checkbox} from '@jheer/dom-utilities'
import {rangeSlider} from '@mootari/range-slider'
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.
