data analyst • mediapart
matches = d3.csvParse(await FileAttachment("matches.csv").text(), d3.autoType)
data = {
var format = d3.timeFormat("%Y-%m-%d");
let m = d3.rollup(matches,
v => d3.sum(v, d => d.gameDuration/60),
d => {
return format(d.gameCreation)
})
// Filling days without game with 0
for(const d of xRange){
console.log(format(d))
if (!(m.has(format(d)))){
m.set(format(d), 0)
}
}
let d = Array.from(m, ([k,v])=>({
date: k,
totalDuration: v
})).sort((a,b) => a.date > b.date )
return d
}
import { movingAverage } from '@d3/moving-average'
averages = {
let values = movingAverage(data.map(d => d.totalDuration), N)
let format = d3.timeFormat("%Y-%m-%d");
let d = xRange.map((e,i)=>({
date: format(e),
mean: values[i]
}))
// We remove the N first elements since they have no value
d = d.slice(N)
return d
}
csum = {
let values = d3.cumsum(data.map(d => d.totalDuration))
let format = d3.timeFormat("%Y-%m-%d");
let d = xRange.map((e,i)=>({
date: format(e),
csum: values[i]
}))
return d
}
variations = {
let values = d3.pairs(data.map(d => d.totalDuration), (a,b) => (a !== 0) ? (b-a)/a : null)
let format = d3.timeFormat("%Y-%m-%d");
let d = xRange.map((e,i)=>({
date: new Date(format(e)),
difference: values[i]
// difference: i > N ? values[i] - averages[i-N].mean : 0
}))
return d
}
xDomain = [new Date(d3.min(matches, d => d.gameCreation)), new Date(d3.max(matches, d => d.gameCreation))]
xTime = d3
.scaleTime()
.domain(xDomain)
.rangeRound([margin.left, width - margin.right])
xRange = d3.timeDay.range(...xTime.domain())
xBand = d3.scaleBand()
.domain(xDomain)
barWidth = xBand.bandwidth()
barXPosition = d => xTime(new Date(d.date)) - barWidth/2
lineXPosition = d => xTime(new Date(d.date))
import { legend } from '@d3/color-legend'
width
height = 500
margin = ({top: 20, right: 20, bottom: 30, left: 40})
color = "steelblue"
d3 = require("d3@6")
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.
