bars(getData( makeComposedStdDevScale([
[10, 5.0, 0.9],
[30, 5.5, 0.7],
[50, 6.0, 0.5],
[70, 6.5, 0.3],
[90, 7.0, 0.1],
[],
[250, 20, 2],
[250, 70, 2],
[],
[110, 0.3, 0.04],
]), 300), 200)
function identity(value) { return value; }
getData(identity, 5)
getData( i => i*2, 5)
getData( (i,a,ref) => Math.round(i > a/2 ? (1-(i/a))*100 : i/a*100), 12 )
line( [1,2,3,4,9,8,9,8,9,8,2,3,2,3,2,3], 100)
bars( [1,2,3,4,9,8,9,8,9,8,2,3,2,3,2,3], 100)
bars(getData( (i,a,ref) => Math.round(i > a/2 ? (1-(i/a))*100 : i/a*100), 12 ), 100)
bars(getData( (i,a,ref) => Math.round(i > a/2 ? (1-(i/a))*100 : i/a*100), 120 ), 100)
bars( getData( (i) => Math.log(i), 100), 100 )
bars( getData( (i) => Math.exp(i/10), 100), 100 )
bars( getData( (i) => Math.sin(i * 2/Math.PI / 20), 100), 100 )
maxStdDev = 100
viewof med = html`<input type="range" min="0" max="${maxStdDev}" step="1" style="width:100%" />`
viewof dp = html`<input type="range" min="0" max="${maxStdDev}" step="0.001" style="width:100%" />`
_mkStdDev = (med, dp) => x => (
(1/(dp * Math.sqrt(2 * Math.PI)))
* Math.pow(Math.E, -0.5 * Math.pow((x - med) / dp, 2))
);
mkStdDev = (avg, sd) => (x) => (
(1 / (sd * Math.sqrt(2 * Math.PI)))
* (Math.E ** (-0.5 * ((x - avg) / sd) ** 2))
);
bars(getData(
mkStdDev(med, dp),
maxStdDev), 100)
tbNoise = tendencyFn => val => tendencyFn(val) * rnd(-1,1)
bars( getData( tbNoise( (i) => Math.sin(i * 2/Math.PI / 200) ), 1000 ), 80)
rnd = (min=0,max=1) => Math.random() * (max - min) + min;
round = (houses=2) => val => +(val.toFixed(houses))
Array(5).fill().map(() => round(2)(rnd(-1,1)))
bars( getData(() => round(2)(rnd(-1,1)), 100), 50)
aaAAaa_A_aA = R.compose(
x => Math.abs(x),
round(2),
// x => R.add(x, rnd(-2,2)),
x => R.add(x, tbNoise( (i) => Math.exp(i/12) )(x) ),
// R.tap(x=>console.log(x)),
R.converge((a,b,c) => a+b+c, [
R.compose(R.multiply(800), mkStdDev(22.0, 20.0)),
R.compose(R.multiply(2000), mkStdDev(130.0, 25.0)),
R.compose(R.multiply(200), mkStdDev(70.0, 4))
]),
)
bars(
getData(aaAAaa_A_aA, 300),
200)
function doubleRange(props1={min:-2,max:3,step:0.001},props2={min:0,max:2,step:0.01}) {
const step1 = html`<input type="range" min="${props1.min}" max="${props1.max}" step="${props1.step}" style="width:50%; display:inline-block;" />`
const step2 = html`<input type="range" min="${props2.min}" max="${props2.max}" step="${props2.step}" style="width:50%; display:inline-block;" />`
const div = html`<div style="white-space:nowrap; width:100%;"></div>`
div.appendChild(step1)
div.appendChild(step2)
div.value = [step1.valueAsNumber, step2.valueAsNumber]
step1.oninput = () => {
div.value = [step1.valueAsNumber, div.value[1]]
div.dispatchEvent(new CustomEvent("input"))
}
step2.oninput = () => {
div.value = [div.value[0], step2.valueAsNumber]
div.dispatchEvent(new CustomEvent("input"))
}
return div
}
line(getData(
(i, amount, {data}) => {
const n = Math.pow(
Math.sin(scale([0,amount],[0,90])(i) * (Math.PI/180)),
0.35
)
const noise = rnd( data[i-1], n*2)
return round(2)(noise)
}
, 25), 250, 250)
bars(getData( (x) => mkStdDev(66, 10)(x) + mkStdDev(33, 10)(x) + mkStdDev(33, 10)(x) ), 200)
bars(getData( (x) => mkStdDev(0, 20)(x) * 0.5 + mkStdDev(100, 20)(x) * 1 ), 200)
/**
* pipe = [ [a = 0.5, b = 0.2, c = 1], ... ]
* a = media (pos x aonde fica o pico) (0 a 1)
* b = desvio padrao (quanto gordo o pico é) (0 é fino, 1 é quase linear)
* c = peso (desvioPadrao(a,b) * c)
* retorna uma função somatória de todos os itens em pipe
*/
function makeComposedStdDevScale(pipe) {
const fnPipe = (pipe || []).map(curr => {
if (!curr || curr.length == 0) return;
const a = (null === curr[0] || isNaN(curr[0])) ? 0.5 : +curr[0];
const b = (null === curr[1] || isNaN(curr[1])) ? 0.2 : +curr[1];
const c = (null === curr[2] || isNaN(curr[2])) ? 1.0 : +curr[2];
return (x) => mkStdDev(a,b)(x) * c;
}).filter((x) => x);
const r = (x) => fnPipe.reduce((all, curr) => {
return all + curr(x)
}, 0);
return r;
}
bars(getData( makeComposedStdDevScale([ [0, 20, 0.5], [100, 20] ]) ), 100)
bars(getData( makeComposedStdDevScale([ [10, 5.0, 0.9], [30, 5.5, 0.7], [50, 6.0, 0.5], [70, 6.5, 0.3], [90, 7.0, 0.1] ]) ), 100)
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.
