Public
Edited
Nov 8, 2022
2 forks
massiv = Array.from({length: 500}, (x, i) => i*2)
viewof i = Scrubber(massiv, {autoplay:false})
`значение равно =${i}`
massiv_date = Array.from({length: 100}, function fun(x, i) {
var new_date = new Date();
new_date.setDate(new_date.getDate() + i);
return new_date;
}
)
viewof date = Scrubber(massiv_date.slice(0,5), {
delay : 400,
alternate: true,
loop: true,
format: x => x.toLocaleString("ru",{month: "long", day: "numeric", year: 'numeric'})
})
massiv_obj = Array.from({length: 100}, function fun(x, i) {
var x = new Date();
x.setDate(x.getDate() + i);
var y = x.toISOString().substring(0,10);
return {'date_b': new Date(y), 'value_b': Number((1+Math.random()*(4-1)).toFixed(3))}
}
)
viewof filter_date = Scrubber(massiv_obj.map(d=>d['date_b']), {
delay : 400,
alternate: true,
loop: true,
format: x => x.toLocaleString("ru",{month: "long", day: "numeric", year: 'numeric'})
})
list_date = massiv_obj.map(d=>d['date_b'])
`Получили диапазон для даты: ${[list_date[0], list_date[list_date.length-1]]}`
Plot.plot({
x: {domain: [list_date[0],list_date[list_date.length-1]] },
y: {domain: [0, 4]},
width: 1200,
height: 300,
grid: true,
marks: [
Plot.line(massiv_obj, { x: 'date_b', y: 'value_b', filter: ((d) => d['date_b'] <= filter_date)}),
Plot.circle(massiv_obj, { x: 'date_b', y: 'value_b', fill:(d)=>f_color(d['value_b']), filter: ((d) => d['date_b'] <= filter_date)}),
Plot.ruleY([1, 2, 3, 4])
],
color: { legend: true },
marginLeft: 40
})
Plot.plot({
width: 1200,
height: 300,
grid: true,
x:{},
marks: [
Plot.barY(massiv_obj, { x: 'date_b', y: 'value_b', fill:(d)=>f_color(d['value_b']), filter: ((d) => d['date_b'] <= filter_date)}),
Plot.ruleY([1, 2, 3, 4])
],
color: { type: "linear",
range: ["green", "red"], legend: true },
marginLeft: 20
})
function f_color(obj) {
if (obj < 2.0) return 1
if (obj < 3.0) return 2
else return 3;
}
USD2021-2022@2.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
viewof date_USD = Scrubber(usd202120222.map(d=> d['dataUSD']), {
delay : 100,
alternate: true,
loop: true,
format: x => x.toLocaleString("ru",{month: "long", day: "numeric", year: 'numeric'})
})
Plot.plot({
x: {ticks: 15, tickFormat: "%b %d" },
y: {},
width: 1200,
height: 400,
grid: true,
marks: [
Plot.line(usd202120222, { x: 'dataUSD', y: 'kursUSD', curve: "catmull-rom", stroke: "#aa79a7", marker: "circle", filter: ((d) => d['dataUSD'] <= date_USD)}),
// Plot.circle(usd202120222, { x: 'dataUSD', y: 'kursUSD', fill:(d)=>f_colorUSD(d['kursUSD']), filter: ((d) => d['dataUSD'] <= date_USD)}),
Plot.ruleY([60, 70])
],
color: { legend: true },
marginLeft: 40
})
function f_colorUSD(obj) {
if (obj < 50) return 0
if (obj < 60) return 1
if (obj < 70) return 2
else return 3;
}
import {Scrubber} from "@mbostock/scrubber"
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.
