data = {
var arr = [['Year', 'Sales']];
let s = 0.5;
for (var i = 0; i < 11; i++) {
s = s - 2 + 4 * Math.random();
arr.push([new Date(2017, i, 1).valueOf(), 10000 + s * 10000]);
}
let lastD = new Date(arr[arr.length - 1][0]);
var arr2 = [['Year', 'Sales', 'SalesUpper', 'SalesLower']];
let s3 = 0.5;
let s2 = 0.5;
let d = 0;
for (var i = 0; i < 5; i++) {
let v = 10000 + s * 10000;
arr2.push([
new Date(lastD.getFullYear(), lastD.getMonth() + i, 1).valueOf(),
v,
v + d,
v - d
]);
s = s - 2 + 4 * Math.random();
d += Math.random() * 5000;
}
return [
{
type: 'matrix',
data: arr
},
{
type: 'matrix',
data: arr2,
key: 'forecast'
}
];
}
picasso.chart({
element: document.querySelector('#container'),
data,
settings: {
scales: {
y: {
data: {
fields: [
{ field: 'Sales' },
{ source: 'forecast', field: 'SalesUpper' },
{ source: 'forecast', field: 'SalesLower' }
]
},
invert: true,
expand: 0.2
},
t: {
data: {
extract: [{ field: 'Year' }, { field: 'Year', source: 'forecast' }]
}
}
},
components: [
{
type: 'axis',
dock: 'left',
scale: 'y',
formatter: {
type: 'd3-number',
format: '$,.1r'
}
},
{
type: 'axis',
dock: 'bottom',
scale: 't',
formatter: {
type: 'd3-time',
format: '%Y-%m'
}
},
{
key: 'lines',
type: 'line',
data: {
extract: {
field: 'Year',
props: {
v: { field: 'Sales' }
}
}
},
settings: {
coordinates: {
major: { scale: 't' },
minor: { scale: 'y', ref: 'v' }
},
layers: {
line: {}
}
}
},
{
// area forecast layer
key: 'lines-forecast-area',
type: 'line',
data: {
extract: {
field: 'Year',
source: 'forecast',
props: {
low: { field: 'SalesLower' },
high: { field: 'SalesUpper' }
}
}
},
settings: {
coordinates: {
major: { scale: 't' },
minor0: { scale: 'y', ref: 'low' },
minor: { scale: 'y', ref: 'high' }
},
layers: {
line: {
show: false
},
area: {
fill: 'green',
opacity: 0.2
}
}
}
},
{
// center line forecast
key: 'lines-forecast',
type: 'line',
data: {
extract: {
field: 'Year',
source: 'forecast',
props: {
v: { field: 'Sales' }
}
}
},
settings: {
coordinates: {
major: { scale: 't' },
minor: { scale: 'y', ref: 'v' }
},
layers: {
line: {
stroke: 'green',
strokeDasharray: '2 4'
}
}
}
}
]
}
})
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.
