Published
Edited
Feb 13, 2021
Insert cell
Insert cell
Insert cell
Insert cell
chartistDiv = {
const div = DOM.element('div');
div.style.height = `${width / 2}px`;
return div;
replay;
}
Insert cell
intArray = {
Number.prototype[Symbol.iterator] = function*() {
for (let i = 0; i < this; i++) {
yield i;
}
};
return [...13];
}
Insert cell
chart = new Chartist.Line(
chartistDiv,
{
// labels: intArray.map(String),
series: data
},

{
axisX: {
type: Chartist.FixedScaleAxis,
divisor: 5,
labelInterpolationFnc: function(value) {
return moment(value).format('MMM D');
}
}
}
)
Insert cell
delays = 5
Insert cell
durations = 100
Insert cell
drawChart = {
let seq = 0;

chart.on('created', function() {
seq;
});
chart.on('draw', function(data) {
seq++;

if (data.type === 'line') {
data.element.animate({
opacity: {
begin: seq * delays + 1000,
dur: durations,
from: 0,
to: 1
}
});
} else if (data.type === 'label' && data.axis === 'x') {
data.element.animate({
y: {
begin: seq,
dur: durations,
from: data.y + 100,
to: data.y,
easing: 'easeOutQuart'
}
});
} else if (data.type === 'label' && data.axis === 'y') {
data.element.animate({
x: {
begin: seq * delays,
dur: durations,
from: data.x - 100,
to: data.x,
easing: 'easeOutQuart'
}
});
} else if (data.type === 'point') {
data.element.animate({
x1: {
begin: seq * delays,
dur: durations,
from: data.x - 10,
to: data.x,
easing: 'easeOutQuart'
},
x2: {
begin: seq * delays,
dur: durations,
from: data.x - 10,
to: data.x,
easing: 'easeOutQuart'
},
opacity: {
begin: seq * delays,
dur: durations,
from: 0,
to: 1,
easing: 'easeOutQuart'
}
});
} else if (data.type === 'grid') {
var pos1Animation = {
begin: seq * delays,
dur: durations,
from: data[data.axis.units.pos + '1'] - 30,
to: data[data.axis.units.pos + '1'],
easing: 'easeOutQuart'
};

var pos2Animation = {
begin: seq * delays,
dur: durations,
from: data[data.axis.units.pos + '2'] - 100,
to: data[data.axis.units.pos + '2'],
easing: 'easeOutQuart'
};

var animations = {};
animations[data.axis.units.pos + '1'] = pos1Animation;
animations[data.axis.units.pos + '2'] = pos2Animation;
animations['opacity'] = {
begin: seq * delays,
dur: durations,
from: 0,
to: 1,
easing: 'easeOutQuart'
};

data.element.animate(animations);
}
});
}
Insert cell
Insert cell
dateParser = d3.timeParse("%m/%d/%Y")
Insert cell
data = {
const allData = d3
.csvParse(await FileAttachment("stock_data_d3 (2).csv").text(), d3.autoType)
.map(({ date, variable, value }) => ({
x: dateParser(date),
name: variable,
y: +value
}));

return [
allData.filter(({ name }) => name === 'AMZN'),
allData.filter(({ name }) => name === 'GOOG'),
allData.filter(({ name }) => name === 'FB'),
allData.filter(({ name }) => name === 'BABA'),
allData.filter(({ name }) => name === 'JD')
];
}
Insert cell
Insert cell
Insert cell
Insert cell
Chartist = require('chartist')
Insert cell
d3 = require("d3")
Insert cell
moment = require('moment')
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