Published
Edited
Jan 14, 2021
Importers
1 star
Player = {
let t = table(aqdatafiltered, {
columns: {
Player: {
formatter(value, i, row) {
let elem = html`<a style='cursor:pointer'>${value}</a>`;
elem.addEventListener('click', () => {
t.value = row;
t.dispatchEvent(new CustomEvent('input'));
});
return elem;
}
},
'xGF%': {
title: 'xGF%',
type: 'string',
formatter(val, i) {
return html`<div style='display:flex;align-items:center;height:1.5em;'>
<div style='width:${val}%;height:1em;background:#21209c;margin-right:0.5em;'></div>${i == 0 ? d3.format('.0%')(val / 100) : val}
</div>`;
}
},
'CF%': {
title: 'CF%',
type: 'string',
formatter(val, i) {
return html`<div style='display:flex;align-items:center;height:1.5em;'>
<div style='width:${val}%;height:1em;background:#fdb827;margin-right:0.5em;'></div>${i == 0 ? d3.format('.0%')(val / 100) : val}
</div>`;
}
},
TOI: {
formatter(val, i) {
let color = d3.scaleLinear()
.domain([0, 15, 30])
.range(["#f4c8cf", "#f8f8f8", "#c8f4cb"]);
return html`<td style='background:${color(val)};text-align:right;padding:2px 5px;'>${val}</td>`;
}
}
}
});
return t;
}
aqData = aq
.fromCSV(await FileAttachment('EH_MTL_at_TOR_2021_01_13_skater_stats_ev_on_ice.csv').text())
.select('Player', 'Team','TOI', 'xGF%', 'CF%')
.objects()
import { aq, op } from '@uwdata/arquero'
d3 = require("d3@6")
import {table} from "@tmcw/tables@513"
import {radio} from "@jashkenas/inputs"
aqdatafiltered = aq
.fromCSV(await FileAttachment('EH_MTL_at_TOR_2021_01_13_skater_stats_ev_on_ice@1.csv').text())
.params({ selectedTeam })
.filter((d, $) => d.Team === $.selectedTeam)
.select('Player', 'Team','TOI', 'xGF%', 'CF%')
.objects()
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.
