I know that I could just write a Python script to output simple HTML, but is that really the best way? I would like to be able to sort the table by various columns. I have years of programming experience (C, Java, etc.), but have very little web development experience. Thanks in advance. Learn how to develop GUI applications using Python Tkinter package, In this tutorial, you'll learn how to create graphical interfaces by writing Python GUI examples, you'll learn how to create a label, button, entry class, combobox, check button, radio button, scrolled text, messagebox, spinbox, file dialog and more. Export SPOTIPYCLIENTID='your-spotify-client-id' export SPOTIPYCLIENTSECRET='your-spotify-client-secret' export SPOTIPYREDIRECTURI='your-app-redirect-url' Now let’s try running a demo script. If you're unable to download the app, you can play music from your browser using our web player. Mobile and tablet. To listen to music on the go, download Spotify from the Google Play or Apple app store. Spotify on Android with Google Play Spotify on iOS with the AppStore.
What is the framework
Regardless of the sphere you work in, one of your most important tasks is to create a fast, good-looking website. Today, almost every business needs a website, which acts as a sort of business card for a company or online service. It helps you engage with customers, promote your business, increase sales and so on. In every case, the website should be fast, scalable and dynamic.
When creating a website, you typically need to work with roughly the same set of basic components: ways to manage user authorizations (account creation, login); a user dashboard; file downloading and uploading, etc. If the tasks are the same, why not make them easier, and thereby reduce the cost of development? With this in mind, web frameworks appeared on the scene as a set of components designed to facilitate and simplify website creation.
Django Advantages
This web framework is intended to create highly scalable web applications or websites with a constantly growing audience (e.g. content-based or news sites). Django perfectly works as is and provides users with a range of options to create Python-based web-applications including a user dashboard, various database supports (SQLite, PostgresSQL, MySQL), admin functions, and more.
Famous websites using Django
Using the following list of websites built with Django, we will analyze the main benefits of implementing this framework. Consider these sites not only as examples, but as inspiration for what you might apply in your own projects.
Disqus
One of the greatest projects made with Django. It allows you to implement comments and discussion options on your site, analyze audience activity and customize ad serving. Using the Django framework allowed the team not only to create the website quickly, but to keep scaling it for millions of new users. Now the Disqus team uses other frameworks as well, but Django continues to be a top choice due to its ever-growing community and multiple ready-to-implement options.
Screenshot from Disqus
One of the most famous and fast-growing social networks, Instagram is another example of a website built with Python+Django. Why? Instagram processes enormous amounts of data and user interactions (likes, shares, etc.). With Django, the Instagram team can handle all of this, in addition to benefitting from ready-to-implement instruments that allow them to concentrate on UI and UX without having to think about the technology that makes them work.
Spotify
Just like iTunes, Spotify changed the way people listen to, share and purchase music. When using it, you can access your music library everywhere and on any device. The developers chose Django for two reasons:
With Django, they got not only a full range of Python features, but also made the most of it.
Screenshots of Spotify website
YouTube
The site that clearly needs no introduction. It was First built with PHP, but rapid audience growth and the necessity to implement new features fast led the team join the Django community. And the choice was fully justified, as audience growth hasn’t stopped (luckily for them), and new features appear very often (luckily for us).
The Washington Post
It’s interesting to know that Django was initially created to support the content application for the Lawrence Journal-World. Nowadays, The Washington Post, The Guardian, The New York Times and other newspaper sites that use Django are very scalable and can handle the large amounts of data generated by their daily audience.
BitBucket
Launched back in 2008, this cloud-based Git repository attracted millions of developers. With 17 million requests and 6 million repositories in a year, it is one of the most heavily loaded Django-based web applications.
The BitBucket team opted to use Django for several reasons. The first one is the thousands of developers in its community. The second reason, which we referred to earlier, is Django’s suite of ready-to-implement solutions. Thus, BitBucket can take what they need and spend more time thinking about how to make its product even better.
Screenshots of BitBucket
DropBox
The most famous and popular cloud-based storage app for documents, video, graphics, and so on. You can access your files anywhere and from any device (when you are online, of course).
Python was used to make the backend and client desktop software. It allowed the team to come up with the product relatively quickly. Using Django, the developers had an opportunity to add the user history option, synchronize an account across different devices, and, most importantly, add the file sharing option.
Eventbrite
Another Django-based website is Eventbrite, a ticketing service and platform to manage events. Originally built using Python and in-house frameworks, it later moved to Django to cope with the platform’s rapid audience growth and interaction volumes. Thanks to Django’s scalability, Eventbrite, like many other websites built with Django, can adjust to any audience volume and provide users with new updates on a constant basis.
Mozilla
One of the most popular browsers, Mozilla, needs to cope with hundreds of millions of queries every month. Given the number of queries they receive over API, it’s easy to understand why the team decided to move from PHP+CakePHP to Python+Django. Now, the Mozilla support website and all the add-ons for their browser are powered by Django.
One of the most popular websites on Django. Thanks to this framework, Pinterest users can subscribe to other users and share their boards.
Screenshots of Pinterest
Python & Django developmentYour chance to enter the market fasterDjango-based websites: More to follow
Of course, the number of websites made on Django is far greater than 10. In addition to the ones from our list, pay your attention to the following resources:
Django is a perfect solution for both startups and large companies that aim to deliver their products as quickly as possible and at efficient cost. Here you may find more examples of successful projects made with Django. With the help of this framework, you can not only create a website, but also enrich it with new features and updates and scale it for a larger audience.
Introduction
Python’s visualization landscape is quite complex with many availablelibraries for various types of data visualization. In previous articles, Ihave covered several approaches for visualizing data in python. These optionsare great for static data but oftentimes there is a need to create interactivevisualizations to more easily explore data. Trying to cobble interactive chartstogether by hand is possible but certainly not desirable when deployment speedis critical. That’s where Dash comes in.
Dash is an open source framework created by the plotly team thatleverages Flask, plotly.js and React.js to build custom data visualization apps.This article is a high level overview of how to get started with dash to builda simple, yet powerful interactive dashboard.
What is Dash
In June of 2017, plotly formally released Dash as an open source library forcreating interactive web-based visualizations. The library is built on top ofwell established open source frameworks like flask for serving the pages and React.jsfor the javascript user interface. The unique aspect of this library isthat you can build highly interactive web application solely using python code.Having knowledge of HTML and javascript is useful but certainly not required toget a nice display with a minimal amount of coding.
The other benefit of this approach is that by using python, it is simple to incorporateall the power and convenience of pandas (and other python tools) for manipulatingthe data. Another nice benefit of this approach is that the user can accessall the plotting capabilities already available through plotly’s existing framework.
Finally, I am very happy to see this open source model adopted bycompanies. For those individuals that just want to use the open source tools,they are hosted on github like so many other packages. However, if someone wants/needsformal support there is a dedicated company behind the package that providesadditional value added support such as training and large scale deployments.
Getting Started
As of the time of this article (October 2017), the installation instructionsfor Dash were pretty straightforward. I installed the specified dependenciesvia pip:
In the future, I would recommend double checking the installation guide to make surethat the correct versions are being used.
In order to make sure everything was working properly, I created a simple app.pyfile as describe in the getting started docs and tried running it:
By opening up a browser and pointing to the url, I could see a nice interactivebar chart as shown in the docs. This confirmed that all was installed and workingas expected. The next step was building my own version.
A Stacked Bar Chart
In order to build a little more complex example, I decided to use the datafrom the Creating PDF Reports article to build an interactive bar chart thatshows order status by customer.
The first step in creating the app is to bring in all the dash modules as well as pandasfor reading and manipulating the data. I saved this file as
stacked_bar_app.py :
If you are following along closely, you may notice that I am importing the
plotly.graph_objs in this example whereas the documentation usesdcc.graph to build the plot. As I was going through this article, I feltthat it was easier to use the plotly graph object since there were a lot more examplesof using it than there were the plain dcc.graph for the simple cases.It’s a matter of preference but it seemed a little more straightforward to meduring the creation of these examples to use the plotly graph objects.
I decided to use an example where the data was not just a simple flat file thatneeded to be plotted. There is a pivot that needs to happen to get the data ina format where I can stack the bars. This is pretty easy with the pivot_table
Now that the data is simply tabulated by customer and status, we can build outthe bars that show the various customer status counts.
The convention for plotly is that each item being plotted is usually called a
trace .In this example, we want to plot Declined, Pending, Presented and Won as stacked barcharts so we need a trace for each one. Because we pivoted the data, the customer nameis in the index and the individual values can be accessed through the hierarchical index on thecolumn. Finally, the name will be used on the legend to describe the trace.
Now that we have set everything up, we can build the actual dash app.
The basic structure of this code is to build the app, layout the HTML componentsand create the figure dictionary which contains the instructions to build thegraph as well as provide other layout options.
The most challenging aspect of this is the nesting of the HTML components. I likethe fact that it was easy to get started without having to create the standard HTML/CSS/JSboilerplate needed for a modern web app. However, I do recommend using a good editor soit is easy to manage the code style and match the brackets and parentheses.
After laying out the HTML components, the next step is to define the figure usinga dictionary that contains the
figure as well as the data andlayout options. In this case, the layout was needed to define that the barswere stacked and provide an overall title.
Once the app is laid out, we need to make sure it can run:
Here is a quick animation that shows all the interactive options you get for freeby using this framework.
After typing:
You can get this nice interactive chart:
The entire code looks like this:
It is pretty amazing when you think about how much interactivity you can getwith a fairly simple application that weighs in around 33 lines of code. Forfuture reference, the code is available on github.
The other really useful side effect of this approach is that all the hard workaround making this responsive and scalable on different browsers is alreadytaken care of for you. No additional CSS/JS work required. Pure python all the way!
More Complex Example
The above example goes a little bit further than the first demo in the documentation.The real power of Dash though is its ability to do more complex interactions.Dash provides several interactive components out of thebox including Dropdowns, Multi-Select Dropdowns, Radio Buttons, Checkboxes, Sliders,and Text Input. All of them can be easily constructed and tied into your plots todrive various interactive options.
For the more complex demo, we can modify the app to allow the userto select one of the managers via a dropdown and view the single manager’s results only.
For this example, I will create a file called
stacked_bar_interactive.py that starts out in a similar way to the past example:
Now that the data is read in, we need to get a list of all the managers inorder to populate the dropdown which can be done using pandas
unique function.
The next block of code will create the app and add the layout which will includea
dcc.Dropdown to define the manager dropdown field.
There a couple of items to note in this section. The
dropdown needsto have an id defined that can be referenced later to drive our interactivity.You may also notice that the dcc.Graph code only contains an id and not the rest of the content we saw earlier. Since this is an interactive plotthe dcc.Graph acts as a placeholder that we will define in a moment.
The final aspect of this section is that there is a
style attribute whichis a convenient way to make sure the component (in this case the dropdown) isonly 25% of the screen and does not span the entire browser.
Simple Python Web App
Now that the layout is completed, we can build up the interactive componentsby adding a callback decorator to a function that manipulates the data andreturns a dictionary. This resulting dictionary looks like the
figure dictionary defined in the simpler example above so the basic concept continuesto build upon itself.
Creating Web Apps With Python
This looks a little complex but all it is doing is providing a wrapperaround the
update_graph function that defines an output and an input. Inthis case the output is the funnel-graph and the input Manager. In other words this decorator knows how to link the drop down definition to thefunction and take the output and place it in the dcc.Graph . This littlebit of decorator magic is where the real power of Dash can be seen. It may seem alittle complex at first but the basic concept is straightforward and once you understandit, you can really build some complex interactive visualizations.
The rest of the code manipulates the data based on the Manager drop downselection and displays the results.
This portion of the function filters the data based on the dropdown to includeonly a subset of the managers - or include all managers is the default is selected.After filtering the dataframe, the code pivots the data to construct the tabularresults similar to the earlier example.
The next portion of the code defines the traces:
Nothing new here.
The final step is to return a dictionary with the figure and layout defined. Thedecorator we defined earlier will make sure that the updated chart gets includedin the output display.
The final step is to make sure the app runs:
So, what does this awesome app look like? Here it is:
Here is the final app:
This application is about 68 lines of code which is not too bad when you considerhow much is being done:
Python For Web App
Here is the link to the github code.
Final Thoughts
I am excited to see how the Dash framework continues to grow and developover time. It is a very powerful tool for quickly building web based visualizationtools without having a lot of knowledge of javascript and other web technologies.The nice benefit of the framework is that the default approach is very responsiveand provides ability to save, zoom, pan and interact with the display withoutdoing any extra work. I can see this being a really useful option when peopleare struggling with how to present their visualizations to their colleagues ormake an application that allows non-technical individuals to view their results.
Python Web App TutorialCommentsComments are closed.
|
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |