Python Drawing Dynamically Interactive Charts with D3Blocks

Today I'd like to introduce you to a very useful visualization module.D3BlocksNot only can they be used to draw dynamically interactive charts, but exported charts can beHTMLformat for easy presentation on top of the browser.

heat map

A heat map is a statistical chart that displays data by coloring blocks of color. The rules for color mapping need to be specified when plotting. For example, larger values are represented by darker colors, while smaller values are represented by lighter colors, and so on. Heat maps are useful for looking at the overall picture, spotting outliers, showing differences between multiple variables, and detecting if there is any correlation between them.

Let's try to draw a simple heat map here, with the following code

from d3blocks import D3Blocks
 
# Initialization
d3 = D3Blocks()
 
# Import data sets
df = d3.import_example('energy')
 
# Heat mapping
(df, showfig=True, stroke='red', vmax=10, figsize=(700,700))

output

particle diagram

existD3Blocksmodularparticles()method can be convenient for us to convert any font into a particle chart with dynamic effects, with the mouse movement, the elements in the chart will also be dynamic ups and downs flying, the code is as follows

# Imported modules
from d3blocks import D3Blocks
 
# Initialization
d3 = D3Blocks()
 
# Mapping particles
('D3Blocks', collision=0.05, spacing=10, figsize=[1200, 500])

output

time series chart

A line graph of a time series, also known as a trend graph, is used to reflect the relationship between time and quantity by using time as the horizontal axis and the observed variable as the vertical axis, here we call thetimeseries()method with the following code

# Imported modules
from d3blocks import D3Blocks
 
# Initialization
d3 = D3Blocks()
 
# Import data sets
df = d3.import_example('climate')
 
# Print out the first 5 lines
print(())
 
# Charting
(df, datetime='date', dt_format='%Y-%m-%d %H:%M:%S', fontsize=10)

output

sanghatu (Greek letter Świętokrzyn)

A Sankey diagram is a chart used to describe the flow from one set of values to another. Inside the chart, different lines represent different flow diversions, and the width of the line represents the size of the data represented by this score. It is usually used for visualization and analysis of energy, material composition, financial and other data. Here we call thesankey()method to achieve this, the code is as follows

from d3blocks import D3Blocks
 
# Initialization
d3 = D3Blocks()
 
# Import data sets
df = d3.import_example('energy')
 
# Charting
(df, link={"color": "source-target"})

output

Violin Diagram

Violin charts can be used to plot the distribution of data as well as its probability density for numerical variables. This type of chart combines the features of box plots and density plots, and is mainly used to show the shape of the distribution of data. Here we callviolin()method to achieve this, the code is as follows

# Imported modules
from d3blocks import D3Blocks
 
# Initialization
d3 = D3Blocks()
 
# Import data sets
df = d3.import_example('cancer')
 
# Format displayed
tooltip = df['labels'].values + ' <br /> Survival: ' + df['survival_months'].astype(str).values
 
# Visualization charts
(x=df['labels'].values, # Value on the X-axis
          y=df['age'].values,    # Age
          tooltip=tooltip,       # Format displayed
          bins=50,               # size of bins
          size=df['survival_months'].values/10, # The size of the dots
          x_order=['acc', 'kich', 'brca', 'lgg', 'blca', 'coad', 'ov'], # The value on the X-axis
          figsize=[None, None],                                    # Chart size
          filepath='violine_demo.html')

output

scatterplot

The scatterplot is usually used to see if there is a correlation between the X-axis and the Y-axis, and it is plotted, as we call it here, with thescatter()method with the following code

# Imported modules
from d3blocks import D3Blocks
 
# Initialization
d3 = D3Blocks()
 
# Import data sets
df = d3.import_example('cancer')
 
# Format of data displayed
tooltip=df['labels'].values + ' <br /> Survival: ' + df['survival_months'].astype(str).str[0:4].values
# The size of the scatter
size = df['survival_months'].fillna(1).values / 10
 
# Charting
(df['x'].values,               
           df['y'].values,            
           x1=df['PC1'].values,         
           y1=df['PC2'].values,         
           scale=True,                  
           label_radio=['tSNE', 'PCA'], # Types of different labels
           size=size,                   
           color=df['labels'].values,   
           stroke='#000000',            
           opacity=0.4,                 # Transparency
           tooltip=tooltip,             # Format displayed
           cmap='tab20',                # Color
           filepath='c://temp//scatter_demo.html')

output

diagram of a stringed instrument

A chord chart is a graphical visualization method that shows the interrelationships between data within a data matrix. Within a chord chart, the data is arranged radially around a circle, and the relationships between data points are usually plotted as arcs connecting the data. Here we call thechord()method to achieve this, the code is as follows

from d3blocks import D3Blocks
 
# Initialization
d3 = D3Blocks()
 
# Import data sets
df = d3.import_example('energy')
 
# Charting
(df, filepath='chord_demo.html')

output

network diagram

In addition to these charts above, theD3Blocksmodule can also be used to draw social network graphs, which is used here with thed3graph()method with the following code

from d3blocks import D3Blocks
 
# Initialization
d3 = D3Blocks()
 
# Import data sets
df = d3.import_example('energy')
 
# Print out the first 5 lines of data
print(df)
 
# Initialize the network diagram
d3.d3graph(df, showfig=False)
 
# Each node is colored
d3.D3graph.set_node_properties(color='cluster')
 
# Adjust the position of each node
d3.D3graph.node_properties['Thermal_generation']['size']=20
d3.D3graph.node_properties['Thermal_generation']['edge_color']='#000fff' # Blue node
d3.D3graph.node_properties['Thermal_generation']['edge_size']=3 # Node-edge Size
 
# Adjust the position of each link
d3.D3graph.edge_properties['Solar', 'Solar_Thermal']['color']='#000fff'
d3.D3graph.edge_properties['Solar', 'Solar_Thermal']['weight_scaled']=10
 
# Charting
d3.()

output

Above is Python using D3Blocks to draw dynamically interactive charts in detail, more information about Python D3Blocks charts please pay attention to my other related articles!