{
let c = DOM.canvas(width, width / 1.6);
new Chart(c.getContext("2d"), {
data: data,
options: options()
});
return c;
}
data = ({
labels: labels,
datasets: [
{
type: "scatter",
label: 'Marker 1',
data: [{
x: value,
y: dataSet.find(d => d.x === value)
}],
backgroundColor: '#aef',
borderColor: '#aef',
pointRadius: 8,
showLine: false
},
{
type: 'line',
// labels: labels,
label: 'Weight curve',
backgroundColor: '#fae',
borderColor: '#fae',
fill: false,
data: dataSet,
pointRadius: 0
}
]
})
dataSet = (new Array(maxSeconds).fill(0)).map((e,i) => ({y: Math.round(Math.pow(i / 300 + 1, -2)*1000)/1000, x: i}))
labels = (new Array(maxSeconds).fill(0)).map((e,i) => i+1)
options = () => ({
responsive: false,
title:{
display:true,
text:'Distance-weighted scores'
},
scales: {
xAxes: [{
display: true,
ticks: {
max: maxSeconds,
min: 0,
// autoSkip: true,
maxTicksLimit: 18
},
scaleLabel: {
display: true,
labelString: 'Seconds'
}
}],
yAxes: [{
display: true,
ticks: {
max: 1,
min: 0
},
scaleLabel: {
display: true,
labelString: 'Score'
}
}]
}
})
import {slider} from "@jashkenas/inputs";
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.
