Published
Edited
May 15, 2019
1 fork
Importers
md`# ML Part`
d3 = require("d3@5", "d3-svg-legend@2")
lodash = require("https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js")
salaries_predicted = d3.csv('https://gist.githubusercontent.com/ipeter50/189edb8d910f5e7410007af45fc16b65/raw/12cac756c75b545f866d22584ccd5585e863338d/predicted_salaries.csv')
data_shot = d3.csv("https://gist.githubusercontent.com/ipeter50/d7c1fa104e33b3d4145721263c06f7ea/raw/1f560a4234d1ce4c290c1fd0d7bd09fad401be77/playoff_shots1718_prepared.csv")
salaries_prepared = salaries_predicted.sort((a,b) => parseFloat(b['Predicted salary']) -parseFloat(a['Predicted salary']))
.map(o => lodash.omit(o, ['index']))
salaries_finished = salaries_prepared.map(function(row){
var newRow = {};
var formater = Intl.NumberFormat('us-US', { style: 'currency', currency: 'USD', minimumFractionDigits:0 });
newRow["Player name"]=row["Player"];
newRow["Actual salary"]=formater.format(parseFloat(row["Actual salary"]));
newRow["Predicted salary"]=formater.format(parseFloat(row["Predicted salary"]));
newRow["Difference"]=(parseFloat(row["Relative difference"])*100).toFixed(2)+"%";
return newRow;
});
import {table} from "@tmcw/tables/2"
load_table = function(){return table(salaries_finished, {title:"Salaries", pageSize:10})}
load_dataset_shot = function(){return table(data_shot, {title:"2018 playoffs shots", pageSize:5})}
importances = d3.csv("https://gist.githubusercontent.com/ipeter50/bc32278154679cf4b59040d37d2de22b/raw/c9ffff91ad52ec3f9597040b513a3acf5acc0cd8/importances.csv")
importances_prepared = importances.map(function(row){
var newRow = {};
newRow["name"]=row["Variable"];
newRow["value"]=parseFloat(row["Importance"]);
return newRow;
})
.sort((a,b) => parseFloat(b['value']) -parseFloat(a['value']));
load_importance = function(){return chart()}
load_table();
load_importance()
html`
<div>
The model variables can be ranked by their importance: variables that are used the most in the decision process will have a high importance. Based on this criterion, we can show what variables are the more important on the following bar chart.
From this, it can be seen that the <b>average points scored per game</b> (Points) is the most important metric by far. Then <b>Win Shares</b> (WS) and <b>Player Efficient Rate</b> (PER) are also important, which was foreseeable as those metrics are designed to assess player’s performances. Thereby, looking at those variables can be way to answer our question: <b>What makes a great NBA player?</b>
</div>
`
load_dataset_shot()
function chart(){
const svg = d3.select(DOM.svg(width, height));
svg.append("g")
.attr("fill", "steelblue")
.selectAll("rect")
.data(importances_prepared)
.join("rect")
.attr("x", d => x(d.name))
.attr("y", d => y(d.value))
.attr("height", d => y(0) - y(d.value))
.attr("width", x.bandwidth());
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
svg.append("text")
.attr("x", width / 2)
.attr("y", 30)
.attr("text-anchor", "middle")
.style("font-size", "20px")
.text("Importances of variables to predict player's salary");
svg.append("text")
.attr("x", width/2)
.attr("y", 490)
.attr("text-anchor", "middle")
.style("font-size", "16px")
.text("Variables");
svg.append("text")
.attr("x", 10)
.attr("y", height/2)
.attr("transform", function(d) {
return "rotate(-90,10, 250)"
})
.attr("text-anchor", "middle")
.style("font-size", "16px")
.text("Importance");
return svg.node();
}
x = d3.scaleBand()
.domain(importances_prepared.map(d => d.name))
.range([margin.left, width - margin.right])
.padding(0.1)
y = d3.scaleLinear()
.domain([0, d3.max(importances_prepared, d => d.value)]).nice()
.range([height - margin.bottom, margin.top])
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).tickSizeOuter(0))
formatPercent = d3.format(".0%");
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).tickFormat(formatPercent))
.call(g => g.select(".domain").remove())
height = 500
margin = ({top: 50, right: 0, bottom: 50, left: 50})
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.
