11< html >
22 < head >
3+ < title > Panel Example</ title >
4+ < meta charset ="iso-8859-1 ">
5+ < link rel ="icon " type ="image/x-icon " href ="./favicon.png ">
36 < script type ="text/javascript " src ="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.2.js "> </ script >
47 < script type ="text/javascript " src ="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.2.min.js "> </ script >
58 < script type ="text/javascript " src ="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.2.min.js "> </ script >
6- < script type ="text/javascript " src ="https://cdn.jsdelivr.net/npm/@holoviz/panel@0.13.1/dist/panel.min.js "> </ script >
7-
9+ < script type ="text/javascript " src ="https://cdn.jsdelivr.net/npm/@holoviz/panel@0.14.0/dist/panel.min.js "> </ script >
810 < link rel ="stylesheet " href ="https://pyscript.net/latest/pyscript.css " />
911 < script defer src ="https://pyscript.net/latest/pyscript.js "> </ script >
1012 </ head >
11- < body > < py-script >
12- # was ok with https://pyscript.net/2022.06.1/pyscript.js
13- # you can try last official release: https://pyscript.net/latest/pyscript.js and css
14- # or current unstable master: https://pyscript.net/unstable/pyscript.js and css
15-
16- import sys
17- print(sys.version)
18- print('Hello, World!')
19- for i in range(5):
20- print(i)
21- </ py-script >
22- </ py-script >
23- < py-env >
24- - bokeh
25- - numpy
26- - panel==0.13.1a2
27- </ py-env >
13+ < body >
14+ < py-config >
15+ packages = [
16+ "bokeh",
17+ "numpy",
18+ "panel==0.14.0",
19+ "altair",
20+ "pandas",
21+ "vega_datasets"
22+ ]
23+ </ py-config >
24+
25+ < h1 > Basic Example</ h1 >
26+ < div id ="myapp "> </ div >
27+ < py-script output ="myapp ">
28+ # was ok with https://pyscript.net/2022.06.1/pyscript.js
29+ # you can try last official release: https://pyscript.net/latest/pyscript.js and css
30+ # or current unstable master: https://pyscript.net/unstable/pyscript.js and css
31+
32+ import sys
33+ print(sys.version)
34+ print('Hello, World!')
35+ for i in range(5):
36+ print(i)
37+ </ py-script >
38+
2839 < h1 > Panel Example</ h1 >
29- < div id ="myplot "> </ div >
30- < py-script >
31- import asyncio
32- import panel as pn
3340
34- slider = pn.widgets.FloatSlider(start=0, end=10, name='Amplitude')
41+ < div id =" simple_app " > </ div >
3542
36- def callback(new):
37- return f'Amplitude is: {new}'
38-
39- row = pn.Row(slider, pn.bind(callback, slider))
40-
41- await pn.io.pyodide.show(row, 'myplot')
42- </ py-script >
43- </ py-script >
44- < py-env >
45- - altair
46- - pandas
47- - vega_datasets
48- </ py-env >
4943
50- < div id ="altair " style ="width: 100%; height: 100% "> </ div >
51- < py-script output ="altair ">
52- import altair as alt
53- from vega_datasets import data
5444
55- source = data.movies.url
45+ < py-script output ="simple_app ">
46+ import panel as pn
5647
57- pts = alt.selection(type="single", encodings=['x'] )
48+ slider = pn.widgets.FloatSlider(start=0, end=10, name='Amplitude' )
5849
59- rect = alt.Chart(data.movies.url).mark_rect().encode(
60- alt.X('IMDB_Rating:Q', bin=True),
61- alt.Y('Rotten_Tomatoes_Rating:Q', bin=True),
62- alt.Color('count()',
63- scale=alt.Scale(scheme='greenblue'),
64- legend=alt.Legend(title='Total Records')
65- )
66- )
50+ def callback(new):
51+ return f'Amplitude is: {new}'
6752
68- circ = rect.mark_point().encode(
69- alt.ColorValue('grey'),
70- alt.Size('count()',
71- legend=alt.Legend(title='Records in Selection')
72- )
73- ).transform_filter(
74- pts
75- )
53+ pn.Row(slider, pn.bind(callback, slider)).servable(target='simple_app');
54+ </ py-script >
7655
77- bar = alt.Chart(source).mark_bar().encode(
78- x='Major_Genre:N',
79- y='count()',
80- color=alt.condition(pts, alt.ColorValue("steelblue"), alt.ColorValue("grey"))
81- ).properties(
82- width=550,
83- height=200
84- ).add_selection(pts)
8556
86- alt.vconcat(
87- rect + circ,
88- bar
89- ).resolve_legend(
90- color="independent",
91- size="independent"
92- )
93- </ py-script >
57+ < h1 > Altair Example</ h1 >
58+ < div id ="altair "> </ div >
9459
9560
61+ < py-script output ="altair ">
62+ import altair as alt
63+ from vega_datasets import data
64+
65+ source = data.movies.url
66+
67+ pts = alt.selection(type="single", encodings=['x'])
68+
69+ rect = alt.Chart(data.movies.url).mark_rect().encode(
70+ alt.X('IMDB_Rating:Q', bin=True),
71+ alt.Y('Rotten_Tomatoes_Rating:Q', bin=True),
72+ alt.Color('count()',
73+ scale=alt.Scale(scheme='greenblue'),
74+ legend=alt.Legend(title='Total Records')
75+ )
76+ )
77+
78+ circ = rect.mark_point().encode(
79+ alt.ColorValue('grey'),
80+ alt.Size('count()',
81+ legend=alt.Legend(title='Records in Selection')
82+ )
83+ ).transform_filter(
84+ pts
85+ )
86+
87+ bar = alt.Chart(source).mark_bar().encode(
88+ x='Major_Genre:N',
89+ y='count()',
90+ color=alt.condition(pts, alt.ColorValue("steelblue"), alt.ColorValue("grey"))
91+ ).properties(
92+ width=550,
93+ height=200
94+ ).add_selection(pts)
95+
96+ alt.vconcat(
97+ rect + circ,
98+ bar
99+ ).resolve_legend(
100+ color="independent",
101+ size="independent"
102+ )
103+ </ py-script >
104+ </ body >
96105</ html >
0 commit comments