Skip to content

Commit cc00176

Browse files
michaelbabynmichaelbabyn
authored
Merge pull request #1112 from plotly/colorway-example
Colorway example
2 parents 6bcf58e + 16c2a45 commit cc00176

File tree

6 files changed

+545
-0
lines changed

6 files changed

+545
-0
lines changed

‎_posts/plotly_js/style/colorway/2018-10-03-colorway.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
---
2+
name: Set Default Trace Colors with colorway
3+
plot_url: https://codepen.io/plotly/embed/jeqNBq/?height=500&theme-id=15263&default-tab=result
4+
language: plotly_js
5+
suite: colorway
6+
order: 1
7+
sitemap: false
8+
arrangement: horizontal
9+
---
10+
11+
var linspace = require('linspace');
12+
const parabolaGen = (a, b) =>
13+
x => x*x*a + b;
14+
15+
var as = linspace(1, 3, 7);
16+
var bs = linspace(2, 14, 7);
17+
var x = linspace(-1, 3, 50);
18+
var data = [];
19+
20+
for (i=0; i< as.length; i++ ){
21+
data.push({
22+
type: "scatter",
23+
mode: "lines",
24+
x: x,
25+
y: x.map(parabolaGen(as[i],bs[i]))
26+
})
27+
}
28+
29+
var layout = {
30+
colorway : ['#f3cec9', '#e7a4b6', '#cd7eaf', '#a262a9', '#6f4d96', '#3d3b72', '#182844']
31+
};
32+
33+
Plotly.newPlot('myDiv', data, layout);

‎_posts/plotly_js/style/colorway/2018-10-03-colorway_plotlyjs_index.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
title: Colorway in JavaScript.
3+
name: Colorway
4+
permalink: javascript/colorway/
5+
description: How to use colorway to set default trace colors in Javascript with Plotly.
6+
layout: base
7+
thumbnail: thumbnail/colorway.jpg
8+
language: plotly_js
9+
page_type: example_index
10+
has_thumbnail: true
11+
display_as: style_opt
12+
order: 3
13+
---
14+
15+
{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","colorway" | sort: "order" %}
16+
{% include auto_examples.html examples=examples %}

‎_posts/python/style/colorway/2015-06-30-colorway.html

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
---
2+
permalink: python/colorway/
3+
description: How to set default trace colors with colorway.
4+
name: Colorway
5+
has_thumbnail: true
6+
thumbnail: thumbnail/colorway.jpg
7+
layout: user-guide
8+
language: python
9+
title: Colorway in Python | Plotly
10+
display_as: style_opt
11+
has_thumbnail: true
12+
page_type: example_index
13+
order: 7.9
14+
ipynb: ~notebook_demo/256
15+
---
16+
{% raw %}
17+
<div class="cell border-box-sizing text_cell rendered"><div class="prompt input_prompt">
18+
</div>
19+
<div class="inner_cell">
20+
<div class="text_cell_render border-box-sizing rendered_html">
21+
<h4 id="New-to-Plotly?">New to Plotly?<a class="anchor-link" href="#New-to-Plotly?">&#182;</a></h4><p>Plotly's Python library is free and open source! <a href="https://plot.ly/python/getting-started/">Get started</a> by downloading the client and <a href="https://plot.ly/python/getting-started/">reading the primer</a>.
22+
<br>You can set up Plotly to work in <a href="https://plot.ly/python/getting-started/#initialization-for-online-plotting">online</a> or <a href="https://plot.ly/python/getting-started/#initialization-for-offline-plotting">offline</a> mode, or in <a href="https://plot.ly/python/getting-started/#start-plotting-online">jupyter notebooks</a>.
23+
<br>We also have a quick-reference <a href="https://images.plot.ly/plotly-documentation/images/python_cheat_sheet.pdf">cheatsheet</a> (new!) to help you get started!</p>
24+
25+
</div>
26+
</div>
27+
</div>
28+
<div class="cell border-box-sizing text_cell rendered"><div class="prompt input_prompt">
29+
</div>
30+
<div class="inner_cell">
31+
<div class="text_cell_render border-box-sizing rendered_html">
32+
<h4 id="Version-Check">Version Check<a class="anchor-link" href="#Version-Check">&#182;</a></h4><p>Plotly's python package is updated frequently. Run <code>pip install plotly --upgrade</code> to use the latest version.</p>
33+
34+
</div>
35+
</div>
36+
</div>
37+
<div class="cell border-box-sizing code_cell rendered">
38+
<div class="input">
39+
<div class="prompt input_prompt">In&nbsp;[1]:</div>
40+
<div class="inner_cell">
41+
<div class="input_area">
42+
<div class=" highlight hl-ipython2"><pre><span></span><span class="kn">import</span> <span class="nn">plotly</span>
43+
<span class="n">plotly</span><span class="o">.</span><span class="n">__version__</span>
44+
</pre></div>
45+
46+
</div>
47+
</div>
48+
</div>
49+
50+
<div class="output_wrapper">
51+
<div class="output">
52+
53+
54+
<div class="output_area">
55+
56+
<div class="prompt output_prompt">Out[1]:</div>
57+
58+
59+
60+
61+
<div class="output_text output_subarea output_execute_result">
62+
<pre>&#39;3.1.1&#39;</pre>
63+
</div>
64+
65+
</div>
66+
67+
</div>
68+
</div>
69+
70+
</div>
71+
<div class="cell border-box-sizing text_cell rendered"><div class="prompt input_prompt">
72+
</div>
73+
<div class="inner_cell">
74+
<div class="text_cell_render border-box-sizing rendered_html">
75+
<h4 id="Set-Default-Trace-Colors-with-colorway">Set Default Trace Colors with <code>colorway</code><a class="anchor-link" href="#Set-Default-Trace-Colors-with-colorway">&#182;</a></h4>
76+
</div>
77+
</div>
78+
</div>
79+
<div class="cell border-box-sizing code_cell rendered">
80+
<div class="input">
81+
<div class="prompt input_prompt">In&nbsp;[2]:</div>
82+
<div class="inner_cell">
83+
<div class="input_area">
84+
<div class=" highlight hl-ipython2"><pre><span></span><span class="kn">import</span> <span class="nn">plotly.plotly</span> <span class="kn">as</span> <span class="nn">py</span>
85+
<span class="kn">import</span> <span class="nn">plotly.graph_objs</span> <span class="kn">as</span> <span class="nn">go</span>
86+
87+
<span class="kn">import</span> <span class="nn">numpy</span> <span class="kn">as</span> <span class="nn">np</span>
88+
89+
90+
<span class="k">def</span> <span class="nf">parabola_gen</span><span class="p">(</span><span class="n">a</span><span class="p">,</span> <span class="n">b</span><span class="p">):</span>
91+
<span class="k">return</span> <span class="k">lambda</span> <span class="n">x</span><span class="p">:</span> <span class="n">a</span> <span class="o">*</span> <span class="n">x</span> <span class="o">**</span> <span class="mi">2</span> <span class="o">+</span> <span class="n">b</span>
92+
93+
94+
<span class="n">parabolas</span> <span class="o">=</span> <span class="p">[</span><span class="n">parabola_gen</span><span class="p">(</span><span class="n">a</span><span class="p">,</span> <span class="n">b</span><span class="p">)</span> <span class="k">for</span> <span class="n">a</span><span class="p">,</span> <span class="n">b</span> <span class="ow">in</span> <span class="nb">zip</span><span class="p">(</span><span class="n">np</span><span class="o">.</span><span class="n">linspace</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">7</span><span class="p">),</span> <span class="n">np</span><span class="o">.</span><span class="n">linspace</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span> <span class="mi">14</span><span class="p">,</span> <span class="mi">7</span><span class="p">))]</span>
95+
<span class="n">x</span> <span class="o">=</span> <span class="n">np</span><span class="o">.</span><span class="n">linspace</span><span class="p">(</span><span class="o">-</span><span class="mi">1</span><span class="p">,</span> <span class="mi">3</span><span class="p">)</span>
96+
<span class="n">data</span> <span class="o">=</span> <span class="p">[</span><span class="n">go</span><span class="o">.</span><span class="n">Scatter</span><span class="p">(</span><span class="n">x</span><span class="o">=</span><span class="n">x</span><span class="p">,</span> <span class="n">y</span><span class="o">=</span><span class="n">p</span><span class="p">(</span><span class="n">x</span><span class="p">),</span> <span class="n">mode</span><span class="o">=</span><span class="s1">&#39;lines&#39;</span><span class="p">)</span> <span class="k">for</span> <span class="n">p</span> <span class="ow">in</span> <span class="n">parabolas</span><span class="p">]</span>
97+
98+
<span class="n">colorway</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;#f3cec9&#39;</span><span class="p">,</span> <span class="s1">&#39;#e7a4b6&#39;</span><span class="p">,</span> <span class="s1">&#39;#cd7eaf&#39;</span><span class="p">,</span> <span class="s1">&#39;#a262a9&#39;</span><span class="p">,</span> <span class="s1">&#39;#6f4d96&#39;</span><span class="p">,</span> <span class="s1">&#39;#3d3b72&#39;</span><span class="p">,</span> <span class="s1">&#39;#182844&#39;</span><span class="p">]</span>
99+
<span class="n">layout</span> <span class="o">=</span> <span class="n">go</span><span class="o">.</span><span class="n">Layout</span><span class="p">(</span><span class="n">colorway</span><span class="o">=</span><span class="n">colorway</span><span class="p">)</span>
100+
101+
<span class="n">py</span><span class="o">.</span><span class="n">iplot</span><span class="p">(</span><span class="n">go</span><span class="o">.</span><span class="n">Figure</span><span class="p">(</span><span class="n">data</span><span class="o">=</span><span class="n">data</span><span class="p">,</span> <span class="n">layout</span><span class="o">=</span><span class="n">layout</span><span class="p">))</span>
102+
</pre></div>
103+
104+
</div>
105+
</div>
106+
</div>
107+
108+
<div class="output_wrapper">
109+
<div class="output">
110+
111+
112+
<div class="output_area">
113+
114+
<div class="prompt output_prompt">Out[2]:</div>
115+
116+
117+
118+
<div class="output_html rendered_html output_subarea output_execute_result">
119+
<iframe id="igraph" scrolling="no" style="border:none;" seamless="seamless" src="https://plot.ly/~PythonPlotBot/2807.embed" height="525px" width="100%"></iframe>
120+
</div>
121+
122+
</div>
123+
124+
</div>
125+
</div>
126+
127+
</div>
128+
<div class="cell border-box-sizing text_cell rendered"><div class="prompt input_prompt">
129+
</div>
130+
<div class="inner_cell">
131+
<div class="text_cell_render border-box-sizing rendered_html">
132+
<h3 id="Reference">Reference<a class="anchor-link" href="#Reference">&#182;</a></h3>
133+
</div>
134+
</div>
135+
</div>
136+
<div class="cell border-box-sizing text_cell rendered"><div class="prompt input_prompt">
137+
</div>
138+
<div class="inner_cell">
139+
<div class="text_cell_render border-box-sizing rendered_html">
140+
<p>See <a href="https://plot.ly/python/reference/#layout-colorway">https://plot.ly/python/reference/#layout-colorway</a> for more information about the colorway attribute</p>
141+
142+
</div>
143+
</div>
144+
</div>
145+
146+
147+
{% endraw %}

0 commit comments

Comments
 (0)