Public
Edited
May 18, 2023
laxstats = FileAttachment("ncaa_stats_May17.csv").csv({typed: true})
import { vl } from "@vega/vega-lite-api"
// Draw the chart
laxcolours = ["red", "green"]
viewof variousCharts = {
const goals_x_assists = vl.markCircle() // Make a scatter chart
.data(laxstats)
.title("Goals Vs Assists")
.encode(
vl.x().fieldQ("Goals"), // For x, use the Horsepower field
vl.y().fieldQ("Assists"), // For y, use the Miles_per_Gallon field
vl.tooltip([vl.fieldN("Full Name"),vl.fieldN("Team"),vl.fieldQ("Goals"), vl.fieldN("Assists")]),
)
.height(500)
.width(600);
const assist_turnover = vl.markCircle()
.data(laxstats)
.title("Assist to Turnovers")
.encode(
vl.x().fieldQ("Turnovers"), // For x, use the Horsepower field
vl.y().fieldQ("Assists"), // For y, use the Miles_per_Gallon field
vl.tooltip([vl.fieldN("Full Name"),vl.fieldN("Team"),vl.fieldQ("Assists"), vl.fieldQ("Turnovers"),]),
)
.height(500)
.width(600);
return vl.vconcat(vl.hconcat(goals_x_assists, assist_turnover)).render()
}
vl.markCircle() // Make a scatter chart
.data(laxstats)
.title("Goals Vs Assists")
.encode(
vl.x().fieldQ("Goals"), // For x, use the Horsepower field
vl.y().fieldQ("Assists"), // For y, use the Miles_per_Gallon field
vl.tooltip([vl.fieldN("Full Name"),vl.fieldN("Team"),vl.fieldQ("Goals"), vl.fieldN("Assists")]),
)
.height(500)
.width(600)
.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.
