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",
encoding: {
x: {field: "Horsepower", type: "quantitative"},
y: {field: "Miles_per_Gallon", type: "quantitative"},
color: {
field: "Origin", type: "nominal"
}
}
})
VegaLite({
data: {values: Cars},
mark: "bar",
encoding: {
x: {field: "Origin", type: "nominal", sort: {encoding: "y", order: "ascending"}},
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},
mark: "circle",
encoding: {
x: {field: "Horsepower", type: "quantitative"},
y: {field: "Miles_per_Gallon", type: "quantitative"},
color: {field: "Origin", type: "nominal" }
}
})
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},
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",
encoding: {
x: {field: {repeat: "column"}, type: "quantitative"},
y: {field: {repeat: "row"}, type: "quantitative"},
}
}
})
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.
