Published
Edited
Feb 19, 2018
8 forks
function animPlot(){
// Put your animating code here ...
// see the cheat sheet below
}
{
// data.a is one of the data sets
data.a;
// There is x-coordinate data and y-coordinate data
data.a.x;
data.a.y;
// there are data sets for each letter of the alphabet
// And some labelled with punctauation
data.apost;
data.exclam;
data.quest;
data.space;
// To see what these data sets look like, take a look at the output below, expand it if you like.
return data.a.x;
}
{
// The animate function
plotly.animate(
myPlot, // The graph you will animate ... CHANGE to "graph_loc"
{ // The new data or styling you'll animate to ... you define a trace (see below)
data: [{x: [1, 2, 3],
y: [9, 8, 7],
marker: {size: 1, color: 'black'}
}
]
},
{
transition: {
duration: 3000 // Time of actual animation
},
frame: {
duration: 4000 // Time allowed for animation ... excess will be a pause
}
}
)
/// Animations can be stacked on top of each other!!
plotly.animate()
}
{
// Make a Trace
var myTrace = {
x: x_vals,
y: y_vals,
// Appears in tooltip and legend
name: 'My first trace',
// for standard scatter plots,
// changes whether lines or markers or both are Used
mode: 'lines+markers',
// Styling of the markers or symbols
marker: {
color: 'red',
symbol: 'hexagon-open',
size: 12,
// Styling of the boundary lines around markers
line: {
color: 'blue',
width: 2
}
},
// styling of the line plot
line: {
color: 'black',
shape: 'spline',
width: 4,
dash: '5 2'
}
}
// Make a new plot
plotly.newPlot(myPlot, [myTrace])
}
{
var numbers = [1, 2, 3];
var sum = 0;
numbers.forEach(function(num){
sum = sum + num;
})
return md`Sum of *${numbers}* is **${sum}**`
}
{
return data.a.x
}
{
return data['a'].x
}
{
return data.a.x == data['a'].x
}
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.
