Notebook

Dual category bar chart proof of concept¶

This is an experimental bar chart implementation which needs to be refactored and hardened. It presents bars with two categorical dimensions (for example Person Type and State) and one quantitative dimension. You can adjust the presentation by changing the vectors associated with the categories either programmatically or using mouse events.

Mouse over the bars and data labels to focus.
Click the category labels to adjust geometry. Click again to drop the label.

The visualization requires a live notebook to view (it does not work in nbviewer for example). Here is a screenshot.

Please execute the cells below to create "live" visualizations. The implementation has bugs and is just a proof of concept which may be replaced by something more well designed in the future. The demonstration illustrates more complex use cases for some of the dual_canvas features.

In [ ]:

import jp_proxy_widget
from jp_doodle import doodle_files
from IPython.display import HTML, display
fn1 = "js/canvas_2d_widget_helper.js"
fn2 = "js/dual_canvas_helper.js"
fn3 = "js/rectangle_collection.js"
paths = [doodle_files.vendor_path(fn) for fn in [fn1, fn2, fn3]]
#paths = [doodle_files.vendor_path(fn) for fn in [fn1, fn2]]|

In [ ]:

rdemo = jp_proxy_widget.JSProxyWidget()

rdemo.load_js_files(paths)
rdemo.js_init("""
    element.empty();
    element.rectangle_collection.example(element);
    //element.invisible_canvas.show();
""")

In [ ]:

rdemo

In [ ]: