Skip to content

Commit 7e47733

Browse files
committed
Add doc pages for the slider component
1 parent 2b20ee3 commit 7e47733

File tree

4 files changed

+216
-0
lines changed

4 files changed

+216
-0
lines changed
Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
---
2+
name: Automatically bind components to the appearance of the plot
3+
plot_url: https://codepen.io/plotly/embed/ZBzZZO/?height=558&theme-id=15263&default-tab=result
4+
language: plotly_js
5+
suite: slider-components-events
6+
sitemap: false
7+
order: 2
8+
arrangement: horizontal
9+
---
10+
Plotly.plot('graph', [{
11+
x: [1, 2, 3],
12+
y: [2, 1, 3]
13+
}], {
14+
sliders: [{
15+
pad: {t: 30},
16+
len: 0.5,
17+
x: 0.5,
18+
currentvalue: {
19+
xanchor: 'right',
20+
prefix: 'color: ',
21+
font: {
22+
color: '#888',
23+
size: 20
24+
}
25+
},
26+
// If all of a component's commands affect a single attribute, the component
27+
// will be bound to the plot and will automatically update to reflect changes.
28+
steps: [{
29+
label: 'red',
30+
method: 'restyle',
31+
args: ['line.color', 'red']
32+
}, {
33+
label: 'green',
34+
method: 'restyle',
35+
args: ['line.color', 'green']
36+
}, {
37+
label: 'blue',
38+
method: 'restyle',
39+
args: ['line.color', 'blue']
40+
}]
41+
}],
42+
updatemenus: [{
43+
pad: {t: 60, r: 30},
44+
type: 'buttons',
45+
xanchor: 'left',
46+
yanchor: 'top',
47+
x: 00,
48+
y: 0,
49+
direction: 'right',
50+
buttons: [{
51+
label: 'red',
52+
method: 'restyle',
53+
args: ['line.color', 'red']
54+
}, {
55+
label: 'green',
56+
method: 'restyle',
57+
args: ['line.color', 'green']
58+
}, {
59+
label: 'blue',
60+
method: 'restyle',
61+
args: ['line.color', 'blue']
62+
}]
63+
}]
64+
});
Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
---
2+
name: Create a play button that controls a slider
3+
plot_url: https://codepen.io/plotly/embed/NbKmmQ/?height=558&theme-id=15263&default-tab=result
4+
language: plotly_js
5+
suite: slider-components-events
6+
sitemap: false
7+
order: 3
8+
arrangement: horizontal
9+
---
10+
Plotly.plot('graph', {
11+
data: [{
12+
x: [1, 2, 3],
13+
y: [2, 1, 3],
14+
line: {
15+
color: 'red',
16+
simplify: false,
17+
}
18+
}],
19+
layout: {
20+
sliders: [{
21+
pad: {t: 30},
22+
x: 0.05,
23+
len: 0.95,
24+
currentvalue: {
25+
xanchor: 'right',
26+
prefix: 'color: ',
27+
font: {
28+
color: '#888',
29+
size: 20
30+
}
31+
},
32+
transition: {duration: 500},
33+
// By default, animate commands are bound to the most recently animated frame:
34+
steps: [{
35+
label: 'red',
36+
method: 'animate',
37+
args: [['red'], {
38+
mode: 'immediate',
39+
frame: {redraw: false, duration: 500},
40+
transition: {duration: 500}
41+
}]
42+
}, {
43+
label: 'green',
44+
method: 'animate',
45+
args: [['green'], {
46+
mode: 'immediate',
47+
frame: {redraw: false, duration: 500},
48+
transition: {duration: 500}
49+
}]
50+
}, {
51+
label: 'blue',
52+
method: 'animate',
53+
args: [['blue'], {
54+
mode: 'immediate',
55+
frame: {redraw: false, duration: 500},
56+
transition: {duration: 500}
57+
}]
58+
}]
59+
}],
60+
updatemenus: [{
61+
type: 'buttons',
62+
showactive: false,
63+
x: 0.05,
64+
y: 0,
65+
xanchor: 'right',
66+
yanchor: 'top',
67+
pad: {t: 60, r: 20},
68+
buttons: [{
69+
label: 'Play',
70+
method: 'animate',
71+
args: [null, {
72+
fromcurrent: true,
73+
frame: {redraw: false, duration: 1000},
74+
transition: {duration: 500}
75+
}]
76+
}]
77+
}]
78+
},
79+
// The slider itself does not contain any notion of timing, so animating a slider
80+
// must be accomplished through a sequence of frames. Here we'll change the color
81+
// and the data of a single trace:
82+
frames: [{
83+
name: 'red',
84+
data: [{
85+
y: [2, 1, 3],
86+
'line.color': 'red'
87+
}]
88+
}, {
89+
name: 'green',
90+
data: [{
91+
y: [3, 2, 1],
92+
'line.color': 'green'}]
93+
}, {
94+
name: 'blue',
95+
data: [{
96+
y: [1, 3, 2],
97+
'line.color': 'blue'}]
98+
}]
99+
});
Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
name: Create a slider to restyle the plot
3+
plot_url: https://codepen.io/plotly/embed/pNzBYJ/?height=558&theme-id=15263&default-tab=result
4+
language: plotly_js
5+
suite: slider-components-events
6+
sitemap: false
7+
order: 2
8+
arrangement: horizontal
9+
---
10+
Plotly.plot('graph', [{
11+
x: [1, 2, 3],
12+
y: [2, 1, 3]
13+
}], {
14+
sliders: [{
15+
pad: {t: 30},
16+
currentvalue: {
17+
xanchor: 'right',
18+
prefix: 'color: ',
19+
font: {
20+
color: '#888',
21+
size: 20
22+
}
23+
},
24+
steps: [{
25+
label: 'red',
26+
method: 'restyle',
27+
args: ['line.color', 'red']
28+
}, {
29+
label: 'green',
30+
method: 'restyle',
31+
args: ['line.color', 'green']
32+
}, {
33+
label: 'blue',
34+
method: 'restyle',
35+
args: ['line.color', 'blue']
36+
}]
37+
}]
38+
});
Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
title: Sliders in D3.js-based JavaScript Charts | Examples | Plotly
3+
name: Slider Events
4+
permalink: javascript/sliders/
5+
description: Use Plotly to create custom sliders in D3.js-based JavaScript charts.
6+
layout: base
7+
thumbnail: thumbnail/slider-component.jpg
8+
language: plotly_js
9+
page_type: example_index
10+
has_thumbnail: true
11+
display_as: chart_events
12+
order: 1
13+
---
14+
{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","slider-components-events" | sort: "order" %}
15+
{% include auto_examples.html examples=examples %}

0 commit comments

Comments
 (0)