MovingBubbles

Tip

D3Blocks: How to Create Storytelling Moving Bubbles Charts in d3js with Python.

Movingbubbles block.

The MovingBubbles provides insights into when one action follows the other across time. It can help to understand the movements of entities, and whether clusters occur at specific time points and state(s). It may not be the most visually efficient method, but it is one of the more visually satisfying ones with force-directed and colliding nodes. The function d3.import_example(‘random_time’) is created to generate a randomized dataset with various states. The input dataset should contain 3 columns;

  • DateTime column: Describes the data-time when an event occurs.

  • State column: Describes what the particular state was at that point of time of the specific sample_id.

  • Sample_id column: A sample can have multiple states at various time points but can not have two states at exactly the same point in time.

param df:

Input data.

type df:

Input data, pd.DataFrame()

param datetime:

Name of the column with the datetime.

type datetime:

str, (default: ‘datetime’)

param sample_id:

Name of the column with the sample ids.

type sample_id:

str, (default: ‘sample_id’)

param state:

Name of the column with the states.

type state:

str, (default: ‘state’)

param center:

Center this category.

type center:

String, (default: None)

param size:
Size the nodes by specifying per sample_id the size.

  • 5: set all nodes this this size

  • {‘0’: 4, ‘1’: 10, ‘2’: 5, ..}: Specify size for each sample_id

type size:

int or dictionary. (default: 5) or {sample_id i: size}

param color:
Color the nodes by specifying per sample_id the color.

  • ‘#000FFF’: set all nodes to this color.

  • {‘0’: ‘#808080’, ‘1’: ‘#FFF000’, ‘3’: ‘#000000’, ..}: Specify color for each sample_id

  • None: Colors are based on sample_id using the cmap.

type color:

int or dictionary. (default: ‘#808080’) or {sample_id i: hex-color}

param color_method:
Coloring of the nodes.

  • ‘state’: Use the colors defined per state as (d3.node_properties).

  • ‘node’: Use the colors defined in the dataframe (d3.edge_properties).

type color_method:

str

param dt_format:
Date time format.

  • ‘%d-%m-%Y %H:%M:%S’.

type dt_format:

str

param damper:
Movement of samples. A smaller number is slower/smoother movement.

  • 0.1: min

  • 10: max

type damper:

float, (default: 1)

param fontsize:

Fontsize of the states.

type fontsize:

int, (default: 14)

param timedelta:
The time delta between states. Change accordingly.

  • ‘seconds’

  • ‘minutes’

  • ‘days’

type timedelta:

String, (default: ‘minutes’)

param standardize:
Method to standardize the data.

  • None: standardize over the entire timeframe. Sample_ids are dependent to each other.

  • ‘samplewise’: Standardize per sample_id by substracting the minimum time per sample_id.

  • ‘relative’: Standardize across the entire dataframe after sorting on time. Each action is relative to the previous one in time without considering sample_id.

  • ‘minimum’: Movements are relative to the minimum time in the dataset.

type standardize:

str. (default: None)

param speed:

The final html file contains three buttons for speed movements. The lower the value, the faster the time moves.

type speed:

dict, (default: {“slow”: 1000, “medium”: 200, “fast”: 50})

param note:
A specific note, such as project description can be put on the html page.

  • None: Default text will be provided about the simulation, and states.

type note:

str, (default: None)

param time_notes:
The time notes will be shown between specific time points.
  • time_notes = [{“start_minute”: 1,

    “stop_minute”: 5, “note”: “Enter your note here and it is shown between 1 min and 5 min.”}]

time_notes.append[{“start_minute”: 6, “stop_minute”: 10, “note”: “Enter your second note here and it is shown between 6 min and 10 min.”}]

type time_notes:

dict, (default: None)

param cmap:
All colors can be reversed with ‘_r’, e.g. ‘binary’ to ‘binary_r’

  • ‘tab20c’, ‘Set1’, ‘Set2’

  • ‘rainbow’, ‘bwr’, ‘binary’, ‘seismic’

  • ‘Blues’, ‘Reds’, ‘Pastel1’, ‘Paired’

  • ‘twilight’, ‘hsv’, ‘inferno’

type cmap:

String, (default: ‘Set1’)

param title:
Title of the figure.

  • ‘Movingbubbles’

type title:

String, (default: None)

param filepath:
File path to save the output.

  • Temporarily path: ‘d3blocks.html’

  • Relative path: ‘./d3blocks.html’

  • Absolute path: ‘c://temp//d3blocks.html’

  • None: Return HTML

type filepath:

String, (Default: user temp directory)

param figsize:
Size of the figure in the browser, [width, height].

  • [780, 800]

type figsize:

tuple

param showfig:

  • True: Open browser-window.

  • False: Do not open browser-window.

type showfig:

bool, (default: True)

param overwrite:

  • True: Overwrite the html in the destination directory.

  • False: Do not overwrite destination file but show warning instead.

type overwrite:

bool, (default: True)

param notebook:

  • True: Use IPython to show chart in notebook.

  • False: Do not use IPython.

type notebook:

bool

param save_button:

  • True: Save button is shown in the HTML to save the image in svg.

  • False: No save button is shown in the HTML.

type save_button:

bool, (default: True)

param reset_properties:

  • True: Reset the node_properties at each run.

  • False: Use the d3.node_properties()

type reset_properties:

bool, (default: True)

returns:

  • d3.node_properties (DataFrame of dictionary) – Contains properties of the unique input label/nodes/samples.

  • d3.edge_properties (DataFrame of dictionary) – Contains properties of the unique input edges/links.

  • d3.config (dictionary) – Contains configuration properties.

Examples

>>> # Load d3blocks
>>> from d3blocks import D3Blocks
>>> #
>>> # Initialize
>>> d3 = D3Blocks()
>>> #
>>> # Load example data
>>> 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")
>>> #
>>> # Plot
>>> d3.movingbubbles(df, speed={"slow": 1000, "medium": 200, "fast": 10}, filepath='movingbubbles.html')
>>> #

Examples

>>> # Load d3blocks
>>> from d3blocks import D3Blocks
>>> #
>>> # Initialize
>>> d3 = D3Blocks(chart='movingbubbles', frame=False)
>>> #
>>> # Import example
>>> df = d3.import_example('random_time', n=1000, c=100, date_start="1-1-2000 00:10:05", date_stop="1-1-2000 23:59:59")
>>> #
>>> # Coloring the states.
>>> d3.set_node_properties(df['state'])
>>> print(d3.node_properties)
>>> # Color the sleeping state black
>>> d3.node_properties.get('Sleeping')['color']='#000000'
>>> #
>>> d3.set_edge_properties(df)
>>> print(d3.edge_properties)
>>> #
>>> # Show
>>> d3.show(title='Movingbubbles with adjusted configurations')

Examples

>>> # Load d3blocks
>>> from d3blocks import D3Blocks
>>> #
>>> # Initialize
>>> d3 = D3Blocks(chart='movingbubbles')
>>> #
>>> # Import example
>>> df = d3.import_example('random_time', n=1000, c=100, date_start="1-1-2000 00:10:05", date_stop="1-1-2000 23:59:59")
>>> #
>>> # Specify the colors and node sizes for the specific sample_id
>>> size = {1: 20, 3: 40}
>>> color = {1: '#FF0000', 3: '#000FFF'}
>>> #
>>> # Show
>>> d3.movingbubbles(df, color=color, size=size)

References

Input Data

The input data is a dataframe that should contain the columns datatime, sample_id and state. If the column names are different, then the column name can be specified.

#                 datetime sample_id     state
# 0    2000-01-01 00:10:32        30      Sick
# 1    2000-01-01 00:10:36        23      Work
# 2    2000-01-01 00:11:16       179  Sleeping
# 3    2000-01-01 00:11:28       122     Sport
# 4    2000-01-01 00:13:02       226  Sleeping
#                  ...       ...       ...
# 9994 2000-01-01 23:59:56       300  Sleeping
# 9995 2000-01-01 23:59:57       217      Home
# 9996 2000-01-01 23:59:57        89  Sleeping
# 9997 2000-01-01 23:59:58        42  Sleeping
# 9998 2000-01-01 23:59:58       237      Work

# [9999 rows x 3 columns]

Chart