Chào mừng bạn đến với phần ba của loạt bài hướng dẫn trực quan hóa dữ liệu dựa trên web với Dash. Cho đến thời điểm này, chúng ta đã học cách tạo một biểu đồ đơn giản và cách cập nhật động các thành phần HTML trong thời gian thực mà không cần làm mới trang. Mặc dù chúng tôi chỉ xuất lại cùng một văn bản khi chúng tôi nhập, chúng tôi cũng có thể áp dụng thêm một số logic cho đầu vào và xuất bất kỳ thứ gì, không chỉ văn bản, chẳng hạn như biểu đồ. Đó là những gì chúng ta sẽ làm ở đây
Tôi sẽ yêu cầu chúng ta sử dụng Pandas và chúng ta sẽ lấy một số thông tin về chứng khoán, nhưng bạn có thể sử dụng bất cứ thứ gì bạn muốn. Bất cứ khi nào tôi làm ví dụ về tài chính, mọi người đều phàn nàn vì họ không hiểu về tài chính. Nó chỉ là ngày tháng và giá trị. Bạn không cần phải đọc quá sâu về nó, tôi hứa. Để làm theo chính xác, bạn sẽ cần
Open High Low Close Volume Date 2015-01-02 222.87 223.25 213.26 219.31 4764443 2015-01-05 214.55 216.50 207.16 210.09 5368477 2015-01-06 210.06 214.20 204.21 211.28 6261936 2015-01-07 213.35 214.78 209.78 210.95 2968390 2015-01-08 212.81 213.80 210.01 210.62 34425091 và
Open High Low Close Volume Date 2015-01-02 222.87 223.25 213.26 219.31 4764443 2015-01-05 214.55 216.50 207.16 210.09 5368477 2015-01-06 210.06 214.20 204.21 211.28 6261936 2015-01-07 213.35 214.78 209.78 210.95 2968390 2015-01-08 212.81 213.80 210.01 210.62 34425092. Lấy chúng
Open High Low Close Volume Date 2015-01-02 222.87 223.25 213.26 219.31 4764443 2015-01-05 214.55 216.50 207.16 210.09 5368477 2015-01-06 210.06 214.20 204.21 211.28 6261936 2015-01-07 213.35 214.78 209.78 210.95 2968390 2015-01-08 212.81 213.80 210.01 210.62 34425093
Bạn đã biết mọi thứ bạn cần biết để thực hiện tất cả những điều này, ngoại trừ việc bạn có thể chưa biết cách lấy dữ liệu từ trình đọc dữ liệu của gấu trúc. Hãy làm điều đó thật nhanh
import datetime import pandas_datareader.data as web start = datetime.datetime[2015, 1, 1] end = datetime.datetime.now[] df = web.DataReader["TSLA", 'morningstar', start, end] df.reset_index[inplace=True] df.set_index["Date", inplace=True] df = df.drop["Symbol", axis=1] print[df.head[]]
đầu ra
Open High Low Close Volume Date 2015-01-02 222.87 223.25 213.26 219.31 4764443 2015-01-05 214.55 216.50 207.16 210.09 5368477 2015-01-06 210.06 214.20 204.21 211.28 6261936 2015-01-07 213.35 214.78 209.78 210.95 2968390 2015-01-08 212.81 213.80 210.01 210.62 3442509
Bạn có thể nhận được cảnh báo về việc Google Finance không đáng tin cậy hoặc có thể chúng tôi đã đi đến cuối con đường với Google Finance. Nếu đó chỉ là một cảnh báo, hãy bỏ qua nó, nếu không thì hãy xem một số nơi như
Open High Low Close Volume Date 2015-01-02 222.87 223.25 213.26 219.31 4764443 2015-01-05 214.55 216.50 207.16 210.09 5368477 2015-01-06 210.06 214.20 204.21 211.28 6261936 2015-01-07 213.35 214.78 209.78 210.95 2968390 2015-01-08 212.81 213.80 210.01 210.62 34425094 và vui lòng gửi email cho tôi, tôi có thể cập nhật mã này bằng một số nguồn khác
Đó là nó. Đặt cho nó một biểu tượng để lấy dữ liệu, bạn muốn lấy dữ liệu từ nguồn nào, ngày giờ bắt đầu, ngày giờ kết thúc và bạn đã hoàn tất. Sự trở lại là một khung dữ liệu Pandas. Nếu bạn không quen thuộc với Pandas, về cơ bản, nó sẽ trả về dữ liệu ở dạng bảng. Hãy nghĩ về nó giống như Microsoft Excel, nhưng dành cho Python. Nếu muốn tìm hiểu thêm, bạn có thể xem bài hướng dẫn Phân tích dữ liệu với Python và Pandas
Như vậy là chúng ta đã xem cách vẽ một đồ thị cơ bản rồi
import dash import dash_core_components as dcc import dash_html_components as html app = dash.Dash[] app.layout = html.Div[children=[ html.H1[children='Hello Dash'], html.Div[children=''' Dash: A web application framework for Python. '''], dcc.Graph[ id='example-graph', figure={ 'data': [ {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'line', 'name': 'SF'}, {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'}, ], 'layout': { 'title': 'Dash Data Visualization' } } ] ]] if __name__ == '__main__': app.run_server[debug=True]
Tất cả những gì chúng ta cần làm về cơ bản chỉ là thay thế các giá trị x và y bằng bất cứ thứ gì chúng ta muốn vào lúc này. Đủ dễ dàng, bắt đầu từ mã biểu đồ cơ bản ở trên, chúng ta cần nhập pandas
import pandas_datareader.data as web import datetime
Tiếp theo, hãy đưa vào thông tin chứng khoán
________số 8_______Bây giờ, bên trong ứng dụng. bố cục, hãy sửa đổi các phần
Open High Low Close Volume Date 2015-01-02 222.87 223.25 213.26 219.31 4764443 2015-01-05 214.55 216.50 207.16 210.09 5368477 2015-01-06 210.06 214.20 204.21 211.28 6261936 2015-01-07 213.35 214.78 209.78 210.95 2968390 2015-01-08 212.81 213.80 210.01 210.62 34425095
{'x': df.index, 'y': df.Close, 'type': 'line', 'name': stock},
Tôi cũng đã tự do thay đổi tên và tiêu đề thành cổ phiếu cụ thể. Mã đầy đủ cho đến thời điểm này
import pandas_datareader.data as web import datetime import dash import dash_core_components as dcc import dash_html_components as html app = dash.Dash[] stock = 'TSLA' start = datetime.datetime[2015, 1, 1] end = datetime.datetime[2018, 2, 8] df = web.DataReader[stock, 'morningstar', start, end] df.reset_index[inplace=True] df.set_index["Date", inplace=True] df = df.drop["Symbol", axis=1] app.layout = html.Div[children=[ html.H1[children='Whoa, a graph!'], html.Div[children=''' Making a stock graph!. '''], dcc.Graph[ id='example-graph', figure={ 'data': [ {'x': df.index, 'y': df.Close, 'type': 'line', 'name': stock}, ], 'layout': { 'title': stock } } ] ]] if __name__ == '__main__': app.run_server[debug=True]
Kết quả ở đây
Được rồi, và cuối cùng, hãy đưa vào trường đầu vào đó, và thay vì tạo đầu ra chỉ là một số văn bản, hãy tạo đầu ra là chính biểu đồ
Nhập mọi thứ chúng tôi cần, cài đặt ứng dụng và mô tả bố cục
import pandas_datareader.data as web import datetime import dash import dash_core_components as dcc import dash_html_components as html from dash.dependencies import Input, Output app = dash.Dash[] app.layout = html.Div[children=[ html.Div[children=''' Symbol to graph: '''], dcc.Input[id='input', value='', type='text'], html.Div[id='output-graph'], ]]
Trong trường hợp trên, chúng ta có thể thấy đầu vào là như nhau, chỉ bắt đầu trống lần này. Sau đó, chúng tôi có một div HTML đang chờ chấp nhận tiêu đề dữ liệu cho
Open High Low Close Volume Date 2015-01-02 222.87 223.25 213.26 219.31 4764443 2015-01-05 214.55 216.50 207.16 210.09 5368477 2015-01-06 210.06 214.20 204.21 211.28 6261936 2015-01-07 213.35 214.78 209.78 210.95 2968390 2015-01-08 212.81 213.80 210.01 210.62 34425096 CỦA
Open High Low Close Volume Date 2015-01-02 222.87 223.25 213.26 219.31 4764443 2015-01-05 214.55 216.50 207.16 210.09 5368477 2015-01-06 210.06 214.20 204.21 211.28 6261936 2015-01-07 213.35 214.78 209.78 210.95 2968390 2015-01-08 212.81 213.80 210.01 210.62 34425097. Chức năng đó sẽ làm điều đó sẽ cần phải được bao bọc, giống như trước đây
@app.callback[ Output[component_id='output-graph', component_property='children'], [Input[component_id='input', component_property='value']] ]
Như chúng ta có thể thấy, điều này gần giống với trước đây, nó chỉ xác định đầu vào đến từ đâu và đầu ra sẽ đi đâu. Bây giờ cho chức năng
@app.callback[ Output[component_id='output-graph', component_property='children'], [Input[component_id='input', component_property='value']] ] def update_value[input_data]: start = datetime.datetime[2015, 1, 1] end = datetime.datetime.now[] df = web.DataReader[input_data, 'morningstar', start, end] df.reset_index[inplace=True] df.set_index["Date", inplace=True] df = df.drop["Symbol", axis=1] return dcc.Graph[ id='example-graph', figure={ 'data': [ {'x': df.index, 'y': df.Close, 'type': 'line', 'name': input_data}, ], 'layout': { 'title': input_data } } ]
Tham số
Open High Low Close Volume Date 2015-01-02 222.87 223.25 213.26 219.31 4764443 2015-01-05 214.55 216.50 207.16 210.09 5368477 2015-01-06 210.06 214.20 204.21 211.28 6261936 2015-01-07 213.35 214.78 209.78 210.95 2968390 2015-01-08 212.81 213.80 210.01 210.62 34425098 sẽ chứa những gì chúng tôi hy vọng là một biểu tượng chứng khoán. Từ đó, chúng tôi đặt thời gian bắt đầu cho đầu năm 2015 và sau đó nó sẽ chỉ vẽ biểu đồ cho bất kỳ thời điểm nào ngay bây giờ. Chúng tôi lấy dữ liệu, lưu trữ khung dữ liệu kết quả vào
Open High Low Close Volume Date 2015-01-02 222.87 223.25 213.26 219.31 4764443 2015-01-05 214.55 216.50 207.16 210.09 5368477 2015-01-06 210.06 214.20 204.21 211.28 6261936 2015-01-07 213.35 214.78 209.78 210.95 2968390 2015-01-08 212.81 213.80 210.01 210.62 34425099. Bây giờ, chúng tôi chỉ trả về toàn bộ phần tử
import dash import dash_core_components as dcc import dash_html_components as html app = dash.Dash[] app.layout = html.Div[children=[ html.H1[children='Hello Dash'], html.Div[children=''' Dash: A web application framework for Python. '''], dcc.Graph[ id='example-graph', figure={ 'data': [ {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'line', 'name': 'SF'}, {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'}, ], 'layout': { 'title': 'Dash Data Visualization' } } ] ]] if __name__ == '__main__': app.run_server[debug=True]0 mà chúng tôi đã hiển thị trước đó. Toàn bộ phần tử được cập nhật động, vì vậy chúng tôi cũng có thể thay đổi tiêu đề. ứng dụng đầy đủ
Open High Low Close Volume Date 2015-01-02 222.87 223.25 213.26 219.31 4764443 2015-01-05 214.55 216.50 207.16 210.09 5368477 2015-01-06 210.06 214.20 204.21 211.28 6261936 2015-01-07 213.35 214.78 209.78 210.95 2968390 2015-01-08 212.81 213.80 210.01 210.62 34425090
Kết quả
Khá mát mẻ. Những thứ như thế này, ngay cả khi sử dụng các khung khác nhau, thông thường sẽ khá tẻ nhạt, mất một lúc để viết mã và mất nhiều dòng để thực hiện. Điều này đặc biệt đơn giản để làm
Mặc dù thật tuyệt khi có thể tự động cập nhật các biểu đồ dựa trên thông tin đầu vào từ chúng tôi, nhưng nếu chúng tôi muốn các biểu đồ tự cập nhật thì sao?
hướng dẫn tiếp theo. Biểu đồ trực tiếp - GUI trực quan hóa dữ liệu với Dash và Python p. 4
Giới thiệu - Ứng dụng trực quan hóa dữ liệu với Dash và Python p. 1
Đi
Giao diện người dùng tương tác - GUI trực quan hóa dữ liệu với Dash và Python p. 2
Đi
Biểu đồ động dựa trên Đầu vào của người dùng - GUI trực quan hóa dữ liệu với Dash và Python p. 3
Biểu đồ trực tiếp - GUI trực quan hóa dữ liệu với Dash và Python p. 4
Đi
Ví dụ về ứng dụng dữ liệu phương tiện - GUI trực quan hóa dữ liệu với Dash và Python p. 5
Đi
Các tùy chọn Phân tích tình cảm vượt trội với Python bằng cách sử dụng VADER Sentiment và TextBlob
Đi
Truyền phát Tweet và cảm xúc từ Twitter bằng Python - GUI phân tích cảm xúc với Dash và Python p. 2
Làm cách nào để vẽ dữ liệu động trong Python?
Tạo hình mới hoặc kích hoạt hình hiện có. Tạo danh sách các điểm dữ liệu và màu sắc. Viết các thanh bằng dữ liệu và màu sắc, sử dụng phương thức bar[] . Sử dụng lớp FuncAnimation[], tạo hoạt ảnh bằng cách gọi liên tục một hàm, hoạt ảnh, đặt chiều cao của thanh và màu sắc của thanh.Trực quan hóa động trong Python là gì?
Tạo hoạt ảnh cơ bản và biểu đồ tương tác với Python . Những hình ảnh trực quan này thực hiện rất tốt việc thực sự cho thấy đầu ra có thể thay đổi như thế nào với đầu vào của nó. create a dynamic graphic that either changes with time like a video, or adapts based on an interactive user input. These visualizations do a great of job of really showing how an output can change with its inputs.Đồ thị động là gì?
Biểu đồ động là mô hình ứng dụng của bạn hiểu được tất cả các phụ thuộc logic và vật lý của các thành phần như Máy chủ, Hệ điều hành, JVM, Nút Cassandra, MySQL, v.v.. The graph also includes logical components such as traces, applications, services, clusters, and tablespaces.Trực quan hóa động là gì?
Trực quan hóa động là các biểu diễn không tĩnh của một khái niệm hoặc thông tin giáo dục . Cuốn sách này xem xét các thành phần hình ảnh động của tài nguyên giáo dục đa phương tiện [e. g. , hình ảnh động, mô phỏng tương tác] và nêu bật cách chúng có thể ảnh hưởng đến việc học.