# Getting started with PyScript
This page will guide you through getting started with PyScript.
## Development setup
PyScript does not require any development environment other
then a web browser (we recommend using [Chrome](https://www.google.com/chrome/)) and a text editor, even though using your [IDE](https://en.wikipedia.org/wiki/Integrated_development_environment) of choice might be convenient.
If you're using [VSCode](https://code.visualstudio.com/), the
[Live Server extension](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
can be used to reload the page as you edit the HTML file.
## Installation
There is no installation required. In this document, we'll use
the PyScript assets served on [https://pyscript.net](https://pyscript.net).
If you want to download the source and build it yourself, follow
the instructions in the [README.md](https://github.com/pyscript/pyscript/blob/main/README.md) file.
## Your first PyScript HTML file
Here's a "Hello, world!" example using PyScript.
Using your favorite editor, create a new file called `hello.html` in
the same directory as your PyScript, JavaScript, and CSS files with the
following content, and open the file in your web browser. You can typically
open an HTML by double-clicking it in your file explorer.
```html
print('Hello, World!')
```
## A more complex example
Now that we know how you can create a simple 'Hello, World!' example, let's see a more complex example. This example will use the Demo created by [Cheuk Ting Ho](https://github.com/Cheukting). In this example, we will use more features from PyScript.
### Setting up the base index file
Let's create a new file called `index.html` and add the following content:
```html
Ice Cream Picker
```
In this first step, we have created the index file, imported `pyscript.css` and `pyscript.js`. We are ready to start adding the elements we need for our application.
### Importing the needed libraries
For this example, we will need to install `pandas` and `matplotlib`. We can install libraries using the `` tag so we can import them later. Please refer to the [``](../reference/elements/py-config.md) documentation for more information.
```html
Ice Cream Picker
packages = ["matplotlib", "pandas"]
```
### Importing the data and exploring
Now that we have installed the needed libraries, we can import and explore the data. In this step, we need to create a `` tag to import our dependencies, read the data with pandas and then use `py-repl` to explore the data.
You may want to read the [``](../reference/elements/py-script.md) and [``](../reference/elements/py-repl.md) documentation for more information about these elements.
```html
Ice Cream Picker
packages = ["matplotlib", "pandas"]
import pandas as pd
from pyodide.http import open_url
url = (
"https://raw.githubusercontent.com/Cheukting/pyscript-ice-cream/main/bj-products.csv"
)
ice_data = pd.read_csv(open_url(url))
ice_data
```
Note that we are adding `ice_data` to `py-repl` to pre-populate the REPL with this variable, so you don't have to type it yourself.
### Creating the plot
Now that we have the data, we can create the plot. We will use the `matplotlib` library to make the plot. We will use the `display` API to display the plot on the page. You may want to read the [`display`](../reference/API/display.md) documentation for more information.
```html
Ice Cream Picker
packages = ["matplotlib", "pandas"]
import pandas as pd
import matplotlib.pyplot as plt
from pyodide.http import open_url
url = (
"https://raw.githubusercontent.com/Cheukting/pyscript-ice-cream/main/bj-products.csv"
)
ice_data = pd.read_csv(open_url(url))
def plot(data):
plt.rcParams["figure.figsize"] = (22,20)
fig, ax = plt.subplots()
bars = ax.barh(data["name"], data["rating"], height=0.7)
ax.bar_label(bars)
plt.title("Rating of ice cream flavours of your choice")
display(fig, target="graph-area", append=False)
plot(ice_data)
ice_data
```
### Select specific flavours
Now that we have a way to explore the data using `py-repl` and a way to create the plot using all of the data, it's time for us to add a way to select specific flavours.
```html
Ice Cream Picker
packages = ["matplotlib", "pandas"]
import js
import pandas as pd
import matplotlib.pyplot as plt
from pyodide.http import open_url
from pyodide.ffi import create_proxy
url = (
"https://raw.githubusercontent.com/Cheukting/pyscript-ice-cream/main/bj-products.csv"
)
ice_data = pd.read_csv(open_url(url))
current_selected = []
flavour_elements = js.document.getElementsByName("flavour")
def plot(data):
plt.rcParams["figure.figsize"] = (22,20)
fig, ax = plt.subplots()
bars = ax.barh(data["name"], data["rating"], height=0.7)
ax.bar_label(bars)
plt.title("Rating of ice cream flavours of your choice")
display(fig, target="graph-area", append=False)
def select_flavour(event):
for ele in flavour_elements:
if ele.checked:
current_selected = ele.value
break
if current_selected == "ALL":
plot(ice_data)
else:
filter = ice_data.apply(lambda x: ele.value in x["ingredients"], axis=1)
plot(ice_data[filter])
ele_proxy = create_proxy(select_flavour)
for ele in flavour_elements:
if ele.value == "ALL":
ele.checked = True
current_selected = ele.value
ele.addEventListener("change", ele_proxy)
plot(ice_data)