UK MPs' votes on BrexitW3DT Product-Market Fit Dashboard v1 (IPFS and Filecoin data separate)DashboardN.J. use of force dataDashboardMarathon Training DashboardClustergrammer-GLInteractive Plot DashboardIn-Product Dashboard for your userCOVID-19 Live DashboardDashboard with Brushing and Linking Example in Vega-LiteDashboardDashboard with bertin 🌍 & plot 📊Activity Tracking DashboardAWS HTTP Status Dashboard10 minutes dashboard: vegaSync guideAndy's Walgreens COVID-19 Tracker TrackerSVG DataGrid with many features and a live COVID Dashboard demo
Cricket Dashboard
filteredBatsmanStats = (function(){
// TODO - Metric selection
const yearFilteredBatsman = batsmanStats.filter(d => d["Year"] >= minYear)
.filter(d => d["Year"] <= maxYear)
.filter(d => d["Team"] == team)
// const avg = yearFilteredBatsman.reduce(
// (res, val) => {
// if(isNaN(val.Runs)){
// return res;
// }
// else{
// return res + val.Runs
// }
// }, 0)
// console.log(yearFilteredBatsman.length)
const teamBatsman = yearFilteredBatsman
.filter(d => d["Team"] == team)
.reduce(
(res, value) => {
if(! res[value.Player]){
res[value.Player] = ({
Runs: value.Runs,
Innings: value.Innings,
Boundaries: value.Fours + value.Sixes,
SR: value.SR,
Ducks: value.Zeros,
NumofYears: 1
})
}
else{
res[value.Player].Runs = res[value.Player].Runs + value.Runs;
res[value.Player].Innings = res[value.Player].Innings + value.Innings;
res[value.Player].NumofYears = res[value.Player].NumofYears + 1;
res[value.Player].Boundaries = res[value.Player].Boundaries + value.Fours + value.Sixes;
res[value.Player].SR = res[value.Player].SR + value.SR;
res[value.Player].Ducks = res[value.Player].Ducks + value.Zeros;
}
return res;
}, {});
return Object.keys(teamBatsman).map(
(key) => {
return ({
"Player": key,
"Total Runs": teamBatsman[key].Runs,
"Batting Innings": teamBatsman[key].Innings,
"Batting Runs": teamBatsman[key].Runs/ teamBatsman[key].Innings,
"Batting Boundaries": teamBatsman[key].Boundaries/ teamBatsman[key].Innings,
"SR": teamBatsman[key].SR/ teamBatsman[key].Innings,
"Ducks": teamBatsman[key].Ducks,
"Average Runs": 50
})
})
// .filter(d => ! isNaN(d[batsmanStatType]))
.sort((a, b) => {return b["Innings"] - a["Innings"]})
.slice(0, 5);
})()
filteredBowlerStats = (function(){
// TODO - Metric selection
const yearFilteredBowler = bowlerStats.filter(d => d["Year"] >= minYear)
.filter(d => d["Year"] <= maxYear)
.filter(d => d["Team"] == team)
const teamBowler = yearFilteredBowler
.filter(d => d["Team"] == team)
.reduce(
(res, value) => {
if(! res[value.Player]){
res[value.Player] = ({
Average: value.Average,
Wickets: value.Wickets,
Innings: value.Innings,
Maidens: value.Maidens,
Runs: value.Runs,
Boundaries: value.Boundaries,
NumofYears: 1
})
}
else{
res[value.Player].Average = res[value.Player].Average + value.Average;
res[value.Player].Wickets = res[value.Player].Wickets + value.Wickets;
res[value.Player].Innings = res[value.Player].Innings + value.Innings;
res[value.Player].NumofYears = res[value.Player].NumofYears + 1;
res[value.Player].Maidens = res[value.Player].Maidens + value.Maidens;
res[value.Player].Runs = res[value.Player].Runs + value.Runs;
res[value.Player].Boundaries = res[value.Player].Boundaries + value.Boundaries;
}
return res;
}, {});
return Object.keys(teamBowler).map(
(key) => {
return ({
"Player": key,
"Yearly Average": teamBowler[key].Wickets/teamBowler[key].NumofYears,
"Wickets": teamBowler[key].Wickets / teamBowler[key].Innings,
"Bowling Innings": teamBowler[key].Innings,
"Innings Average": teamBowler[key].Wickets/ teamBowler[key].Innings,
"Maidens": teamBowler[key].Maidens / teamBowler[key].Innings,
"Bowling Runs": teamBowler[key].Runs / teamBowler[key].Innings,
"Bowling Boundaries": teamBowler[key].Boundaries / teamBowler[key].Innings
})
})
// .filter(d => ! isNaN(d[bowlerStatType]))
.sort((a, b) => {return b["Innings"] - a["Innings"]})
.slice(0, 5);
})()
teamWinLoss = (function(){
const chart1 = vl.markBar({tooltip: true, align: "center"})
.data(stats.filter(d => d.Team == team))
.encode(
vl.x().year("Year"),
vl.y().fieldQ("WL")
// .scale({minValue: 0, maxValue: 10})
.scale({domain: [0, 7]}),
// vl.color().value("red")
vl.color().fieldN("Selected").legend(null)
);
const chart2 = vl.markLine({tooltip: true})
.data(stats.filter(d => d.Team == team))
.encode(
vl.x().year("Year"),
vl.y().fieldQ("AverageWL").scale({minValue: 0, maxValue: 10}),
vl.color().value("red")
);
const chart3 = vl.markPoint()
.data([{"Year": "2007", "value": 6}])
.encode(
vl.x().year("Year"),
vl.y().fieldQ("value")
);
return vl.layer(chart1, chart2)
.height(100)
.width(width * 0.8)
.title({text: "Win/Loss Rate"});
})()
teamBatsmanStatsRepeat = vl.markBar({tooltip: true})
.data(filteredBatsmanStats)
.encode(
vl.y().fieldN("Player").sort(vl.fieldQ("Batting Innings").order("descending")),
vl.x().fieldQ(vl.repeat("row")),
vl.order().fieldQ("Batting Innings")
)
.width(width * 0.2)
.repeat({row: ["Batting Innings", "Batting Runs", "Batting Boundaries", "Ducks", "SR"]})
.title({text: "Top Batsman"})
teamBatsmanStatsRepeatL = (function(){
const chart1 = vl.markBar({tooltip: true})
.data(filteredBatsmanStats)
.encode(
vl.y().fieldN("Player").sort(vl.order("descending")),
vl.x().fieldQ(vl.repeat("row")),
vl.color().value("#65bc51")
)
const chart2 = vl.markLine()
.data(filteredBatsmanStats)
.transform(
vl.mean(vl.repeat("row")).as("avg")
)
.encode(
vl.y().fieldN("Player"),
vl.x().fieldQ(vl.repeat("avg")),
vl.color().value("red")
)
return vl.layer(chart1, chart2).width(width * 0.2)
.repeat({row: ["Batting Innings", "Batting Runs", "Batting Boundaries", "SR", "Ducks"]})
.title({text: "Top Batsman"})
})()
teamBowlerStatsRepeat = vl.markBar({tooltip: true})
.data(filteredBowlerStats)
.encode(
vl.y().fieldN("Player").sort(vl.fieldQ("Bowling Innings").order("descending")),
vl.x().fieldQ(vl.repeat("row")),
// vl.color().value("#65bc51")
)
.width(width * 0.2)
.repeat({row: ["Bowling Innings", "Maidens", "Bowling Runs","Bowling Boundaries", "Wickets"]})
.title({text: "Top Bowlers"});
central = ({
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": 0.5 * width,
"height": 400,
"title": "Strength of " + team,
"data": {
"values": radarData.slice(0, 8)
},
"layer": [
{
"mark": {"tooltip": true, "type": "arc", "innerRadius": 10, "stroke": "#fff"}
},
{
"mark": {"type": "text", "radiusOffset": 2},
"encoding": {
"color": {"value": "black"},
"text": {"field": "key", "type": "ordinal"}
}
}],
"encoding": {
"theta": {"field": "key", "type": "nominal", "sort": {"field": "order", "order":"descending"}},
"radius": {"field": "value", "stack": "normalize", "scale":
{"type": "linear", "zero": true, "rangeMin": 0, "rangeMax": 100}
},
"fillOpacity": {"field": "value", "type": "nominal"},
"color": {"value": "#659755"}
},
"view": {"stroke": null}
})
opponentCentral = ({
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": 0.5 * width,
"height": 300,
"title": "Strength of " + opponent,
"data": {
"values": opponentRadarData.slice(0, 8)
},
"layer": [
{
"mark": {"tooltip": true, "type": "arc", "innerRadius": 10, "stroke": "#fff"}
},
{
"mark": {"type": "text", "radiusOffset": 2},
"encoding": {
"color": {"value": "black"},
"text": {"field": "key", "type": "ordinal"}
}
}],
"encoding": {
"theta": {"field": "key", "type": "nominal", "sort": {"field": "order", "order":"descending"}},
"radius": {"field": "value", "stack": "normalize", "scale": {"type": "linear", "zero": true, "rangeMin": 0, "rangeMax": 100}},
"fillOpacity": {"field": "value", "type": "nominal"},
"color": {"value": "#659755"}
},
"view": {"stroke": null}
})
opponentRadarData =[
{"key": "Bat Ave", "value": filter(opponent, "NormalizedBattingAverage"), "category": team, "order": 1},
{"key": "Bat RPO", "value": filter(opponent, "NormalizedBattingRPO"), "category": team, "order": 2},
{"key": "Bat HS", "value": filter(opponent, "NormalizedBattingHighest"), "category": team, "order": 3},
{"key": "Bat LS", "value": filter(opponent, "NormalizedBattingLowest"), "category": team, "order": 4},
{"key": "Bwl Ave", "value": filter(opponent, "NormalizedBowlingAverage"), "category": team, "order": 5},
{"key": "Bwl RPO", "value": filter(opponent, "NormalizedBowlingRPO"), "category": team, "order": 6},
{"key": "Bwl HS", "value": filter(opponent, "NormalizedBowlingHighest"), "category": team, "order": 7},
{"key": "Bwl LS", "value": filter(opponent, "NormalizedBowlingLowest"), "category": team, "order": 8},
// Highest during period
{"key": "Bat Ave", "value": filter("all", "NormalizedBattingAverage"), "category": "Best", "order": 1},
{"key": "Bat RPO", "value": filter("all", "NormalizedBattingRPO"), "category": "Best", "order": 2},
{"key": "Bat HS", "value": filter("all", "NormalizedBattingHighest"), "category": "Best", "order": 3},
{"key": "Bat LS", "value": filter("all", "NormalizedBattingLowest"), "category": "Best", "order": 4},
{"key": "Bwl Ave", "value": filter("all", "NormalizedBowlingAverage"), "category": "Best", "order": 5},
{"key": "Bwl RPO", "value": filter("all", "NormalizedBowlingRPO"), "category": "Best", "order": 6},
{"key": "Bwl HS", "value": filter("all", "NormalizedBowlingHighest"), "category": "Best", "order": 7},
{"key": "Bwl LS", "value": filter("all", "NormalizedBowlingLowest"), "category": "Best", "order": 8},
]
filter = function(team, type){
const yearFilter = stats.filter(d => d["Year"] >= minYear).filter(d => d["Year"] <= maxYear);
if(team == "all"){
return Math.max.apply(Math, yearFilter.map(d => d[type]))
}
return Math.max.apply(Math, yearFilter.filter(d => d["Team"] == team).map(d => d[type]))
// return 1
}
d3 = require("d3@6")
import { vl } from "@vega/vega-lite-api"
import {printTable} from '@uwdata/data-utilities'
import {Select, Checkbox, Range, bind, html} from "@observablehq/inputs"
import {rangeSlider} from "@mootari/range-slider"
embed = require("vega-embed@4")
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.
