Skip to content

Commit 5c4d182

Browse files
author
minjk-bl
committed
Add Plotly app on Visualization category
1 parent b77dafd commit 5c4d182

File tree

4 files changed

+443
-31
lines changed

4 files changed

+443
-31
lines changed

‎data/libraries.json

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3105,6 +3105,20 @@
31053105
"icon": "apps/apps_visualize.svg"
31063106
}
31073107
},
3108+
{
3109+
"id" : "visualize_plotly",
3110+
"type" : "function",
3111+
"level": 1,
3112+
"name" : "Plotly",
3113+
"tag" : "PLOTLY,CHART,VISUALIZATION,VISUALIZE",
3114+
"path" : "visualpython - visualization - plotly",
3115+
"desc" : "Plotly chart creation",
3116+
"file" : "m_visualize/Plotly",
3117+
"apps" : {
3118+
"color": 5,
3119+
"icon": "apps/apps_visualize.svg"
3120+
}
3121+
},
31083122
{
31093123
"id" : "visualize_wordcloud",
31103124
"type" : "function",

‎data/m_visualize/plotlyLibrary.js

Lines changed: 193 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,9 @@ define([
2020
* ]
2121
*/
2222
var PLOTLY_LIBRARIES = {
23+
//========================================================================
24+
// Basics
25+
//========================================================================
2326
'scatter': {
2427
name: 'Scatter Plot',
2528
code: '${allocateTo} = px.scatter(${data}${x}${y}${etc})',
@@ -81,12 +84,200 @@ define([
8184
description: 'Draw a timeline plot.',
8285
options: [
8386
{ name: 'data', component: ['var_select'], var_type: ['DataFrame', 'Series', 'list'] },
84-
{ name: 'x_start', component: ['col_select'], usePair: true },
85-
{ name: 'x_end', component: ['col_select'], usePair: true },
87+
{ name: 'x_start', label: 'X start', component: ['col_select'], usePair: true },
88+
{ name: 'x_end', label: 'X end', component: ['col_select'], usePair: true },
8689
{ name: 'y', component: ['col_select'], usePair: true },
8790
{ name: 'allocateTo', label: 'Allocate To', component: ['input'], usePair: true }
8891
]
8992
},
93+
//========================================================================
94+
// Part-of-Whole
95+
//========================================================================
96+
'pie': {
97+
name: 'Pie Plot',
98+
code: '${allocateTo} = px.pie(${data}${values}${names}${etc})',
99+
description: 'Draw a pie plot.',
100+
options: [
101+
{ name: 'data', component: ['var_select'], var_type: ['DataFrame', 'Series', 'list'] },
102+
{ name: 'values', label: 'Values', component: ['col_select'], usePair: true },
103+
{ name: 'names', label: 'Names', component: ['col_select'], usePair: true },
104+
{ name: 'allocateTo', label: 'Allocate To', component: ['input'], usePair: true }
105+
]
106+
},
107+
'sunburst': {
108+
name: 'Sunburst',
109+
code: '${allocateTo} = px.sunburst(${data}${values}${names}${parents}${path}${etc})',
110+
description: 'Draw a sunburst plot.',
111+
options: [
112+
{ name: 'data', component: ['var_select'], var_type: ['DataFrame', 'Series', 'list'] },
113+
{ name: 'values', label: 'Values', component: ['col_select'], usePair: true },
114+
{ name: 'names', label: 'Names', component: ['col_select'], usePair: true },
115+
{ name: 'parents', label: 'Parents', component: ['col_select'], usePair: true },
116+
{ name: 'path', label: 'Path', component: ['data_select'], var_type: ['ndarray', 'list'], usePair: true },
117+
{ name: 'allocateTo', label: 'Allocate To', component: ['input'], usePair: true }
118+
]
119+
},
120+
'treemap': {
121+
name: 'Treemap',
122+
code: '${allocateTo} = px.treemap(${data}${values}${names}${parents}${path}${etc})',
123+
description: 'Draw a treemap plot.',
124+
options: [
125+
{ name: 'data', component: ['var_select'], var_type: ['DataFrame', 'Series', 'list'] },
126+
{ name: 'values', label: 'Values', component: ['col_select'], usePair: true },
127+
{ name: 'names', label: 'Names', component: ['col_select'], usePair: true },
128+
{ name: 'parents', label: 'Parents', component: ['col_select'], usePair: true },
129+
{ name: 'path', label: 'Path', component: ['data_select'], var_type: ['ndarray', 'list'], usePair: true },
130+
{ name: 'allocateTo', label: 'Allocate To', component: ['input'], usePair: true }
131+
]
132+
},
133+
'icicle': {
134+
name: 'Icicle',
135+
code: '${allocateTo} = px.icicle(${data}${values}${names}${parents}${path}${etc})',
136+
description: 'Draw a icicle plot.',
137+
options: [
138+
{ name: 'data', component: ['var_select'], var_type: ['DataFrame', 'Series', 'list'] },
139+
{ name: 'values', label: 'Values', component: ['col_select'], usePair: true },
140+
{ name: 'names', label: 'Names', component: ['col_select'], usePair: true },
141+
{ name: 'parents', label: 'Parents', component: ['col_select'], usePair: true },
142+
{ name: 'path', label: 'Path', component: ['data_select'], var_type: ['ndarray', 'list'], usePair: true },
143+
{ name: 'allocateTo', label: 'Allocate To', component: ['input'], usePair: true }
144+
]
145+
},
146+
'funnel_area': {
147+
name: 'Funnel area',
148+
code: '${allocateTo} = px.funnel_area(${data}${values}${names}${etc})',
149+
description: 'Draw a funnel area.',
150+
options: [
151+
{ name: 'data', component: ['var_select'], var_type: ['DataFrame', 'Series', 'list'] },
152+
{ name: 'values', label: 'Values', component: ['col_select'], usePair: true },
153+
{ name: 'names', label: 'Names', component: ['col_select'], usePair: true },
154+
{ name: 'allocateTo', label: 'Allocate To', component: ['input'], usePair: true }
155+
]
156+
},
157+
//========================================================================
158+
// 1D Distributions
159+
//========================================================================
160+
'histogram': {
161+
name: 'Histogram',
162+
code: '${allocateTo} = px.histogram(${data}${x}${y}${etc})',
163+
description: 'Draw a histogram plot.',
164+
options: [
165+
{ name: 'data', component: ['var_select'], var_type: ['DataFrame', 'Series', 'list'] },
166+
{ name: 'x', component: ['col_select'], usePair: true },
167+
{ name: 'y', component: ['col_select'], usePair: true },
168+
{ name: 'allocateTo', label: 'Allocate To', component: ['input'], usePair: true }
169+
]
170+
},
171+
'box': {
172+
name: 'Box plot',
173+
code: '${allocateTo} = px.box(${data}${x}${y}${etc})',
174+
description: 'Draw a box plot.',
175+
options: [
176+
{ name: 'data', component: ['var_select'], var_type: ['DataFrame', 'Series', 'list'] },
177+
{ name: 'x', component: ['col_select'], usePair: true },
178+
{ name: 'y', component: ['col_select'], usePair: true },
179+
{ name: 'allocateTo', label: 'Allocate To', component: ['input'], usePair: true }
180+
]
181+
},
182+
'violin': {
183+
name: 'Violin plot',
184+
code: '${allocateTo} = px.violin(${data}${x}${y}${etc})',
185+
description: 'Draw a violin plot.',
186+
options: [
187+
{ name: 'data', component: ['var_select'], var_type: ['DataFrame', 'Series', 'list'] },
188+
{ name: 'x', component: ['col_select'], usePair: true },
189+
{ name: 'y', component: ['col_select'], usePair: true },
190+
{ name: 'allocateTo', label: 'Allocate To', component: ['input'], usePair: true }
191+
]
192+
},
193+
'strip': {
194+
name: 'Strip plot',
195+
code: '${allocateTo} = px.strip(${data}${x}${y}${etc})',
196+
description: 'Draw a strip plot.',
197+
options: [
198+
{ name: 'data', component: ['var_select'], var_type: ['DataFrame', 'Series', 'list'] },
199+
{ name: 'x', component: ['col_select'], usePair: true },
200+
{ name: 'y', component: ['col_select'], usePair: true },
201+
{ name: 'allocateTo', label: 'Allocate To', component: ['input'], usePair: true }
202+
]
203+
},
204+
'ecdf': {
205+
name: 'Ecdf plot',
206+
code: '${allocateTo} = px.ecdf(${data}${x}${y}${etc})',
207+
description: 'Draw a ecdf plot.',
208+
options: [
209+
{ name: 'data', component: ['var_select'], var_type: ['DataFrame', 'Series', 'list'] },
210+
{ name: 'x', component: ['col_select'], usePair: true },
211+
{ name: 'y', component: ['col_select'], usePair: true },
212+
{ name: 'allocateTo', label: 'Allocate To', component: ['input'], usePair: true }
213+
]
214+
},
215+
//========================================================================
216+
// 2D Distributions
217+
//========================================================================
218+
'density_heatmap': {
219+
name: 'Density heatmap',
220+
code: '${allocateTo} = px.density_heatmap(${data}${x}${y}${z}${etc})',
221+
description: 'Draw a density heatmap plot.',
222+
options: [
223+
{ name: 'data', component: ['var_select'], var_type: ['DataFrame', 'Series', 'list'] },
224+
{ name: 'x', component: ['col_select'], usePair: true },
225+
{ name: 'y', component: ['col_select'], usePair: true },
226+
{ name: 'z', component: ['col_select'], usePair: true },
227+
{ name: 'allocateTo', label: 'Allocate To', component: ['input'], usePair: true }
228+
]
229+
},
230+
'density_contour': {
231+
name: 'Density contour',
232+
code: '${allocateTo} = px.density_contour(${data}${x}${y}${z}${etc})',
233+
description: 'Draw a density contour plot.',
234+
options: [
235+
{ name: 'data', component: ['var_select'], var_type: ['DataFrame', 'Series', 'list'] },
236+
{ name: 'x', component: ['col_select'], usePair: true },
237+
{ name: 'y', component: ['col_select'], usePair: true },
238+
{ name: 'z', component: ['col_select'], usePair: true },
239+
{ name: 'allocateTo', label: 'Allocate To', component: ['input'], usePair: true }
240+
]
241+
},
242+
//========================================================================
243+
// Matrix or Image Input
244+
//========================================================================
245+
'imshow': {
246+
name: 'Imshow',
247+
code: '${allocateTo} = px.imshow(${data}${x}${y}${origin}${etc})', // zmin, zmax, origin
248+
description: 'Display an image, i.e. data on a 2D regular raster.',
249+
options: [
250+
{ name: 'data', component: ['var_select'], var_type: ['DataFrame', 'Series', 'list'] },
251+
{ name: 'x', component: ['col_select'], usePair: true },
252+
{ name: 'y', component: ['col_select'], usePair: true },
253+
{ name: 'origin', label: 'Origin', component: ['option_select'], options: ['upper', 'lower'], default: 'upper', usePair: true },
254+
{ name: 'allocateTo', label: 'Allocate To', component: ['input'], usePair: true }
255+
]
256+
},
257+
//========================================================================
258+
// 3-Dimensional
259+
//========================================================================
260+
261+
//========================================================================
262+
// Mutidimensional
263+
//========================================================================
264+
265+
//========================================================================
266+
// Tile Maps
267+
//========================================================================
268+
269+
//========================================================================
270+
// Outline Maps
271+
//========================================================================
272+
273+
//========================================================================
274+
// Polar Charts
275+
//========================================================================
276+
277+
//========================================================================
278+
// Ternary Charts
279+
//========================================================================
280+
90281
}
91282

92283
return PLOTLY_LIBRARIES;

‎html/m_visualize/plotly.html

Lines changed: 53 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,9 @@
77
<div class="vp-pt-option-box">
88
<div class="vp-tab-bar">
99
<div class="vp-tab-item vp-focus" data-type="data">Data</div>
10-
<div class="vp-tab-item" data-type="style">Style</div>
11-
<div class="vp-tab-item" data-type="setting">Setting</div>
10+
<div class="vp-tab-item" data-type="info">Info</div>
11+
<!-- <div class="vp-tab-item" data-type="style">Style</div> -->
12+
<div class="vp-tab-item" data-type="code">Code</div>
1213
</div>
1314
<div class="vp-tab-page-box vp-grid-border-box vp-scrollbar">
1415
<div class="vp-tab-page vp-grid-box" data-type="data">
@@ -23,32 +24,70 @@
2324
<label><input type="checkbox" id="setXY" class="vp-state"><span>Set X and Y individually</span></label>
2425
</div>
2526
<div class="vp-grid-col-p50">
26-
<div class="vp-grid-box">
27+
<div class="vp-grid-box pt-option">
2728
<label for="x" class="vp-bold">X-axis Value</label>
2829
<select id="x" class="vp-select vp-state">
2930

3031
</select>
3132
</div>
32-
<div class="vp-grid-box">
33-
<label for="y" class="vp-bold">Y-axis Value</label>
33+
<div class="vp-grid-box pt-option">
34+
<label class="vp-bold">X-start Value</label>
35+
<select id="x_start" class="vp-select vp-state">
36+
37+
</select>
38+
</div>
39+
<div class="vp-grid-box pt-option">
40+
<label class="vp-bold">X-end Value</label>
41+
<select id="x_end" class="vp-select vp-state">
42+
43+
</select>
44+
</div>
45+
<div class="vp-grid-box pt-option">
46+
<label class="vp-bold">Y-axis Value</label>
3447
<select id="y" class="vp-select vp-state">
3548

49+
</select>
50+
</div>
51+
<div class="vp-grid-box pt-option">
52+
<label class="vp-bold">Z-axis Value</label>
53+
<select id="z" class="vp-select vp-state">
54+
55+
</select>
56+
</div>
57+
<div class="vp-grid-box pt-option">
58+
<label class="vp-bold">Values</label>
59+
<select id="values" class="vp-select vp-state">
60+
61+
</select>
62+
</div>
63+
<div class="vp-grid-box pt-option">
64+
<label class="vp-bold">Names</label>
65+
<select id="names" class="vp-select vp-state">
66+
67+
</select>
68+
</div>
69+
<div class="vp-grid-box pt-option">
70+
<label class="vp-bold">Parents</label>
71+
<select id="parents" class="vp-select vp-state">
72+
3673
</select>
3774
</div>
3875
</div>
39-
40-
41-
4276
<label for="userOption" class="vp-bold">User Option</label>
4377
<input type="text" id="userOption" class="vp-input vp-state wp100" placeholder="key=value, ..."/>
78+
</div>
79+
<div class="vp-tab-page vp-grid-box" data-type="info" style="display: none;">
80+
<label for="title" class="vp-bold">Title</label>
81+
<input type="text" id="title" class="vp-input vp-state wp100" placeholder="Title for the chart" />
82+
83+
4484
</div>
4585
<div class="vp-tab-page vp-grid-box" data-type="style" style="display: none;">
4686

4787

4888
</div>
49-
<div class="vp-tab-page vp-grid-box" data-type="setting" style="display: none;">
50-
51-
89+
<div class="vp-tab-page vp-grid-box" data-type="code" style="display: none;">
90+
<textarea id="userCode" class="vp-state"></textarea>
5291
</div>
5392
</div>
5493
</div>
@@ -57,6 +96,9 @@
5796
<div class="vp-pt-right-box">
5897
<div class="vp-bold">
5998
<span class="vp-pt-preview-title">Preview</span>
99+
<span id="previewRefresh" class="vp-cursor">
100+
<img src="/nbextensions/visualpython/img/refresh.svg"/>
101+
</span>
60102
</div>
61103
<div class="vp-pt-preview-box vp-grid-border-box">
62104
<div id="vp_ptPreview" class="vp-pt-preview-content vp-center"></div>

0 commit comments

Comments
 (0)