HomeLập trìnhPythonCách nhúng trực...

Cách nhúng trực quan hóa Python tương tác trên trang web của bạn bằng Python và Matplotlib


Trong hướng dẫn freeCodeCamp trước đây, tôi đã giải thích cách tạo trực quan hóa dữ liệu tự động cập nhật trong Python.

Một số độc giả đã liên hệ để hỏi liệu có cách nào để làm cho các hình ảnh trực quan tương tác hay không. May mắn thay, một giải pháp dễ dàng đã có sẵn!

Trong hướng dẫn này, tôi sẽ hướng dẫn bạn cách tạo trực quan hóa dữ liệu tương tác trong Python. Những hình ảnh trực quan này là những ứng cử viên tuyệt vời để nhúng vào blog hoặc trang web của bạn.

Hình ảnh hóa dữ liệu cụ thể mà chúng tôi sẽ làm việc với

Thay vì xây dựng toàn bộ trực quan hóa dữ liệu từ đầu trong bài viết này, chúng ta sẽ làm việc với trực quan hóa mà chúng ta đã tạo trong hướng dẫn trước.

Hình ảnh trực quan sử dụng gấu trúc, matplotlib và Python để trình bày các điểm dữ liệu khác nhau từ 5 ngân hàng giao dịch công khai lớn nhất ở Hoa Kỳ.

Đây là một hình ảnh tĩnh của trực quan hóa mà chúng tôi đã tạo:

hình ảnh-55

Mã thực tế cho hình ảnh được bao gồm bên dưới. Chúng tôi đã đề cập đến vấn đề này trong hướng dẫn trước, nhưng xin lưu ý rằng bạn sẽ cần tạo khóa IEX Cloud API của riêng mình và đưa nó vào IEX_API_Key biến để tập lệnh hoạt động.

########################
#Import dependencies
########################

import pandas as pd
import matplotlib.pyplot as plt

########################
#Import and clean data
########################

IEX_API_Key = ''

tickers = [
            'JPM',
            'BAC',
            'C',
            'WFC',
            'GS',
            ]

#Create an empty string called `ticker_string` that we'll add tickers and commas to
ticker_string = ''

#Loop through every element of `tickers` and add them and a comma to ticker_string
for ticker in tickers:
    ticker_string += ticker
    ticker_string += ','
    
#Drop the last comma from `ticker_string`
ticker_string = ticker_string[:-1]

#Create the endpoint and years strings
endpoints="chart"
years="5"

#Interpolate the endpoint strings into the HTTP_request string
HTTP_request = f'https://cloud.iexapis.com/stable/stock/market/batch?symbols={ticker_string}&types={endpoints}&range={years}y&cache=true&token={IEX_API_Key}'

#Send the HTTP request to the IEX Cloud API and store the response in a pandas DataFrame
bank_data = pd.read_json(HTTP_request)

#Create an empty list that we will append pandas Series of stock price data into
series_list = []

#Loop through each of our tickers and parse a pandas Series of their closing prices over the last 5 years
for ticker in tickers:
    series_list.append(pd.DataFrame(bank_data[ticker]['chart'])['close'])

#Add in a column of dates
series_list.append(pd.DataFrame(bank_data['JPM']['chart'])['date'])

#Copy the 'tickers' list from earlier in the script, and add a new element called 'Date'. 
#These elements will be the column names of our pandas DataFrame later on.
column_names = tickers.copy()
column_names.append('Date')

#Concatenate the pandas Series togehter into a single DataFrame
bank_data = pd.concat(series_list, axis=1)

#Name the columns of the DataFrame and set the 'Date' column as the index
bank_data.columns = column_names
bank_data.set_index('Date', inplace = True)

########################
#Create the Python figure
########################

#Set the size of the matplotlib canvas
fig = plt.figure(figsize = (18,8))

################################################
################################################
#Create subplots in Python
################################################
################################################

########################
#Subplot 1
########################
plt.subplot(2,2,1)

#Generate the boxplot
plt.boxplot(bank_data.transpose())

#Add titles to the chart and axes
plt.title('Boxplot of Bank Stock Prices (5Y Lookback)')
plt.xlabel('Bank')
plt.ylabel('Stock Prices')

#Add labels to each individual boxplot on the canvas
ticks = range(1, len(bank_data.columns)+1)
labels = list(bank_data.columns)
plt.xticks(ticks,labels)

########################
#Subplot 2
########################
plt.subplot(2,2,2)

#Create the x-axis data
dates = bank_data.index.to_series()
dates = [pd.to_datetime(d) for d in dates]

#Create the y-axis data
WFC_stock_prices =  bank_data['WFC']

#Generate the scatterplot
plt.scatter(dates, WFC_stock_prices)

#Add titles to the chart and axes
plt.title("Wells Fargo Stock Price (5Y Lookback)")
plt.ylabel("Stock Price")
plt.xlabel("Date")

########################
#Subplot 3
########################
plt.subplot(2,2,3)

#Create the x-axis data
dates = bank_data.index.to_series()
dates = [pd.to_datetime(d) for d in dates]

#Create the y-axis data
BAC_stock_prices =  bank_data['BAC']

#Generate the scatterplot
plt.scatter(dates, BAC_stock_prices)

#Add titles to the chart and axes
plt.title("Bank of America Stock Price (5Y Lookback)")
plt.ylabel("Stock Price")
plt.xlabel("Date")

########################
#Subplot 4
########################
plt.subplot(2,2,4)

#Generate the histogram
plt.hist(bank_data.transpose(), bins = 50)

#Add a legend to the histogram
plt.legend(bank_data.columns,fontsize=10)

#Add titles to the chart and axes
plt.title("A Histogram of Daily Closing Stock Prices for the 5 Largest Banks in the US (5Y Lookback)")
plt.ylabel("Observations")
plt.xlabel("Stock Prices")

plt.tight_layout()

################################################
#Save the figure to our local machine
################################################

plt.savefig('bank_data.png')

Bây giờ chúng ta đã hiểu về hình ảnh trực quan cụ thể mà chúng ta sẽ làm việc cùng, hãy nói về ý nghĩa của việc hình ảnh hóa tương tác.

Đọc thêm  Danh sách được liên kết trong Python – Được giải thích bằng các ví dụ

Điều đó có nghĩa là gì đối với một hình ảnh trực quan hóa tương tác?

Có hai loại trực quan hóa dữ liệu hữu ích để nhúng vào trang web của bạn.

Loại đầu tiên là một hình ảnh tĩnh. Về cơ bản đây là một hình ảnh – hãy nghĩ .png hoặc .jpg các tập tin.

Loại thứ hai là một hình ảnh động. Những hình ảnh trực quan này thay đổi để đáp ứng với hành vi của người dùng, thường là bằng cách xoay hoặc thu phóng. Trực quan hóa động không được lưu trữ trong .png hoặc .jpg tập tin nhưng thường trong svg hoặc iframe thẻ.

Hướng dẫn này là về cách tạo trực quan hóa dữ liệu động. Cụ thể, hình ảnh chúng tôi muốn tạo sẽ có các đặc điểm sau:

  1. Bạn sẽ nhấp vào một nút ở dưới cùng bên trái để bật chế độ động.
  2. Khi chế độ động được bật, bạn có thể thu phóng và xoay hình ảnh bằng chuột.
  3. Bạn cũng có thể cắt và phóng to một phần cụ thể của hình ảnh trực quan.

Trong phần tiếp theo của hướng dẫn này, bạn sẽ học cách cài đặt và nhập mpld3 thư viện, là phần phụ thuộc Python mà chúng tôi sẽ sử dụng để tạo biểu đồ tương tác của mình.

Cách nhập thư viện mpld3

Để sử dụng mpld3 thư viện trong ứng dụng Python của chúng tôi, có hai bước mà chúng tôi cần hoàn thành trước:

  1. cài đặt mpld3 thư viện trên máy chúng tôi đang làm việc.
  2. Nhập khẩu mpld3 thư viện vào tập lệnh Python của chúng tôi.
Đọc thêm  Các câu lệnh thử và ngoại trừ trong Python – Cách xử lý các ngoại lệ trong Python

Đầu tiên, hãy cài đặt mpld3 trên máy cục bộ của chúng tôi.

Cách dễ nhất để làm điều này là sử dụng pip trình quản lý gói cho Python3. Nếu bạn đã có pip được cài đặt trên máy của bạn, bạn có thể thực hiện việc này bằng cách chạy câu lệnh sau từ dòng lệnh của mình:

pip3 install mpld3

Bây giờ thì mpld3 được cài đặt trên máy của chúng tôi, chúng tôi có thể nhập nó vào tập lệnh Python của mình bằng câu lệnh sau:

import mpld3

Để dễ đọc, cách tốt nhất là bao gồm phần nhập này cùng với phần nhập còn lại của bạn ở đầu tập lệnh của bạn. Điều này có nghĩa là phần nhập của bạn bây giờ sẽ trông như thế này:

########################
#Import dependencies
########################

import pandas as pd
import matplotlib.pyplot as plt
import mpld3

Làm thế nào để chuyển đổi một tĩnh matplotlib Trực quan hóa thành Trực quan hóa dữ liệu tương tác

Các mpld3 chức năng chính của thư viện là lấy một matplotlib trực quan hóa và biến nó thành một số mã HTML mà bạn có thể nhúng vào trang web của mình.

Công cụ chúng tôi sử dụng cho việc này là mpld3‘S fig_to_html tập tin, mà chấp nhận một matplotlib figure đối tượng làm đối số duy nhất của nó và trả về HTML.

Để sử dụng fig_to_html phương pháp cho mục đích của chúng tôi, chỉ cần thêm đoạn mã sau vào cuối tập lệnh Python của chúng tôi:

html_str = mpld3.fig_to_html(fig)
Html_file= open("index.html","w")
Html_file.write(html_str)
Html_file.close()

Mã này tạo HTML và lưu nó dưới tên tệp index.html trong thư mục làm việc hiện tại của bạn. Đây là giao diện của nó khi được hiển thị trên một trang web:

Đọc thêm  Cách theo dõi API Python bằng Pyctuator và SpringBootAdmin

Khi bạn di chuột qua hình ảnh trực quan này, ba biểu tượng sẽ xuất hiện ở dưới cùng bên trái. Biểu tượng bên trái trả lại hình ảnh trực quan về giao diện mặc định của nó. Biểu tượng ở giữa cho phép chế độ động. Biểu tượng bên phải cho phép bạn cắt và thu phóng đến một điểm cụ thể trong trực quan hóa.

Một lỗi thường gặp khi làm việc với gấu trúc và mpld3

Khi tạo trực quan hóa tương tác trong hướng dẫn này, bạn có thể gặp phải lỗi sau do mpld3:

TypeError: array([ 1.]) is not JSON serializable

May mắn thay, có một giải pháp được ghi lại đầy đủ cho lỗi này trên GitHub.

Bạn cần chỉnh sửa tệp _display.py có trong Lib\site-packages\mpld3 và thay thế lớp NumpyEncoder bằng lớp này:

class NumpyEncoder(json.JSONEncoder):
    """ Special json encoder for numpy types """

    def default(self, obj):
        if isinstance(obj, (numpy.int_, numpy.intc, numpy.intp, numpy.int8,
            numpy.int16, numpy.int32, numpy.int64, numpy.uint8,
            numpy.uint16,numpy.uint32, numpy.uint64)):
            return int(obj)
        elif isinstance(obj, (numpy.float_, numpy.float16, numpy.float32, 
            numpy.float64)):
            return float(obj)
        try: # Added by ceprio 2018-04-25
            iterable = iter(obj)
        except TypeError:
            pass
        else:
            return list(iterable)
         # Let the base class default method raise the TypeError
        return json.JSONEncoder.default(self, obj)

Sau khi thay thế này được thực hiện, thì mã của bạn sẽ hoạt động bình thường và index.html tập tin sẽ được tạo thành công.

Suy nghĩ cuối cùng

Trong hướng dẫn này, bạn đã học cách tạo trực quan hóa dữ liệu tương tác trong Python bằng thư viện matplotlib và mpld3. Dưới đây là một bản tóm tắt cụ thể về những gì chúng tôi đã đề cập:

  1. Định nghĩa về trực quan hóa dữ liệu động
  2. Cách cài đặt và nhập khẩu mpld3 thư viện cho Python
  3. Làm thế nào để sử dụng mpld3 thư viện để chuyển đổi một matplotlib trực quan hóa thành hình ảnh động mà bạn có thể nhúng vào trang web của mình
  4. Cách khắc phục một lỗi phổ biến mà người dùng của mpld3 trải nghiệm thư viện

Hướng dẫn này được viết bởi Nick McCullum, người dạy phát triển Python và JavaScript trên trang web của anh ấy.



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status