Python 下有很多漂亮的資料視覺化庫，比如 matplotlib、seaborn、bokeh、plotly、pyecharts 等，我們直接使用這些第三方庫進行漂亮的資料視覺化操作。 雖然這些庫可以很好地顯示資料，但很多庫在實現動態互動時，並不支援動態互動。
我們之前介紹了pyecharts，它不僅可以視覺化資料，還可以支援動態互動，並且易於安裝，只需要在python環境下使用pip即可。 在本期中，我們將介紹另乙個動態互動式資料視覺化庫 D3Blocks。
D3Blocks 是乙個用於建立獨立互動式圖表的框架。 除了 Python 之外，您無需安裝任何其他內容即可建立 D3Blocks 圖，您只需要乙個瀏覽器來繪製圖並與他人共享，無需安裝 Python 和 D3Blocks 即可執行。
D3 是 Data-Driven Documents 的縮寫，它是乙個 j**ascript 庫，用於在 Web 瀏覽器中生成動態的互動式資料視覺化。 它利用可擴充套件向量圖形 （SVG）、HTML5 和級聯樣式表 （CSS） 標準。 D3 也稱為 D3js 或 d3js。
D3 的主要優點是它符合 Web 標準，因此除了瀏覽器之外，您不需要任何其他技術來繪製圖表。 D3Blocks 建立的每個圖表都完全封裝到乙個 HTML 檔案中，這使得在 ** 上共享或發布變得非常容易。 d3blocks 的安裝也很簡單，你只需要使用以下 2 行命令中的乙個即可完成安裝，安裝完成後，我們就可以使用 d3blocks 了。
pip install git+ install d3blocks
目前，D3Blocks 支援以下動態互動塊。
timeserieschordd3graphelasticgraphsankeyheatmapmovingbubblesimagesliderscatterviolinparticlestreemaptreecirclepacking
對於每個庫，官方都提供了示例**，以便使用者可以直接使用。
from d3blocks import d3blocksd3 = d3blocks()df = d3.import_example('climate')d3.timeseries(df, datetime='date', dt_format='%y-%m-%d %h:%m:%s', fontsize=10, figsize=[850, 500])
我們建立了乙個時間序列塊，根據名稱我們知道這個塊是乙個時間序列，從視覺化圖表中，我們可以將滑鼠放在任意位置來檢視這個時間的資料，並且我們可以使用框選擇方法，選擇區域性區域，方便檢視詳細資料。
from d3blocks import d3blocksd3 = d3blocks()df = d3.import_example('energy')d3.chord(df)
第二個是和弦框圖，當然我們也可以用自己的資料來視覺化。 和弦塊表示多個實體或節點之間的流動或連線。 每個實體都由圓形布局之外的片段表示。 然後，在每個實體之間繪製乙個圓弧。 電弧的大小與流速的大小成正比。
from d3blocks import d3blocksd3 = d3blocks()df = d3.import_example('energy') d3.d3graph(df, filepath='d3graph.html')d3.d3graph(df, scaler='minmax')d3.d3graph.set_node_properties(color=none)d3.d3graph.node_properties['solar']['size']=30d3.d3graph.node_properties['solar']['color']='#ff0000'd3.d3graph.node_properties['solar']['edge_color']='#000000'd3.d3graph.node_properties['solar']['edge_size']=5d3.d3graph.show()d3.d3graph.set_edge_properties(directed=true, marker_end='arrow')d3.d3graph.show()d3.d3graph.node_propertiesd3.d3graph.edge_propertiesd3.d3graph.show()
D3Graph 是乙個動態和互動式的網路圖，允許您設定每個節點的顏色和大小，甚至可以向網路新增箭頭。
from d3blocks import d3blocksd3 = d3blocks()df = d3.import_example('energy') # 'stormofswords'd3.elasticgraph(df, filepath='elasticgraph.html')d3.elasticgraph.show()d3.elasticgraph.d3graph.show()d3.elasticgraph.show()d3.elasticgraph.d3graph.show()d3.elasticgraph.d3graph.node_propertiesd3.elasticgraph.d3graph.edge_properties
elasticgraph塊類似於電子核的結構，將每條資料關聯起來，並且可以詳細引用資料，雙擊每個節點將展開每條資料。
from d3blocks import d3blocksd3 = d3blocks()df = d3.import_example('energy')d3.sankey(df)
桑基桑基圖是乙個資料流視覺化塊，用於描述從一組資料到另一組資料的流。 在這種情況下，節點表示為矩形框、流或箭頭。 箭頭的寬度與流速成正比。
from d3blocks import d3blocksd3 = d3blocks()df = d3.import_example('stormofswords') # 'energy'd3.heatmap(df)
熱圖是反映資料之間關係的圖，從圖中我們可以看出，這個圖類似於我們解釋Transformer模型時的注意力機制圖，它反映了注意力的關係，顏色越深，兩個資料之間的關係越大。
from d3blocks import d3blocksd3 = d3blocks()df = d3.import_example('random_time', n=10000, c=300, date_start="1-1-2000 00:10:05", date_stop="1-1-2000 23:59:59")d3.movingbubbles(df, speed=, filepath='movingbubbles.html')
移動氣泡圖說明了資料的運動，我們可以用這個圖來表示動物的遷徙等。
from d3blocks import d3blocksd3 = d3blocks()img_before = cv2.imread(img_before, -1)img_after = cv2.imread(img_after, -1)d3.imageslider(img_before, img_after)d3.imageslider(img_before, img_after, showfig=true, scale=true, colorscale=2, figsize=[400, 400])
ImageSlider 體現了 2 前後 **的對比功能，我們可以直接在 HTML 上檢視 2 ** 前後的更改。
當然，D3Blocks還包含其他視覺塊，包括散點、小提琴、樹狀圖、樹形、圓形包裝等。
from d3blocks import d3blocksd3 = d3blocks()d3.particles('d3blocks')d3.particles('d3blocks', filepath='d3blocks.html', collision=0.05, spacing=7, figsize=[750, 150], fontsize=130, cmap='turbo', color_background='#ffffff')
最後，這個粒子很有意思，我們可以用它來推廣我們的標誌，把它放在我們的產品主頁上，或者做**來推廣。
有關更多動態視覺化，請參閱 D3Blocks 庫。