There are many beautiful data visualization libraries under Python, such as matplotlib, seaborn, bokeh, plotly, pyecharts, etc., and we directly use these third-party libraries for beautiful data visualization operations. Although these libraries can display data well, many libraries do not support dynamic interaction when it comes to achieving dynamic interaction.
We introduced pyecharts earlier, which can not only visualize data, but also support dynamic interaction, and is easy to install, only need to use pip in the python environment. In this issue, we introduce another dynamic interactive data visualization library, D3Blocks.
d3blocks is a framework for creating stand-alone interactive charts. You don't need to install anything else to create a D3Blocks diagram other than Python, you only need a browser to draw the diagram and share it with others, you don't need to install Python and D3Blocks to run.
D3 is an abbreviation for Data-Driven Documents, which is a j**ascript library for generating dynamic, interactive data visualizations in a web browser. It leverages extensible vector graphics (SVG), HTML5, and cascading style sheets (CSS) standards. d3 is also known as d3js or d3js.
The main advantage of D3 is that it complies with web standards, so you don't need any other technology to draw diagrams other than a browser. Each chart created by D3Blocks is fully encapsulated into a single HTML file, which makes it very easy to share or publish on **. The installation of d3blocks is also very simple, you only need to use one of the following 2 lines of commands to complete the installation, after the installation is completed, we can use d3blocks.
pip install git+ install d3blocks
Currently, D3Blocks supports the following dynamic interaction blocks.
timeserieschordd3graphelasticgraphsankeyheatmapmovingbubblesimagesliderscatterviolinparticlestreemaptreecirclepacking
For each library, the official provides an example**, so that users can use it directly.
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])
We have created a timeseries blocks, according to the name we know that this block is a time series, from the visual chart, we can place the mouse in any position to view the data of this time, and we can use the box selection method, select the local area, easy to view the detailed data.
from d3blocks import d3blocksd3 = d3blocks()df = d3.import_example('energy')d3.chord(df)
The second one is the chord block diagram, which of course we can also visualize with our own data. A chord block represents a flow or connection between multiple entities or nodes. Each entity is represented by a fragment outside the circular layout. Then, draw an arc between each entity. The size of the arc is proportional to the size of the flow rate.
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 is a dynamic and interactive network diagram that allows you to set the color and size of each node, and even add arrows to the network.
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
The elasticgraph block resembles the structure of an electron nucleus, to associate each piece of data, and the data can be referenced in detail, and double-clicking on each node will expand each piece of data.
from d3blocks import d3blocksd3 = d3blocks()df = d3.import_example('energy')d3.sankey(df)
A Sankey Sankey diagram is a data flow visualization block that describes the flow from one set of data to another. In this case, nodes are represented as rectangular boxes, streams, or arrows. The width of the arrow is proportional to the flow rate.
from d3blocks import d3blocksd3 = d3blocks()df = d3.import_example('stormofswords') # 'energy'd3.heatmap(df)
The heatmap is a graph that reflects the relationship between data, and we can see from the graph that this graph is similar to the diagram of the attention mechanism when we explain the Transformer model, which reflects the relationship of attention, and the darker the color, the greater the relationship between the two data.
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')
The movingbubbles diagram illustrates the movement of data, and we can use this diagram to represent the migration of animals, etc.
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 embodies the comparison function of the 2 before and after **, and we can directly view the before and after changes of the 2 ** on the HTML.
Of course, D3Blocks also contains other visual blocks, including scatter, violin, treemap, tree, circlepacking, etc.
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')
Finally, this particles is quite interesting, we can use it to promote our logo, to put it on our product homepage, or to make ** to promote.
For more dynamic visualizations, please refer to the D3Blocks library.