Using Django to Build Powerful Web Apps for Data Science

ByJordan Brown

Django is a popular Python web framework that is well-suited for data science projects and building analytical web applications. It provides a powerful set of tools out of the box that allows data scientists to go from an initial dataset to an interactive web app to explore that data without needing to be an expert web developer.

In this guide, we‘ll walk through an example project that demonstrates how to leverage Django to build a web application to load, explore, visualize and gain insights from a real-world dataset. Along the way, we‘ll highlight the key features of Django and how they can be applied to data science projects.

Why Use Django for Data Science?

Before diving into the technical details, it‘s worth taking a step back to consider why you might want to use a web framework like Django for doing data science in the first place. After all, many data scientists may be more comfortable working in Jupyter notebooks or writing standalone scripts.

The main reason is that web apps provide an interactive interface for exploring data and sharing insights with others. Instead of just generating a static report or visualization, a web app allows users to dynamically query and interact with the data in their browser. This could include things like:

  • Searching and filtering a large dataset
  • Updating charts and graphs based on user input
  • Drilling down into interesting data points for more detail
  • Segmenting data by various dimensions
  • Collecting new data points via user input

Web apps also make it easy to share your work with a wide audience. Rather than sending out a Jupyter notebook or PDF report, you can simply send a URL that anyone can access from their browser. This allows both technical and non-technical stakeholders to benefit from your data science work.

Django in particular is a good fit for data science projects for a few reasons:

  1. It‘s written in Python, which is the de facto language of data science. This means you can easily integrate data science libraries like pandas, NumPy, SciPy, etc. into your web app.

  2. It has a powerful built-in ORM (Object-Relational Mapper) that makes it easy to interact with databases using Python code instead of writing raw SQL queries.

  3. It includes a lot of useful built-in features like an automatic admin interface, user authentication, caching, and security features that reduce the amount of boilerplate code you need to write.

  4. It has a large ecosystem of add-on packages that provide additional functionality for things like visualization, exporting data, creating REST APIs, and more.

Now that we understand why Django is useful for data science, let‘s take a closer look at how to actually use it to build a data science web app.

Example Project: Building a Web App to Explore US Census Data

To make things concrete, let‘s consider an example project of building a web application to load and explore a dataset of US census data. The goal will be to allow users to visualize various demographic statistics for each US state and county.

Here are the key steps we‘ll follow to build this application:

Step 1: Setting Up a Django Project

The first step is to create a new Django project and application. If you haven‘t already installed Django, you can do so using pip:

$ pip install django

Then, navigate to the directory where you want to store your code, and run the following commands to create a new project:

$ django-admin startproject census_project
$ cd census_project
$ python manage.py startapp census_app

This will create a new Django project in a directory called census_project, and a new application within that project called census_app.

Step 2: Loading the Dataset

Next, we need to download the census data and load it into a database that Django can interact with. For this example, we‘ll use a SQLite database, which is Django‘s default and doesn‘t require any additional setup.

You can download the census data in CSV format from various government websites. For this example, we‘ll use the 2010 Census Summary File 1, which you can access here:

https://www2.census.gov/programs-surveys/decennial/2010/data/

Once you‘ve downloaded the ZIP file, extract the contents and place the CSV files in a data directory within your Django project.

Then, we can use Django‘s inspectdb management command to automatically generate Django models from the CSV files:

$ python manage.py inspectdb --database default > census_app/models.py

This will inspect the CSV files and generate a models.py file with Django model definitions that match the schema of the census data.

Step 3: Configuring the Admin

One of the most powerful features of Django is its automatic admin interface, which provides a web-based interface for viewing and managing your application‘s data. To use it, we need to register our models with the admin site.

Open the census_app/admin.py file and register the models you want to be able to access in the admin:

from django.contrib import admin
from .models import State, County

admin.site.register(State)
admin.site.register(County)

Then run the following commands to create a superuser account that can access the admin:

$ python manage.py createsuperuser

Enter a username, email, and password when prompted. Then start the Django development server:

$ python manage.py runserver

Navigate to http://localhost:8000/admin/ in your browser, and log in with the superuser account you just created. You should see a list of the census models, and be able to view and edit the records.

Step 4: Exploring the Data

Now that we have the census data loaded into our Django application, we can start building views and templates to explore it. Let‘s start by creating a view that displays a list of all the states, along with some basic demographic information for each one.

Open the census_app/views.py file and add the following code:

from django.shortcuts import render
from .models import State

def state_list(request):
    states = State.objects.all()
    return render(request, ‘state_list.html‘, {‘states‘: states})

This defines a view function called state_list that retrieves all the State objects from the database and passes them to a template called state_list.html.

Create a new file called state_list.html in the census_app/templates/ directory, and add the following code:



<table>
  <thead>
    <tr>
      <th>State</th>
      <th>Population</th>
      <th>Median Age</th>
      <th>Per Capita Income</th>
    </tr>
  </thead>
  <tbody>
    {% for state in states %}
    <tr>
      <td>{{ state.name }}</td>
      <td>{{ state.population }}</td>
      <td>{{ state.median_age }}</td>
      <td>{{ state.per_capita_income }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>

This template uses Django‘s template language to loop through the list of states and display some of the demographic information for each one in an HTML table.

Finally, we need to hook up this view to a URL so that we can access it in the browser. Open the census_project/urls.py file and add the following code:

from django.contrib import admin
from django.urls import path
from census_app.views import state_list

urlpatterns = [
    path(‘admin/‘, admin.site.urls),
    path(‘‘, state_list, name=‘state_list‘),
]

This maps the root URL of the application to the state_list view function.

Start the Django development server again and navigate to http://localhost:8000/ in your browser. You should see a table with the list of states and their demographic information.

Step 5: Visualizing the Data

While tables are useful for displaying raw data, visualizations can be much more effective for understanding patterns and trends. Let‘s add a view that displays a bar chart of the population of each state.

First, we need to install a charting library that we can use to generate the visualization. For this example, we‘ll use Plotly, which is a popular open-source library for creating interactive web-based visualizations. You can install it using pip:

$ pip install plotly

Then, update the state_list view function to generate a bar chart of the state populations:

import plotly.graph_objs as go

def state_list(request):
    states = State.objects.all()

    state_names = [state.name for state in states]
    state_pops = [state.population for state in states]

    bar_chart = go.Figure(
        data=[
            go.Bar(
                x=state_names,
                y=state_pops
            )
        ],
        layout=go.Layout(
            title=‘State Populations‘,
            xaxis=dict(title=‘State‘),
            yaxis=dict(title=‘Population‘)
        )
    )

    chart_html = bar_chart.to_html(full_html=False)

    return render(request, ‘state_list.html‘, {‘states‘: states, ‘chart_html‘: chart_html})

Here‘s what‘s going on in this updated view function:

  1. We extract the state names and populations into separate lists.
  2. We create a Plotly Figure object that represents a bar chart, passing in the state names and populations as the x and y values, respectively.
  3. We customize the layout of the chart by specifying a title and axis labels.
  4. We generate the HTML code for the chart using Plotly‘s to_html() method.
  5. We pass the HTML code to the template as a context variable called chart_html.

Finally, we need to update the state_list.html template to display the chart:



<!-- Display the bar chart -->
<div id="state-pop-chart">
  {{ chart_html|safe }}
</div>

<table>
  <!-- ... -->
</table>

The {{ chart_html|safe }} syntax tells Django to render the HTML code for the chart directly in the template, without escaping any of the characters.

Refresh the page in your browser, and you should see a bar chart displaying the population of each state above the table.

Step 6: Adding Interactivity

One of the advantages of using a web-based interface for data exploration is that it allows for interactivity. Let‘s add a feature that allows the user to click on a state in the bar chart to view more detailed information about that state.

First, we‘ll create a new view function that displays the details for a single state:

def state_detail(request, state_id):
    state = State.objects.get(pk=state_id)
    return render(request, ‘state_detail.html‘, {‘state‘: state})

This view function takes a state_id parameter, which is the primary key of the state to display. It retrieves the corresponding State object from the database and passes it to a new template called state_detail.html.

Create a new file called state_detail.html in the census_app/templates/ directory, and add the following code:



<table>
  <tr>
    <th>Population</th>
    <td>{{ state.population }}</td>
  </tr>
  <tr>
    <th>Median Age</th>
    <td>{{ state.median_age }}</td>
  </tr>
  <tr>
    <th>Per Capita Income</th>
    <td>{{ state.per_capita_income }}</td>
  </tr>
</table>

<a href="{% url ‘state_list‘ %}">Back to state list</a>

This template displays the name of the state as a heading, followed by a table with more detailed demographic information. It also includes a link back to the state list page.

Next, we need to update the state_list view function to add hyperlinks to the state names in the bar chart:

bar_chart = go.Figure(
    data=[
        go.Bar(
            x=state_names,
            y=state_pops,
            hovertext=[f‘<a href="/states/{state.pk}/">{state.name}</a>‘ for state in states],
            hoverinfo=‘text‘
        )
    ],
    # ...
)

Here, we‘re using Plotly‘s hovertext parameter to specify the HTML code for the hyperlinks that will be displayed when the user hovers over each bar in the chart. The {state.pk} syntax is a placeholder for the primary key of each state, which will be used to construct the URL for the state detail page.

We also need to update the census_project/urls.py file to add a new URL pattern for the state detail view:

urlpatterns = [
    # ...
    path(‘states/<int:state_id>/‘, state_detail, name=‘state_detail‘),
]

This pattern includes a captured group <int:state_id>, which will match any integer value and pass it to the state_detail view function as a parameter.

Finally, we need to update the state_list.html template to use the url template tag to generate the hyperlinks:

<td><a href="{% url ‘state_detail‘ state.pk %}">{{ state.name }}</a></td>

Refresh the page in your browser, and you should now be able to click on a state name in the table or bar chart to view more detailed information about that state.

Next Steps

Congratulations, you now have a working Django application that allows you to explore and visualize US census data! But there are many more features you could add to make it even more useful. Here are a few ideas:

  • Add the ability to compare demographic statistics across multiple states or counties
  • Allow users to filter and sort the data based on various criteria
  • Use Django‘s caching framework to speed up the loading of large datasets
  • Integrate machine learning models to make predictions or recommendations based on user input
  • Deploy the application to a production web server so that it can be accessed by a wider audience

To learn more about web development with Django and how to integrate it with data science workflows, check out the following resources:

With the power and flexibility of Django, the possibilities for building data-driven web applications are endless. I encourage you to experiment with different datasets and features, and see what insights you can uncover!

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

You May Like to Read,

Similar Posts