Build Better Python Web Apps With Your Data
Tags: python, webdev, programming
Published: 2023-02-03 14:57:38

# Build Better Python Web Apps With Your Data

Do you want a quick introduction to [Anvil's Data File service](https://anvil.works/docs/working-with-files/data-files?utm_source=devto_data_files_100)? Then **check out our new 100 second video** where we plot data from a CSV file using [Pandas](https://pandas.pydata.org/) and Anvil's Data Files service.

{% embed https://www.youtube.com/embed/TEUXht5kxgM %}

#### Anvil is **free to use**. [Start building now!](https://anvil.works/build?utm_source=devto_data_files_100)

---

# Prefer text to video? Read on to learn how to use Data Files

Python is great for working with data. With [Anvil](https://anvil.works?utm_source=devto_data_files_100) you can build web apps to interact with datasets and machine-learning models entirely in Python.

In this article, I’ll show you how to use Anvil’s [Data Files service](https://anvil.works/docs/working-with-files/data-files?utm_source=devto_data_files_100) to attach static data to your web app. We’re going to upload a CSV dataset and plot the data from it using [Pandas](https://pandas.pydata.org/). Then, we’ll display the plot online for everyone to see - all in Python.


![Contents](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1vniguvtqm6proz3i31b.png)


---

## Uploading our CSV

We start by uploading our dataset into our app’s [Data Files service](https://anvil.works/docs/working-with-files/data-files?utm_source=devto_data_files_100). I’m using some example data of Apple’s stock price over time which you can [**download here**](https://anvil.works/articles/img/data-files-100-seconds/dataset.csv).

<figure>
  <img src="https://anvil-website-static.s3.eu-west-2.amazonaws.com/articles/data-files-100-seconds/uploading-file.gif">
  <figcaption>Adding the CSV data to our app</figcaption>
</figure>

---

## Plotting our data

Now, let’s write a [server function](https://anvil.works/docs/server?utm_source=devto_data_files_100) called `plot_data` to plot our CSV data. We can use the [`data_files`](https://anvil.works/docs/api/anvil.files#data_files?utm_source=devto_data_files_100) object to get the path to the file we just uploaded, and load it into Pandas.

``` python
@anvil.server.callable
def plot_data():
  # Read the CSV file into a DataFrame using the Data Files path
  df = pd.read_csv(data_files['dataset.csv'])
```

We’ll use [Plotly's Pandas backend](https://plotly.com/python/pandas-backend/) to plot our dataset as a line graph and return that figure from our server function.

``` python
@anvil.server.callable
def plot_data():
  # Read the CSV file into a DataFrame using the Data Files path
  df = pd.read_csv(data_files['dataset.csv'])

  # Then plot the graph using the Plotly backend
  df = df.set_index('Date')
  fig = df.plot.line(title="APPL Stock Price")
  return fig
```

<figure>
  <img src="https://anvil-website-static.s3.eu-west-2.amazonaws.com/articles/data-files-100-seconds/plotting-data.gif">
  <figcaption>Writing server-side code to plot our data</figcaption>
</figure>

---

## Building our front-end

Now let’s build a front-end to display our graph. Drag and drop a [Plot component](https://anvil.works/docs/client/components/plots?utm_source=devto_data_files_100) onto the page from the [toolbox](https://anvil.works/docs/editor?utm_source=devto_data_files_100) on the right.

<figure>
  <img src="https://anvil-website-static.s3.eu-west-2.amazonaws.com/articles/data-files-100-seconds/building-front-end.gif">
  <figcaption>Dragging and dropping a Plot component into our form</figcaption>
</figure>

Then switch to the app's [front-end Python](https://anvil.works/docs/client/python?utm_source=devto_data_files_100) code. In the `__init__` method, we call the `plot_data()` server function we created earlier and set our [plot's figure property](https://anvil.works/docs/api/anvil#Plot?utm_source=devto_data_files_100) to the graph that is returned.

``` python
def __init__(self, **properties):
  # Set Form properties and Data Bindings.
  self.init_components(**properties)

  # Any code you write here will run when the form opens.
  self.plot_1.figure = anvil.server.call('plot_data')
```

<figure>
  <img src="https://anvil-website-static.s3.eu-west-2.amazonaws.com/articles/data-files-100-seconds/front-end-code.gif">
  <figcaption>Writing the front-end code which gets our graph</figcaption>
</figure>


---

## Running our app

When we run the app, it will load the dataset and plot it with Pandas.

<figure>
  <img src="https://anvil-website-static.s3.eu-west-2.amazonaws.com/articles/data-files-100-seconds/running-app.gif">
  <figcaption>Running our app to test it</figcaption>
</figure>


You can use Anvil’s Data Files to [load and run machine learning models](https://anvil.works/learn/tutorials/deploy-machine-learning-model?utm_source=devto_data_files_100), complicated datasets, and more. To find out more about Anvil and using Data Files, check out the links below.

---

{% user codingwithryan %}