Published
Edited
Jan 19, 2022
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
matches = d3.csvParse(await FileAttachment("matches2.csv").text(), d3.autoType)
Insert cell
// roles = [ ...new Set(d3.map(gamesByDay, d => d[1].map(g => g['lane'])).flat())]
roles = d3.rollup(matches, v => v.length, d => d['lane'])
Insert cell
// champs = [ ...new Set(d3.map(gamesByDay, d => d[1].map(g => g['championId'])).flat())]
champs = d3.rollup(matches, v => v.length, d => d['championId'])
Insert cell
function champName(id){
let name = Object.values(champConstants['data']).find(c => c['key'] == id)['name']
return name
}
Insert cell
Insert cell
Insert cell
champConstants = d3.json('https://ddragon.leagueoflegends.com/cdn/11.9.1/data/en_US/champion.json')
Insert cell
gamesByDay = d3.group(matches, d => {
var format = d3.timeFormat("%Y-%m-%d");
return format(d.gameCreation)
})
Insert cell
Insert cell
filterChart = function(f, title, color){
let data = d3.map(gamesByDay, (d) => ({
date: new Date(d[0]),
value: f(d)
}))

return TimeChart(
data,
{
interval,
start,
stop,
max: d3.max(gamesByDay, d => d[0].length),
title: title,
marginTop: -16,
bands: 3,
width: 928, //d3.timeDay.count(firstGame, lastGame) * 2,
scheme: color,
mode: 'mirror'
})
}
Insert cell
function wlDayCond(gamesDay, cond){
return (gamesDay.filter(g => cond(g) && g['win'] == "True")).length - (gamesDay.filter(g => cond(g) && g['win'] == "False")).length
}
Insert cell
interval = d3.utcDay.every(1) // sample frequency
Insert cell
stop = d3.max(matches, d=>d.gameCreation) //interval() // exclusive
Insert cell
start = interval.offset(stop, -d3.timeDay.count(d3.min(matches, d => d.gameCreation), d3.max(matches, d=>d.gameCreation)))
Insert cell
import { TimeAxis, TimeChart, wave } from "@observablehq/timechart"
Insert cell
d3 = require('d3')
Insert cell

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.
Learn more