An Interactive Web Dashboard with Plotly and Flask

To create a truly interactive app with Dash you need to use callbacks. You can achieve the same thing with Plotly and Flask.

It may seem as if I have something against Dash. Honestly, I haven’t; it’s a fine product, comes with a lot of support from Plotly and does what it is intended to do, well.

But, as I attempted to demonstrate in a previous article, there is no need to write HTML in Python (as Dash requires you to do) when you can write it in HTML! And, I would now add, there’s no need for additional layers of complexity in a Flask app — fundamentally, Dash is a Flask app — when a smidgen of Javascript and HTML will do the same job.

In my previous article I demonstrated that you can create a simple web app incorporating Plotly charts without Dash. Instead you can use a combination of Flask and a web page template. This also gives you the advantage to create multi-page apps.

But Dash also allows you to create apps that are interactive by loading new data into a chart using callback functions. So the question is can we easily do this with our Plotly plus Flask model? And, of course, the answer is ‘Yes’. Anything you can do with Dash you can also do with its underlying technologies: Python, Flask, HTML and Javascript.

Is it really easier, though?

That is for you to judge, but from my (possibly prejudiced) point of view it is. And if you need to learn just a tiny bit of HTML or Javascript that you have not come across before, then fine, you may find a use for it in the future.

To demonstrate this, we are going to very quickly run through a bare-bones web app that displays the GDP per capita for a range of countries. Where the interactivity comes in is that you can type in a new country name and the chart will automatically update by calling back to the server and reloading the chart with new data.

The app looks like this:

It’s based on data from the Gapminder Foundation that is included in the Plotly library and used in some of their example programs.

The app is really very small and quite simple but demonstrates the techniques that you can use (and gives you code you can reuse) to create impressive interactive dashboard apps. You will need to use a little HTML, a tiny bit of Javascript and know the very basics of how to create and run a Flask app (see here for a simple introduction: How to Create and Run a Flask App).

You can find a link to the code at the end of this article — download it as a zip file, or access it from my Github repository.

#plotly #data-visualization #ajax #dash #flask

What is GEEK

Buddha Community

An Interactive Web Dashboard with Plotly and Flask
Ashish parmar

Ashish parmar

1627043546

Evolution in Web Design: A Case Study of 25 Years - Prismetric

The term web design simply encompasses a design process related to the front-end design of website that includes writing mark-up. Creative web design has a considerable impact on your perceived business credibility and quality. It taps onto the broader scopes of web development services.

Web designing is identified as a critical factor for the success of websites and eCommerce. The internet has completely changed the way businesses and brands operate. Web design and web development go hand-in-hand and the need for a professional web design and development company, offering a blend of creative designs and user-centric elements at an affordable rate, is growing at a significant rate.

In this blog, we have focused on the different areas of designing a website that covers all the trends, tools, and techniques coming up with time.

Web design
In 2020 itself, the number of smartphone users across the globe stands at 6.95 billion, with experts suggesting a high rise of 17.75 billion by 2024. On the other hand, the percentage of Gen Z web and internet users worldwide is up to 98%. This is not just a huge market but a ginormous one to boost your business and grow your presence online.

Web Design History
At a huge particle physics laboratory, CERN in Switzerland, the son of computer scientist Barner Lee published the first-ever website on August 6, 1991. He is not only the first web designer but also the creator of HTML (HyperText Markup Language). The worldwide web persisted and after two years, the world’s first search engine was born. This was just the beginning.

Evolution of Web Design over the years
With the release of the Internet web browser and Windows 95 in 1995, most trading companies at that time saw innumerable possibilities of instant worldwide information and public sharing of websites to increase their sales. This led to the prospect of eCommerce and worldwide group communications.

The next few years saw a soaring launch of the now-so-famous websites such as Yahoo, Amazon, eBay, Google, and substantially more. In 2004, by the time Facebook was launched, there were more than 50 million websites online.

Then came the era of Google, the ruler of all search engines introducing us to search engine optimization (SEO) and businesses sought their ways to improve their ranks. The world turned more towards mobile web experiences and responsive mobile-friendly web designs became requisite.

Let’s take a deep look at the evolution of illustrious brands to have a profound understanding of web design.

Here is a retrospection of a few widely acclaimed brands over the years.

Netflix
From a simple idea of renting DVDs online to a multi-billion-dollar business, saying that Netflix has come a long way is an understatement. A company that has sent shockwaves across Hollywood in the form of content delivery. Abundantly, Netflix (NFLX) is responsible for the rise in streaming services across 190 countries and meaningful changes in the entertainment industry.

1997-2000

The idea of Netflix was born when Reed Hastings and Marc Randolph decided to rent DVDs by mail. With 925 titles and a pay-per-rental model, Netflix.com debuts the first DVD rental and sales site with all novel features. It offered unlimited rentals without due dates or monthly rental limitations with a personalized movie recommendation system.

Netflix 1997-2000

2001-2005

Announcing its initial public offering (IPO) under the NASDAQ ticker NFLX, Netflix reached over 1 million subscribers in the United States by introducing a profile feature in their influential website design along with a free trial allowing members to create lists and rate their favorite movies. The user experience was quite engaging with the categorization of content, recommendations based on history, search engine, and a queue of movies to watch.

Netflix 2001-2005 -2003

2006-2010

They then unleashed streaming and partnering with electronic brands such as blu-ray, Xbox, and set-top boxes so that users can watch series and films straight away. Later in 2010, they also launched their sophisticated website on mobile devices with its iconic red and black themed background.

Netflix 2006-2010 -2007

2011-2015

In 2013, an eye-tracking test revealed that the users didn’t focus on the details of the movie or show in the existing interface and were perplexed with the flow of information. Hence, the professional web designers simply shifted the text from the right side to the top of the screen. With Daredevil, an audio description feature was also launched for the visually impaired ones.

Netflix 2011-2015

2016-2020

These years, Netflix came with a plethora of new features for their modern website design such as AutoPay, snippets of trailers, recommendations categorized by genre, percentage based on user experience, upcoming shows, top 10 lists, etc. These web application features yielded better results in visual hierarchy and flow of information across the website.

Netflix 2016-2020

2021

With a sleek logo in their iconic red N, timeless black background with a ‘Watch anywhere, Cancel anytime’ the color, the combination, the statement, and the leading ott platform for top video streaming service Netflix has overgrown into a revolutionary lifestyle of Netflix and Chill.

Netflix 2021

Contunue to read: Evolution in Web Design: A Case Study of 25 Years

#web #web-design #web-design-development #web-design-case-study #web-design-history #web-development

An Interactive Web Dashboard with Plotly and Flask

To create a truly interactive app with Dash you need to use callbacks. You can achieve the same thing with Plotly and Flask.

It may seem as if I have something against Dash. Honestly, I haven’t; it’s a fine product, comes with a lot of support from Plotly and does what it is intended to do, well.

But, as I attempted to demonstrate in a previous article, there is no need to write HTML in Python (as Dash requires you to do) when you can write it in HTML! And, I would now add, there’s no need for additional layers of complexity in a Flask app — fundamentally, Dash is a Flask app — when a smidgen of Javascript and HTML will do the same job.

In my previous article I demonstrated that you can create a simple web app incorporating Plotly charts without Dash. Instead you can use a combination of Flask and a web page template. This also gives you the advantage to create multi-page apps.

But Dash also allows you to create apps that are interactive by loading new data into a chart using callback functions. So the question is can we easily do this with our Plotly plus Flask model? And, of course, the answer is ‘Yes’. Anything you can do with Dash you can also do with its underlying technologies: Python, Flask, HTML and Javascript.

Is it really easier, though?

That is for you to judge, but from my (possibly prejudiced) point of view it is. And if you need to learn just a tiny bit of HTML or Javascript that you have not come across before, then fine, you may find a use for it in the future.

To demonstrate this, we are going to very quickly run through a bare-bones web app that displays the GDP per capita for a range of countries. Where the interactivity comes in is that you can type in a new country name and the chart will automatically update by calling back to the server and reloading the chart with new data.

The app looks like this:

It’s based on data from the Gapminder Foundation that is included in the Plotly library and used in some of their example programs.

The app is really very small and quite simple but demonstrates the techniques that you can use (and gives you code you can reuse) to create impressive interactive dashboard apps. You will need to use a little HTML, a tiny bit of Javascript and know the very basics of how to create and run a Flask app (see here for a simple introduction: How to Create and Run a Flask App).

You can find a link to the code at the end of this article — download it as a zip file, or access it from my Github repository.

#plotly #data-visualization #ajax #dash #flask

Web development with python and flask: part 3

In this part of the series, we will be taking a look at the HTTP protocol, request/response objects, their application in flask, properties, and their related methods. We will take steps to import it from the flask module, use its properties, and look at some of its related usages

Web applications implement one of the internet data and message exchange architectures that is based on HTTP protocol. The HTTP protocol is just one of the many application layers of TCP/IP. The TCP/IP(Transmission Control Protocol/Internet Protocol) is used as a standard for transmitting data over networks. In simple terms, HTTP has rules, properties, and methods that implement the transmission of messages in form of hyperlinks over the communication structures enforced by the TCP/IP.

.You must know that the internet is based on connected physical computational devices over either copper wires, fiber optical cables, wireless, and other media to form data transmission and retrieval systems across the globe. Trust me, that is a whole career field in itself and we are not interested in its elaborate ramblings in this post.

#flask #web developemnt #flask #flask requests #webdevelopment

How Jinja2 templates work: Python and flask web development part 5

After receiving data from the user, we may either want to display it back to the user or store it in the database for later usage after processing it with our Python code. What we have at hand is python code data that the HTML has no business or no way coded to handle. These are two different worlds, the front end, and backend respectively. We need a way to call and interpolate these python objects into the Html template for the user to derive some business meaning out of it. We need a Jinja2 templating engine for that job. Yes, we could eliminate Jinja2 by turning our flask app to an API and having the front end handled by AJAX technologies or any front end frameworks like React, Vue, Angular, etc. In this post, we will be looking at how Jinja2 works and how best to use it in our flask applications.

In this tutorial we are going to look at how the jinja templating engine works. We will look at how it handles variable or python objects interpolation, conditional logic and finally template inheritance.

TABLE OF CONTENTS

  1. What is a template
  2. What is jinja and its features
  3. Jinja and its syntax
  4. Template inheritance
  5. Conclusion

Flask is a back end web development framework that depends on python. Technically we can’t have any backend code presented in the frontend html structures without the use of some interpolation techniques or technology. Jinja2 is that technique** or interpolation technology** developed in python.

#flask #web developemnt #flask #handling user requests #jinja2 templates #web development

Web Visualization with Plotly and Flask.

Why use Dash when Plotly plus Flask is easy and more flexible

Why would you want to write HTML in Python? It baffles me. But that is what you need to do if you want to write a Dash app.

While I understand that there is a certain amount of satisfaction in having all your code in a single file, it seems to me that if you know enough about HTML to code it in a different language then you certainly know enough to write it in HTML!

I’d love for Dash to be the solution to writing web visualization apps but I’m not convinced.

Consider the following:

  1. A Dash app is fundamentally a Flask app that incorporates Plotly.
  2. Writing an actual Flask app that uses Ploty is not difficult.
  3. Writing a Flask app gives you more control over what you write and is more flexible.

So, while acknowledging that Dash is a well constructed and well-intentioned tool with which you can create sophisticated and impressive web apps, I’d like to present what I think is a simpler solution — at least for simple web apps.

We are going to see just how straightforward it is to build a multi-page web app with Flask that contains Plotly charts (a task that is not straightforward with the open source version of Dash).

But first let’s do a quick comparison of a simple Dash app and it’s Flask equivalent.

#data-visualization #web-app-development #flask #plotly #dash