Public
Edited
Nov 1, 2023
1 fork
import {vl} from "@vega/vega-lite-api-v5"
embed = require("vega-embed@6")
import {printTable} from "@uwdata/data-utilities"
viewof scatter_json_view = embed({
$schema: 'https://vega.github.io/schema/vega-lite/v5.json',
data: {url: 'https://vega.github.io/vega-datasets/data/cars.json'},
mark: 'point',
encoding: {
x: {field: 'Horsepower', type: 'quantitative'},
y: {field: 'Miles_per_Gallon', type: 'quantitative'}
}
})
viewof scatter_api_view = vl.markPoint()
.data('https://vega.github.io/vega-datasets/data/cars.json')
.encode(
vl.x().fieldQ('Horsepower'),
vl.y().fieldQ('Miles_per_Gallon')
).render()
viewof bar_json_view = embed({
$schema: 'https://vega.github.io/schema/vega-lite/v5.json',
mark: 'bar',
data: {url: "https://vega.github.io/vega-datasets/data/movies.json"},
encoding: {
x: {field: "IMDB Rating", type: "quantitative", bin: true},
y: {aggregate: "count", type: "quantitative"}
}
})
viewof bar_api_view = vl.markBar()
.data('https://vega.github.io/vega-datasets/data/movies.json')
.encode(
vl.x().fieldQ('IMDB Rating').bin(true),
vl.y().count()
).render()
viewof view_title = embed(
{
width: 500,
height: 300,
data: {url: 'https://vega.github.io/vega-datasets/data/cars.json'},
mark:
{type: "circle", tooltip: true},
encoding: {
x: {"field": "Displacement", "type": "quantitative", "scale": {"zero": false}, "title": "Engine displacement (L)"},
y: {"field": "Miles_per_Gallon", "type": "quantitative", "scale": {"zero": false}, "title": "Highway fuel economy (mpg)"},
color: {"field":"Origin", "title":"Country of Origin"}
},
"title": { "text": "Fuel efficiency generally decreases with engine size",
"subtitle": "Two seaters (sports cars) are an exception because of their light weight",
"anchor":"start"
}
})
vl.markCircle({tooltip: true}) // markCircle (filled), markPoint (not filled)
.data('https://vega.github.io/vega-datasets/data/cars.json')
.width(500).height(300)
.encode(
vl.x().fieldQ('Displacement').scale({zero: false}).title("Engine displacement (L)"),
vl.y().fieldQ('Miles_per_Gallon').scale({zero: false}).title("Highway fuel economy (mpg)"),
vl.color().fieldN('Origin').title("Country of Origin")
)
.title({text: "Fuel efficiency generally decreases with engine size",
subtitle: "Two seaters (sports cars) are an exception because of their light weight",
anchor: "start"})
.render()
viewof heatmap_json_view = embed({
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
data: {url: 'https://vega.github.io/vega-datasets/data/cars.json'},
"transform": [
{
"aggregate": [{"op": "count", "as": "num_cars"}],
"groupby": ["Origin", "Cylinders"]
}
],
"encoding": {
"y": {"field": "Origin", "type": "ordinal"},
"x": {"field": "Cylinders", "type": "ordinal"}
},
"layer": [
{
"mark": "rect",
"encoding": {
"color": {
"field": "num_cars",
"type": "quantitative",
"title": "Count of Records",
"legend": {"direction": "horizontal", "gradientLength": 120}
}
}
},
{
"mark": "text",
"encoding": {
"text": {"field": "num_cars", "type": "quantitative"},
"color": {
"condition": {"test": "datum['num_cars'] < 40", "value": "black"},
"value": "white"
}
}
}
],
"config": {
"axis": {"grid": true, "tickBand": "extent"}
}
})
diamonds = d3.csv("https://raw.githubusercontent.com/tidyverse/ggplot2/master/data-raw/diamonds.csv")
printTable(diamonds.slice(0, 5))
viewof textOverHeatmap = embed (
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {"url": "https://raw.githubusercontent.com/odu-cs625-datavis/public-fall23-aveerasa/main/diamonds.json"},
"transform": [
{
"aggregate": [{"op": "count", "as": "num_carat"}],
"groupby": ["cut", "carat"]
}
],
"encoding": {
"y": {"field": "cut", "type": "ordinal"},
"x": {"field": "carat", "type": "ordinal"}
},
"layer": [
{
"mark": "rect",
"encoding": {
"color": {
"field": "num_carat",
"type": "quantitative",
"title": "Count of Records",
"legend": {"direction": "horizontal", "gradientLength": 300}
}
}
},
{
"mark": "text",
"encoding": {
"text": {"field": "num_carat", "type": "quantitative"},
"color": {
"condition": {"test": "datum['num_carat'] < 100", "value": "black"},
"value": "white"
}
}
}
],
"config": {
"axis": {"grid": true, "tickBand": "extent"}
}
}
)
textOverHeatmap_api = {
const rect = vl.markRect()
.encode(
vl.color().fieldQ("num_carat").title("Count of Records")
.legend({"direction": "horizontal", "gradientLength": 300})
);
const text = vl.markText()
.encode(
vl.text().fieldQ("num_carat"),
vl.color().if("datum['num_carat'] < 100", vl.value("black")).value("white"),
);
return vl.layer(rect, text)
.data('https://raw.githubusercontent.com/odu-cs625-datavis/public-fall23-aveerasa/main/diamonds.json')
.transform(
vl.groupby(["cut", "carat"])
.aggregate(vl.count().as("num_carat"))
)
.encode(
vl.x().fieldO("carat"),
vl.y().fieldO("cut")
)
.config({axis: {"grid": true, "tickBand": "extent"}})
.render()
}
layerLine_api = { const line = vl.markLine()
.encode(
vl.x().fieldQ("scaled_date"),
vl.y().fieldQ("Fatalities")
);
const left_text = vl.markText({"baseline":"top", "aria":false})
.encode(
vl.x().fieldQ("scaled_date").aggregate("min"),
vl.y().fieldQ("Fatalities").aggregate({"argmin": "scaled_date"}),
vl.text().fieldN("year").aggregate({"argmin": "scaled_date"})
);
const right_text = vl.markText({"aria":false})
.encode(
vl.x().fieldQ("scaled_date").aggregate("max"),
vl.y().fieldQ("Fatalities").aggregate({"argmax": "scaled_date"}),
vl.text().fieldN("year").aggregate({"argmax": "scaled_date"})
);
return vl.layer(line, left_text, right_text)
.width(800).height(500)
.data("https://raw.githubusercontent.com/odu-cs625-datavis/public-fall23-aveerasa/main/Airplane_Crashes_and_Fatalities_Since_1908.csv")
.transform(
vl.calculate("year(datum.Date)").as("year"),
vl.calculate("floor(datum.year / 10)").as("decade"),
vl.calculate("(datum.year % 10) + (month(datum.Date)/12)").as("scaled_date"),
vl.calculate("datum.first_date === datum.scaled_date ? 'first' : datum.last_date === datum.scaled_date ? 'last' : null").as("end")
)
.encode(
vl.x().title("Year into Decade").axis({"tickCount": 11}),
vl.y().title("CO2 concentration in ppm").scale({"zero": false}),
vl.color().fieldO("decade").legend(null).scale({"scheme": "magma"})
)
.config({text: {"align": "left", "dx": 3, "dy": 1}})
.render()
};
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.
