{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {
    "deletable": true,
    "editable": true
   },
   "source": [
    "# Dual category bar chart proof of concept\n",
    "\n",
    "This is an experimental bar chart implementation which needs to be refactored and hardened.\n",
    "It presents bars with two categorical dimensions (for example Person Type and State) and one\n",
    "quantitative dimension.  You can adjust the presentation by changing the vectors associated\n",
    "with the categories either programmatically or using mouse events.\n",
    "\n",
    "- Mouse over the bars and data labels to focus.\n",
    "- Click the category labels to adjust geometry.  Click again to drop the label.\n",
    "\n",
    "The visualization requires a live notebook to view (it does not work in nbviewer for\n",
    "example).  Here is a screenshot.\n",
    "\n",
    "<img src=\"rectangles.png\" width=\"300px\">\n",
    "\n",
    "Please execute the cells below to create \"live\" visualizations.  The implementation has\n",
    "bugs and is just a proof of concept which may be replaced by something more well designed in the future.\n",
    "The demonstration illustrates more complex use cases for some of the `dual_canvas` features."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [],
   "source": [
    "import jp_proxy_widget\n",
    "from jp_doodle import doodle_files\n",
    "from IPython.display import HTML, display\n",
    "fn1 = \"js/canvas_2d_widget_helper.js\"\n",
    "fn2 = \"js/dual_canvas_helper.js\"\n",
    "fn3 = \"js/rectangle_collection.js\"\n",
    "paths = [doodle_files.vendor_path(fn) for fn in [fn1, fn2, fn3]]\n",
    "#paths = [doodle_files.vendor_path(fn) for fn in [fn1, fn2]]|"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true,
    "deletable": true,
    "editable": true
   },
   "outputs": [],
   "source": [
    "rdemo = jp_proxy_widget.JSProxyWidget()\n",
    "\n",
    "rdemo.load_js_files(paths)\n",
    "rdemo.js_init(\"\"\"\n",
    "    element.empty();\n",
    "    element.rectangle_collection.example(element);\n",
    "    //element.invisible_canvas.show();\n",
    "\"\"\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "deletable": true,
    "editable": true
   },
   "outputs": [],
   "source": [
    "rdemo"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true,
    "deletable": true,
    "editable": true
   },
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 2",
   "language": "python",
   "name": "python2"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 2
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython2",
   "version": "2.7.13"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}