Public
Edited
May 18, 2023
laxstats = FileAttachment("ncaa_stats_May17.csv").csv({typed: true})
import { vl } from "@vega/vega-lite-api" // Draw the chart
viewof variousCharts = {
const goals_x_pct = vl.markCircle() // Make a scatter chart
.data(laxstats)
.title("Goals V Shooting Percentage")
.encode(
vl.x().fieldQ("Shooting Percentage").axis({ format: "%"}), // For x, use the Horsepower field
vl.y().fieldQ("Goals"), // For y, use the Miles_per_Gallon field
vl.tooltip([vl.fieldN("Full Name"),vl.fieldN("Team"),vl.fieldO("Goals"),vl.fieldQ("Shots"),]), // For tooltips, show the Name field
)
.height(500)
.width(600);
const goals_x_shots = vl.markCircle() // Make a scatter chart
.data(laxstats)
.title("Goals V Shots")
.encode(
vl.x().fieldQ("Goals"), // For x, use the Horsepower field
vl.y().fieldQ("Shots"), // For y, use the Miles_per_Gallon field
vl.tooltip([vl.fieldN("Full Name"),vl.fieldN("Team"),vl.fieldO("Goals"),vl.fieldQ("Shots"),]), // For tooltips, show the Name field
)
.height(500)
.width(600);
const goals_x_shots_over40 = vl.markCircle() // Make a scatter chart
.data(laxstats)
.title("How Many Shots Does it Take to Score 40?")
.transform(
vl.filter('datum.Goals > 40'),
)
.encode(
vl.x().fieldQ("Goals"), // For x, use the Horsepower field
vl.y().fieldQ("Shots"), // For y, use the Miles_per_Gallon field
vl.tooltip([vl.fieldN("Full Name"),vl.fieldN("Team"),vl.fieldO("Goals"),vl.fieldQ("Shots"),]), // For tooltips, show the Name field
)
.height(500)
.width(600);
const goals_x_pct_over40 = vl.markCircle() // Make a scatter chart
.data(laxstats)
.title("Shooting Percentages By High Volume Scorers?")
.transform(
vl.filter('datum.Goals > 40'),
)
.encode(
vl.x().fieldQ("Shooting Percentage").axis({ format: "%"}), // For x, use the Horsepower field
vl.y().fieldQ("Goals"), // For y, use the Miles_per_Gallon field
vl.tooltip([vl.fieldN("Full Name"),vl.fieldN("Team"),vl.fieldO("Goals"),vl.fieldQ("Shots"),]), // For tooltips, show the Name field
)
.height(500)
.width(600);
return vl.vconcat(vl.hconcat(goals_x_pct, goals_x_shots, goals_x_shots_over40, goals_x_pct_over40)).render()
}
vl.markCircle() // Make a scatter chart
.data(laxstats) // Using the cars data (below)
.encode(
vl.x().fieldQ("Goals"), // For x, use the Horsepower field
vl.y().fieldQ("Shots"), // For y, use the Miles_per_Gallon field
vl.tooltip([vl.fieldN("Full Name"),vl.fieldO("Goals"),vl.fieldQ("Shots"),]), // For tooltips, show the Name field
)
.render()
vl.markCircle() // Make a scatter chart
.data(laxstats) // Using the cars data (below)
.encode(
vl.x().fieldQ("Ground Balls"), // For x, use the Horsepower field
vl.y().fieldQ("Faceoffs Won"), // For y, use the Miles_per_Gallon field
vl.tooltip([vl.fieldN("Full Name"),vl.fieldO("Ground Balls"),vl.fieldQ("Faceoffs Won"),]), // For tooltips, show the Name field
)
.render()
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.