DEV Community: Patricia Carro Garcia

Announcing the New Drag-and-Drop Designer

Patricia Carro Garcia — Tue, 31 Oct 2023 14:17:20 +0000

A better UI building experience

We're very excited to announce the release of Anvil's new Drag-and-Drop Designer!

Find your components more easily in our updated Toolbox, and quickly edit your components in-line. You now have more control over the structure of your app with our new Components Tree. We've also improved the drag-and-drop experience itself so it's easier to build your UIs.

Start building with the new Designer: anvil.works/build

The new Designer is officially out of beta and will now be the default Designer, although you will still be able to switch back to the Classic Designer for the time being.

Keep reading to learn about some of the new features from this release:

Cleaner interface

To help you build apps on smaller screens, we've made it easier to access the Toolbox and the Properties panel. Each section of the right-hand side panel can collapse fully, and even with it closed you can easily drag-and-drop new components or change components' properties.

It's also now easier to find your way around the Toolbox. We've organised components into different sections so that they're easier to find, and the type of component is written underneath the icon.

Components in the new Toolbox are organized and easier to find.

Easier to edit your components

You can now change common component properties quickly, right next to the selected component. Clicking on a component brings up a small menu from which you can edit a component’s properties, rename it, or delete it without opening the Properties panel.

The new menu to edit a Label component.

Double clicking on a component with text now also allows you to edit its text property in-line.

Changing the text of a Label component with in-line editing.

Customising your components is easier now, with the ability to add multiple roles:

Toggling multiple roles for a component.

Better drag and drop

We've made our drag and drop smoother and it's now easier to see exactly where your components will land.

You can also now see the hierarchy and nesting of your components at a glance, thanks to the new Component Tree section in the right-hand side panel. You can move components around within the Component Tree and choose their positioning, and even drag and drop components directly into the Tree. This provides extra control over the nesting of your components.

And there's more...

There's more that we can't fit into a blog post, so be sure to read our updated documentation to learn all about it.

The best way to experience the new Designer is to try it out for yourself:

Start building with the new Designer: anvil.works/build

More about Anvil

If you're new here, welcome! Anvil is a platform for building full-stack web apps with nothing but Python. No need to wrestle with JS, HTML, CSS, Python, SQL and all their frameworks – just build it all in Python.

Turn Your Pandas Code into a Web App

Patricia Carro Garcia — Thu, 16 Mar 2023 15:17:51 +0000

Give a front-end to your data insights

Pandas is one of the most popular data science libraries for analysing and manipulating data. But what if you want to take the data that you have manipulated with Pandas and present it to other people in a visual manner? With Anvil, you can take a local script or a Jupyter notebook and turn it into an interactive dashboard — all for free and entirely in Python.

In this tutorial, we’re going to build a dashboard app using the Netflix Movies and TV Shows dataset by Shivam Bansal. You can also download the data directly here.

We’ll use Pandas to manipulate our data in a local script or a notebook, Plotly to visualize it, and the Anvil Uplink to connect it to an app and turn it into an interactive dashboard.

These are the steps that we will cover:

We’ll start by creating our Anvil app.
Then, we’ll design our dashboard using Anvil components.
After that, we’ll clean and prepare the data for plotting.
We will then connect our script or notebook to our app via the Uplink.
Using Plotly, we will build our plots.
Finally, we will add some finishing touches to our dashboard.

Let’s get started!

If you don’t have a local Python environment or you want to work entirely in the cloud, here’s a version of this tutorial entirely in Anvil.

Step 1: Create your Anvil app

Go to the Anvil Editor, click on “Blank App”, and choose “Rally”. We just want an empty app, so we’ll delete the current Form1 and then add a new Blank Panel form:

Now let’s rename our app. Click on the app’s name, on the top left corner of the screen. This takes us to the General Settings page, where we can modify our app’s name.

Step 2: Design your dashboard

We will build our user interface by adding drag-and-drop components from the Toolbox. First, add a ColumnPanel, where we will fit all our other components. Then, let’s add three Plots into the ColumnPanel - we can adjust their sizes by clicking and dragging their edges (use Ctrl+Drag for finer adjustments).

We’ll also drop a Label into our app and place it above the plots. Select your Label and, in the Properties Panel on the right, change the text to “Netflix Content Dashboard”. Set the font_size to 32 and, if you want, you can customize the font.

Finally, we’ll set the spacing_above property of all the components to large (you can find this under the Layout section of the Properties Panel).

Step 3: Get the data into shape

It’s time to clean our data and get it ready to display. Create a file in your favorite development enviroment – open up a new Jupyter notebook, or create a new script in your IDE of choice. All the code included in this tutorial will work with both options.

First, import Pandas at the top. Then, write the csv_to_df function, which will fetch the data in from our CSV file and convert it into a Pandas DataFrame.

import pandas

def csv_to_df(f):
    return pd.read_csv(f, index_col=0)

Before we can plot our data, we need to clean it and prepare it for plotting. We’ll do all the necessary transformations to our data inside a function that we’ll call prepare_netflix_data. In it, we’ll first call our csv_to_df function to fetch our data.

def prepare_netflix_data():
    netflix_df = csv_to_df('netflix_titles.csv')

Our figures will only use data from the type, country and date_added columns, so we’ll slice our DataFrame using the loc property.

netflix_df = netflix_df.loc[:,['type', 'country', 'date_added']]

There are also some missing values that we’ll have to deal with, so that we don’t include missing data in our plots. Pandas has a few different ways to handle missing values, but in this case we’ll just use dropna to get rid of them:

netflix_df = netflix_df.dropna(subset=['country'])

The country column contains the production country of each movie or TV Show in Netflix. However, some of them have more than one country listed. For simplicity, we’re going to assume the first one mentioned is the most important one, and we’ll ignore the others. We’ll also create a separate DataFrame that only contains the value counts for this column, sorted by country – this will be useful later on when we input the data into our plots.

netflix_df['country'] = [countries[0] for
    countries in netflix_df['country'].str.split(',')]
country_counts = pd.DataFrame(   netflix_df['country'].value_counts().rename_axis('countries').reset_index(name='counts')).sort_values(by=['countries'])

Our date_added variable currently contains only strings, which is not a very easy format to work with when we want to plot something in chronological order. Because of this, we’ll convert it into datetime format using to_datetime, which will allow us to easily order the data by year later on.

netflix_df['date_added'] = pd.to_datetime(netflix_df['date_added'])

We’ll return our transformed dataframe and the country_counts variable that we just created. This is how the full function should look by the end:

def prepare_netflix_data():
    netflix_df = csv_to_df('netflix')
    netflix_df = netflix_df.loc[:,['type', 'country', 'date_added']]
    netflix_df = netflix_df.dropna()
    netflix_df['country'] = [countries[0] for countries in netflix_df['country'].str.split(',')]
    country_counts = pd.DataFrame(netflix_df['country'].value_counts().rename_axis('countries').reset_index(name='counts')).sort_values(by=['countries'])
    netflix_df['date_added'] = pd.to_datetime(netflix_df['date_added'])
    return netflix_df, country_counts

Finally, we can print the output of netflix_df and country_counts, to make sure everything looks right.

print(prepare_netflix_data())

This is what the output should look like:

Now that we’re happy with how our data looks, we can build our plots but, before that, we’ll have to connect our local script to our Anvil app.

Step 4: Making the connection

Right now, our code is running on our computer or in our Jupyter notebook, but we will want the plots we build to display on our app and run on the web browser. To be able to do this, we will have to connect our local code to our Anvil app and make the functions we’ve written in our local code callable from the app. In this way, the local code acts as the server, while the app runs all the client-side code in the web browser.

This is called client-server programming, and it’s how every web app works. Want to learn more? Check out our client-server explainer article.

To connect our local script to our app, let’s first enable the Anvil Uplink. In the Editor, click the + button in the Sidebar Menu, select Uplink and click on + Enable server Uplink.

After this, we need to pip install the Uplink library on our local machine (use !pip install instead if working on a Jupyter notebook):

pip install anvil-uplink

Now we’ll add the following lines at the top of our local script (you can copy them from your Uplink window dialog):

import anvil.server

anvil.server.connect("<your-uplink-key-here>")

If you’re using a local script, we will also add anvil.server.wait_forever() at the very bottom of our script, which will keep our script running to allow our app to call functions in it. All the rest of the code we write going forward will go above this line. This is not necessary for Jupyter notebooks.

anvil.server.wait_forever()

When developing in a notebook, your anvil.server.callable functions will only remain accessible while your notebook kernel is active. Many hosted notebook environments, such as Google Colab, will shutdown kernels that have been idle for some time. You may be able to increase this timeout by having a cell continually running - while True: sleep(1) will do, and this is exactly what anvil.server.wait_forever() does. Even then, hosted kernels are unlikely to run forever, and for production deployments you should see our Deploy a Google Colab Notebook with Docker guide.

With this, our local script is connected to our app. This means it can now do anything we can do in an Anvil Server Module.

Step 5: Build the plots

We now need to take our processed data and turn it into the plots that we will want to display. Our data is in a pandas DataFrame right now, which means that we require pandas to read it. Because of this, we can’t send the data directly to our app because pandas is not available to the web browser, or client (learn more about why certain packages are not available in the client in our Client vs Server code in Anvil explainer).

However, we can send already built plots instead. Because of this, we’ll first build our figures in our script or notebook, and then we’ll return the plots to our app to display them.

Our dashboard will contain three figures:

A map showing the number of films per production country
A content type pie chart
A line chart of content added through time

Now, we need to create them. We’ll first import plotly.graph_objects, then write the create_plots function. Before anything else, we’ll call our prepare_netflix_data function to fetch our transformed data. After that, we’ll first create and return our map plot, using Plotly’s Scattergeo. Remember to add this code above the anvil.server.wait_forever() call if working on a local script.

import plotly.graph_objects as go

@anvil.server.callable
def create_plots():
    netflix_df, country_counts = prepare_netflix_data()

    fig1 = go.Figure(
    go.Scattergeo(
        locations=sorted(netflix_df['country'].unique().tolist()),
        locationmode='country names',
        text = country_counts['counts'],
        marker= dict(size= country_counts['counts'], sizemode = 'area')))

    return fig1

We made this function available from the client side of our app by decorating it as @anvil.server.callable, which means we can access our function’s output from our Anvil app in order to display our figures. We’ll do this by using anvil.server.call inside the __init__ method in our Form1 code to call our function. Then, we’ll asign the output to our plot’s data property.

class Form1(Form1Template):
def **init**(self, **properties): # Set Form properties and Data Bindings.
  self.init_components(**properties)

      fig1 = anvil.server.call('create_plots')

      self.plot_1.data = fig1

We can check that everything is working like we want it to by running our local script or notebook and our app. This is how it looks so far:

Let’s now do the same with our other two plots. We’ll add a pie chart and a line chart to our create_plots function:

@anvil.server.callable
def create_plots():
    netflix_df, country_counts = prepare_netflix_data()

    fig1 = go.Scattergeo(
        locations=sorted(netflix_df['country'].unique().tolist()),
        locationmode='country names',
        text = country_counts['counts'],
        marker= dict(
        size= country_counts['counts'],
        line_width = 0,
        sizeref = 2,
        sizemode = 'area',
        reversescale = True
        ))

    fig2 = go.Pie(
        labels=netflix_df['type'],
        values=netflix_df['type'].value_counts(),
        hole=.4,
        textposition= 'inside',
        textinfo='percent+label'
        )

    fig3 = go.Scatter(
        x=netflix_df['date_added'].dt.year.value_counts().sort_index().index,
        y=netflix_df['date_added'].dt.year.value_counts().sort_index()
        )

    return fig1, fig2, fig3

And we’ll call them from the client in the same way we did our previous plot:

class Form1(Form1Template):
def **init**(self, **properties): # Set Form properties and Data Bindings.
    self.init_components(**properties)

        fig1, fig2, fig3 = anvil.server.call('create_plots')

        self.plot_1.data = fig1
        self.plot_2.data = fig2
        self.plot_3.data = fig3

With that, we have a functional dashboard:

How our dashboard looks so far.

Step 6: Finishing touches

With everything set up, we can move onto customizing our plots. Plotly supports pre-configured templates that describe plot styling, and Anvil provides pre-built templates to match our Rally and M3 themes. We can apply these through the templates property.

For this dashboard, I’m going to choose the rally plot theme, which will match the colour scheme and styling of our app. I will set it as the default plot theme for the app by adding this line of code to the __init__ method:

class Form1(Form1Template):
def **init**(self, **properties): # Set Form properties and Data Bindings.
    self.init_components(**properties)

        Plot.templates.default = "rally"

This is how the plots look now:

Our dashboard styled with the Rally plots theme.

Finally, we’ll change our plots’ margins and font by using their layout property. We’ll also add titles to each one:

fig1, fig2, fig3 = anvil.server.call('create_plots')

self.plot_1.data = fig1
self.plot_1.layout.margin = dict(t=60, b=30, l=0, r=0)
self.plot_1.layout.font.family='Raleway'
self.plot_1.layout.title = 'Production countries'

self.plot_2.data = fig2
self.plot_2.layout.margin = dict(t=60, b=30, l=10, r=10)
self.plot_2.layout.font.family='Raleway'
self.plot_2.layout.title = 'Content breakdown by type'

self.plot_3.data = fig3
self.plot_3.layout.margin = dict(t=60, b=40, l=50, r=50)
self.plot_3.layout.font.family='Raleway'
self.plot_3.layout.title = 'Content added over time'

After these changes, our dashboard is ready to be shared! All you need to do now is publish your app to make it available to the world.

The final result.

Want to turn off your computer?

Now that we’ve finished developing our dashboard, you might want to want to stop relying on your local script. You can upload the data set to Anvil, and run our data processing code in an Anvil Server Module, so our dashboard will still work if we stop our script or turn off our computer.

If you want to learn how to do this, check out this tutorial:

Build a Web App with Pandas -->

Clone the App

If you want to check out the source code for our Netflix dashboard, click on the links below and clone the app, download the local script and access the Jupyter notebook on Colab:

Open in Anvil

Download the script

Access the Notebook

New to Anvil?

If you’re new here, welcome! Anvil is a platform for building full-stack web apps with nothing but Python. No need to wrestle with JS, HTML, CSS, Python, SQL and all their frameworks – just build it all in Python.

Yes – Python that runs in the browser. Python that runs on the server. Python that builds your UI. A drag-and-drop UI editor. We even have a built-in Python database, in case you don’t have your own.

Why not have a play with the app builder? It’s free! Click here to get started:

Get building -->

An Expense Approval System Built with Python

Patricia Carro Garcia — Wed, 01 Mar 2023 15:10:00 +0000

Build an expense approval system with Anvil

Anvil is a powerful and versatile tool for building full-stack web applications. With Anvil, you can quickly and easily create your UI and write Python code to control the front-end and back-end of your app. Creating apps with Anvil is fast and flexible, making it well-suited for building internal tools. This expense approval system app showcases some of the features that Anvil has on offer.

Open in Anvil: https://anvil.works/build#clone:ODKPA5XG5ZBEYSLZ%3dT6QRGCPIIRYAZ5FKKXALBEQI

I built the app’s UI using Anvil’s drag-and-drop editor and writing front-end Python code. I also wrote the backend in Python, on a secure Server Module. This app also uses Anvil’s built-in database, user authentication and email sending. Take a look below at how I built this expense approval system, with only Python and Anvil.

The Expense Approval app

This app is a simple expense approval system, where users can submit expenses for an admin user to approve or reject. The main page is a view of the expenses, and users can add expenses by clicking on the + New Expense button, and filling out the pop-up form that it triggers. Clicking on the expense description brings out a detailed view of the expense.

Adding a new expense and viewing it.

An admin will be able to see all expenses and reject, approve and reimburse them, whereas a regular user will only have access to their own submissions

The admin view.

Whenever an admin takes action on an expense, the user that submitted it receives an email notifying them of the change. Finally, admins also have access to a dashboard summary of the expenses, with visualisations, which they can download as a PDF.

A summary page with data visualisations.

How it’s built

Creating the UI

Anvil makes it simple to create a UI. You can use drag-and-drop components and then write Python to make them interact with each other. For example, I used a Data Grid to display the expenses in my app.

Dragging-and-dropping a Data Grid component from the Toolbox onto the ExpenseDashboard Form

Once the layout is set, you can make your components interact with each other by writing your browser code, all in Python. The function below, which runs whenever we change to the Pending Approval view, is running entirely in the browser without making any round trips to the server.

def pendingappr_btn_click(self, **event_args):
# When pendingappr_btn is clicked, the page contents are changed
    self.content_panel.clear()
    self.content_panel.add_component(
        ExpenseDashboard(status='pending'))

Data Tables and Server Side

Anvil has a built-in database system built on top of PostgreSQL, with a GUI for creating, editing and deleting tables. This makes it simple to define your schema. By default, Data Tables are only accessible from the server side.

Anvil’s Server Modules are full server-side Python environments, which cannot be edited or seen by the user. Using server functions to interact with our database ensures our data stays secure. These functions can then be called from the client-side with just one line of code. For example, the function below adds a row to my expenses data table.

@anvil.server.callable
def add_expense(expense_dict):
  app_tables.expenses.add_row(created=datetime.now(), 
                              status="pending", 
                           submitted_by=anvil.users.get_user(), 
                              **expense_dict)

The @anvil.server.callable decorator means I can call this function from client-side code.

anvil.server.call('add_expense', expense)

User Management

Anvil has a built-in Users Service, which handles signup, login and user permissions, as well as supporting corporate single-sign-on, two-factor authentication, and more. I simply added the Users Service to my app and chose the authentication methods I wanted to use - Email + Password and Google sign-in. I then added anvil.users.login_with_form() to my client side to display a login form on startup.

With Anvil, it’s also very simple to restrict functionalities based on user roles. For example, I wanted certain components to be visible and enabled only if the logged in user is an admin, and I was able to implement this with only a couple lines of code:

if State.user['role'] == 'admin':
    self.summary_btn.visible = True
    self.summary_btn.enabled = True

Email service and background tasks

Anvil makes it easy to send and receive emails from your app with a few lines of Python using the built-in email service. I wanted to notify users via email of a status change in their expense request, so first I wrote a function to do just that:

@anvil.server.background_task
def send_email(user, message):
  anvil.email.send(to=user, from_name="Expenses App", subject="Your expense has been updated", html=message)

The @anvil.server.background_task decorator indicates that this task can be run in the background. Background Tasks allow you to fire off a function to run in the background, leaving your main program to continue executing while the function is running.

With this, I could launch my background task every time an expense’s status is changed, without blocking the control flow of my app, by adding anvil.server.launch_background_task to my change_status server function.

@anvil.server.callable(require_user=is_admin)
def change_status(row, status):
  old_status = row['status']
  user = row['submitted_by']['email']
  message = f"<p>Hi, {user},</p><p>The status of your expense ('{row['description']}') changed from <b>{old_status}</b> to <b>{status}</b>.</p><p>Visit the <a href={anvil.server.get_app_origin()}>app</a> to learn more details.</p>"
  row.update(status=status)
  anvil.server.launch_background_task('send_email', user=user, message=html)

Data Visualisations and PDF rendering

Anvil comes with a built in Plotly integration, so you can import, process and visualize data, all within Anvil, using Python. Because they’re Plotly plots under the hood, Anvil’s plots are interactive — you can move the mouse over a plot to see the available tools.

I decided to plot some data from the app’s database, so I first created some functions on the server to get the data into shape, like in the example below:

@anvil.server.callable(require_user=is_admin)
def get_status_data():
  status_data = [x['status'] for x in app_tables.expenses.search()]
  labels = list(set(status_data))
  values = []
  for l in labels:
    values.append(status_data.count(l))
  return labels, values

Then, I just fed it into one of my plots from my Summary Form:

labels, values = anvil.server.call('get_status_data')
self.plot_1.data = go.Pie(labels=labels, values=values, hole=.4)
self.plot_1.layout.title = "Expense requests by status"

I also decided to make the Form downloadable as a PDF. First, I rendered it into a PDF in a server function:

@anvil.server.callable(require_user=is_admin)
def create_summary_pdf():
  return anvil.pdf.render_form('Plots')

Then, I call this function from the client to download the file whenever the download button is clicked:

  def download_summ_btn_click(self, **event_args):
    """This method is called when the button is clicked"""
    media_object = anvil.server.call('create_summary_pdf')
    anvil.media.download(media_object)

Build your internal tools with Anvil

Anvil makes building powerful internal tools simple, straightforward and fast. You can use all your favourite Python libraries to build your code, and the drag-and-drop designer makes building UIs a breeze.

This expense approval system makes use of Anvil’s built-in database system, the easy-to-use user management service, the email service, and more. It’s powered by Python running in the browser, as well as on the server, meaning that it’s extremely customisable. Clone the app to check out the source code and play with it yourself!

Open in Anvil: https://anvil.works/build#clone:ODKPA5XG5ZBEYSLZ%3dT6QRGCPIIRYAZ5FKKXALBEQI

Announcing New Themes, Templates and Colour Schemes

Patricia Carro Garcia — Tue, 20 Sep 2022 10:21:34 +0000

Make your Anvil apps look better than ever

Want to build better looking apps? Today we are launching some brand new features to help you do just that!

Now when you create a new app, you’ll have two brand new themes to choose from. The new Material Design 3 and Rally themes are modern and customisable so you can start building amazing new apps.

These new themes come preset with a number of different colour scheme options to change the colour palette of your app. This makes it easy to give your app a complete makeover with just one click. You can also now change the look of Plot components using new templates!

Read more below to learn how to get started making your Anvil apps more beautiful than ever.

New themes

We’ve built two new themes for you to start from when creating a new blank app. These are the Material Design 3 and Rally themes. Check them out!

Material Design 3

A Workflow app, using the new Material Design 3 theme.

Anvil’s new Material Design 3 theme is based on the latest version of Google’s Material Design. Similarly to the previous Material Design, it has a built-in title bar and optional sidebar, but with a more modern feel. It also includes more roles, which allows for greater customisation options.

Read the guide below to learn more about using the new Material Design 3 theme:

--> Material Design 3 Theme Guide

Rally

An Expense Approval app, using the new Rally theme.

The look of Anvil’s Rally theme is inspired by the Material Design Rally app. It has a sidebar to include all your navigation components, and its look is perfect for data-driven apps and visualisations.

Colour schemes

Not design-eyed? No problem! Customise the look of your apps with brand new colour schemes.

The new color schemes.

When you start with an M3 or Rally app, you’ll have the ability to change the look of your app by selecting a pre-defined colour scheme. These new colour schemes are designed to effortlessly change the feel of your app, without having to think too hard about it.

…or create your own

If none of the colour schemes that we offer suit your taste, you can define your own. Check out this handy guide where we show you how to do just that:

--> Creating a custom M3 colour scheme

Plotly templates

You can now change the appearance of Plot components using Plotly templates! This means you can now use all the pre-set Plotly templates or create your own. You can learn all about using plot templates in our documentation.

A plot styled using different templates.

On top of that, we’ve also added three new templates to match our new themes. You can change your plotly plots to "material_light", "material_dark" or "rally" to have them fit the color scheme of your app. You will still be able to modify the look of your plots using the layout property, but you can now also choose the starting point from which to do so.

You can change the default template of all the plots in your app…

Plot.templates.default = "material_light"

…or each plot individually:

self.plot_1.layout.template = "material_light"

What next?

Start building with our new themes! We love to see what you create with Anvil, so be sure to share your new apps on our Show and Tell Forum.

More about Anvil

--> Try Anvil

Build a Web App with Pandas

Patricia Carro Garcia — Wed, 13 Apr 2022 17:04:31 +0000

A Web App to Show your Insights to the World

Pandas is one of the most popular data science libraries for analysing and manipulating data. But what if you want to present your data to other people in a visual manner? With Anvil, you can wrangle data with pandas and build a dashboard for it, entirely in Python.

In this tutorial, we're going to build a dashboard app using the Netflix Movies and TV Shows dataset by Shivam Bansal. We'll use Pandas to manipulate our data, then Plotly to visualize it and turn it into an interactive dashboard.

These are the steps that we will cover:

We'll start by creating our Anvil app
Then, we'll design our dashboard using Anvil components
We'll upload and read our CSV data
We'll clean and prepare the data for plotting
Using Plotly, we will build our plots
Finally, we will add some finishing touches to the design

Let's get started!

Step 1: Create your Anvil app

Go to the Anvil editor and click on “Blank App”, and choose "Material Design". We just want an empty app, so we'll delete the current Form1 and then add a new Blank Panel form:

Now let's rename our app. Click on the app’s name, on the top left corner of the screen. This takes us to the General Settings page, where we can modify our app’s name.

Step 2: Design your dashboard

We’ll also drop a Label into our app and place it above the plots. Select your Label and, in the Properties Panel on the right, change the text to “Netflix Content Dashboard”. Set the font_size to 32 and, if you want, you can customize the font.

Finally, we’ll set the spacing_above property of all the components to large (you can find this under the Layout section of the Properties Panel).

Step 3: Upload your data into Anvil

We need our data to be accessible to our code in Anvil to be able to work with it. We can upload our dataset as a Static Data File, which will make it available in our Server Module.

To do that, first, we need to add the Data Files service. Click the + button in the Sidebar Menu, and select Data Files. Then, add the dataset by drag-and-dropping the file onto the Data Files panel or clicking the Upload button and selecting it from your computer.

Now that our file has been uploaded into Anvil, we can read its contents. Go back to the App Browser and, under Server Code, click on Add Server Module. We will be writing our code in our Server Module, since we need to be in the server side to use pandas and the data API. If you want to learn more about the structure of the web and the differences between Client and Server code, check out our Client vs Server Code in Anvil explainer.

First, we’re gonna need to install Pandas into our app. Go to Settings, click on Python versions and select Python 3.10 (Beta) from the Python version dropdown. Pandas is included as part of the Standard base environment, so we’ll go ahead and select it from the Base packages dropdown. This is how your Python Version and Packages page should look like:

If you want to try a different base environment, or you want to install other custom packages, you can learn how to in our documentation.

The Python 3.10 environment is only available on a paid plan. If you don’t have a paid plan, don’t worry - just follow these instructions and click Start Trial when prompted.

Now, we can import pandas at the top of the module and write the csv_to_df function, which will fetch our dataset and convert it into a Pandas DataFrame. We will get our file path using data_files['filename'].

import pandas as pd

def csv_to_df(f):
  df = pd.read_csv(data_files[f], index_col=0)
  return df

With this, we are now able to transform our data into a dataframe.

Data exploration

With our data in a DataFrame, we can start exploring it. For this, we will want to see print statements as we fiddle with the data, so we’ll create explore – a function in which we’ll call our csv_to_df function and write our print statements.

@anvil.server.callable
def explore():
  netflix_df = csv_to_df('netflix_titles.csv')
  print(netflix_df.head())

We made this function available to the client side by decorating it as @anvil.server.callable, which means we can call it from the client using anvil.server.call to be able to see our print statements in our console. So let's do just that - add the following line to your Form1 __innit__ function:

class Form1(Form1Template):
  def __init__(self, **properties):
    self.init_components(**properties)

    anvil.server.call('explore')

All we have to do now is run our app to see the output:

After that, we can continue adding print statements to our function on the Server and run it as we explore the data.

Note that pandas will assume you're on a narrow display, so it may not show all your dataframe columns. To avoid this, you will need to modify pandas's display width by adding the line pd.set_option('display.width', 0) to your explore function.

Step 4: Get the data into shape

Before we can plot our data, we need to clean it and prepare it for plotting. We'll do all the necessary transformations to our data inside a function that we'll call prepare_netflix_data, which we'll place above our explore function. That way, when we're done transforming our data, we'll be able to easily print out our results using explore.

The first thing we need to do is call our csv_to_df function to fetch our data.

def prepare_netflix_data():
  netflix_df = csv_to_df('netflix_titles.csv')

Our figures will only use data from the type, country and date_added columns, so we'll slice our DataFrame using the loc property.

netflix_df = netflix_df.loc[:,['type', 'country', 'date_added']]

There’s also some missing values that we’ll have to deal with, so that we don't include missing data in our plots. Pandas has a few different ways to handle missing values, but in this case we’ll just use dropna to get rid of them:

netflix_df = netflix_df.dropna(subset=['country'])

The country column contains the production country of each movie or TV Show in Netflix. However, some of them have more than one country listed. For simplicity, we're going to assume the first one mentioned is the most important one, and we'll ignore the others. We’ll also create a separate DataFrame that only contains the value counts for this column, sorted by country – this will be useful later on when we input the data into our plots.

netflix_df['country'] = [countries[0] for 
  countries in netflix_df['country'].str.split(',')]
country_counts = pd.DataFrame(
  netflix_df['country'].value_counts().rename_axis(
    'countries').reset_index(name='counts')
  ).sort_values(by=['countries'])

Our date_added variable currently contains only strings, which is not a very easy format to work with when we want to plot something in chronological order. Because of this, we'll convert it into datetime format using to_datetime, which will allow us to easily order the data by year later on.

netflix_df['date_added'] = pd.to_datetime(netflix_df['date_added'])

We'll return our transformed dataframe and the country_counts variable that we just created. This is how the full function should look by the end:

def prepare_netflix_data():
  netflix_df = csv_to_df('netflix_titles.csv')

  netflix_df = netflix_df.loc[:,['type', 'country', 'date_added']]
  netflix_df = netflix_df.dropna()
  netflix_df['country'] = [countries[0] for countries in netflix_df['country'].str.split(',')]
  country_counts = pd.DataFrame(
    netflix_df['country'].value_counts().rename_axis('countries').reset_index(name='counts')
    ).sort_values(by=['countries'])
  netflix_df['date_added'] = pd.to_datetime(netflix_df['date_added'])
  return netflix_df, country_counts

Finally, we can print the output of prepare_netflix_data inside our explore function, to make sure everything looks right.

def explore():
  netflix_df = csv_to_df('netflix_titles.csv')

  # print(netflix_df.head())
  print(prepare_netflix_data())

This is what the output should look like when we run our app:

Now that we're happy with how our data looks, we can move on to building our plots.

Step 5: Build the plots

Our data is in a Pandas DataFrame, so we can only work with it on the Server, where we can access external packages. This means that we’ll have to create our plots in our Server Module.

Our dashboard contains three figures:

A map showing the number of films per production country
A content type pie chart
A line chart of content added through time

Now, we need to create them - import plotly.graph_objects at the top of the Server Module, and write the create_plots function, which should be decorated as @anvil.server.callable. Before anything else, we'll call our prepare_netflix_data function to fetch our transformed data. After that, we'll first create and return our map plot, using Plotly's Scattergeo.

import plotly.graph_objects as go

@anvil.server.callable
def create_plots():
  netflix_df, country_counts = prepare_netflix_data()

  fig1 = go.Figure(
    go.Scattergeo(
      locations=sorted(netflix_df['country'].unique().tolist()), 
      locationmode='country names',  
      text = country_counts['counts'],
      marker= dict(size= country_counts['counts'], sizemode = 'area')))

  return fig1

In order to display our figures, we will need to access the output our Server function in the Client side, so we'll call create_plots using anvil.server.callable inside the __init__ method in our Form1 code. Anvil’s Plot component has a figure property, with which we can set the figures that we want to display:

class Form1(Form1Template):
  def __init__(self, **properties):
    self.init_components(**properties)

    # anvil.server.call('explore')

    fig1 = anvil.server.call('create_plots')

    self.plot_1.figure = fig1

We can check that everything is working like we want it to by running our app. This is how it looks so far:

Let's now do the same with our other two plots. We'll add a pie chart and a line chart to our create_plots function:

@anvil.server.callable
def create_plots():
  netflix_df, country_counts = prepare_netflix_data()

  fig1 = go.Figure(
    go.Scattergeo(
      locations=sorted(netflix_df['country'].unique().tolist()), 
      locationmode='country names',  
      text = country_counts['counts'],
      marker= dict(size= country_counts['counts'], sizemode = 'area')))

  fig2 = go.Figure(go.Pie(
    labels=netflix_df['type'], 
    values=netflix_df['type'].value_counts()
  ))

  fig3 = go.Figure(
    go.Scatter(
      x=netflix_df['date_added'].dt.year.value_counts().sort_index().index, 
      y=netflix_df['date_added'].dt.year.value_counts().sort_index()
    ))

  return fig1, fig2, fig3

And we'll call them from the client in the same way we did our previous plot:

class Form1(Form1Template):
  def __init__(self, **properties):
    self.init_components(**properties)

    # anvil.server.call('explore')

    fig1, fig2, fig3 = anvil.server.call('create_plots')

    self.plot_1.figure = fig1
    self.plot_2.figure = fig2
    self.plot_3.figure = fig3

With that, we have a functional dashboard:

Step 6: Finishing touches

With everything set up, we can move onto customizing our plots and styling our app. For my dashboard, I decided to go with a Netflix-like color scheme.

We'll use Plotly's built-in styling capabilities to modify the look of our figures. Let's start by updating the plots' markers. We need to add some lines of code to our current plots to set their colors, sizes and positioning.

def create_plots():
  netflix_df, country_counts = prepare_netflix_data()

  fig1 = go.Figure(
      go.Scattergeo(
      locations=sorted(netflix_df['country'].unique().tolist()), 
      locationmode='country names',  
      text = country_counts['counts'],
      marker= dict(
        size= country_counts['counts'],
        line_width = 0,
        sizeref = 2,
        sizemode = 'area',
        color='#D90707' # Making the map bubbles red
      ))
  )

  fig2 = go.Figure(go.Pie(
    labels=netflix_df['type'], 
    values=netflix_df['type'].value_counts(),
    marker=dict(colors=['#D90707', '#A60311']), # Making the pie chart two different shades of red
    hole=.4, # Adding a hole to the middle of the chart
    textposition= 'inside', 
    textinfo='percent+label'
  ))

  fig3 = go.Figure(
    go.Scatter(
      x=netflix_df['date_added'].dt.year.value_counts().sort_index().index, 
      y=netflix_df['date_added'].dt.year.value_counts().sort_index(),
      line=dict(color='#D90707', width=3) # Making the line red
    ))

This is how the dashboard looks with the modified markers:

Now, let's move on to modifying our plots' layouts, for which we'll use Plotly’s update_layout inside our create_plots function. With it, we'll be able to change our figures's margins, set their titles and background color, and make other small styling changes.

fig1.update_layout(
  title='Production countries',
  font=dict(family='Raleway', color='white'), # Customizing the font
  margin=dict(t=60, b=30, l=0, r=0), # Changing the margin sizes of the figure
  paper_bgcolor='#363636', # Setting the card color to grey
  plot_bgcolor='#363636', # Setting background of the figure to grey
  hoverlabel=dict(font_size=14, font_family='Raleway'),
  geo=dict(
    framecolor='rgba(0,0,0,0)',
    bgcolor='rgba(0,0,0,0)',
    landcolor='#7D7D7D',
    lakecolor = 'rgba(0,0,0,0)',))

fig2.update_layout(
  title='Content breakdown by type',
  margin=dict(t=60, b=30, l=10, r=10),
  showlegend=False,
  paper_bgcolor='#363636',
  plot_bgcolor='#363636',
  font=dict(family='Raleway', color='white'))

fig3.update_layout(
  title='Content added over time',
  margin=dict(t=60, b=40, l=50, r=50),
  paper_bgcolor='#363636',
  plot_bgcolor='#363636',
  font=dict(family='Raleway', color='white'),
  hoverlabel=dict(font_size=14, font_family='Raleway'))

return fig1, fig2, fig3

Let's now change the background colour of our app to a dark grey. To do so, open theme.css, which is in the Assets section of the App Browser. Inside it, CTRL+F to find the body section, and add the line background-color: #292929; to it. This is how it should look:

body {
  font-family: Roboto, Noto, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4286;
  background-color: #292929;
}

After adjusting the plot sizes and changing our Label's color to white, our dashboard is ready to be shared! All you need to do now is publish your app to make it available to the world.

Clone the App

If you want to check out the source code for our Netflix dashboard, click on the link below and clone the app:

Clone the app

This app, as cloned, will only work if you're on a Personal plan and above, or on a Full Python interpreter trial.

New to Anvil?

Why not have a play with the app builder? It's free! Click here to get started:

Get building