winpython_afterdoc/docs/pyscript/test.html at master · winpython/winpython_afterdoc · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<html>
  <head>
    <title>Panel Example</title>
    <meta charset="iso-8859-1">
    <link rel="icon" type="image/x-icon" href="./favicon.png">
    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.2.js"></script>
    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.2.min.js"></script>
    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.2.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@holoviz/panel@0.14.2/dist/panel.min.js"></script>
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
  </head>
  <body>
    <py-config>
        packages = [
          "bokeh",
          "numpy",
          "panel==0.14.2",
          "altair",
          "pandas",
          "vega_datasets"
        ]
      </py-config>

      <h1>Basic Example</h1>
    <div>
        <py-terminal>
    </div>
        <py-script>
        # was ok with https://pyscript.net/2022.12.1/pyscript.js
        # you can try last official release: https://pyscript.net/latest/pyscript.js and css
        # or current unstable master: https://pyscript.net/unstable/pyscript.js  and css

        import sys
        print(sys.version)
        print('Hello, World!')
        for i in range(5):
            print(i)
    </py-script>

    <h1>Panel Example</h1>

    <div id="simple_app"></div>


    <py-script>
      import panel as pn

      slider = pn.widgets.FloatSlider(start=0, end=10, name='Amplitude')

      def callback(new):
          return f'Amplitude is: {new}'

      pn.Row(slider, pn.bind(callback, slider)).servable(target='simple_app');
    </py-script>


 <h1>Altair Example</h1>
 <div id="altair"></div>


 <py-script>
    import altair as alt
    from vega_datasets import data

    source = data.movies.url

    pts = alt.selection(type="single", encodings=['x'])

    rect = alt.Chart(data.movies.url).mark_rect().encode(
        alt.X('IMDB_Rating:Q', bin=True),
        alt.Y('Rotten_Tomatoes_Rating:Q', bin=True),
        alt.Color('count()',
            scale=alt.Scale(scheme='greenblue'),
            legend=alt.Legend(title='Total Records')
        )
    )

    circ = rect.mark_point().encode(
        alt.ColorValue('grey'),
        alt.Size('count()',
            legend=alt.Legend(title='Records in Selection')
        )
    ).transform_filter(
        pts
    )

    bar = alt.Chart(source).mark_bar().encode(
        x='Major_Genre:N',
        y='count()',
        color=alt.condition(pts, alt.ColorValue("steelblue"), alt.ColorValue("grey"))
    ).properties(
        width=550,
        height=200
    ).add_selection(pts)

    display(alt.vconcat(
        rect + circ,
        bar
    ).resolve_legend(
        color="independent",
        size="independent"
    ), target="altair")
 </py-script>
</body>
</html>