VegaLite({
data: {values: Cars},
mark: "circle",
selection: {
pts: {type: "single", on: "click"}
},
encoding: {
x: {field: "Horsepower", type: "quantitative"},
y: {field: "Miles_per_Gallon", type: "quantitative"},
color: {
condition: {
selection: "pts",
field: "Origin", type: "nominal"
},
value: "gray"
}
}
})
VegaLite({
data: {values: Cars},
mark: "circle",
selection: {
pts: {type: "single", on: "mouseover"}
},
encoding: {
x: {field: "Horsepower", type: "quantitative"},
y: {field: "Miles_per_Gallon", type: "quantitative"},
color: {
condition: {
selection: "pts",
field: "Origin", type: "nominal"
},
value: "gray"
}
}
})
VegaLite({
data: {values: Cars},
mark: "circle",
selection: {
pts: {type: "single", on: "mouseover"}
},
encoding: {
x: {field: "Horsepower", type: "quantitative"},
y: {field: "Miles_per_Gallon", type: "quantitative"},
tooltip: {
field: "Cylinders", type: "quantitative"
},
color: {
condition: {
selection: "pts",
field: "Origin", type: "nominal"
},
value: "gray"
}
}
})
VegaLite({
data: {values: Cars},
mark: "circle",
selection: {
area: {type: "interval"}
},
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"]}
}
},
encoding: {
x: {field: "Horsepower", type: "quantitative"},
y: {field: "Miles_per_Gallon", type: "quantitative"},
color: {
condition: {
selection: "Country",
field: "Origin", type: "nominal"
},
value: "gray"
}
}
})
VegaLite({
data: {values: Cars},
mark: "bar",
encoding: {
x: {field: "Origin", type: "nominal", sort: {encoding: "y", order: Sort}},
y: {aggregate: "median", field: "Horsepower"}
}
})
VegaLite({
data: {values: Cars},
mark: "bar",
encoding: {
x: {field: "Cylinders", type: "nominal", sort: {op: "average", field: field, order: Sort}},
y: {aggregate: "median", field: "Horsepower"}
}
})
VegaLite({
data: {values: Cars},
transform: [
{filter: {field: "Acceleration", lte: range[1]}},
{filter: {field: "Acceleration", gte: range[0]}}
],
mark: "circle",
encoding: {
x: {field: "Horsepower", type: "quantitative"},
y: {field: "Miles_per_Gallon", type: "quantitative"},
color: {field: "Origin", type: "nominal" }
}
})
VegaLite({
data: {values: weather},
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"}
},
}
]
})
VegaLite({
data: {values: weather},
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: weather},
facet: {column: {field: "weather", type: "nominal"}},
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"
},
},
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: 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.
