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"
},
tooltip: {field: "Cylinders", type: "quantitative"}
}
})
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",
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: "circle",
selection:{
area: {type: "interval"}
},
encoding: {
y: {field: "Horsepower", type: "quantitative"},
x: {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: .6
}
}
})
viewof Sort= menu ('Sort', ["ascending", "descending"])
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: "ascending"}},
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],
title: 'Acceleration',
description: 'filtering by acceleration'
})
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: "precipitation", 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: {
//highlights all insersecting values for 4 graphs
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: "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'
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.