Published
Edited
Dec 16, 2021
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// ...bufferTimeLineRaw, loadingEqualsConsumptionRaw, smoothPlayingLimitRaw,
chart = LineChart(timesteps, [...bufferTimeLineRaw, loadingEqualsConsumptionRaw, smoothPlayingLimitRaw, loadingEqualsConsumption, smoothPlayingLimit, ...bufferTimeLine], {
yLabel: "cases × points × encoding",
yDomain: [1e5,2e9],
yFormat: d=>d3.format(".2s")(d)+"B",
xLabel: "n timesteps",
width: 700,
height: 500,
color: "steelblue"
}) // · ×
Insert cell
The smooth playing limit is mostly affected by the buffering memory. It doesn't change much for timesteps under 10k even if the connection is at 10MB/s. At 10MB/s the loading = playing line comes up to 400kB, the 1s line is at 10MB, the 5s line is at 50MB, and the 10s line is at 100MB.

Dropping the fps to 1 brings the loading = playing to 4MB. Dropping the fps basically just brings this line up with little change to the rest (only the 1s, 5s, and 10s lines move. The 1s line moves from 4MB to 8MB.)

Reducing the memory mainly affects the maximum data that can be loaded in.
Insert cell
[1,2,4,8,16].map(nviews=>evaluatePoint(nviews*266*1e3, 100))
Insert cell
Insert cell
Insert cell
loadingEqualsConsumption = {
// This one only considers loading the timesteps, therefore the 1s line is underneath it
let values = timesteps.map(t=>{
return speed/(fps)
})
values.label = "Loading = Consumption"
return values
}
Insert cell
smoothPlayingLimit = {
let values = timesteps.map(t=>{
// encoding = 4B, encoding_compressed = 1B per value
let f = (memory/t + speed/fps)/(1+8*4/(t*1))
return f > memory ? memory : f
})
values.label = "Smooth Playing Limit"
return values
}
Insert cell
bufferTimeLine = [1, 5, 10, 30, 60, 120, 300, 600].filter(b=>{
// Filter out any buffer times that would simply exceed the internal memory.
return b*speed < memory
}).map((b,i)=>{
let values = timesteps.map(t=>{
// encoding = 4B, encoding_compressed = 1B per value
let f = speed*(b/t + 1/fps)/(1+8*4/(t*1))
return f > memory ? memory : f
})

// add in some additional config.
values.color = colormap(i/5)
values.label = Math.floor(b/60) > 0 ? Math.floor(b/60) + "min" : b + "s"
return values
})
Insert cell
rawcolor = "silver"
Insert cell
rawlabelind = 3
Insert cell
loadingEqualsConsumptionRaw = {
let values = timesteps.map(t=>{
return 1/3*speed/(fps)
})
values.color = rawcolor
values.label = "Loading = Consumption"
values.labelcolor = rawcolor
return values
}
Insert cell
smoothPlayingLimitRaw = {
let values = timesteps.map(t=>{
let f = 1/3*(memory/t+speed/fps)
return f > memory ? memory : f
})
values.color = rawcolor
values.label = "Smooth Playing Limit"
values.labelcolor = rawcolor
values.labelind = rawlabelind
return values
}
Insert cell
bufferTimeLineRaw = [1, 5, 10, 30, 60, 120, 300, 600].filter(b=>{
// Filter out any buffer times that would simply exceed the internal memory.
return b*speed < memory
}).map((b,i)=>{
let values = timesteps.map(t=>{
let f = 1/3*speed*(b/t+1/fps)
return f > memory ? memory : f
})

// add in some additional config.
values.color = rawcolor
values.label = Math.floor(b/60) > 0 ? Math.floor(b/60) + "min" : b + "s"
values.labelcolor = rawcolor
values.labelind = rawlabelind
return values
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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