docs/markers.ipynb

{
 "cells": [
  {
   "cell_type": "raw",
   "metadata": {
    "raw_mimetype": "text/restructuredtext"
   },
   "source": [
    ".. _markers:\n",
    "\n",
    "Markers\n",
    "-------"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "In Toyplot, markers are used to show the individual datums in scatterplots:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "import numpy\n",
    "import toyplot\n",
    "\n",
    "import logging\n",
    "logging.basicConfig()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div class=\"toyplot\" id=\"t675c7810bc424640af6d56e8873504e2\" style=\"text-align:center\"><svg class=\"toyplot-canvas-Canvas\" height=\"300.0px\" id=\"t6dc35ef3a4d5435eb90956d3719dd949\" preserveAspectRatio=\"xMidYMid meet\" style=\"background-color:transparent;fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:Helvetica;font-size:12px;opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0;stroke-width:1.0\" viewBox=\"0 0 300.0 300.0\" width=\"300.0px\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:toyplot=\"http://www.sandia.gov/toyplot\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"><g class=\"toyplot-coordinates-Cartesian\" id=\"tcf5e5a5d2c914e38a38550571035c8fe\"><clipPath id=\"tac8d112845ee49f3a06bdb4532bf006f\"><rect height=\"220.0\" width=\"220.0\" x=\"40.0\" y=\"40.0\"></rect></clipPath><g clip-path=\"url(#tac8d112845ee49f3a06bdb4532bf006f)\"><g class=\"toyplot-mark-Scatterplot\" id=\"tfaa4c631598f480cb61bebb783d46cc1\"><g class=\"toyplot-Series\"><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(50.0, 250.0)\"><circle r=\"2.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(60.0, 249.4459833795014)\"><circle r=\"2.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(70.0, 247.78393351800551)\"><circle r=\"2.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(80.0, 245.01385041551248)\"><circle r=\"2.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(90.0, 241.13573407202216)\"><circle r=\"2.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(100.0, 236.14958448753461)\"><circle r=\"2.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(110.0, 230.05540166204986)\"><circle r=\"2.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(120.0, 222.85318559556785)\"><circle r=\"2.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(130.0, 214.54293628808864)\"><circle r=\"2.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(140.0, 205.1246537396122)\"><circle r=\"2.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(150.0, 194.5983379501385)\"><circle r=\"2.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(160.0, 182.96398891966757)\"><circle r=\"2.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(170.0, 170.22160664819947)\"><circle r=\"2.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(180.0, 156.37119113573411)\"><circle r=\"2.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(190.0, 141.41274238227149)\"><circle r=\"2.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(200.0, 125.34626038781163)\"><circle r=\"2.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(210.0, 108.17174515235459)\"><circle r=\"2.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(220.0, 89.889196675900322)\"><circle r=\"2.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(230.0, 70.498614958448783)\"><circle r=\"2.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(240.0, 50.0)\"><circle r=\"2.0\"></circle></g></g></g></g><g class=\"toyplot-coordinates-Axis\" id=\"t422e11ba321643cfa71d897a765befdd\" transform=\"translate(50.0,250.0)translate(0,10.0)\"><line style=\"\" x1=\"0\" x2=\"190.0\" y1=\"0\" y2=\"0\"></line><g><g transform=\"translate(0.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-2.78\" y=\"8.555\">0</text></g><g transform=\"translate(50.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-2.78\" y=\"8.555\">5</text></g><g transform=\"translate(100.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-5.56\" y=\"8.555\">10</text></g><g transform=\"translate(150.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-5.56\" y=\"8.555\">15</text></g><g transform=\"translate(200.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-5.56\" y=\"8.555\">20</text></g></g><g class=\"toyplot-coordinates-Axis-coordinates\" style=\"visibility:hidden\" transform=\"\"><line style=\"stroke:rgb(43.9%,50.2%,56.5%);stroke-opacity:1.0;stroke-width:1.0\" x1=\"0\" x2=\"0\" y1=\"-3.0\" y2=\"4.5\"></line><text style=\"alignment-baseline:alphabetic;fill:rgb(43.9%,50.2%,56.5%);fill-opacity:1.0;font-size:10px;font-weight:normal;stroke:none;text-anchor:middle\" x=\"0\" y=\"-6\"></text></g></g><g class=\"toyplot-coordinates-Axis\" id=\"ted24225557034f6f8026ad32127e69b5\" transform=\"translate(50.0,250.0)rotate(-90.0)translate(0,-10.0)\"><line style=\"\" x1=\"0\" x2=\"200.0\" y1=\"0\" y2=\"0\"></line><g><g transform=\"translate(0.0,-6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-6.95\" y=\"-4.4408920985e-16\">0.0</text></g><g transform=\"translate(100.0,-6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-6.95\" y=\"-4.4408920985e-16\">0.5</text></g><g transform=\"translate(200.0,-6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-6.95\" y=\"-4.4408920985e-16\">1.0</text></g></g><g class=\"toyplot-coordinates-Axis-coordinates\" style=\"visibility:hidden\" transform=\"\"><line style=\"stroke:rgb(43.9%,50.2%,56.5%);stroke-opacity:1.0;stroke-width:1.0\" x1=\"0\" x2=\"0\" y1=\"3.0\" y2=\"-4.5\"></line><text style=\"alignment-baseline:hanging;fill:rgb(43.9%,50.2%,56.5%);fill-opacity:1.0;font-size:10px;font-weight:normal;stroke:none;text-anchor:middle\" x=\"0\" y=\"6\"></text></g></g></g></svg><div class=\"toyplot-behavior\"><script>(function()\n",
       "{\n",
       "var modules={};\n",
       "modules[\"toyplot/tables\"] = (function()\n",
       "    {\n",
       "        var tables = [];\n",
       "\n",
       "        var module = {};\n",
       "\n",
       "        module.set = function(owner, key, names, columns)\n",
       "        {\n",
       "            tables.push({owner: owner, key: key, names: names, columns: columns});\n",
       "        }\n",
       "\n",
       "        module.get = function(owner, key)\n",
       "        {\n",
       "            for(var i = 0; i != tables.length; ++i)\n",
       "            {\n",
       "                var table = tables[i];\n",
       "                if(table.owner != owner)\n",
       "                    continue;\n",
       "                if(table.key != key)\n",
       "                    continue;\n",
       "                return {names: table.names, columns: table.columns};\n",
       "            }\n",
       "        }\n",
       "\n",
       "        module.get_csv = function(owner, key)\n",
       "        {\n",
       "            var table = module.get(owner, key);\n",
       "            if(table != undefined)\n",
       "            {\n",
       "                var csv = \"\";\n",
       "                csv += table.names.join(\",\") + \"\\n\";\n",
       "                for(var i = 0; i != table.columns[0].length; ++i)\n",
       "                {\n",
       "                  for(var j = 0; j != table.columns.length; ++j)\n",
       "                  {\n",
       "                    if(j)\n",
       "                      csv += \",\";\n",
       "                    csv += table.columns[j][i];\n",
       "                  }\n",
       "                  csv += \"\\n\";\n",
       "                }\n",
       "                return csv;\n",
       "            }\n",
       "        }\n",
       "\n",
       "        return module;\n",
       "    })();\n",
       "modules[\"toyplot/root/id\"] = \"t675c7810bc424640af6d56e8873504e2\";\n",
       "modules[\"toyplot/root\"] = (function(root_id)\n",
       "    {\n",
       "        return document.querySelector(\"#\" + root_id);\n",
       "    })(modules[\"toyplot/root/id\"]);\n",
       "modules[\"toyplot/canvas/id\"] = \"t6dc35ef3a4d5435eb90956d3719dd949\";\n",
       "modules[\"toyplot/canvas\"] = (function(canvas_id)\n",
       "    {\n",
       "        return document.querySelector(\"#\" + canvas_id);\n",
       "    })(modules[\"toyplot/canvas/id\"]);\n",
       "modules[\"toyplot/menus/context\"] = (function(root, canvas)\n",
       "    {\n",
       "        var wrapper = document.createElement(\"div\");\n",
       "        wrapper.innerHTML = \"<ul class='toyplot-context-menu' style='background:#eee; border:1px solid #b8b8b8; border-radius:5px; box-shadow: 0px 0px 8px rgba(0%,0%,0%,0.25); margin:0; padding:3px 0; position:fixed; visibility:hidden;'></ul>\"\n",
       "        var menu = wrapper.firstChild;\n",
       "\n",
       "        root.appendChild(menu);\n",
       "\n",
       "        var items = [];\n",
       "\n",
       "        var ignore_mouseup = null;\n",
       "        function open_menu(e)\n",
       "        {\n",
       "            var show_menu = false;\n",
       "            for(var index=0; index != items.length; ++index)\n",
       "            {\n",
       "                var item = items[index];\n",
       "                if(item.show(e))\n",
       "                {\n",
       "                    item.item.style.display = \"block\";\n",
       "                    show_menu = true;\n",
       "                }\n",
       "                else\n",
       "                {\n",
       "                    item.item.style.display = \"none\";\n",
       "                }\n",
       "            }\n",
       "\n",
       "            if(show_menu)\n",
       "            {\n",
       "                ignore_mouseup = true;\n",
       "                menu.style.left = (e.clientX + 1) + \"px\";\n",
       "                menu.style.top = (e.clientY - 5) + \"px\";\n",
       "                menu.style.visibility = \"visible\";\n",
       "                e.stopPropagation();\n",
       "                e.preventDefault();\n",
       "            }\n",
       "        }\n",
       "\n",
       "        function close_menu()\n",
       "        {\n",
       "            menu.style.visibility = \"hidden\";\n",
       "        }\n",
       "\n",
       "        function contextmenu(e)\n",
       "        {\n",
       "            open_menu(e);\n",
       "        }\n",
       "\n",
       "        function mousemove(e)\n",
       "        {\n",
       "            ignore_mouseup = false;\n",
       "        }\n",
       "\n",
       "        function mouseup(e)\n",
       "        {\n",
       "            if(ignore_mouseup)\n",
       "            {\n",
       "                ignore_mouseup = false;\n",
       "                return;\n",
       "            }\n",
       "            close_menu();\n",
       "        }\n",
       "\n",
       "        function keydown(e)\n",
       "        {\n",
       "            if(e.key == \"Escape\" || e.key == \"Esc\" || e.keyCode == 27)\n",
       "            {\n",
       "                close_menu();\n",
       "            }\n",
       "        }\n",
       "\n",
       "        canvas.addEventListener(\"contextmenu\", contextmenu);\n",
       "        canvas.addEventListener(\"mousemove\", mousemove);\n",
       "        document.addEventListener(\"mouseup\", mouseup);\n",
       "        document.addEventListener(\"keydown\", keydown);\n",
       "\n",
       "        var module = {};\n",
       "        module.add_item = function(label, show, activate)\n",
       "        {\n",
       "            var wrapper = document.createElement(\"div\");\n",
       "            wrapper.innerHTML = \"<li class='toyplot-context-menu-item' style='background:#eee; color:#333; padding:2px 20px; list-style:none; margin:0; text-align:left;'>\" + label + \"</li>\"\n",
       "            var item = wrapper.firstChild;\n",
       "\n",
       "            items.push({item: item, show: show});\n",
       "\n",
       "            function mouseover()\n",
       "            {\n",
       "                this.style.background = \"steelblue\";\n",
       "                this.style.color = \"white\";\n",
       "            }\n",
       "\n",
       "            function mouseout()\n",
       "            {\n",
       "                this.style.background = \"#eee\";\n",
       "                this.style.color = \"#333\";\n",
       "            }\n",
       "\n",
       "            function choose_item(e)\n",
       "            {\n",
       "                close_menu();\n",
       "                activate();\n",
       "\n",
       "                e.stopPropagation();\n",
       "                e.preventDefault();\n",
       "            }\n",
       "\n",
       "            item.addEventListener(\"mouseover\", mouseover);\n",
       "            item.addEventListener(\"mouseout\", mouseout);\n",
       "            item.addEventListener(\"mouseup\", choose_item);\n",
       "            item.addEventListener(\"contextmenu\", choose_item);\n",
       "\n",
       "            menu.appendChild(item);\n",
       "        };\n",
       "        return module;\n",
       "    })(modules[\"toyplot/root\"],modules[\"toyplot/canvas\"]);\n",
       "modules[\"toyplot/io\"] = (function()\n",
       "    {\n",
       "        var module = {};\n",
       "        module.save_file = function(mime_type, charset, data, filename)\n",
       "        {\n",
       "            var uri = \"data:\" + mime_type + \";charset=\" + charset + \",\" + data;\n",
       "            uri = encodeURI(uri);\n",
       "\n",
       "            var link = document.createElement(\"a\");\n",
       "            if(typeof link.download != \"undefined\")\n",
       "            {\n",
       "              link.href = uri;\n",
       "              link.style = \"visibility:hidden\";\n",
       "              link.download = filename;\n",
       "\n",
       "              document.body.appendChild(link);\n",
       "              link.click();\n",
       "              document.body.removeChild(link);\n",
       "            }\n",
       "            else\n",
       "            {\n",
       "              window.open(uri);\n",
       "            }\n",
       "        };\n",
       "        return module;\n",
       "    })();\n",
       "modules[\"toyplot.coordinates.Axis\"] = (\n",
       "        function(canvas)\n",
       "        {\n",
       "            function sign(x)\n",
       "            {\n",
       "                return x < 0 ? -1 : x > 0 ? 1 : 0;\n",
       "            }\n",
       "\n",
       "            function mix(a, b, amount)\n",
       "            {\n",
       "                return ((1.0 - amount) * a) + (amount * b);\n",
       "            }\n",
       "\n",
       "            function log(x, base)\n",
       "            {\n",
       "                return Math.log(Math.abs(x)) / Math.log(base);\n",
       "            }\n",
       "\n",
       "            function in_range(a, x, b)\n",
       "            {\n",
       "                var left = Math.min(a, b);\n",
       "                var right = Math.max(a, b);\n",
       "                return left <= x && x <= right;\n",
       "            }\n",
       "\n",
       "            function inside(range, projection)\n",
       "            {\n",
       "                for(var i = 0; i != projection.length; ++i)\n",
       "                {\n",
       "                    var segment = projection[i];\n",
       "                    if(in_range(segment.range.min, range, segment.range.max))\n",
       "                        return true;\n",
       "                }\n",
       "                return false;\n",
       "            }\n",
       "\n",
       "            function to_domain(range, projection)\n",
       "            {\n",
       "                for(var i = 0; i != projection.length; ++i)\n",
       "                {\n",
       "                    var segment = projection[i];\n",
       "                    if(in_range(segment.range.bounds.min, range, segment.range.bounds.max))\n",
       "                    {\n",
       "                        if(segment.scale == \"linear\")\n",
       "                        {\n",
       "                            var amount = (range - segment.range.min) / (segment.range.max - segment.range.min);\n",
       "                            return mix(segment.domain.min, segment.domain.max, amount)\n",
       "                        }\n",
       "                        else if(segment.scale[0] == \"log\")\n",
       "                        {\n",
       "                            var amount = (range - segment.range.min) / (segment.range.max - segment.range.min);\n",
       "                            var base = segment.scale[1];\n",
       "                            return sign(segment.domain.min) * Math.pow(base, mix(log(segment.domain.min, base), log(segment.domain.max, base), amount));\n",
       "                        }\n",
       "                    }\n",
       "                }\n",
       "            }\n",
       "\n",
       "            var axes = {};\n",
       "\n",
       "            function display_coordinates(e)\n",
       "            {\n",
       "                var current = canvas.createSVGPoint();\n",
       "                current.x = e.clientX;\n",
       "                current.y = e.clientY;\n",
       "\n",
       "                for(var axis_id in axes)\n",
       "                {\n",
       "                    var axis = document.querySelector(\"#\" + axis_id);\n",
       "                    var coordinates = axis.querySelector(\".toyplot-coordinates-Axis-coordinates\");\n",
       "                    if(coordinates)\n",
       "                    {\n",
       "                        var projection = axes[axis_id];\n",
       "                        var local = current.matrixTransform(axis.getScreenCTM().inverse());\n",
       "                        if(inside(local.x, projection))\n",
       "                        {\n",
       "                            var domain = to_domain(local.x, projection);\n",
       "                            coordinates.style.visibility = \"visible\";\n",
       "                            coordinates.setAttribute(\"transform\", \"translate(\" + local.x + \")\");\n",
       "                            var text = coordinates.querySelector(\"text\");\n",
       "                            text.textContent = domain.toFixed(2);\n",
       "                        }\n",
       "                        else\n",
       "                        {\n",
       "                            coordinates.style.visibility= \"hidden\";\n",
       "                        }\n",
       "                    }\n",
       "                }\n",
       "            }\n",
       "\n",
       "            canvas.addEventListener(\"click\", display_coordinates);\n",
       "\n",
       "            var module = {};\n",
       "            module.show_coordinates = function(axis_id, projection)\n",
       "            {\n",
       "                axes[axis_id] = projection;\n",
       "            }\n",
       "\n",
       "            return module;\n",
       "        })(modules[\"toyplot/canvas\"]);\n",
       "(function(tables, context_menu, io, owner_id, key, label, names, columns, filename)\n",
       "        {\n",
       "            tables.set(owner_id, key, names, columns);\n",
       "\n",
       "            var owner = document.querySelector(\"#\" + owner_id);\n",
       "            function show_item(e)\n",
       "            {\n",
       "                return owner.contains(e.target);\n",
       "            }\n",
       "\n",
       "            function choose_item()\n",
       "            {\n",
       "                io.save_file(\"text/csv\", \"utf-8\", tables.get_csv(owner_id, key), filename + \".csv\");\n",
       "            }\n",
       "\n",
       "            context_menu.add_item(\"Save \" + label + \" as CSV\", show_item, choose_item);\n",
       "        })(modules[\"toyplot/tables\"],modules[\"toyplot/menus/context\"],modules[\"toyplot/io\"],\"tfaa4c631598f480cb61bebb783d46cc1\",\"data\",\"scatterplot\",[\"x\", \"y0\"],[[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19], [0.0, 0.0027700831024930744, 0.011080332409972297, 0.02493074792243767, 0.04432132963988919, 0.06925207756232686, 0.09972299168975068, 0.13573407202216065, 0.17728531855955676, 0.22437673130193903, 0.27700831024930744, 0.33518005540166207, 0.39889196675900274, 0.4681440443213295, 0.5429362880886426, 0.6232686980609419, 0.709141274238227, 0.8005540166204984, 0.8975069252077561, 1.0]],\"toyplot\");\n",
       "(function(axis, axis_id, projection)\n",
       "        {\n",
       "            axis.show_coordinates(axis_id, projection);\n",
       "        })(modules[\"toyplot.coordinates.Axis\"],\"t422e11ba321643cfa71d897a765befdd\",[{\"domain\": {\"bounds\": {\"max\": Infinity, \"min\": -Infinity}, \"max\": 20.0, \"min\": 0.0}, \"range\": {\"bounds\": {\"max\": Infinity, \"min\": -Infinity}, \"max\": 200.0, \"min\": 0.0}, \"scale\": \"linear\"}]);\n",
       "(function(axis, axis_id, projection)\n",
       "        {\n",
       "            axis.show_coordinates(axis_id, projection);\n",
       "        })(modules[\"toyplot.coordinates.Axis\"],\"ted24225557034f6f8026ad32127e69b5\",[{\"domain\": {\"bounds\": {\"max\": Infinity, \"min\": -Infinity}, \"max\": 1.0, \"min\": 0.0}, \"range\": {\"bounds\": {\"max\": Infinity, \"min\": -Infinity}, \"max\": 200.0, \"min\": 0.0}, \"scale\": \"linear\"}]);\n",
       "})();</script></div></div>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "y = numpy.linspace(0, 1, 20) ** 2\n",
    "toyplot.scatterplot(y, width=300);"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Markers can also be added to regular plots to highlight the datums (they are turned-off by default):"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div class=\"toyplot\" id=\"t9b62b3a7b424436db69fb57c078c7707\" style=\"text-align:center\"><svg class=\"toyplot-canvas-Canvas\" height=\"300.0px\" id=\"td61d1d266ba8421bb78335271451b917\" preserveAspectRatio=\"xMidYMid meet\" style=\"background-color:transparent;fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:Helvetica;font-size:12px;opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0;stroke-width:1.0\" viewBox=\"0 0 600.0 300.0\" width=\"600.0px\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:toyplot=\"http://www.sandia.gov/toyplot\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"><g class=\"toyplot-coordinates-Cartesian\" id=\"t503393f1091043f981219ab31f8ded19\"><clipPath id=\"t9d211032c3284ba08bf9cf2e837f145b\"><rect height=\"220.0\" width=\"220.0\" x=\"40.0\" y=\"40.0\"></rect></clipPath><g clip-path=\"url(#t9d211032c3284ba08bf9cf2e837f145b)\"><g class=\"toyplot-mark-Plot\" id=\"tdae4cadba2e346109f82b91a11ca8c65\" style=\"fill:none\"><g class=\"toyplot-Series\"><path d=\"M 50.0 250.0 L 60.0 249.4459833795014 L 70.0 247.78393351800551 L 80.0 245.01385041551248 L 90.0 241.13573407202216 L 100.0 236.14958448753461 L 110.0 230.05540166204986 L 120.0 222.85318559556785 L 130.0 214.54293628808864 L 140.0 205.1246537396122 L 150.0 194.5983379501385 L 160.0 182.96398891966757 L 170.0 170.22160664819947 L 180.0 156.37119113573411 L 190.0 141.41274238227149 L 200.0 125.34626038781163 L 210.0 108.17174515235459 L 220.0 89.889196675900322 L 230.0 70.498614958448783 L 240.0 50.0\" style=\"stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0;stroke-width:2.0\"></path></g></g></g><g class=\"toyplot-coordinates-Axis\" id=\"t61ca2279638c4dd0b7ae81975d5b87f2\" transform=\"translate(50.0,250.0)translate(0,10.0)\"><line style=\"\" x1=\"0\" x2=\"190.0\" y1=\"0\" y2=\"0\"></line><g><g transform=\"translate(0.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-2.78\" y=\"8.555\">0</text></g><g transform=\"translate(50.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-2.78\" y=\"8.555\">5</text></g><g transform=\"translate(100.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-5.56\" y=\"8.555\">10</text></g><g transform=\"translate(150.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-5.56\" y=\"8.555\">15</text></g><g transform=\"translate(200.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-5.56\" y=\"8.555\">20</text></g></g><g class=\"toyplot-coordinates-Axis-coordinates\" style=\"visibility:hidden\" transform=\"\"><line style=\"stroke:rgb(43.9%,50.2%,56.5%);stroke-opacity:1.0;stroke-width:1.0\" x1=\"0\" x2=\"0\" y1=\"-3.0\" y2=\"4.5\"></line><text style=\"alignment-baseline:alphabetic;fill:rgb(43.9%,50.2%,56.5%);fill-opacity:1.0;font-size:10px;font-weight:normal;stroke:none;text-anchor:middle\" x=\"0\" y=\"-6\"></text></g></g><g class=\"toyplot-coordinates-Axis\" id=\"t9279f77390024c0d9cb0985b17a832ec\" transform=\"translate(50.0,250.0)rotate(-90.0)translate(0,-10.0)\"><line style=\"\" x1=\"0\" x2=\"200.0\" y1=\"0\" y2=\"0\"></line><g><g transform=\"translate(0.0,-6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-6.95\" y=\"-4.4408920985e-16\">0.0</text></g><g transform=\"translate(100.0,-6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-6.95\" y=\"-4.4408920985e-16\">0.5</text></g><g transform=\"translate(200.0,-6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-6.95\" y=\"-4.4408920985e-16\">1.0</text></g></g><g class=\"toyplot-coordinates-Axis-coordinates\" style=\"visibility:hidden\" transform=\"\"><line style=\"stroke:rgb(43.9%,50.2%,56.5%);stroke-opacity:1.0;stroke-width:1.0\" x1=\"0\" x2=\"0\" y1=\"3.0\" y2=\"-4.5\"></line><text style=\"alignment-baseline:hanging;fill:rgb(43.9%,50.2%,56.5%);fill-opacity:1.0;font-size:10px;font-weight:normal;stroke:none;text-anchor:middle\" x=\"0\" y=\"6\"></text></g></g></g><g class=\"toyplot-coordinates-Cartesian\" id=\"tf96ba9aaad7e4fe282a1d1cc43e153ca\"><clipPath id=\"t7969fa64a9a3452fa53e45344f0e8730\"><rect height=\"220.0\" width=\"220.0\" x=\"340.0\" y=\"40.0\"></rect></clipPath><g clip-path=\"url(#t7969fa64a9a3452fa53e45344f0e8730)\"><g class=\"toyplot-mark-Plot\" id=\"taab1f5de074d43658450cbfd7ceadcba\" style=\"fill:none\"><g class=\"toyplot-Series\"><path d=\"M 350.0 250.0 L 360.0 249.4459833795014 L 370.0 247.78393351800551 L 380.0 245.01385041551248 L 390.0 241.13573407202216 L 400.0 236.14958448753461 L 410.0 230.05540166204986 L 420.0 222.85318559556785 L 430.0 214.54293628808864 L 440.0 205.1246537396122 L 450.0 194.5983379501385 L 460.0 182.96398891966757 L 470.0 170.22160664819947 L 480.0 156.37119113573411 L 490.0 141.41274238227149 L 500.0 125.34626038781163 L 510.0 108.17174515235459 L 520.0 89.889196675900322 L 530.0 70.498614958448783 L 540.0 50.0\" style=\"stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0;stroke-width:2.0\"></path><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(350.0, 250.0)\"><circle r=\"2.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(360.0, 249.4459833795014)\"><circle r=\"2.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(370.0, 247.78393351800551)\"><circle r=\"2.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(380.0, 245.01385041551248)\"><circle r=\"2.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(390.0, 241.13573407202216)\"><circle r=\"2.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(400.0, 236.14958448753461)\"><circle r=\"2.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(410.0, 230.05540166204986)\"><circle r=\"2.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(420.0, 222.85318559556785)\"><circle r=\"2.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(430.0, 214.54293628808864)\"><circle r=\"2.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(440.0, 205.1246537396122)\"><circle r=\"2.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(450.0, 194.5983379501385)\"><circle r=\"2.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(460.0, 182.96398891966757)\"><circle r=\"2.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(470.0, 170.22160664819947)\"><circle r=\"2.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(480.0, 156.37119113573411)\"><circle r=\"2.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(490.0, 141.41274238227149)\"><circle r=\"2.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(500.0, 125.34626038781163)\"><circle r=\"2.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(510.0, 108.17174515235459)\"><circle r=\"2.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(520.0, 89.889196675900322)\"><circle r=\"2.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(530.0, 70.498614958448783)\"><circle r=\"2.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(540.0, 50.0)\"><circle r=\"2.0\"></circle></g></g></g></g><g class=\"toyplot-coordinates-Axis\" id=\"t3e8163d198624e2185105ecaaad88294\" transform=\"translate(350.0,250.0)translate(0,10.0)\"><line style=\"\" x1=\"0\" x2=\"190.0\" y1=\"0\" y2=\"0\"></line><g><g transform=\"translate(0.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-2.78\" y=\"8.555\">0</text></g><g transform=\"translate(50.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-2.78\" y=\"8.555\">5</text></g><g transform=\"translate(100.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-5.56\" y=\"8.555\">10</text></g><g transform=\"translate(150.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-5.56\" y=\"8.555\">15</text></g><g transform=\"translate(200.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-5.56\" y=\"8.555\">20</text></g></g><g class=\"toyplot-coordinates-Axis-coordinates\" style=\"visibility:hidden\" transform=\"\"><line style=\"stroke:rgb(43.9%,50.2%,56.5%);stroke-opacity:1.0;stroke-width:1.0\" x1=\"0\" x2=\"0\" y1=\"-3.0\" y2=\"4.5\"></line><text style=\"alignment-baseline:alphabetic;fill:rgb(43.9%,50.2%,56.5%);fill-opacity:1.0;font-size:10px;font-weight:normal;stroke:none;text-anchor:middle\" x=\"0\" y=\"-6\"></text></g></g><g class=\"toyplot-coordinates-Axis\" id=\"tc0d2689cb10e471b978de9fbc9c3592f\" transform=\"translate(350.0,250.0)rotate(-90.0)translate(0,-10.0)\"><line style=\"\" x1=\"0\" x2=\"200.0\" y1=\"0\" y2=\"0\"></line><g><g transform=\"translate(0.0,-6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-6.95\" y=\"-4.4408920985e-16\">0.0</text></g><g transform=\"translate(100.0,-6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-6.95\" y=\"-4.4408920985e-16\">0.5</text></g><g transform=\"translate(200.0,-6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-6.95\" y=\"-4.4408920985e-16\">1.0</text></g></g><g class=\"toyplot-coordinates-Axis-coordinates\" style=\"visibility:hidden\" transform=\"\"><line style=\"stroke:rgb(43.9%,50.2%,56.5%);stroke-opacity:1.0;stroke-width:1.0\" x1=\"0\" x2=\"0\" y1=\"3.0\" y2=\"-4.5\"></line><text style=\"alignment-baseline:hanging;fill:rgb(43.9%,50.2%,56.5%);fill-opacity:1.0;font-size:10px;font-weight:normal;stroke:none;text-anchor:middle\" x=\"0\" y=\"6\"></text></g></g></g></svg><div class=\"toyplot-behavior\"><script>(function()\n",
       "{\n",
       "var modules={};\n",
       "modules[\"toyplot/tables\"] = (function()\n",
       "    {\n",
       "        var tables = [];\n",
       "\n",
       "        var module = {};\n",
       "\n",
       "        module.set = function(owner, key, names, columns)\n",
       "        {\n",
       "            tables.push({owner: owner, key: key, names: names, columns: columns});\n",
       "        }\n",
       "\n",
       "        module.get = function(owner, key)\n",
       "        {\n",
       "            for(var i = 0; i != tables.length; ++i)\n",
       "            {\n",
       "                var table = tables[i];\n",
       "                if(table.owner != owner)\n",
       "                    continue;\n",
       "                if(table.key != key)\n",
       "                    continue;\n",
       "                return {names: table.names, columns: table.columns};\n",
       "            }\n",
       "        }\n",
       "\n",
       "        module.get_csv = function(owner, key)\n",
       "        {\n",
       "            var table = module.get(owner, key);\n",
       "            if(table != undefined)\n",
       "            {\n",
       "                var csv = \"\";\n",
       "                csv += table.names.join(\",\") + \"\\n\";\n",
       "                for(var i = 0; i != table.columns[0].length; ++i)\n",
       "                {\n",
       "                  for(var j = 0; j != table.columns.length; ++j)\n",
       "                  {\n",
       "                    if(j)\n",
       "                      csv += \",\";\n",
       "                    csv += table.columns[j][i];\n",
       "                  }\n",
       "                  csv += \"\\n\";\n",
       "                }\n",
       "                return csv;\n",
       "            }\n",
       "        }\n",
       "\n",
       "        return module;\n",
       "    })();\n",
       "modules[\"toyplot/root/id\"] = \"t9b62b3a7b424436db69fb57c078c7707\";\n",
       "modules[\"toyplot/root\"] = (function(root_id)\n",
       "    {\n",
       "        return document.querySelector(\"#\" + root_id);\n",
       "    })(modules[\"toyplot/root/id\"]);\n",
       "modules[\"toyplot/canvas/id\"] = \"td61d1d266ba8421bb78335271451b917\";\n",
       "modules[\"toyplot/canvas\"] = (function(canvas_id)\n",
       "    {\n",
       "        return document.querySelector(\"#\" + canvas_id);\n",
       "    })(modules[\"toyplot/canvas/id\"]);\n",
       "modules[\"toyplot/menus/context\"] = (function(root, canvas)\n",
       "    {\n",
       "        var wrapper = document.createElement(\"div\");\n",
       "        wrapper.innerHTML = \"<ul class='toyplot-context-menu' style='background:#eee; border:1px solid #b8b8b8; border-radius:5px; box-shadow: 0px 0px 8px rgba(0%,0%,0%,0.25); margin:0; padding:3px 0; position:fixed; visibility:hidden;'></ul>\"\n",
       "        var menu = wrapper.firstChild;\n",
       "\n",
       "        root.appendChild(menu);\n",
       "\n",
       "        var items = [];\n",
       "\n",
       "        var ignore_mouseup = null;\n",
       "        function open_menu(e)\n",
       "        {\n",
       "            var show_menu = false;\n",
       "            for(var index=0; index != items.length; ++index)\n",
       "            {\n",
       "                var item = items[index];\n",
       "                if(item.show(e))\n",
       "                {\n",
       "                    item.item.style.display = \"block\";\n",
       "                    show_menu = true;\n",
       "                }\n",
       "                else\n",
       "                {\n",
       "                    item.item.style.display = \"none\";\n",
       "                }\n",
       "            }\n",
       "\n",
       "            if(show_menu)\n",
       "            {\n",
       "                ignore_mouseup = true;\n",
       "                menu.style.left = (e.clientX + 1) + \"px\";\n",
       "                menu.style.top = (e.clientY - 5) + \"px\";\n",
       "                menu.style.visibility = \"visible\";\n",
       "                e.stopPropagation();\n",
       "                e.preventDefault();\n",
       "            }\n",
       "        }\n",
       "\n",
       "        function close_menu()\n",
       "        {\n",
       "            menu.style.visibility = \"hidden\";\n",
       "        }\n",
       "\n",
       "        function contextmenu(e)\n",
       "        {\n",
       "            open_menu(e);\n",
       "        }\n",
       "\n",
       "        function mousemove(e)\n",
       "        {\n",
       "            ignore_mouseup = false;\n",
       "        }\n",
       "\n",
       "        function mouseup(e)\n",
       "        {\n",
       "            if(ignore_mouseup)\n",
       "            {\n",
       "                ignore_mouseup = false;\n",
       "                return;\n",
       "            }\n",
       "            close_menu();\n",
       "        }\n",
       "\n",
       "        function keydown(e)\n",
       "        {\n",
       "            if(e.key == \"Escape\" || e.key == \"Esc\" || e.keyCode == 27)\n",
       "            {\n",
       "                close_menu();\n",
       "            }\n",
       "        }\n",
       "\n",
       "        canvas.addEventListener(\"contextmenu\", contextmenu);\n",
       "        canvas.addEventListener(\"mousemove\", mousemove);\n",
       "        document.addEventListener(\"mouseup\", mouseup);\n",
       "        document.addEventListener(\"keydown\", keydown);\n",
       "\n",
       "        var module = {};\n",
       "        module.add_item = function(label, show, activate)\n",
       "        {\n",
       "            var wrapper = document.createElement(\"div\");\n",
       "            wrapper.innerHTML = \"<li class='toyplot-context-menu-item' style='background:#eee; color:#333; padding:2px 20px; list-style:none; margin:0; text-align:left;'>\" + label + \"</li>\"\n",
       "            var item = wrapper.firstChild;\n",
       "\n",
       "            items.push({item: item, show: show});\n",
       "\n",
       "            function mouseover()\n",
       "            {\n",
       "                this.style.background = \"steelblue\";\n",
       "                this.style.color = \"white\";\n",
       "            }\n",
       "\n",
       "            function mouseout()\n",
       "            {\n",
       "                this.style.background = \"#eee\";\n",
       "                this.style.color = \"#333\";\n",
       "            }\n",
       "\n",
       "            function choose_item(e)\n",
       "            {\n",
       "                close_menu();\n",
       "                activate();\n",
       "\n",
       "                e.stopPropagation();\n",
       "                e.preventDefault();\n",
       "            }\n",
       "\n",
       "            item.addEventListener(\"mouseover\", mouseover);\n",
       "            item.addEventListener(\"mouseout\", mouseout);\n",
       "            item.addEventListener(\"mouseup\", choose_item);\n",
       "            item.addEventListener(\"contextmenu\", choose_item);\n",
       "\n",
       "            menu.appendChild(item);\n",
       "        };\n",
       "        return module;\n",
       "    })(modules[\"toyplot/root\"],modules[\"toyplot/canvas\"]);\n",
       "modules[\"toyplot/io\"] = (function()\n",
       "    {\n",
       "        var module = {};\n",
       "        module.save_file = function(mime_type, charset, data, filename)\n",
       "        {\n",
       "            var uri = \"data:\" + mime_type + \";charset=\" + charset + \",\" + data;\n",
       "            uri = encodeURI(uri);\n",
       "\n",
       "            var link = document.createElement(\"a\");\n",
       "            if(typeof link.download != \"undefined\")\n",
       "            {\n",
       "              link.href = uri;\n",
       "              link.style = \"visibility:hidden\";\n",
       "              link.download = filename;\n",
       "\n",
       "              document.body.appendChild(link);\n",
       "              link.click();\n",
       "              document.body.removeChild(link);\n",
       "            }\n",
       "            else\n",
       "            {\n",
       "              window.open(uri);\n",
       "            }\n",
       "        };\n",
       "        return module;\n",
       "    })();\n",
       "modules[\"toyplot.coordinates.Axis\"] = (\n",
       "        function(canvas)\n",
       "        {\n",
       "            function sign(x)\n",
       "            {\n",
       "                return x < 0 ? -1 : x > 0 ? 1 : 0;\n",
       "            }\n",
       "\n",
       "            function mix(a, b, amount)\n",
       "            {\n",
       "                return ((1.0 - amount) * a) + (amount * b);\n",
       "            }\n",
       "\n",
       "            function log(x, base)\n",
       "            {\n",
       "                return Math.log(Math.abs(x)) / Math.log(base);\n",
       "            }\n",
       "\n",
       "            function in_range(a, x, b)\n",
       "            {\n",
       "                var left = Math.min(a, b);\n",
       "                var right = Math.max(a, b);\n",
       "                return left <= x && x <= right;\n",
       "            }\n",
       "\n",
       "            function inside(range, projection)\n",
       "            {\n",
       "                for(var i = 0; i != projection.length; ++i)\n",
       "                {\n",
       "                    var segment = projection[i];\n",
       "                    if(in_range(segment.range.min, range, segment.range.max))\n",
       "                        return true;\n",
       "                }\n",
       "                return false;\n",
       "            }\n",
       "\n",
       "            function to_domain(range, projection)\n",
       "            {\n",
       "                for(var i = 0; i != projection.length; ++i)\n",
       "                {\n",
       "                    var segment = projection[i];\n",
       "                    if(in_range(segment.range.bounds.min, range, segment.range.bounds.max))\n",
       "                    {\n",
       "                        if(segment.scale == \"linear\")\n",
       "                        {\n",
       "                            var amount = (range - segment.range.min) / (segment.range.max - segment.range.min);\n",
       "                            return mix(segment.domain.min, segment.domain.max, amount)\n",
       "                        }\n",
       "                        else if(segment.scale[0] == \"log\")\n",
       "                        {\n",
       "                            var amount = (range - segment.range.min) / (segment.range.max - segment.range.min);\n",
       "                            var base = segment.scale[1];\n",
       "                            return sign(segment.domain.min) * Math.pow(base, mix(log(segment.domain.min, base), log(segment.domain.max, base), amount));\n",
       "                        }\n",
       "                    }\n",
       "                }\n",
       "            }\n",
       "\n",
       "            var axes = {};\n",
       "\n",
       "            function display_coordinates(e)\n",
       "            {\n",
       "                var current = canvas.createSVGPoint();\n",
       "                current.x = e.clientX;\n",
       "                current.y = e.clientY;\n",
       "\n",
       "                for(var axis_id in axes)\n",
       "                {\n",
       "                    var axis = document.querySelector(\"#\" + axis_id);\n",
       "                    var coordinates = axis.querySelector(\".toyplot-coordinates-Axis-coordinates\");\n",
       "                    if(coordinates)\n",
       "                    {\n",
       "                        var projection = axes[axis_id];\n",
       "                        var local = current.matrixTransform(axis.getScreenCTM().inverse());\n",
       "                        if(inside(local.x, projection))\n",
       "                        {\n",
       "                            var domain = to_domain(local.x, projection);\n",
       "                            coordinates.style.visibility = \"visible\";\n",
       "                            coordinates.setAttribute(\"transform\", \"translate(\" + local.x + \")\");\n",
       "                            var text = coordinates.querySelector(\"text\");\n",
       "                            text.textContent = domain.toFixed(2);\n",
       "                        }\n",
       "                        else\n",
       "                        {\n",
       "                            coordinates.style.visibility= \"hidden\";\n",
       "                        }\n",
       "                    }\n",
       "                }\n",
       "            }\n",
       "\n",
       "            canvas.addEventListener(\"click\", display_coordinates);\n",
       "\n",
       "            var module = {};\n",
       "            module.show_coordinates = function(axis_id, projection)\n",
       "            {\n",
       "                axes[axis_id] = projection;\n",
       "            }\n",
       "\n",
       "            return module;\n",
       "        })(modules[\"toyplot/canvas\"]);\n",
       "(function(tables, context_menu, io, owner_id, key, label, names, columns, filename)\n",
       "        {\n",
       "            tables.set(owner_id, key, names, columns);\n",
       "\n",
       "            var owner = document.querySelector(\"#\" + owner_id);\n",
       "            function show_item(e)\n",
       "            {\n",
       "                return owner.contains(e.target);\n",
       "            }\n",
       "\n",
       "            function choose_item()\n",
       "            {\n",
       "                io.save_file(\"text/csv\", \"utf-8\", tables.get_csv(owner_id, key), filename + \".csv\");\n",
       "            }\n",
       "\n",
       "            context_menu.add_item(\"Save \" + label + \" as CSV\", show_item, choose_item);\n",
       "        })(modules[\"toyplot/tables\"],modules[\"toyplot/menus/context\"],modules[\"toyplot/io\"],\"tdae4cadba2e346109f82b91a11ca8c65\",\"data\",\"plot data\",[\"x\", \"y0\"],[[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19], [0.0, 0.0027700831024930744, 0.011080332409972297, 0.02493074792243767, 0.04432132963988919, 0.06925207756232686, 0.09972299168975068, 0.13573407202216065, 0.17728531855955676, 0.22437673130193903, 0.27700831024930744, 0.33518005540166207, 0.39889196675900274, 0.4681440443213295, 0.5429362880886426, 0.6232686980609419, 0.709141274238227, 0.8005540166204984, 0.8975069252077561, 1.0]],\"toyplot\");\n",
       "(function(axis, axis_id, projection)\n",
       "        {\n",
       "            axis.show_coordinates(axis_id, projection);\n",
       "        })(modules[\"toyplot.coordinates.Axis\"],\"t61ca2279638c4dd0b7ae81975d5b87f2\",[{\"domain\": {\"bounds\": {\"max\": Infinity, \"min\": -Infinity}, \"max\": 20.0, \"min\": 0.0}, \"range\": {\"bounds\": {\"max\": Infinity, \"min\": -Infinity}, \"max\": 200.0, \"min\": 0.0}, \"scale\": \"linear\"}]);\n",
       "(function(axis, axis_id, projection)\n",
       "        {\n",
       "            axis.show_coordinates(axis_id, projection);\n",
       "        })(modules[\"toyplot.coordinates.Axis\"],\"t9279f77390024c0d9cb0985b17a832ec\",[{\"domain\": {\"bounds\": {\"max\": Infinity, \"min\": -Infinity}, \"max\": 1.0, \"min\": 0.0}, \"range\": {\"bounds\": {\"max\": Infinity, \"min\": -Infinity}, \"max\": 200.0, \"min\": 0.0}, \"scale\": \"linear\"}]);\n",
       "(function(tables, context_menu, io, owner_id, key, label, names, columns, filename)\n",
       "        {\n",
       "            tables.set(owner_id, key, names, columns);\n",
       "\n",
       "            var owner = document.querySelector(\"#\" + owner_id);\n",
       "            function show_item(e)\n",
       "            {\n",
       "                return owner.contains(e.target);\n",
       "            }\n",
       "\n",
       "            function choose_item()\n",
       "            {\n",
       "                io.save_file(\"text/csv\", \"utf-8\", tables.get_csv(owner_id, key), filename + \".csv\");\n",
       "            }\n",
       "\n",
       "            context_menu.add_item(\"Save \" + label + \" as CSV\", show_item, choose_item);\n",
       "        })(modules[\"toyplot/tables\"],modules[\"toyplot/menus/context\"],modules[\"toyplot/io\"],\"taab1f5de074d43658450cbfd7ceadcba\",\"data\",\"plot data\",[\"x\", \"y0\"],[[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19], [0.0, 0.0027700831024930744, 0.011080332409972297, 0.02493074792243767, 0.04432132963988919, 0.06925207756232686, 0.09972299168975068, 0.13573407202216065, 0.17728531855955676, 0.22437673130193903, 0.27700831024930744, 0.33518005540166207, 0.39889196675900274, 0.4681440443213295, 0.5429362880886426, 0.6232686980609419, 0.709141274238227, 0.8005540166204984, 0.8975069252077561, 1.0]],\"toyplot\");\n",
       "(function(axis, axis_id, projection)\n",
       "        {\n",
       "            axis.show_coordinates(axis_id, projection);\n",
       "        })(modules[\"toyplot.coordinates.Axis\"],\"t3e8163d198624e2185105ecaaad88294\",[{\"domain\": {\"bounds\": {\"max\": Infinity, \"min\": -Infinity}, \"max\": 20.0, \"min\": 0.0}, \"range\": {\"bounds\": {\"max\": Infinity, \"min\": -Infinity}, \"max\": 200.0, \"min\": 0.0}, \"scale\": \"linear\"}]);\n",
       "(function(axis, axis_id, projection)\n",
       "        {\n",
       "            axis.show_coordinates(axis_id, projection);\n",
       "        })(modules[\"toyplot.coordinates.Axis\"],\"tc0d2689cb10e471b978de9fbc9c3592f\",[{\"domain\": {\"bounds\": {\"max\": Infinity, \"min\": -Infinity}, \"max\": 1.0, \"min\": 0.0}, \"range\": {\"bounds\": {\"max\": Infinity, \"min\": -Infinity}, \"max\": 200.0, \"min\": 0.0}, \"scale\": \"linear\"}]);\n",
       "})();</script></div></div>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "canvas = toyplot.Canvas(600, 300)\n",
    "canvas.cartesian(grid=(1, 2, 0)).plot(y)\n",
    "canvas.cartesian(grid=(1, 2, 1)).plot(y, marker=\"o\");"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "You can use the `size` argument to control the size of the markers:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 15,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div class=\"toyplot\" id=\"t6ecc22ca70e74a4e918498a0e8f4dfdd\" style=\"text-align:center\"><svg class=\"toyplot-canvas-Canvas\" height=\"300.0px\" id=\"t127ce9b40a0949c493c50407b187dec0\" preserveAspectRatio=\"xMidYMid meet\" style=\"background-color:transparent;fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:Helvetica;font-size:12px;opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0;stroke-width:1.0\" viewBox=\"0 0 600.0 300.0\" width=\"600.0px\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:toyplot=\"http://www.sandia.gov/toyplot\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"><g class=\"toyplot-coordinates-Cartesian\" id=\"t69f500a01c9443438601616171051556\"><clipPath id=\"ta721c7e573c842fd84a641d19828321f\"><rect height=\"220.0\" width=\"220.0\" x=\"40.0\" y=\"40.0\"></rect></clipPath><g clip-path=\"url(#ta721c7e573c842fd84a641d19828321f)\"><g class=\"toyplot-mark-Plot\" id=\"t561c128f653c4fd0b340f313ab332613\" style=\"fill:none\"><g class=\"toyplot-Series\"><path d=\"M 50.0 250.0 L 60.0 249.4459833795014 L 70.0 247.78393351800551 L 80.0 245.01385041551248 L 90.0 241.13573407202216 L 100.0 236.14958448753461 L 110.0 230.05540166204986 L 120.0 222.85318559556785 L 130.0 214.54293628808864 L 140.0 205.1246537396122 L 150.0 194.5983379501385 L 160.0 182.96398891966757 L 170.0 170.22160664819947 L 180.0 156.37119113573411 L 190.0 141.41274238227149 L 200.0 125.34626038781163 L 210.0 108.17174515235459 L 220.0 89.889196675900322 L 230.0 70.498614958448783 L 240.0 50.0\" style=\"stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0;stroke-width:2.0\"></path><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(50.0, 250.0)\"><circle r=\"3.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(60.0, 249.4459833795014)\"><circle r=\"3.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(70.0, 247.78393351800551)\"><circle r=\"3.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(80.0, 245.01385041551248)\"><circle r=\"3.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(90.0, 241.13573407202216)\"><circle r=\"3.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(100.0, 236.14958448753461)\"><circle r=\"3.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(110.0, 230.05540166204986)\"><circle r=\"3.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(120.0, 222.85318559556785)\"><circle r=\"3.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(130.0, 214.54293628808864)\"><circle r=\"3.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(140.0, 205.1246537396122)\"><circle r=\"3.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(150.0, 194.5983379501385)\"><circle r=\"3.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(160.0, 182.96398891966757)\"><circle r=\"3.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(170.0, 170.22160664819947)\"><circle r=\"3.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(180.0, 156.37119113573411)\"><circle r=\"3.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(190.0, 141.41274238227149)\"><circle r=\"3.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(200.0, 125.34626038781163)\"><circle r=\"3.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(210.0, 108.17174515235459)\"><circle r=\"3.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(220.0, 89.889196675900322)\"><circle r=\"3.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(230.0, 70.498614958448783)\"><circle r=\"3.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(240.0, 50.0)\"><circle r=\"3.0\"></circle></g></g></g></g><g class=\"toyplot-coordinates-Axis\" id=\"t12fca99231364cf397436635c8a92c62\" transform=\"translate(50.0,250.0)translate(0,10.0)\"><line style=\"\" x1=\"0\" x2=\"190.0\" y1=\"0\" y2=\"0\"></line><g><g transform=\"translate(0.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-2.78\" y=\"8.555\">0</text></g><g transform=\"translate(50.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-2.78\" y=\"8.555\">5</text></g><g transform=\"translate(100.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-5.56\" y=\"8.555\">10</text></g><g transform=\"translate(150.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-5.56\" y=\"8.555\">15</text></g><g transform=\"translate(200.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-5.56\" y=\"8.555\">20</text></g></g><g class=\"toyplot-coordinates-Axis-coordinates\" style=\"visibility:hidden\" transform=\"\"><line style=\"stroke:rgb(43.9%,50.2%,56.5%);stroke-opacity:1.0;stroke-width:1.0\" x1=\"0\" x2=\"0\" y1=\"-3.0\" y2=\"4.5\"></line><text style=\"alignment-baseline:alphabetic;fill:rgb(43.9%,50.2%,56.5%);fill-opacity:1.0;font-size:10px;font-weight:normal;stroke:none;text-anchor:middle\" x=\"0\" y=\"-6\"></text></g></g><g class=\"toyplot-coordinates-Axis\" id=\"t561c691f48bc4899bf89f487a55e65a3\" transform=\"translate(50.0,250.0)rotate(-90.0)translate(0,-10.0)\"><line style=\"\" x1=\"0\" x2=\"200.0\" y1=\"0\" y2=\"0\"></line><g><g transform=\"translate(0.0,-6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-6.95\" y=\"-4.4408920985e-16\">0.0</text></g><g transform=\"translate(100.0,-6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-6.95\" y=\"-4.4408920985e-16\">0.5</text></g><g transform=\"translate(200.0,-6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-6.95\" y=\"-4.4408920985e-16\">1.0</text></g></g><g class=\"toyplot-coordinates-Axis-coordinates\" style=\"visibility:hidden\" transform=\"\"><line style=\"stroke:rgb(43.9%,50.2%,56.5%);stroke-opacity:1.0;stroke-width:1.0\" x1=\"0\" x2=\"0\" y1=\"3.0\" y2=\"-4.5\"></line><text style=\"alignment-baseline:hanging;fill:rgb(43.9%,50.2%,56.5%);fill-opacity:1.0;font-size:10px;font-weight:normal;stroke:none;text-anchor:middle\" x=\"0\" y=\"6\"></text></g></g></g><g class=\"toyplot-coordinates-Cartesian\" id=\"t46310f2b653644bf86ee087feb9dcde1\"><clipPath id=\"t2a61e01ae5964661bb617810c15df4b3\"><rect height=\"220.0\" width=\"220.0\" x=\"340.0\" y=\"40.0\"></rect></clipPath><g clip-path=\"url(#t2a61e01ae5964661bb617810c15df4b3)\"><g class=\"toyplot-mark-Plot\" id=\"tdb9c4d6c599a410980a39e7d63453685\" style=\"fill:none\"><g class=\"toyplot-Series\"><path d=\"M 350.0 250.0 L 360.0 249.4459833795014 L 370.0 247.78393351800551 L 380.0 245.01385041551248 L 390.0 241.13573407202216 L 400.0 236.14958448753461 L 410.0 230.05540166204986 L 420.0 222.85318559556785 L 430.0 214.54293628808864 L 440.0 205.1246537396122 L 450.0 194.5983379501385 L 460.0 182.96398891966757 L 470.0 170.22160664819947 L 480.0 156.37119113573411 L 490.0 141.41274238227149 L 500.0 125.34626038781163 L 510.0 108.17174515235459 L 520.0 89.889196675900322 L 530.0 70.498614958448783 L 540.0 50.0\" style=\"stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0;stroke-width:2.0\"></path><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(350.0, 250.0)\"><circle r=\"5.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(360.0, 249.4459833795014)\"><circle r=\"5.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(370.0, 247.78393351800551)\"><circle r=\"5.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(380.0, 245.01385041551248)\"><circle r=\"5.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(390.0, 241.13573407202216)\"><circle r=\"5.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(400.0, 236.14958448753461)\"><circle r=\"5.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(410.0, 230.05540166204986)\"><circle r=\"5.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(420.0, 222.85318559556785)\"><circle r=\"5.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(430.0, 214.54293628808864)\"><circle r=\"5.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(440.0, 205.1246537396122)\"><circle r=\"5.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(450.0, 194.5983379501385)\"><circle r=\"5.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(460.0, 182.96398891966757)\"><circle r=\"5.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(470.0, 170.22160664819947)\"><circle r=\"5.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(480.0, 156.37119113573411)\"><circle r=\"5.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(490.0, 141.41274238227149)\"><circle r=\"5.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(500.0, 125.34626038781163)\"><circle r=\"5.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(510.0, 108.17174515235459)\"><circle r=\"5.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(520.0, 89.889196675900322)\"><circle r=\"5.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(530.0, 70.498614958448783)\"><circle r=\"5.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(540.0, 50.0)\"><circle r=\"5.0\"></circle></g></g></g></g><g class=\"toyplot-coordinates-Axis\" id=\"taebfd1a341da486ca12bb10c435b8cfc\" transform=\"translate(350.0,250.0)translate(0,10.0)\"><line style=\"\" x1=\"0\" x2=\"190.0\" y1=\"0\" y2=\"0\"></line><g><g transform=\"translate(0.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-2.78\" y=\"8.555\">0</text></g><g transform=\"translate(50.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-2.78\" y=\"8.555\">5</text></g><g transform=\"translate(100.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-5.56\" y=\"8.555\">10</text></g><g transform=\"translate(150.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-5.56\" y=\"8.555\">15</text></g><g transform=\"translate(200.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-5.56\" y=\"8.555\">20</text></g></g><g class=\"toyplot-coordinates-Axis-coordinates\" style=\"visibility:hidden\" transform=\"\"><line style=\"stroke:rgb(43.9%,50.2%,56.5%);stroke-opacity:1.0;stroke-width:1.0\" x1=\"0\" x2=\"0\" y1=\"-3.0\" y2=\"4.5\"></line><text style=\"alignment-baseline:alphabetic;fill:rgb(43.9%,50.2%,56.5%);fill-opacity:1.0;font-size:10px;font-weight:normal;stroke:none;text-anchor:middle\" x=\"0\" y=\"-6\"></text></g></g><g class=\"toyplot-coordinates-Axis\" id=\"t06c705908f8c45f18600fb2f9b9d1a41\" transform=\"translate(350.0,250.0)rotate(-90.0)translate(0,-10.0)\"><line style=\"\" x1=\"0\" x2=\"200.0\" y1=\"0\" y2=\"0\"></line><g><g transform=\"translate(0.0,-6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-6.95\" y=\"-4.4408920985e-16\">0.0</text></g><g transform=\"translate(100.0,-6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-6.95\" y=\"-4.4408920985e-16\">0.5</text></g><g transform=\"translate(200.0,-6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-6.95\" y=\"-4.4408920985e-16\">1.0</text></g></g><g class=\"toyplot-coordinates-Axis-coordinates\" style=\"visibility:hidden\" transform=\"\"><line style=\"stroke:rgb(43.9%,50.2%,56.5%);stroke-opacity:1.0;stroke-width:1.0\" x1=\"0\" x2=\"0\" y1=\"3.0\" y2=\"-4.5\"></line><text style=\"alignment-baseline:hanging;fill:rgb(43.9%,50.2%,56.5%);fill-opacity:1.0;font-size:10px;font-weight:normal;stroke:none;text-anchor:middle\" x=\"0\" y=\"6\"></text></g></g></g></svg><div class=\"toyplot-behavior\"><script>(function()\n",
       "{\n",
       "var modules={};\n",
       "modules[\"toyplot/tables\"] = (function()\n",
       "    {\n",
       "        var tables = [];\n",
       "\n",
       "        var module = {};\n",
       "\n",
       "        module.set = function(owner, key, names, columns)\n",
       "        {\n",
       "            tables.push({owner: owner, key: key, names: names, columns: columns});\n",
       "        }\n",
       "\n",
       "        module.get = function(owner, key)\n",
       "        {\n",
       "            for(var i = 0; i != tables.length; ++i)\n",
       "            {\n",
       "                var table = tables[i];\n",
       "                if(table.owner != owner)\n",
       "                    continue;\n",
       "                if(table.key != key)\n",
       "                    continue;\n",
       "                return {names: table.names, columns: table.columns};\n",
       "            }\n",
       "        }\n",
       "\n",
       "        module.get_csv = function(owner, key)\n",
       "        {\n",
       "            var table = module.get(owner, key);\n",
       "            if(table != undefined)\n",
       "            {\n",
       "                var csv = \"\";\n",
       "                csv += table.names.join(\",\") + \"\\n\";\n",
       "                for(var i = 0; i != table.columns[0].length; ++i)\n",
       "                {\n",
       "                  for(var j = 0; j != table.columns.length; ++j)\n",
       "                  {\n",
       "                    if(j)\n",
       "                      csv += \",\";\n",
       "                    csv += table.columns[j][i];\n",
       "                  }\n",
       "                  csv += \"\\n\";\n",
       "                }\n",
       "                return csv;\n",
       "            }\n",
       "        }\n",
       "\n",
       "        return module;\n",
       "    })();\n",
       "modules[\"toyplot/root/id\"] = \"t6ecc22ca70e74a4e918498a0e8f4dfdd\";\n",
       "modules[\"toyplot/root\"] = (function(root_id)\n",
       "    {\n",
       "        return document.querySelector(\"#\" + root_id);\n",
       "    })(modules[\"toyplot/root/id\"]);\n",
       "modules[\"toyplot/canvas/id\"] = \"t127ce9b40a0949c493c50407b187dec0\";\n",
       "modules[\"toyplot/canvas\"] = (function(canvas_id)\n",
       "    {\n",
       "        return document.querySelector(\"#\" + canvas_id);\n",
       "    })(modules[\"toyplot/canvas/id\"]);\n",
       "modules[\"toyplot/menus/context\"] = (function(root, canvas)\n",
       "    {\n",
       "        var wrapper = document.createElement(\"div\");\n",
       "        wrapper.innerHTML = \"<ul class='toyplot-context-menu' style='background:#eee; border:1px solid #b8b8b8; border-radius:5px; box-shadow: 0px 0px 8px rgba(0%,0%,0%,0.25); margin:0; padding:3px 0; position:fixed; visibility:hidden;'></ul>\"\n",
       "        var menu = wrapper.firstChild;\n",
       "\n",
       "        root.appendChild(menu);\n",
       "\n",
       "        var items = [];\n",
       "\n",
       "        var ignore_mouseup = null;\n",
       "        function open_menu(e)\n",
       "        {\n",
       "            var show_menu = false;\n",
       "            for(var index=0; index != items.length; ++index)\n",
       "            {\n",
       "                var item = items[index];\n",
       "                if(item.show(e))\n",
       "                {\n",
       "                    item.item.style.display = \"block\";\n",
       "                    show_menu = true;\n",
       "                }\n",
       "                else\n",
       "                {\n",
       "                    item.item.style.display = \"none\";\n",
       "                }\n",
       "            }\n",
       "\n",
       "            if(show_menu)\n",
       "            {\n",
       "                ignore_mouseup = true;\n",
       "                menu.style.left = (e.clientX + 1) + \"px\";\n",
       "                menu.style.top = (e.clientY - 5) + \"px\";\n",
       "                menu.style.visibility = \"visible\";\n",
       "                e.stopPropagation();\n",
       "                e.preventDefault();\n",
       "            }\n",
       "        }\n",
       "\n",
       "        function close_menu()\n",
       "        {\n",
       "            menu.style.visibility = \"hidden\";\n",
       "        }\n",
       "\n",
       "        function contextmenu(e)\n",
       "        {\n",
       "            open_menu(e);\n",
       "        }\n",
       "\n",
       "        function mousemove(e)\n",
       "        {\n",
       "            ignore_mouseup = false;\n",
       "        }\n",
       "\n",
       "        function mouseup(e)\n",
       "        {\n",
       "            if(ignore_mouseup)\n",
       "            {\n",
       "                ignore_mouseup = false;\n",
       "                return;\n",
       "            }\n",
       "            close_menu();\n",
       "        }\n",
       "\n",
       "        function keydown(e)\n",
       "        {\n",
       "            if(e.key == \"Escape\" || e.key == \"Esc\" || e.keyCode == 27)\n",
       "            {\n",
       "                close_menu();\n",
       "            }\n",
       "        }\n",
       "\n",
       "        canvas.addEventListener(\"contextmenu\", contextmenu);\n",
       "        canvas.addEventListener(\"mousemove\", mousemove);\n",
       "        document.addEventListener(\"mouseup\", mouseup);\n",
       "        document.addEventListener(\"keydown\", keydown);\n",
       "\n",
       "        var module = {};\n",
       "        module.add_item = function(label, show, activate)\n",
       "        {\n",
       "            var wrapper = document.createElement(\"div\");\n",
       "            wrapper.innerHTML = \"<li class='toyplot-context-menu-item' style='background:#eee; color:#333; padding:2px 20px; list-style:none; margin:0; text-align:left;'>\" + label + \"</li>\"\n",
       "            var item = wrapper.firstChild;\n",
       "\n",
       "            items.push({item: item, show: show});\n",
       "\n",
       "            function mouseover()\n",
       "            {\n",
       "                this.style.background = \"steelblue\";\n",
       "                this.style.color = \"white\";\n",
       "            }\n",
       "\n",
       "            function mouseout()\n",
       "            {\n",
       "                this.style.background = \"#eee\";\n",
       "                this.style.color = \"#333\";\n",
       "            }\n",
       "\n",
       "            function choose_item(e)\n",
       "            {\n",
       "                close_menu();\n",
       "                activate();\n",
       "\n",
       "                e.stopPropagation();\n",
       "                e.preventDefault();\n",
       "            }\n",
       "\n",
       "            item.addEventListener(\"mouseover\", mouseover);\n",
       "            item.addEventListener(\"mouseout\", mouseout);\n",
       "            item.addEventListener(\"mouseup\", choose_item);\n",
       "            item.addEventListener(\"contextmenu\", choose_item);\n",
       "\n",
       "            menu.appendChild(item);\n",
       "        };\n",
       "        return module;\n",
       "    })(modules[\"toyplot/root\"],modules[\"toyplot/canvas\"]);\n",
       "modules[\"toyplot/io\"] = (function()\n",
       "    {\n",
       "        var module = {};\n",
       "        module.save_file = function(mime_type, charset, data, filename)\n",
       "        {\n",
       "            var uri = \"data:\" + mime_type + \";charset=\" + charset + \",\" + data;\n",
       "            uri = encodeURI(uri);\n",
       "\n",
       "            var link = document.createElement(\"a\");\n",
       "            if(typeof link.download != \"undefined\")\n",
       "            {\n",
       "              link.href = uri;\n",
       "              link.style = \"visibility:hidden\";\n",
       "              link.download = filename;\n",
       "\n",
       "              document.body.appendChild(link);\n",
       "              link.click();\n",
       "              document.body.removeChild(link);\n",
       "            }\n",
       "            else\n",
       "            {\n",
       "              window.open(uri);\n",
       "            }\n",
       "        };\n",
       "        return module;\n",
       "    })();\n",
       "modules[\"toyplot.coordinates.Axis\"] = (\n",
       "        function(canvas)\n",
       "        {\n",
       "            function sign(x)\n",
       "            {\n",
       "                return x < 0 ? -1 : x > 0 ? 1 : 0;\n",
       "            }\n",
       "\n",
       "            function mix(a, b, amount)\n",
       "            {\n",
       "                return ((1.0 - amount) * a) + (amount * b);\n",
       "            }\n",
       "\n",
       "            function log(x, base)\n",
       "            {\n",
       "                return Math.log(Math.abs(x)) / Math.log(base);\n",
       "            }\n",
       "\n",
       "            function in_range(a, x, b)\n",
       "            {\n",
       "                var left = Math.min(a, b);\n",
       "                var right = Math.max(a, b);\n",
       "                return left <= x && x <= right;\n",
       "            }\n",
       "\n",
       "            function inside(range, projection)\n",
       "            {\n",
       "                for(var i = 0; i != projection.length; ++i)\n",
       "                {\n",
       "                    var segment = projection[i];\n",
       "                    if(in_range(segment.range.min, range, segment.range.max))\n",
       "                        return true;\n",
       "                }\n",
       "                return false;\n",
       "            }\n",
       "\n",
       "            function to_domain(range, projection)\n",
       "            {\n",
       "                for(var i = 0; i != projection.length; ++i)\n",
       "                {\n",
       "                    var segment = projection[i];\n",
       "                    if(in_range(segment.range.bounds.min, range, segment.range.bounds.max))\n",
       "                    {\n",
       "                        if(segment.scale == \"linear\")\n",
       "                        {\n",
       "                            var amount = (range - segment.range.min) / (segment.range.max - segment.range.min);\n",
       "                            return mix(segment.domain.min, segment.domain.max, amount)\n",
       "                        }\n",
       "                        else if(segment.scale[0] == \"log\")\n",
       "                        {\n",
       "                            var amount = (range - segment.range.min) / (segment.range.max - segment.range.min);\n",
       "                            var base = segment.scale[1];\n",
       "                            return sign(segment.domain.min) * Math.pow(base, mix(log(segment.domain.min, base), log(segment.domain.max, base), amount));\n",
       "                        }\n",
       "                    }\n",
       "                }\n",
       "            }\n",
       "\n",
       "            var axes = {};\n",
       "\n",
       "            function display_coordinates(e)\n",
       "            {\n",
       "                var current = canvas.createSVGPoint();\n",
       "                current.x = e.clientX;\n",
       "                current.y = e.clientY;\n",
       "\n",
       "                for(var axis_id in axes)\n",
       "                {\n",
       "                    var axis = document.querySelector(\"#\" + axis_id);\n",
       "                    var coordinates = axis.querySelector(\".toyplot-coordinates-Axis-coordinates\");\n",
       "                    if(coordinates)\n",
       "                    {\n",
       "                        var projection = axes[axis_id];\n",
       "                        var local = current.matrixTransform(axis.getScreenCTM().inverse());\n",
       "                        if(inside(local.x, projection))\n",
       "                        {\n",
       "                            var domain = to_domain(local.x, projection);\n",
       "                            coordinates.style.visibility = \"visible\";\n",
       "                            coordinates.setAttribute(\"transform\", \"translate(\" + local.x + \")\");\n",
       "                            var text = coordinates.querySelector(\"text\");\n",
       "                            text.textContent = domain.toFixed(2);\n",
       "                        }\n",
       "                        else\n",
       "                        {\n",
       "                            coordinates.style.visibility= \"hidden\";\n",
       "                        }\n",
       "                    }\n",
       "                }\n",
       "            }\n",
       "\n",
       "            canvas.addEventListener(\"click\", display_coordinates);\n",
       "\n",
       "            var module = {};\n",
       "            module.show_coordinates = function(axis_id, projection)\n",
       "            {\n",
       "                axes[axis_id] = projection;\n",
       "            }\n",
       "\n",
       "            return module;\n",
       "        })(modules[\"toyplot/canvas\"]);\n",
       "(function(tables, context_menu, io, owner_id, key, label, names, columns, filename)\n",
       "        {\n",
       "            tables.set(owner_id, key, names, columns);\n",
       "\n",
       "            var owner = document.querySelector(\"#\" + owner_id);\n",
       "            function show_item(e)\n",
       "            {\n",
       "                return owner.contains(e.target);\n",
       "            }\n",
       "\n",
       "            function choose_item()\n",
       "            {\n",
       "                io.save_file(\"text/csv\", \"utf-8\", tables.get_csv(owner_id, key), filename + \".csv\");\n",
       "            }\n",
       "\n",
       "            context_menu.add_item(\"Save \" + label + \" as CSV\", show_item, choose_item);\n",
       "        })(modules[\"toyplot/tables\"],modules[\"toyplot/menus/context\"],modules[\"toyplot/io\"],\"t561c128f653c4fd0b340f313ab332613\",\"data\",\"plot data\",[\"x\", \"y0\"],[[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19], [0.0, 0.0027700831024930744, 0.011080332409972297, 0.02493074792243767, 0.04432132963988919, 0.06925207756232686, 0.09972299168975068, 0.13573407202216065, 0.17728531855955676, 0.22437673130193903, 0.27700831024930744, 0.33518005540166207, 0.39889196675900274, 0.4681440443213295, 0.5429362880886426, 0.6232686980609419, 0.709141274238227, 0.8005540166204984, 0.8975069252077561, 1.0]],\"toyplot\");\n",
       "(function(axis, axis_id, projection)\n",
       "        {\n",
       "            axis.show_coordinates(axis_id, projection);\n",
       "        })(modules[\"toyplot.coordinates.Axis\"],\"t12fca99231364cf397436635c8a92c62\",[{\"domain\": {\"bounds\": {\"max\": Infinity, \"min\": -Infinity}, \"max\": 20.0, \"min\": 0.0}, \"range\": {\"bounds\": {\"max\": Infinity, \"min\": -Infinity}, \"max\": 200.0, \"min\": 0.0}, \"scale\": \"linear\"}]);\n",
       "(function(axis, axis_id, projection)\n",
       "        {\n",
       "            axis.show_coordinates(axis_id, projection);\n",
       "        })(modules[\"toyplot.coordinates.Axis\"],\"t561c691f48bc4899bf89f487a55e65a3\",[{\"domain\": {\"bounds\": {\"max\": Infinity, \"min\": -Infinity}, \"max\": 1.0, \"min\": 0.0}, \"range\": {\"bounds\": {\"max\": Infinity, \"min\": -Infinity}, \"max\": 200.0, \"min\": 0.0}, \"scale\": \"linear\"}]);\n",
       "(function(tables, context_menu, io, owner_id, key, label, names, columns, filename)\n",
       "        {\n",
       "            tables.set(owner_id, key, names, columns);\n",
       "\n",
       "            var owner = document.querySelector(\"#\" + owner_id);\n",
       "            function show_item(e)\n",
       "            {\n",
       "                return owner.contains(e.target);\n",
       "            }\n",
       "\n",
       "            function choose_item()\n",
       "            {\n",
       "                io.save_file(\"text/csv\", \"utf-8\", tables.get_csv(owner_id, key), filename + \".csv\");\n",
       "            }\n",
       "\n",
       "            context_menu.add_item(\"Save \" + label + \" as CSV\", show_item, choose_item);\n",
       "        })(modules[\"toyplot/tables\"],modules[\"toyplot/menus/context\"],modules[\"toyplot/io\"],\"tdb9c4d6c599a410980a39e7d63453685\",\"data\",\"plot data\",[\"x\", \"y0\"],[[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19], [0.0, 0.0027700831024930744, 0.011080332409972297, 0.02493074792243767, 0.04432132963988919, 0.06925207756232686, 0.09972299168975068, 0.13573407202216065, 0.17728531855955676, 0.22437673130193903, 0.27700831024930744, 0.33518005540166207, 0.39889196675900274, 0.4681440443213295, 0.5429362880886426, 0.6232686980609419, 0.709141274238227, 0.8005540166204984, 0.8975069252077561, 1.0]],\"toyplot\");\n",
       "(function(axis, axis_id, projection)\n",
       "        {\n",
       "            axis.show_coordinates(axis_id, projection);\n",
       "        })(modules[\"toyplot.coordinates.Axis\"],\"taebfd1a341da486ca12bb10c435b8cfc\",[{\"domain\": {\"bounds\": {\"max\": Infinity, \"min\": -Infinity}, \"max\": 20.0, \"min\": 0.0}, \"range\": {\"bounds\": {\"max\": Infinity, \"min\": -Infinity}, \"max\": 200.0, \"min\": 0.0}, \"scale\": \"linear\"}]);\n",
       "(function(axis, axis_id, projection)\n",
       "        {\n",
       "            axis.show_coordinates(axis_id, projection);\n",
       "        })(modules[\"toyplot.coordinates.Axis\"],\"t06c705908f8c45f18600fb2f9b9d1a41\",[{\"domain\": {\"bounds\": {\"max\": Infinity, \"min\": -Infinity}, \"max\": 1.0, \"min\": 0.0}, \"range\": {\"bounds\": {\"max\": Infinity, \"min\": -Infinity}, \"max\": 200.0, \"min\": 0.0}, \"scale\": \"linear\"}]);\n",
       "})();</script></div></div>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "canvas = toyplot.Canvas(600, 300)\n",
    "canvas.cartesian(grid=(1, 2, 0)).plot(y, marker=\"o\", size=6)\n",
    "canvas.cartesian(grid=(1, 2, 1)).plot(y, marker=\"o\", size=10);"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Or you can use the `area` argument instead to control the approximate *area* of the markers (this is recommended if you're using per-datum marker sizes to display data)."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "By default, plot and scatterplot markers are small circles, but many other shapes can be specified using a string *shape code*:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 16,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div class=\"toyplot\" id=\"tf196537e59ab413fa5a6e08fee20c888\" style=\"text-align:center\"><svg class=\"toyplot-canvas-Canvas\" height=\"300.0px\" id=\"tccc34be7798d4cfe85f110b1521b37b4\" preserveAspectRatio=\"xMidYMid meet\" style=\"background-color:transparent;fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:Helvetica;font-size:12px;opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0;stroke-width:1.0\" viewBox=\"0 0 600.0 300.0\" width=\"600.0px\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:toyplot=\"http://www.sandia.gov/toyplot\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"><g class=\"toyplot-coordinates-Cartesian\" id=\"t187333fd65c34d1c865fc63691509b39\"><clipPath id=\"te9e4b090704641a39ece159eead5ea17\"><rect height=\"220.0\" width=\"220.0\" x=\"40.0\" y=\"40.0\"></rect></clipPath><g clip-path=\"url(#te9e4b090704641a39ece159eead5ea17)\"><g class=\"toyplot-mark-Scatterplot\" id=\"teacc975767f242829dab5d83f777b3e0\"><g class=\"toyplot-Series\"><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(50.0, 250.0)\"><line transform=\"rotate(45)\" y1=\"-5.0\" y2=\"5.0\"></line><line transform=\"rotate(-45)\" y1=\"-5.0\" y2=\"5.0\"></line></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(60.0, 249.4459833795014)\"><line transform=\"rotate(45)\" y1=\"-5.0\" y2=\"5.0\"></line><line transform=\"rotate(-45)\" y1=\"-5.0\" y2=\"5.0\"></line></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(70.0, 247.78393351800551)\"><line transform=\"rotate(45)\" y1=\"-5.0\" y2=\"5.0\"></line><line transform=\"rotate(-45)\" y1=\"-5.0\" y2=\"5.0\"></line></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(80.0, 245.01385041551248)\"><line transform=\"rotate(45)\" y1=\"-5.0\" y2=\"5.0\"></line><line transform=\"rotate(-45)\" y1=\"-5.0\" y2=\"5.0\"></line></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(90.0, 241.13573407202216)\"><line transform=\"rotate(45)\" y1=\"-5.0\" y2=\"5.0\"></line><line transform=\"rotate(-45)\" y1=\"-5.0\" y2=\"5.0\"></line></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(100.0, 236.14958448753461)\"><line transform=\"rotate(45)\" y1=\"-5.0\" y2=\"5.0\"></line><line transform=\"rotate(-45)\" y1=\"-5.0\" y2=\"5.0\"></line></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(110.0, 230.05540166204986)\"><line transform=\"rotate(45)\" y1=\"-5.0\" y2=\"5.0\"></line><line transform=\"rotate(-45)\" y1=\"-5.0\" y2=\"5.0\"></line></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(120.0, 222.85318559556785)\"><line transform=\"rotate(45)\" y1=\"-5.0\" y2=\"5.0\"></line><line transform=\"rotate(-45)\" y1=\"-5.0\" y2=\"5.0\"></line></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(130.0, 214.54293628808864)\"><line transform=\"rotate(45)\" y1=\"-5.0\" y2=\"5.0\"></line><line transform=\"rotate(-45)\" y1=\"-5.0\" y2=\"5.0\"></line></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(140.0, 205.1246537396122)\"><line transform=\"rotate(45)\" y1=\"-5.0\" y2=\"5.0\"></line><line transform=\"rotate(-45)\" y1=\"-5.0\" y2=\"5.0\"></line></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(150.0, 194.5983379501385)\"><line transform=\"rotate(45)\" y1=\"-5.0\" y2=\"5.0\"></line><line transform=\"rotate(-45)\" y1=\"-5.0\" y2=\"5.0\"></line></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(160.0, 182.96398891966757)\"><line transform=\"rotate(45)\" y1=\"-5.0\" y2=\"5.0\"></line><line transform=\"rotate(-45)\" y1=\"-5.0\" y2=\"5.0\"></line></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(170.0, 170.22160664819947)\"><line transform=\"rotate(45)\" y1=\"-5.0\" y2=\"5.0\"></line><line transform=\"rotate(-45)\" y1=\"-5.0\" y2=\"5.0\"></line></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(180.0, 156.37119113573411)\"><line transform=\"rotate(45)\" y1=\"-5.0\" y2=\"5.0\"></line><line transform=\"rotate(-45)\" y1=\"-5.0\" y2=\"5.0\"></line></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(190.0, 141.41274238227149)\"><line transform=\"rotate(45)\" y1=\"-5.0\" y2=\"5.0\"></line><line transform=\"rotate(-45)\" y1=\"-5.0\" y2=\"5.0\"></line></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(200.0, 125.34626038781163)\"><line transform=\"rotate(45)\" y1=\"-5.0\" y2=\"5.0\"></line><line transform=\"rotate(-45)\" y1=\"-5.0\" y2=\"5.0\"></line></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(210.0, 108.17174515235459)\"><line transform=\"rotate(45)\" y1=\"-5.0\" y2=\"5.0\"></line><line transform=\"rotate(-45)\" y1=\"-5.0\" y2=\"5.0\"></line></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(220.0, 89.889196675900322)\"><line transform=\"rotate(45)\" y1=\"-5.0\" y2=\"5.0\"></line><line transform=\"rotate(-45)\" y1=\"-5.0\" y2=\"5.0\"></line></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(230.0, 70.498614958448783)\"><line transform=\"rotate(45)\" y1=\"-5.0\" y2=\"5.0\"></line><line transform=\"rotate(-45)\" y1=\"-5.0\" y2=\"5.0\"></line></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(240.0, 50.0)\"><line transform=\"rotate(45)\" y1=\"-5.0\" y2=\"5.0\"></line><line transform=\"rotate(-45)\" y1=\"-5.0\" y2=\"5.0\"></line></g></g></g></g><g class=\"toyplot-coordinates-Axis\" id=\"t92b8576568ed41b48a6e64d88b774c49\" transform=\"translate(50.0,250.0)translate(0,10.0)\"><line style=\"\" x1=\"0\" x2=\"190.0\" y1=\"0\" y2=\"0\"></line><g><g transform=\"translate(0.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-2.78\" y=\"8.555\">0</text></g><g transform=\"translate(50.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-2.78\" y=\"8.555\">5</text></g><g transform=\"translate(100.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-5.56\" y=\"8.555\">10</text></g><g transform=\"translate(150.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-5.56\" y=\"8.555\">15</text></g><g transform=\"translate(200.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-5.56\" y=\"8.555\">20</text></g></g><g class=\"toyplot-coordinates-Axis-coordinates\" style=\"visibility:hidden\" transform=\"\"><line style=\"stroke:rgb(43.9%,50.2%,56.5%);stroke-opacity:1.0;stroke-width:1.0\" x1=\"0\" x2=\"0\" y1=\"-3.0\" y2=\"4.5\"></line><text style=\"alignment-baseline:alphabetic;fill:rgb(43.9%,50.2%,56.5%);fill-opacity:1.0;font-size:10px;font-weight:normal;stroke:none;text-anchor:middle\" x=\"0\" y=\"-6\"></text></g></g><g class=\"toyplot-coordinates-Axis\" id=\"t9c16c2dc25df43b691db7ffa241b87f1\" transform=\"translate(50.0,250.0)rotate(-90.0)translate(0,-10.0)\"><line style=\"\" x1=\"0\" x2=\"200.0\" y1=\"0\" y2=\"0\"></line><g><g transform=\"translate(0.0,-6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-6.95\" y=\"-4.4408920985e-16\">0.0</text></g><g transform=\"translate(100.0,-6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-6.95\" y=\"-4.4408920985e-16\">0.5</text></g><g transform=\"translate(200.0,-6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-6.95\" y=\"-4.4408920985e-16\">1.0</text></g></g><g class=\"toyplot-coordinates-Axis-coordinates\" style=\"visibility:hidden\" transform=\"\"><line style=\"stroke:rgb(43.9%,50.2%,56.5%);stroke-opacity:1.0;stroke-width:1.0\" x1=\"0\" x2=\"0\" y1=\"3.0\" y2=\"-4.5\"></line><text style=\"alignment-baseline:hanging;fill:rgb(43.9%,50.2%,56.5%);fill-opacity:1.0;font-size:10px;font-weight:normal;stroke:none;text-anchor:middle\" x=\"0\" y=\"6\"></text></g></g></g><g class=\"toyplot-coordinates-Cartesian\" id=\"te00b1d5fc103456f8e5016c107325457\"><clipPath id=\"td927d153062b4a24acf17f9dc08bb568\"><rect height=\"220.0\" width=\"220.0\" x=\"340.0\" y=\"40.0\"></rect></clipPath><g clip-path=\"url(#td927d153062b4a24acf17f9dc08bb568)\"><g class=\"toyplot-mark-Scatterplot\" id=\"t9079cf53798f4232881f58ed33fb12b1\"><g class=\"toyplot-Series\"><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0\" transform=\"translate(350.0, 250.0)\"><polygon points=\"-5.0,5.0 0,-5.0 5.0,5.0\"></polygon></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0\" transform=\"translate(360.0, 249.4459833795014)\"><polygon points=\"-5.0,5.0 0,-5.0 5.0,5.0\"></polygon></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0\" transform=\"translate(370.0, 247.78393351800551)\"><polygon points=\"-5.0,5.0 0,-5.0 5.0,5.0\"></polygon></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0\" transform=\"translate(380.0, 245.01385041551248)\"><polygon points=\"-5.0,5.0 0,-5.0 5.0,5.0\"></polygon></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0\" transform=\"translate(390.0, 241.13573407202216)\"><polygon points=\"-5.0,5.0 0,-5.0 5.0,5.0\"></polygon></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0\" transform=\"translate(400.0, 236.14958448753461)\"><polygon points=\"-5.0,5.0 0,-5.0 5.0,5.0\"></polygon></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0\" transform=\"translate(410.0, 230.05540166204986)\"><polygon points=\"-5.0,5.0 0,-5.0 5.0,5.0\"></polygon></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0\" transform=\"translate(420.0, 222.85318559556785)\"><polygon points=\"-5.0,5.0 0,-5.0 5.0,5.0\"></polygon></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0\" transform=\"translate(430.0, 214.54293628808864)\"><polygon points=\"-5.0,5.0 0,-5.0 5.0,5.0\"></polygon></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0\" transform=\"translate(440.0, 205.1246537396122)\"><polygon points=\"-5.0,5.0 0,-5.0 5.0,5.0\"></polygon></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0\" transform=\"translate(450.0, 194.5983379501385)\"><polygon points=\"-5.0,5.0 0,-5.0 5.0,5.0\"></polygon></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0\" transform=\"translate(460.0, 182.96398891966757)\"><polygon points=\"-5.0,5.0 0,-5.0 5.0,5.0\"></polygon></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0\" transform=\"translate(470.0, 170.22160664819947)\"><polygon points=\"-5.0,5.0 0,-5.0 5.0,5.0\"></polygon></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0\" transform=\"translate(480.0, 156.37119113573411)\"><polygon points=\"-5.0,5.0 0,-5.0 5.0,5.0\"></polygon></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0\" transform=\"translate(490.0, 141.41274238227149)\"><polygon points=\"-5.0,5.0 0,-5.0 5.0,5.0\"></polygon></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0\" transform=\"translate(500.0, 125.34626038781163)\"><polygon points=\"-5.0,5.0 0,-5.0 5.0,5.0\"></polygon></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0\" transform=\"translate(510.0, 108.17174515235459)\"><polygon points=\"-5.0,5.0 0,-5.0 5.0,5.0\"></polygon></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0\" transform=\"translate(520.0, 89.889196675900322)\"><polygon points=\"-5.0,5.0 0,-5.0 5.0,5.0\"></polygon></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0\" transform=\"translate(530.0, 70.498614958448783)\"><polygon points=\"-5.0,5.0 0,-5.0 5.0,5.0\"></polygon></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0\" transform=\"translate(540.0, 50.0)\"><polygon points=\"-5.0,5.0 0,-5.0 5.0,5.0\"></polygon></g></g></g></g><g class=\"toyplot-coordinates-Axis\" id=\"t034535d269ae441a8d42160dda5999ad\" transform=\"translate(350.0,250.0)translate(0,10.0)\"><line style=\"\" x1=\"0\" x2=\"190.0\" y1=\"0\" y2=\"0\"></line><g><g transform=\"translate(0.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-2.78\" y=\"8.555\">0</text></g><g transform=\"translate(50.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-2.78\" y=\"8.555\">5</text></g><g transform=\"translate(100.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-5.56\" y=\"8.555\">10</text></g><g transform=\"translate(150.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-5.56\" y=\"8.555\">15</text></g><g transform=\"translate(200.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-5.56\" y=\"8.555\">20</text></g></g><g class=\"toyplot-coordinates-Axis-coordinates\" style=\"visibility:hidden\" transform=\"\"><line style=\"stroke:rgb(43.9%,50.2%,56.5%);stroke-opacity:1.0;stroke-width:1.0\" x1=\"0\" x2=\"0\" y1=\"-3.0\" y2=\"4.5\"></line><text style=\"alignment-baseline:alphabetic;fill:rgb(43.9%,50.2%,56.5%);fill-opacity:1.0;font-size:10px;font-weight:normal;stroke:none;text-anchor:middle\" x=\"0\" y=\"-6\"></text></g></g><g class=\"toyplot-coordinates-Axis\" id=\"tfa698b048b25431cb3d6f2eab6ad4f19\" transform=\"translate(350.0,250.0)rotate(-90.0)translate(0,-10.0)\"><line style=\"\" x1=\"0\" x2=\"200.0\" y1=\"0\" y2=\"0\"></line><g><g transform=\"translate(0.0,-6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-6.95\" y=\"-4.4408920985e-16\">0.0</text></g><g transform=\"translate(100.0,-6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-6.95\" y=\"-4.4408920985e-16\">0.5</text></g><g transform=\"translate(200.0,-6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-6.95\" y=\"-4.4408920985e-16\">1.0</text></g></g><g class=\"toyplot-coordinates-Axis-coordinates\" style=\"visibility:hidden\" transform=\"\"><line style=\"stroke:rgb(43.9%,50.2%,56.5%);stroke-opacity:1.0;stroke-width:1.0\" x1=\"0\" x2=\"0\" y1=\"3.0\" y2=\"-4.5\"></line><text style=\"alignment-baseline:hanging;fill:rgb(43.9%,50.2%,56.5%);fill-opacity:1.0;font-size:10px;font-weight:normal;stroke:none;text-anchor:middle\" x=\"0\" y=\"6\"></text></g></g></g></svg><div class=\"toyplot-behavior\"><script>(function()\n",
       "{\n",
       "var modules={};\n",
       "modules[\"toyplot/tables\"] = (function()\n",
       "    {\n",
       "        var tables = [];\n",
       "\n",
       "        var module = {};\n",
       "\n",
       "        module.set = function(owner, key, names, columns)\n",
       "        {\n",
       "            tables.push({owner: owner, key: key, names: names, columns: columns});\n",
       "        }\n",
       "\n",
       "        module.get = function(owner, key)\n",
       "        {\n",
       "            for(var i = 0; i != tables.length; ++i)\n",
       "            {\n",
       "                var table = tables[i];\n",
       "                if(table.owner != owner)\n",
       "                    continue;\n",
       "                if(table.key != key)\n",
       "                    continue;\n",
       "                return {names: table.names, columns: table.columns};\n",
       "            }\n",
       "        }\n",
       "\n",
       "        module.get_csv = function(owner, key)\n",
       "        {\n",
       "            var table = module.get(owner, key);\n",
       "            if(table != undefined)\n",
       "            {\n",
       "                var csv = \"\";\n",
       "                csv += table.names.join(\",\") + \"\\n\";\n",
       "                for(var i = 0; i != table.columns[0].length; ++i)\n",
       "                {\n",
       "                  for(var j = 0; j != table.columns.length; ++j)\n",
       "                  {\n",
       "                    if(j)\n",
       "                      csv += \",\";\n",
       "                    csv += table.columns[j][i];\n",
       "                  }\n",
       "                  csv += \"\\n\";\n",
       "                }\n",
       "                return csv;\n",
       "            }\n",
       "        }\n",
       "\n",
       "        return module;\n",
       "    })();\n",
       "modules[\"toyplot/root/id\"] = \"tf196537e59ab413fa5a6e08fee20c888\";\n",
       "modules[\"toyplot/root\"] = (function(root_id)\n",
       "    {\n",
       "        return document.querySelector(\"#\" + root_id);\n",
       "    })(modules[\"toyplot/root/id\"]);\n",
       "modules[\"toyplot/canvas/id\"] = \"tccc34be7798d4cfe85f110b1521b37b4\";\n",
       "modules[\"toyplot/canvas\"] = (function(canvas_id)\n",
       "    {\n",
       "        return document.querySelector(\"#\" + canvas_id);\n",
       "    })(modules[\"toyplot/canvas/id\"]);\n",
       "modules[\"toyplot/menus/context\"] = (function(root, canvas)\n",
       "    {\n",
       "        var wrapper = document.createElement(\"div\");\n",
       "        wrapper.innerHTML = \"<ul class='toyplot-context-menu' style='background:#eee; border:1px solid #b8b8b8; border-radius:5px; box-shadow: 0px 0px 8px rgba(0%,0%,0%,0.25); margin:0; padding:3px 0; position:fixed; visibility:hidden;'></ul>\"\n",
       "        var menu = wrapper.firstChild;\n",
       "\n",
       "        root.appendChild(menu);\n",
       "\n",
       "        var items = [];\n",
       "\n",
       "        var ignore_mouseup = null;\n",
       "        function open_menu(e)\n",
       "        {\n",
       "            var show_menu = false;\n",
       "            for(var index=0; index != items.length; ++index)\n",
       "            {\n",
       "                var item = items[index];\n",
       "                if(item.show(e))\n",
       "                {\n",
       "                    item.item.style.display = \"block\";\n",
       "                    show_menu = true;\n",
       "                }\n",
       "                else\n",
       "                {\n",
       "                    item.item.style.display = \"none\";\n",
       "                }\n",
       "            }\n",
       "\n",
       "            if(show_menu)\n",
       "            {\n",
       "                ignore_mouseup = true;\n",
       "                menu.style.left = (e.clientX + 1) + \"px\";\n",
       "                menu.style.top = (e.clientY - 5) + \"px\";\n",
       "                menu.style.visibility = \"visible\";\n",
       "                e.stopPropagation();\n",
       "                e.preventDefault();\n",
       "            }\n",
       "        }\n",
       "\n",
       "        function close_menu()\n",
       "        {\n",
       "            menu.style.visibility = \"hidden\";\n",
       "        }\n",
       "\n",
       "        function contextmenu(e)\n",
       "        {\n",
       "            open_menu(e);\n",
       "        }\n",
       "\n",
       "        function mousemove(e)\n",
       "        {\n",
       "            ignore_mouseup = false;\n",
       "        }\n",
       "\n",
       "        function mouseup(e)\n",
       "        {\n",
       "            if(ignore_mouseup)\n",
       "            {\n",
       "                ignore_mouseup = false;\n",
       "                return;\n",
       "            }\n",
       "            close_menu();\n",
       "        }\n",
       "\n",
       "        function keydown(e)\n",
       "        {\n",
       "            if(e.key == \"Escape\" || e.key == \"Esc\" || e.keyCode == 27)\n",
       "            {\n",
       "                close_menu();\n",
       "            }\n",
       "        }\n",
       "\n",
       "        canvas.addEventListener(\"contextmenu\", contextmenu);\n",
       "        canvas.addEventListener(\"mousemove\", mousemove);\n",
       "        document.addEventListener(\"mouseup\", mouseup);\n",
       "        document.addEventListener(\"keydown\", keydown);\n",
       "\n",
       "        var module = {};\n",
       "        module.add_item = function(label, show, activate)\n",
       "        {\n",
       "            var wrapper = document.createElement(\"div\");\n",
       "            wrapper.innerHTML = \"<li class='toyplot-context-menu-item' style='background:#eee; color:#333; padding:2px 20px; list-style:none; margin:0; text-align:left;'>\" + label + \"</li>\"\n",
       "            var item = wrapper.firstChild;\n",
       "\n",
       "            items.push({item: item, show: show});\n",
       "\n",
       "            function mouseover()\n",
       "            {\n",
       "                this.style.background = \"steelblue\";\n",
       "                this.style.color = \"white\";\n",
       "            }\n",
       "\n",
       "            function mouseout()\n",
       "            {\n",
       "                this.style.background = \"#eee\";\n",
       "                this.style.color = \"#333\";\n",
       "            }\n",
       "\n",
       "            function choose_item(e)\n",
       "            {\n",
       "                close_menu();\n",
       "                activate();\n",
       "\n",
       "                e.stopPropagation();\n",
       "                e.preventDefault();\n",
       "            }\n",
       "\n",
       "            item.addEventListener(\"mouseover\", mouseover);\n",
       "            item.addEventListener(\"mouseout\", mouseout);\n",
       "            item.addEventListener(\"mouseup\", choose_item);\n",
       "            item.addEventListener(\"contextmenu\", choose_item);\n",
       "\n",
       "            menu.appendChild(item);\n",
       "        };\n",
       "        return module;\n",
       "    })(modules[\"toyplot/root\"],modules[\"toyplot/canvas\"]);\n",
       "modules[\"toyplot/io\"] = (function()\n",
       "    {\n",
       "        var module = {};\n",
       "        module.save_file = function(mime_type, charset, data, filename)\n",
       "        {\n",
       "            var uri = \"data:\" + mime_type + \";charset=\" + charset + \",\" + data;\n",
       "            uri = encodeURI(uri);\n",
       "\n",
       "            var link = document.createElement(\"a\");\n",
       "            if(typeof link.download != \"undefined\")\n",
       "            {\n",
       "              link.href = uri;\n",
       "              link.style = \"visibility:hidden\";\n",
       "              link.download = filename;\n",
       "\n",
       "              document.body.appendChild(link);\n",
       "              link.click();\n",
       "              document.body.removeChild(link);\n",
       "            }\n",
       "            else\n",
       "            {\n",
       "              window.open(uri);\n",
       "            }\n",
       "        };\n",
       "        return module;\n",
       "    })();\n",
       "modules[\"toyplot.coordinates.Axis\"] = (\n",
       "        function(canvas)\n",
       "        {\n",
       "            function sign(x)\n",
       "            {\n",
       "                return x < 0 ? -1 : x > 0 ? 1 : 0;\n",
       "            }\n",
       "\n",
       "            function mix(a, b, amount)\n",
       "            {\n",
       "                return ((1.0 - amount) * a) + (amount * b);\n",
       "            }\n",
       "\n",
       "            function log(x, base)\n",
       "            {\n",
       "                return Math.log(Math.abs(x)) / Math.log(base);\n",
       "            }\n",
       "\n",
       "            function in_range(a, x, b)\n",
       "            {\n",
       "                var left = Math.min(a, b);\n",
       "                var right = Math.max(a, b);\n",
       "                return left <= x && x <= right;\n",
       "            }\n",
       "\n",
       "            function inside(range, projection)\n",
       "            {\n",
       "                for(var i = 0; i != projection.length; ++i)\n",
       "                {\n",
       "                    var segment = projection[i];\n",
       "                    if(in_range(segment.range.min, range, segment.range.max))\n",
       "                        return true;\n",
       "                }\n",
       "                return false;\n",
       "            }\n",
       "\n",
       "            function to_domain(range, projection)\n",
       "            {\n",
       "                for(var i = 0; i != projection.length; ++i)\n",
       "                {\n",
       "                    var segment = projection[i];\n",
       "                    if(in_range(segment.range.bounds.min, range, segment.range.bounds.max))\n",
       "                    {\n",
       "                        if(segment.scale == \"linear\")\n",
       "                        {\n",
       "                            var amount = (range - segment.range.min) / (segment.range.max - segment.range.min);\n",
       "                            return mix(segment.domain.min, segment.domain.max, amount)\n",
       "                        }\n",
       "                        else if(segment.scale[0] == \"log\")\n",
       "                        {\n",
       "                            var amount = (range - segment.range.min) / (segment.range.max - segment.range.min);\n",
       "                            var base = segment.scale[1];\n",
       "                            return sign(segment.domain.min) * Math.pow(base, mix(log(segment.domain.min, base), log(segment.domain.max, base), amount));\n",
       "                        }\n",
       "                    }\n",
       "                }\n",
       "            }\n",
       "\n",
       "            var axes = {};\n",
       "\n",
       "            function display_coordinates(e)\n",
       "            {\n",
       "                var current = canvas.createSVGPoint();\n",
       "                current.x = e.clientX;\n",
       "                current.y = e.clientY;\n",
       "\n",
       "                for(var axis_id in axes)\n",
       "                {\n",
       "                    var axis = document.querySelector(\"#\" + axis_id);\n",
       "                    var coordinates = axis.querySelector(\".toyplot-coordinates-Axis-coordinates\");\n",
       "                    if(coordinates)\n",
       "                    {\n",
       "                        var projection = axes[axis_id];\n",
       "                        var local = current.matrixTransform(axis.getScreenCTM().inverse());\n",
       "                        if(inside(local.x, projection))\n",
       "                        {\n",
       "                            var domain = to_domain(local.x, projection);\n",
       "                            coordinates.style.visibility = \"visible\";\n",
       "                            coordinates.setAttribute(\"transform\", \"translate(\" + local.x + \")\");\n",
       "                            var text = coordinates.querySelector(\"text\");\n",
       "                            text.textContent = domain.toFixed(2);\n",
       "                        }\n",
       "                        else\n",
       "                        {\n",
       "                            coordinates.style.visibility= \"hidden\";\n",
       "                        }\n",
       "                    }\n",
       "                }\n",
       "            }\n",
       "\n",
       "            canvas.addEventListener(\"click\", display_coordinates);\n",
       "\n",
       "            var module = {};\n",
       "            module.show_coordinates = function(axis_id, projection)\n",
       "            {\n",
       "                axes[axis_id] = projection;\n",
       "            }\n",
       "\n",
       "            return module;\n",
       "        })(modules[\"toyplot/canvas\"]);\n",
       "(function(tables, context_menu, io, owner_id, key, label, names, columns, filename)\n",
       "        {\n",
       "            tables.set(owner_id, key, names, columns);\n",
       "\n",
       "            var owner = document.querySelector(\"#\" + owner_id);\n",
       "            function show_item(e)\n",
       "            {\n",
       "                return owner.contains(e.target);\n",
       "            }\n",
       "\n",
       "            function choose_item()\n",
       "            {\n",
       "                io.save_file(\"text/csv\", \"utf-8\", tables.get_csv(owner_id, key), filename + \".csv\");\n",
       "            }\n",
       "\n",
       "            context_menu.add_item(\"Save \" + label + \" as CSV\", show_item, choose_item);\n",
       "        })(modules[\"toyplot/tables\"],modules[\"toyplot/menus/context\"],modules[\"toyplot/io\"],\"teacc975767f242829dab5d83f777b3e0\",\"data\",\"scatterplot\",[\"x\", \"y0\"],[[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19], [0.0, 0.0027700831024930744, 0.011080332409972297, 0.02493074792243767, 0.04432132963988919, 0.06925207756232686, 0.09972299168975068, 0.13573407202216065, 0.17728531855955676, 0.22437673130193903, 0.27700831024930744, 0.33518005540166207, 0.39889196675900274, 0.4681440443213295, 0.5429362880886426, 0.6232686980609419, 0.709141274238227, 0.8005540166204984, 0.8975069252077561, 1.0]],\"toyplot\");\n",
       "(function(axis, axis_id, projection)\n",
       "        {\n",
       "            axis.show_coordinates(axis_id, projection);\n",
       "        })(modules[\"toyplot.coordinates.Axis\"],\"t92b8576568ed41b48a6e64d88b774c49\",[{\"domain\": {\"bounds\": {\"max\": Infinity, \"min\": -Infinity}, \"max\": 20.0, \"min\": 0.0}, \"range\": {\"bounds\": {\"max\": Infinity, \"min\": -Infinity}, \"max\": 200.0, \"min\": 0.0}, \"scale\": \"linear\"}]);\n",
       "(function(axis, axis_id, projection)\n",
       "        {\n",
       "            axis.show_coordinates(axis_id, projection);\n",
       "        })(modules[\"toyplot.coordinates.Axis\"],\"t9c16c2dc25df43b691db7ffa241b87f1\",[{\"domain\": {\"bounds\": {\"max\": Infinity, \"min\": -Infinity}, \"max\": 1.0, \"min\": 0.0}, \"range\": {\"bounds\": {\"max\": Infinity, \"min\": -Infinity}, \"max\": 200.0, \"min\": 0.0}, \"scale\": \"linear\"}]);\n",
       "(function(tables, context_menu, io, owner_id, key, label, names, columns, filename)\n",
       "        {\n",
       "            tables.set(owner_id, key, names, columns);\n",
       "\n",
       "            var owner = document.querySelector(\"#\" + owner_id);\n",
       "            function show_item(e)\n",
       "            {\n",
       "                return owner.contains(e.target);\n",
       "            }\n",
       "\n",
       "            function choose_item()\n",
       "            {\n",
       "                io.save_file(\"text/csv\", \"utf-8\", tables.get_csv(owner_id, key), filename + \".csv\");\n",
       "            }\n",
       "\n",
       "            context_menu.add_item(\"Save \" + label + \" as CSV\", show_item, choose_item);\n",
       "        })(modules[\"toyplot/tables\"],modules[\"toyplot/menus/context\"],modules[\"toyplot/io\"],\"t9079cf53798f4232881f58ed33fb12b1\",\"data\",\"scatterplot\",[\"x\", \"y0\"],[[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19], [0.0, 0.0027700831024930744, 0.011080332409972297, 0.02493074792243767, 0.04432132963988919, 0.06925207756232686, 0.09972299168975068, 0.13573407202216065, 0.17728531855955676, 0.22437673130193903, 0.27700831024930744, 0.33518005540166207, 0.39889196675900274, 0.4681440443213295, 0.5429362880886426, 0.6232686980609419, 0.709141274238227, 0.8005540166204984, 0.8975069252077561, 1.0]],\"toyplot\");\n",
       "(function(axis, axis_id, projection)\n",
       "        {\n",
       "            axis.show_coordinates(axis_id, projection);\n",
       "        })(modules[\"toyplot.coordinates.Axis\"],\"t034535d269ae441a8d42160dda5999ad\",[{\"domain\": {\"bounds\": {\"max\": Infinity, \"min\": -Infinity}, \"max\": 20.0, \"min\": 0.0}, \"range\": {\"bounds\": {\"max\": Infinity, \"min\": -Infinity}, \"max\": 200.0, \"min\": 0.0}, \"scale\": \"linear\"}]);\n",
       "(function(axis, axis_id, projection)\n",
       "        {\n",
       "            axis.show_coordinates(axis_id, projection);\n",
       "        })(modules[\"toyplot.coordinates.Axis\"],\"tfa698b048b25431cb3d6f2eab6ad4f19\",[{\"domain\": {\"bounds\": {\"max\": Infinity, \"min\": -Infinity}, \"max\": 1.0, \"min\": 0.0}, \"range\": {\"bounds\": {\"max\": Infinity, \"min\": -Infinity}, \"max\": 200.0, \"min\": 0.0}, \"scale\": \"linear\"}]);\n",
       "})();</script></div></div>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "canvas = toyplot.Canvas(600, 300)\n",
    "canvas.cartesian(grid=(1, 2, 0)).scatterplot(y, marker=\"x\", size=10)\n",
    "canvas.cartesian(grid=(1, 2, 1)).scatterplot(y, marker=\"^\", size=10, mstyle={\"stroke\":toyplot.color.black});"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Note the use of the *mstyle* argument to override the appearance of the marker in the second example.  For line plots, this allows you to style the lines and the markers separately:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 17,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div class=\"toyplot\" id=\"t8518234e5e67439aafe26045ce42202c\" style=\"text-align:center\"><svg class=\"toyplot-canvas-Canvas\" height=\"300.0px\" id=\"t8f64276eb05e45ef9cda8e6c60fadf7d\" preserveAspectRatio=\"xMidYMid meet\" style=\"background-color:transparent;fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:Helvetica;font-size:12px;opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0;stroke-width:1.0\" viewBox=\"0 0 600.0 300.0\" width=\"600.0px\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:toyplot=\"http://www.sandia.gov/toyplot\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"><g class=\"toyplot-coordinates-Cartesian\" id=\"t0ed5c4025e6743cbb9ff56075e3e92da\"><clipPath id=\"tfc391483b6ea4c6d844eb705139475ce\"><rect height=\"220.0\" width=\"220.0\" x=\"40.0\" y=\"40.0\"></rect></clipPath><g clip-path=\"url(#tfc391483b6ea4c6d844eb705139475ce)\"><g class=\"toyplot-mark-Plot\" id=\"te1ab8bb17276414093f2ae996e9b5780\" style=\"fill:none;stroke:rgb(0%,39.2%,0%);stroke-opacity:1.0\"><g class=\"toyplot-Series\"><path d=\"M 50.0 250.0 L 60.0 249.4459833795014 L 70.0 247.78393351800551 L 80.0 245.01385041551248 L 90.0 241.13573407202216 L 100.0 236.14958448753461 L 110.0 230.05540166204986 L 120.0 222.85318559556785 L 130.0 214.54293628808864 L 140.0 205.1246537396122 L 150.0 194.5983379501385 L 160.0 182.96398891966757 L 170.0 170.22160664819947 L 180.0 156.37119113573411 L 190.0 141.41274238227149 L 200.0 125.34626038781163 L 210.0 108.17174515235459 L 220.0 89.889196675900322 L 230.0 70.498614958448783 L 240.0 50.0\" style=\"stroke:rgb(0%,39.2%,0%);stroke-opacity:1.0;stroke-width:2.0\"></path><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(50.0, 250.0)\"><circle r=\"4.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(60.0, 249.4459833795014)\"><circle r=\"4.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(70.0, 247.78393351800551)\"><circle r=\"4.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(80.0, 245.01385041551248)\"><circle r=\"4.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(90.0, 241.13573407202216)\"><circle r=\"4.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(100.0, 236.14958448753461)\"><circle r=\"4.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(110.0, 230.05540166204986)\"><circle r=\"4.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(120.0, 222.85318559556785)\"><circle r=\"4.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(130.0, 214.54293628808864)\"><circle r=\"4.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(140.0, 205.1246537396122)\"><circle r=\"4.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(150.0, 194.5983379501385)\"><circle r=\"4.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(160.0, 182.96398891966757)\"><circle r=\"4.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(170.0, 170.22160664819947)\"><circle r=\"4.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(180.0, 156.37119113573411)\"><circle r=\"4.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(190.0, 141.41274238227149)\"><circle r=\"4.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(200.0, 125.34626038781163)\"><circle r=\"4.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(210.0, 108.17174515235459)\"><circle r=\"4.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(220.0, 89.889196675900322)\"><circle r=\"4.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(230.0, 70.498614958448783)\"><circle r=\"4.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(240.0, 50.0)\"><circle r=\"4.0\"></circle></g></g></g></g><g class=\"toyplot-coordinates-Axis\" id=\"t400d108bc532415e81dff8b85ee4ac70\" transform=\"translate(50.0,250.0)translate(0,10.0)\"><line style=\"\" x1=\"0\" x2=\"190.0\" y1=\"0\" y2=\"0\"></line><g><g transform=\"translate(0.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-2.78\" y=\"8.555\">0</text></g><g transform=\"translate(50.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-2.78\" y=\"8.555\">5</text></g><g transform=\"translate(100.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-5.56\" y=\"8.555\">10</text></g><g transform=\"translate(150.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-5.56\" y=\"8.555\">15</text></g><g transform=\"translate(200.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-5.56\" y=\"8.555\">20</text></g></g><g class=\"toyplot-coordinates-Axis-coordinates\" style=\"visibility:hidden\" transform=\"\"><line style=\"stroke:rgb(43.9%,50.2%,56.5%);stroke-opacity:1.0;stroke-width:1.0\" x1=\"0\" x2=\"0\" y1=\"-3.0\" y2=\"4.5\"></line><text style=\"alignment-baseline:alphabetic;fill:rgb(43.9%,50.2%,56.5%);fill-opacity:1.0;font-size:10px;font-weight:normal;stroke:none;text-anchor:middle\" x=\"0\" y=\"-6\"></text></g></g><g class=\"toyplot-coordinates-Axis\" id=\"t4f50ce8980a54eca9afdd9d02cb1d7e3\" transform=\"translate(50.0,250.0)rotate(-90.0)translate(0,-10.0)\"><line style=\"\" x1=\"0\" x2=\"200.0\" y1=\"0\" y2=\"0\"></line><g><g transform=\"translate(0.0,-6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-6.95\" y=\"-4.4408920985e-16\">0.0</text></g><g transform=\"translate(100.0,-6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-6.95\" y=\"-4.4408920985e-16\">0.5</text></g><g transform=\"translate(200.0,-6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-6.95\" y=\"-4.4408920985e-16\">1.0</text></g></g><g class=\"toyplot-coordinates-Axis-coordinates\" style=\"visibility:hidden\" transform=\"\"><line style=\"stroke:rgb(43.9%,50.2%,56.5%);stroke-opacity:1.0;stroke-width:1.0\" x1=\"0\" x2=\"0\" y1=\"3.0\" y2=\"-4.5\"></line><text style=\"alignment-baseline:hanging;fill:rgb(43.9%,50.2%,56.5%);fill-opacity:1.0;font-size:10px;font-weight:normal;stroke:none;text-anchor:middle\" x=\"0\" y=\"6\"></text></g></g></g><g class=\"toyplot-coordinates-Cartesian\" id=\"tffe021ab788f4597b5378ba97fc65ec0\"><clipPath id=\"tbfeaf90000d74ecb8234e03303ea35f4\"><rect height=\"220.0\" width=\"220.0\" x=\"340.0\" y=\"40.0\"></rect></clipPath><g clip-path=\"url(#tbfeaf90000d74ecb8234e03303ea35f4)\"><g class=\"toyplot-mark-Plot\" id=\"t25561d03172c4213947a0f23a85b7fc4\" style=\"fill:none\"><g class=\"toyplot-Series\"><path d=\"M 350.0 250.0 L 360.0 249.4459833795014 L 370.0 247.78393351800551 L 380.0 245.01385041551248 L 390.0 241.13573407202216 L 400.0 236.14958448753461 L 410.0 230.05540166204986 L 420.0 222.85318559556785 L 430.0 214.54293628808864 L 440.0 205.1246537396122 L 450.0 194.5983379501385 L 460.0 182.96398891966757 L 470.0 170.22160664819947 L 480.0 156.37119113573411 L 490.0 141.41274238227149 L 500.0 125.34626038781163 L 510.0 108.17174515235459 L 520.0 89.889196675900322 L 530.0 70.498614958448783 L 540.0 50.0\" style=\"stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0;stroke-width:2.0\"></path><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(0%,39.2%,0%);stroke-opacity:1.0\" transform=\"translate(350.0, 250.0)\"><circle r=\"4.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(0%,39.2%,0%);stroke-opacity:1.0\" transform=\"translate(360.0, 249.4459833795014)\"><circle r=\"4.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(0%,39.2%,0%);stroke-opacity:1.0\" transform=\"translate(370.0, 247.78393351800551)\"><circle r=\"4.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(0%,39.2%,0%);stroke-opacity:1.0\" transform=\"translate(380.0, 245.01385041551248)\"><circle r=\"4.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(0%,39.2%,0%);stroke-opacity:1.0\" transform=\"translate(390.0, 241.13573407202216)\"><circle r=\"4.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(0%,39.2%,0%);stroke-opacity:1.0\" transform=\"translate(400.0, 236.14958448753461)\"><circle r=\"4.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(0%,39.2%,0%);stroke-opacity:1.0\" transform=\"translate(410.0, 230.05540166204986)\"><circle r=\"4.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(0%,39.2%,0%);stroke-opacity:1.0\" transform=\"translate(420.0, 222.85318559556785)\"><circle r=\"4.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(0%,39.2%,0%);stroke-opacity:1.0\" transform=\"translate(430.0, 214.54293628808864)\"><circle r=\"4.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(0%,39.2%,0%);stroke-opacity:1.0\" transform=\"translate(440.0, 205.1246537396122)\"><circle r=\"4.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(0%,39.2%,0%);stroke-opacity:1.0\" transform=\"translate(450.0, 194.5983379501385)\"><circle r=\"4.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(0%,39.2%,0%);stroke-opacity:1.0\" transform=\"translate(460.0, 182.96398891966757)\"><circle r=\"4.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(0%,39.2%,0%);stroke-opacity:1.0\" transform=\"translate(470.0, 170.22160664819947)\"><circle r=\"4.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(0%,39.2%,0%);stroke-opacity:1.0\" transform=\"translate(480.0, 156.37119113573411)\"><circle r=\"4.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(0%,39.2%,0%);stroke-opacity:1.0\" transform=\"translate(490.0, 141.41274238227149)\"><circle r=\"4.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(0%,39.2%,0%);stroke-opacity:1.0\" transform=\"translate(500.0, 125.34626038781163)\"><circle r=\"4.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(0%,39.2%,0%);stroke-opacity:1.0\" transform=\"translate(510.0, 108.17174515235459)\"><circle r=\"4.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(0%,39.2%,0%);stroke-opacity:1.0\" transform=\"translate(520.0, 89.889196675900322)\"><circle r=\"4.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(0%,39.2%,0%);stroke-opacity:1.0\" transform=\"translate(530.0, 70.498614958448783)\"><circle r=\"4.0\"></circle></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(0%,39.2%,0%);stroke-opacity:1.0\" transform=\"translate(540.0, 50.0)\"><circle r=\"4.0\"></circle></g></g></g></g><g class=\"toyplot-coordinates-Axis\" id=\"t12b5e46da8fd4643bfc8be3705eb6fb5\" transform=\"translate(350.0,250.0)translate(0,10.0)\"><line style=\"\" x1=\"0\" x2=\"190.0\" y1=\"0\" y2=\"0\"></line><g><g transform=\"translate(0.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-2.78\" y=\"8.555\">0</text></g><g transform=\"translate(50.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-2.78\" y=\"8.555\">5</text></g><g transform=\"translate(100.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-5.56\" y=\"8.555\">10</text></g><g transform=\"translate(150.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-5.56\" y=\"8.555\">15</text></g><g transform=\"translate(200.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-5.56\" y=\"8.555\">20</text></g></g><g class=\"toyplot-coordinates-Axis-coordinates\" style=\"visibility:hidden\" transform=\"\"><line style=\"stroke:rgb(43.9%,50.2%,56.5%);stroke-opacity:1.0;stroke-width:1.0\" x1=\"0\" x2=\"0\" y1=\"-3.0\" y2=\"4.5\"></line><text style=\"alignment-baseline:alphabetic;fill:rgb(43.9%,50.2%,56.5%);fill-opacity:1.0;font-size:10px;font-weight:normal;stroke:none;text-anchor:middle\" x=\"0\" y=\"-6\"></text></g></g><g class=\"toyplot-coordinates-Axis\" id=\"t07c515d79a7549b4824dc8ba1d81a48d\" transform=\"translate(350.0,250.0)rotate(-90.0)translate(0,-10.0)\"><line style=\"\" x1=\"0\" x2=\"200.0\" y1=\"0\" y2=\"0\"></line><g><g transform=\"translate(0.0,-6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-6.95\" y=\"-4.4408920985e-16\">0.0</text></g><g transform=\"translate(100.0,-6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-6.95\" y=\"-4.4408920985e-16\">0.5</text></g><g transform=\"translate(200.0,-6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-6.95\" y=\"-4.4408920985e-16\">1.0</text></g></g><g class=\"toyplot-coordinates-Axis-coordinates\" style=\"visibility:hidden\" transform=\"\"><line style=\"stroke:rgb(43.9%,50.2%,56.5%);stroke-opacity:1.0;stroke-width:1.0\" x1=\"0\" x2=\"0\" y1=\"3.0\" y2=\"-4.5\"></line><text style=\"alignment-baseline:hanging;fill:rgb(43.9%,50.2%,56.5%);fill-opacity:1.0;font-size:10px;font-weight:normal;stroke:none;text-anchor:middle\" x=\"0\" y=\"6\"></text></g></g></g></svg><div class=\"toyplot-behavior\"><script>(function()\n",
       "{\n",
       "var modules={};\n",
       "modules[\"toyplot/tables\"] = (function()\n",
       "    {\n",
       "        var tables = [];\n",
       "\n",
       "        var module = {};\n",
       "\n",
       "        module.set = function(owner, key, names, columns)\n",
       "        {\n",
       "            tables.push({owner: owner, key: key, names: names, columns: columns});\n",
       "        }\n",
       "\n",
       "        module.get = function(owner, key)\n",
       "        {\n",
       "            for(var i = 0; i != tables.length; ++i)\n",
       "            {\n",
       "                var table = tables[i];\n",
       "                if(table.owner != owner)\n",
       "                    continue;\n",
       "                if(table.key != key)\n",
       "                    continue;\n",
       "                return {names: table.names, columns: table.columns};\n",
       "            }\n",
       "        }\n",
       "\n",
       "        module.get_csv = function(owner, key)\n",
       "        {\n",
       "            var table = module.get(owner, key);\n",
       "            if(table != undefined)\n",
       "            {\n",
       "                var csv = \"\";\n",
       "                csv += table.names.join(\",\") + \"\\n\";\n",
       "                for(var i = 0; i != table.columns[0].length; ++i)\n",
       "                {\n",
       "                  for(var j = 0; j != table.columns.length; ++j)\n",
       "                  {\n",
       "                    if(j)\n",
       "                      csv += \",\";\n",
       "                    csv += table.columns[j][i];\n",
       "                  }\n",
       "                  csv += \"\\n\";\n",
       "                }\n",
       "                return csv;\n",
       "            }\n",
       "        }\n",
       "\n",
       "        return module;\n",
       "    })();\n",
       "modules[\"toyplot/root/id\"] = \"t8518234e5e67439aafe26045ce42202c\";\n",
       "modules[\"toyplot/root\"] = (function(root_id)\n",
       "    {\n",
       "        return document.querySelector(\"#\" + root_id);\n",
       "    })(modules[\"toyplot/root/id\"]);\n",
       "modules[\"toyplot/canvas/id\"] = \"t8f64276eb05e45ef9cda8e6c60fadf7d\";\n",
       "modules[\"toyplot/canvas\"] = (function(canvas_id)\n",
       "    {\n",
       "        return document.querySelector(\"#\" + canvas_id);\n",
       "    })(modules[\"toyplot/canvas/id\"]);\n",
       "modules[\"toyplot/menus/context\"] = (function(root, canvas)\n",
       "    {\n",
       "        var wrapper = document.createElement(\"div\");\n",
       "        wrapper.innerHTML = \"<ul class='toyplot-context-menu' style='background:#eee; border:1px solid #b8b8b8; border-radius:5px; box-shadow: 0px 0px 8px rgba(0%,0%,0%,0.25); margin:0; padding:3px 0; position:fixed; visibility:hidden;'></ul>\"\n",
       "        var menu = wrapper.firstChild;\n",
       "\n",
       "        root.appendChild(menu);\n",
       "\n",
       "        var items = [];\n",
       "\n",
       "        var ignore_mouseup = null;\n",
       "        function open_menu(e)\n",
       "        {\n",
       "            var show_menu = false;\n",
       "            for(var index=0; index != items.length; ++index)\n",
       "            {\n",
       "                var item = items[index];\n",
       "                if(item.show(e))\n",
       "                {\n",
       "                    item.item.style.display = \"block\";\n",
       "                    show_menu = true;\n",
       "                }\n",
       "                else\n",
       "                {\n",
       "                    item.item.style.display = \"none\";\n",
       "                }\n",
       "            }\n",
       "\n",
       "            if(show_menu)\n",
       "            {\n",
       "                ignore_mouseup = true;\n",
       "                menu.style.left = (e.clientX + 1) + \"px\";\n",
       "                menu.style.top = (e.clientY - 5) + \"px\";\n",
       "                menu.style.visibility = \"visible\";\n",
       "                e.stopPropagation();\n",
       "                e.preventDefault();\n",
       "            }\n",
       "        }\n",
       "\n",
       "        function close_menu()\n",
       "        {\n",
       "            menu.style.visibility = \"hidden\";\n",
       "        }\n",
       "\n",
       "        function contextmenu(e)\n",
       "        {\n",
       "            open_menu(e);\n",
       "        }\n",
       "\n",
       "        function mousemove(e)\n",
       "        {\n",
       "            ignore_mouseup = false;\n",
       "        }\n",
       "\n",
       "        function mouseup(e)\n",
       "        {\n",
       "            if(ignore_mouseup)\n",
       "            {\n",
       "                ignore_mouseup = false;\n",
       "                return;\n",
       "            }\n",
       "            close_menu();\n",
       "        }\n",
       "\n",
       "        function keydown(e)\n",
       "        {\n",
       "            if(e.key == \"Escape\" || e.key == \"Esc\" || e.keyCode == 27)\n",
       "            {\n",
       "                close_menu();\n",
       "            }\n",
       "        }\n",
       "\n",
       "        canvas.addEventListener(\"contextmenu\", contextmenu);\n",
       "        canvas.addEventListener(\"mousemove\", mousemove);\n",
       "        document.addEventListener(\"mouseup\", mouseup);\n",
       "        document.addEventListener(\"keydown\", keydown);\n",
       "\n",
       "        var module = {};\n",
       "        module.add_item = function(label, show, activate)\n",
       "        {\n",
       "            var wrapper = document.createElement(\"div\");\n",
       "            wrapper.innerHTML = \"<li class='toyplot-context-menu-item' style='background:#eee; color:#333; padding:2px 20px; list-style:none; margin:0; text-align:left;'>\" + label + \"</li>\"\n",
       "            var item = wrapper.firstChild;\n",
       "\n",
       "            items.push({item: item, show: show});\n",
       "\n",
       "            function mouseover()\n",
       "            {\n",
       "                this.style.background = \"steelblue\";\n",
       "                this.style.color = \"white\";\n",
       "            }\n",
       "\n",
       "            function mouseout()\n",
       "            {\n",
       "                this.style.background = \"#eee\";\n",
       "                this.style.color = \"#333\";\n",
       "            }\n",
       "\n",
       "            function choose_item(e)\n",
       "            {\n",
       "                close_menu();\n",
       "                activate();\n",
       "\n",
       "                e.stopPropagation();\n",
       "                e.preventDefault();\n",
       "            }\n",
       "\n",
       "            item.addEventListener(\"mouseover\", mouseover);\n",
       "            item.addEventListener(\"mouseout\", mouseout);\n",
       "            item.addEventListener(\"mouseup\", choose_item);\n",
       "            item.addEventListener(\"contextmenu\", choose_item);\n",
       "\n",
       "            menu.appendChild(item);\n",
       "        };\n",
       "        return module;\n",
       "    })(modules[\"toyplot/root\"],modules[\"toyplot/canvas\"]);\n",
       "modules[\"toyplot/io\"] = (function()\n",
       "    {\n",
       "        var module = {};\n",
       "        module.save_file = function(mime_type, charset, data, filename)\n",
       "        {\n",
       "            var uri = \"data:\" + mime_type + \";charset=\" + charset + \",\" + data;\n",
       "            uri = encodeURI(uri);\n",
       "\n",
       "            var link = document.createElement(\"a\");\n",
       "            if(typeof link.download != \"undefined\")\n",
       "            {\n",
       "              link.href = uri;\n",
       "              link.style = \"visibility:hidden\";\n",
       "              link.download = filename;\n",
       "\n",
       "              document.body.appendChild(link);\n",
       "              link.click();\n",
       "              document.body.removeChild(link);\n",
       "            }\n",
       "            else\n",
       "            {\n",
       "              window.open(uri);\n",
       "            }\n",
       "        };\n",
       "        return module;\n",
       "    })();\n",
       "modules[\"toyplot.coordinates.Axis\"] = (\n",
       "        function(canvas)\n",
       "        {\n",
       "            function sign(x)\n",
       "            {\n",
       "                return x < 0 ? -1 : x > 0 ? 1 : 0;\n",
       "            }\n",
       "\n",
       "            function mix(a, b, amount)\n",
       "            {\n",
       "                return ((1.0 - amount) * a) + (amount * b);\n",
       "            }\n",
       "\n",
       "            function log(x, base)\n",
       "            {\n",
       "                return Math.log(Math.abs(x)) / Math.log(base);\n",
       "            }\n",
       "\n",
       "            function in_range(a, x, b)\n",
       "            {\n",
       "                var left = Math.min(a, b);\n",
       "                var right = Math.max(a, b);\n",
       "                return left <= x && x <= right;\n",
       "            }\n",
       "\n",
       "            function inside(range, projection)\n",
       "            {\n",
       "                for(var i = 0; i != projection.length; ++i)\n",
       "                {\n",
       "                    var segment = projection[i];\n",
       "                    if(in_range(segment.range.min, range, segment.range.max))\n",
       "                        return true;\n",
       "                }\n",
       "                return false;\n",
       "            }\n",
       "\n",
       "            function to_domain(range, projection)\n",
       "            {\n",
       "                for(var i = 0; i != projection.length; ++i)\n",
       "                {\n",
       "                    var segment = projection[i];\n",
       "                    if(in_range(segment.range.bounds.min, range, segment.range.bounds.max))\n",
       "                    {\n",
       "                        if(segment.scale == \"linear\")\n",
       "                        {\n",
       "                            var amount = (range - segment.range.min) / (segment.range.max - segment.range.min);\n",
       "                            return mix(segment.domain.min, segment.domain.max, amount)\n",
       "                        }\n",
       "                        else if(segment.scale[0] == \"log\")\n",
       "                        {\n",
       "                            var amount = (range - segment.range.min) / (segment.range.max - segment.range.min);\n",
       "                            var base = segment.scale[1];\n",
       "                            return sign(segment.domain.min) * Math.pow(base, mix(log(segment.domain.min, base), log(segment.domain.max, base), amount));\n",
       "                        }\n",
       "                    }\n",
       "                }\n",
       "            }\n",
       "\n",
       "            var axes = {};\n",
       "\n",
       "            function display_coordinates(e)\n",
       "            {\n",
       "                var current = canvas.createSVGPoint();\n",
       "                current.x = e.clientX;\n",
       "                current.y = e.clientY;\n",
       "\n",
       "                for(var axis_id in axes)\n",
       "                {\n",
       "                    var axis = document.querySelector(\"#\" + axis_id);\n",
       "                    var coordinates = axis.querySelector(\".toyplot-coordinates-Axis-coordinates\");\n",
       "                    if(coordinates)\n",
       "                    {\n",
       "                        var projection = axes[axis_id];\n",
       "                        var local = current.matrixTransform(axis.getScreenCTM().inverse());\n",
       "                        if(inside(local.x, projection))\n",
       "                        {\n",
       "                            var domain = to_domain(local.x, projection);\n",
       "                            coordinates.style.visibility = \"visible\";\n",
       "                            coordinates.setAttribute(\"transform\", \"translate(\" + local.x + \")\");\n",
       "                            var text = coordinates.querySelector(\"text\");\n",
       "                            text.textContent = domain.toFixed(2);\n",
       "                        }\n",
       "                        else\n",
       "                        {\n",
       "                            coordinates.style.visibility= \"hidden\";\n",
       "                        }\n",
       "                    }\n",
       "                }\n",
       "            }\n",
       "\n",
       "            canvas.addEventListener(\"click\", display_coordinates);\n",
       "\n",
       "            var module = {};\n",
       "            module.show_coordinates = function(axis_id, projection)\n",
       "            {\n",
       "                axes[axis_id] = projection;\n",
       "            }\n",
       "\n",
       "            return module;\n",
       "        })(modules[\"toyplot/canvas\"]);\n",
       "(function(tables, context_menu, io, owner_id, key, label, names, columns, filename)\n",
       "        {\n",
       "            tables.set(owner_id, key, names, columns);\n",
       "\n",
       "            var owner = document.querySelector(\"#\" + owner_id);\n",
       "            function show_item(e)\n",
       "            {\n",
       "                return owner.contains(e.target);\n",
       "            }\n",
       "\n",
       "            function choose_item()\n",
       "            {\n",
       "                io.save_file(\"text/csv\", \"utf-8\", tables.get_csv(owner_id, key), filename + \".csv\");\n",
       "            }\n",
       "\n",
       "            context_menu.add_item(\"Save \" + label + \" as CSV\", show_item, choose_item);\n",
       "        })(modules[\"toyplot/tables\"],modules[\"toyplot/menus/context\"],modules[\"toyplot/io\"],\"te1ab8bb17276414093f2ae996e9b5780\",\"data\",\"plot data\",[\"x\", \"y0\"],[[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19], [0.0, 0.0027700831024930744, 0.011080332409972297, 0.02493074792243767, 0.04432132963988919, 0.06925207756232686, 0.09972299168975068, 0.13573407202216065, 0.17728531855955676, 0.22437673130193903, 0.27700831024930744, 0.33518005540166207, 0.39889196675900274, 0.4681440443213295, 0.5429362880886426, 0.6232686980609419, 0.709141274238227, 0.8005540166204984, 0.8975069252077561, 1.0]],\"toyplot\");\n",
       "(function(axis, axis_id, projection)\n",
       "        {\n",
       "            axis.show_coordinates(axis_id, projection);\n",
       "        })(modules[\"toyplot.coordinates.Axis\"],\"t400d108bc532415e81dff8b85ee4ac70\",[{\"domain\": {\"bounds\": {\"max\": Infinity, \"min\": -Infinity}, \"max\": 20.0, \"min\": 0.0}, \"range\": {\"bounds\": {\"max\": Infinity, \"min\": -Infinity}, \"max\": 200.0, \"min\": 0.0}, \"scale\": \"linear\"}]);\n",
       "(function(axis, axis_id, projection)\n",
       "        {\n",
       "            axis.show_coordinates(axis_id, projection);\n",
       "        })(modules[\"toyplot.coordinates.Axis\"],\"t4f50ce8980a54eca9afdd9d02cb1d7e3\",[{\"domain\": {\"bounds\": {\"max\": Infinity, \"min\": -Infinity}, \"max\": 1.0, \"min\": 0.0}, \"range\": {\"bounds\": {\"max\": Infinity, \"min\": -Infinity}, \"max\": 200.0, \"min\": 0.0}, \"scale\": \"linear\"}]);\n",
       "(function(tables, context_menu, io, owner_id, key, label, names, columns, filename)\n",
       "        {\n",
       "            tables.set(owner_id, key, names, columns);\n",
       "\n",
       "            var owner = document.querySelector(\"#\" + owner_id);\n",
       "            function show_item(e)\n",
       "            {\n",
       "                return owner.contains(e.target);\n",
       "            }\n",
       "\n",
       "            function choose_item()\n",
       "            {\n",
       "                io.save_file(\"text/csv\", \"utf-8\", tables.get_csv(owner_id, key), filename + \".csv\");\n",
       "            }\n",
       "\n",
       "            context_menu.add_item(\"Save \" + label + \" as CSV\", show_item, choose_item);\n",
       "        })(modules[\"toyplot/tables\"],modules[\"toyplot/menus/context\"],modules[\"toyplot/io\"],\"t25561d03172c4213947a0f23a85b7fc4\",\"data\",\"plot data\",[\"x\", \"y0\"],[[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19], [0.0, 0.0027700831024930744, 0.011080332409972297, 0.02493074792243767, 0.04432132963988919, 0.06925207756232686, 0.09972299168975068, 0.13573407202216065, 0.17728531855955676, 0.22437673130193903, 0.27700831024930744, 0.33518005540166207, 0.39889196675900274, 0.4681440443213295, 0.5429362880886426, 0.6232686980609419, 0.709141274238227, 0.8005540166204984, 0.8975069252077561, 1.0]],\"toyplot\");\n",
       "(function(axis, axis_id, projection)\n",
       "        {\n",
       "            axis.show_coordinates(axis_id, projection);\n",
       "        })(modules[\"toyplot.coordinates.Axis\"],\"t12b5e46da8fd4643bfc8be3705eb6fb5\",[{\"domain\": {\"bounds\": {\"max\": Infinity, \"min\": -Infinity}, \"max\": 20.0, \"min\": 0.0}, \"range\": {\"bounds\": {\"max\": Infinity, \"min\": -Infinity}, \"max\": 200.0, \"min\": 0.0}, \"scale\": \"linear\"}]);\n",
       "(function(axis, axis_id, projection)\n",
       "        {\n",
       "            axis.show_coordinates(axis_id, projection);\n",
       "        })(modules[\"toyplot.coordinates.Axis\"],\"t07c515d79a7549b4824dc8ba1d81a48d\",[{\"domain\": {\"bounds\": {\"max\": Infinity, \"min\": -Infinity}, \"max\": 1.0, \"min\": 0.0}, \"range\": {\"bounds\": {\"max\": Infinity, \"min\": -Infinity}, \"max\": 200.0, \"min\": 0.0}, \"scale\": \"linear\"}]);\n",
       "})();</script></div></div>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "canvas = toyplot.Canvas(600, 300)\n",
    "canvas.cartesian(grid=(1, 2, 0)).plot(y, marker=\"o\", size=8, style={\"stroke\":\"darkgreen\"})\n",
    "canvas.cartesian(grid=(1, 2, 1)).plot(y, marker=\"o\", size=8, mstyle={\"stroke\":\"darkgreen\"});"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Note that you can pass a sequence of shape codes to the *marker* argument, to specify markers on a per-series or per-datum basis.\n",
    "\n",
    "The string shape code is actually a shortcut for a full marker specification, which is an instance of :class:`toyplot.marker.Marker` that contains a set of explicit marker attributes:\n",
    "\n",
    "* \"shape\" - marker shape code.\n",
    "* \"mstyle\" - dictionary of CSS styles to apply to the marker *shape*.\n",
    "* \"size\" - size of the marker.\n",
    "* \"angle\" - angle (in degrees) to rotate the marker.\n",
    "* \"label\" - text label superimposed on the marker.\n",
    "* \"lstyle\" - dictionary of CSS styles to apply to the marker *label*.\n",
    "\n",
    "Using the full marker specification allows you to override the size, style, and appearance of individual markers in a series, if necessary.\n",
    "\n",
    "You can use :func:`toyplot.marker.create` to create instances of :class:`toyplot.marker.Marker`, as in the following examples: "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 18,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div class=\"toyplot\" id=\"te4af536ad3754199a88dc039b4e2de19\" style=\"text-align:center\"><svg class=\"toyplot-canvas-Canvas\" height=\"300.0px\" id=\"td9aeebab58cc4969a1d78a34a26af4ab\" preserveAspectRatio=\"xMidYMid meet\" style=\"background-color:transparent;fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:Helvetica;font-size:12px;opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0;stroke-width:1.0\" viewBox=\"0 0 600.0 300.0\" width=\"600.0px\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:toyplot=\"http://www.sandia.gov/toyplot\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"><g class=\"toyplot-coordinates-Cartesian\" id=\"t4cf3116242654b228347f309e9e2ec65\"><clipPath id=\"taba53e21e07f44409d288557d5da69c8\"><rect height=\"220.0\" width=\"220.0\" x=\"40.0\" y=\"40.0\"></rect></clipPath><g clip-path=\"url(#taba53e21e07f44409d288557d5da69c8)\"><g class=\"toyplot-mark-Scatterplot\" id=\"t0e3d356c90ae4b5c95027704843cb9a7\"><g class=\"toyplot-Series\"><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(50.0, 250.0) rotate(30)\"><polygon points=\"-7.5,7.5 0,-7.5 7.5,7.5\"></polygon></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(60.0, 249.4459833795014) rotate(30)\"><polygon points=\"-7.5,7.5 0,-7.5 7.5,7.5\"></polygon></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(70.0, 247.78393351800551) rotate(30)\"><polygon points=\"-7.5,7.5 0,-7.5 7.5,7.5\"></polygon></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(80.0, 245.01385041551248) rotate(30)\"><polygon points=\"-7.5,7.5 0,-7.5 7.5,7.5\"></polygon></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(90.0, 241.13573407202216) rotate(30)\"><polygon points=\"-7.5,7.5 0,-7.5 7.5,7.5\"></polygon></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(100.0, 236.14958448753461) rotate(30)\"><polygon points=\"-7.5,7.5 0,-7.5 7.5,7.5\"></polygon></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(110.0, 230.05540166204986) rotate(30)\"><polygon points=\"-7.5,7.5 0,-7.5 7.5,7.5\"></polygon></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(120.0, 222.85318559556785) rotate(30)\"><polygon points=\"-7.5,7.5 0,-7.5 7.5,7.5\"></polygon></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(130.0, 214.54293628808864) rotate(30)\"><polygon points=\"-7.5,7.5 0,-7.5 7.5,7.5\"></polygon></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(140.0, 205.1246537396122) rotate(30)\"><polygon points=\"-7.5,7.5 0,-7.5 7.5,7.5\"></polygon></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(150.0, 194.5983379501385) rotate(30)\"><polygon points=\"-7.5,7.5 0,-7.5 7.5,7.5\"></polygon></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(160.0, 182.96398891966757) rotate(30)\"><polygon points=\"-7.5,7.5 0,-7.5 7.5,7.5\"></polygon></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(170.0, 170.22160664819947) rotate(30)\"><polygon points=\"-7.5,7.5 0,-7.5 7.5,7.5\"></polygon></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(180.0, 156.37119113573411) rotate(30)\"><polygon points=\"-7.5,7.5 0,-7.5 7.5,7.5\"></polygon></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(190.0, 141.41274238227149) rotate(30)\"><polygon points=\"-7.5,7.5 0,-7.5 7.5,7.5\"></polygon></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(200.0, 125.34626038781163) rotate(30)\"><polygon points=\"-7.5,7.5 0,-7.5 7.5,7.5\"></polygon></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(210.0, 108.17174515235459) rotate(30)\"><polygon points=\"-7.5,7.5 0,-7.5 7.5,7.5\"></polygon></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(220.0, 89.889196675900322) rotate(30)\"><polygon points=\"-7.5,7.5 0,-7.5 7.5,7.5\"></polygon></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(230.0, 70.498614958448783) rotate(30)\"><polygon points=\"-7.5,7.5 0,-7.5 7.5,7.5\"></polygon></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(240.0, 50.0) rotate(30)\"><polygon points=\"-7.5,7.5 0,-7.5 7.5,7.5\"></polygon></g></g></g></g><g class=\"toyplot-coordinates-Axis\" id=\"t59bbd2a44f6b490ab2e42c8e009b5714\" transform=\"translate(50.0,250.0)translate(0,10.0)\"><line style=\"\" x1=\"0\" x2=\"190.0\" y1=\"0\" y2=\"0\"></line><g><g transform=\"translate(0.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-2.78\" y=\"8.555\">0</text></g><g transform=\"translate(50.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-2.78\" y=\"8.555\">5</text></g><g transform=\"translate(100.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-5.56\" y=\"8.555\">10</text></g><g transform=\"translate(150.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-5.56\" y=\"8.555\">15</text></g><g transform=\"translate(200.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-5.56\" y=\"8.555\">20</text></g></g><g class=\"toyplot-coordinates-Axis-coordinates\" style=\"visibility:hidden\" transform=\"\"><line style=\"stroke:rgb(43.9%,50.2%,56.5%);stroke-opacity:1.0;stroke-width:1.0\" x1=\"0\" x2=\"0\" y1=\"-3.0\" y2=\"4.5\"></line><text style=\"alignment-baseline:alphabetic;fill:rgb(43.9%,50.2%,56.5%);fill-opacity:1.0;font-size:10px;font-weight:normal;stroke:none;text-anchor:middle\" x=\"0\" y=\"-6\"></text></g></g><g class=\"toyplot-coordinates-Axis\" id=\"t7b181bf365d24ebeaed76e4dec21234f\" transform=\"translate(50.0,250.0)rotate(-90.0)translate(0,-10.0)\"><line style=\"\" x1=\"0\" x2=\"200.0\" y1=\"0\" y2=\"0\"></line><g><g transform=\"translate(0.0,-6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-6.95\" y=\"-4.4408920985e-16\">0.0</text></g><g transform=\"translate(100.0,-6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-6.95\" y=\"-4.4408920985e-16\">0.5</text></g><g transform=\"translate(200.0,-6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-6.95\" y=\"-4.4408920985e-16\">1.0</text></g></g><g class=\"toyplot-coordinates-Axis-coordinates\" style=\"visibility:hidden\" transform=\"\"><line style=\"stroke:rgb(43.9%,50.2%,56.5%);stroke-opacity:1.0;stroke-width:1.0\" x1=\"0\" x2=\"0\" y1=\"3.0\" y2=\"-4.5\"></line><text style=\"alignment-baseline:hanging;fill:rgb(43.9%,50.2%,56.5%);fill-opacity:1.0;font-size:10px;font-weight:normal;stroke:none;text-anchor:middle\" x=\"0\" y=\"6\"></text></g></g></g><g class=\"toyplot-coordinates-Cartesian\" id=\"t8679130419114846b1ac674895da4f01\"><clipPath id=\"t115ac9e788b14ebe9484966c9a8cbf6e\"><rect height=\"220.0\" width=\"220.0\" x=\"340.0\" y=\"40.0\"></rect></clipPath><g clip-path=\"url(#t115ac9e788b14ebe9484966c9a8cbf6e)\"><g class=\"toyplot-mark-Scatterplot\" id=\"t0734e149b6424f2aa2e50dab0a70f3ad\"><g class=\"toyplot-Series\"><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(350.0, 250.0)\"><circle r=\"7.5\"></circle><g><text style=\"fill:rgb(100%,100%,100%);fill-opacity:1.0;font-family:helvetica;font-size:11.25px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-3.751875\" y=\"2.874375\">B</text></g></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(360.0, 249.4459833795014)\"><circle r=\"7.5\"></circle><g><text style=\"fill:rgb(100%,100%,100%);fill-opacity:1.0;font-family:helvetica;font-size:11.25px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-3.751875\" y=\"2.874375\">B</text></g></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(370.0, 247.78393351800551)\"><circle r=\"7.5\"></circle><g><text style=\"fill:rgb(100%,100%,100%);fill-opacity:1.0;font-family:helvetica;font-size:11.25px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-3.751875\" y=\"2.874375\">B</text></g></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(380.0, 245.01385041551248)\"><circle r=\"7.5\"></circle><g><text style=\"fill:rgb(100%,100%,100%);fill-opacity:1.0;font-family:helvetica;font-size:11.25px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-3.751875\" y=\"2.874375\">B</text></g></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(390.0, 241.13573407202216)\"><circle r=\"7.5\"></circle><g><text style=\"fill:rgb(100%,100%,100%);fill-opacity:1.0;font-family:helvetica;font-size:11.25px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-3.751875\" y=\"2.874375\">B</text></g></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(400.0, 236.14958448753461)\"><circle r=\"7.5\"></circle><g><text style=\"fill:rgb(100%,100%,100%);fill-opacity:1.0;font-family:helvetica;font-size:11.25px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-3.751875\" y=\"2.874375\">B</text></g></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(410.0, 230.05540166204986)\"><circle r=\"7.5\"></circle><g><text style=\"fill:rgb(100%,100%,100%);fill-opacity:1.0;font-family:helvetica;font-size:11.25px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-3.751875\" y=\"2.874375\">B</text></g></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(420.0, 222.85318559556785)\"><circle r=\"7.5\"></circle><g><text style=\"fill:rgb(100%,100%,100%);fill-opacity:1.0;font-family:helvetica;font-size:11.25px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-3.751875\" y=\"2.874375\">B</text></g></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(430.0, 214.54293628808864)\"><circle r=\"7.5\"></circle><g><text style=\"fill:rgb(100%,100%,100%);fill-opacity:1.0;font-family:helvetica;font-size:11.25px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-3.751875\" y=\"2.874375\">B</text></g></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(440.0, 205.1246537396122)\"><circle r=\"7.5\"></circle><g><text style=\"fill:rgb(100%,100%,100%);fill-opacity:1.0;font-family:helvetica;font-size:11.25px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-3.751875\" y=\"2.874375\">B</text></g></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(450.0, 194.5983379501385)\"><circle r=\"7.5\"></circle><g><text style=\"fill:rgb(100%,100%,100%);fill-opacity:1.0;font-family:helvetica;font-size:11.25px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-3.751875\" y=\"2.874375\">B</text></g></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(460.0, 182.96398891966757)\"><circle r=\"7.5\"></circle><g><text style=\"fill:rgb(100%,100%,100%);fill-opacity:1.0;font-family:helvetica;font-size:11.25px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-3.751875\" y=\"2.874375\">B</text></g></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(470.0, 170.22160664819947)\"><circle r=\"7.5\"></circle><g><text style=\"fill:rgb(100%,100%,100%);fill-opacity:1.0;font-family:helvetica;font-size:11.25px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-3.751875\" y=\"2.874375\">B</text></g></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(480.0, 156.37119113573411)\"><circle r=\"7.5\"></circle><g><text style=\"fill:rgb(100%,100%,100%);fill-opacity:1.0;font-family:helvetica;font-size:11.25px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-3.751875\" y=\"2.874375\">B</text></g></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(490.0, 141.41274238227149)\"><circle r=\"7.5\"></circle><g><text style=\"fill:rgb(100%,100%,100%);fill-opacity:1.0;font-family:helvetica;font-size:11.25px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-3.751875\" y=\"2.874375\">B</text></g></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(500.0, 125.34626038781163)\"><circle r=\"7.5\"></circle><g><text style=\"fill:rgb(100%,100%,100%);fill-opacity:1.0;font-family:helvetica;font-size:11.25px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-3.751875\" y=\"2.874375\">B</text></g></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(510.0, 108.17174515235459)\"><circle r=\"7.5\"></circle><g><text style=\"fill:rgb(100%,100%,100%);fill-opacity:1.0;font-family:helvetica;font-size:11.25px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-3.751875\" y=\"2.874375\">B</text></g></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(520.0, 89.889196675900322)\"><circle r=\"7.5\"></circle><g><text style=\"fill:rgb(100%,100%,100%);fill-opacity:1.0;font-family:helvetica;font-size:11.25px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-3.751875\" y=\"2.874375\">B</text></g></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(530.0, 70.498614958448783)\"><circle r=\"7.5\"></circle><g><text style=\"fill:rgb(100%,100%,100%);fill-opacity:1.0;font-family:helvetica;font-size:11.25px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-3.751875\" y=\"2.874375\">B</text></g></g><g class=\"toyplot-Datum\" style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;opacity:1.0;stroke:rgb(40%,76.1%,64.7%);stroke-opacity:1.0\" transform=\"translate(540.0, 50.0)\"><circle r=\"7.5\"></circle><g><text style=\"fill:rgb(100%,100%,100%);fill-opacity:1.0;font-family:helvetica;font-size:11.25px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-3.751875\" y=\"2.874375\">B</text></g></g></g></g></g><g class=\"toyplot-coordinates-Axis\" id=\"t1670b1e7971d4c1790a7b7ca552a2c56\" transform=\"translate(350.0,250.0)translate(0,10.0)\"><line style=\"\" x1=\"0\" x2=\"190.0\" y1=\"0\" y2=\"0\"></line><g><g transform=\"translate(0.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-2.78\" y=\"8.555\">0</text></g><g transform=\"translate(50.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-2.78\" y=\"8.555\">5</text></g><g transform=\"translate(100.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-5.56\" y=\"8.555\">10</text></g><g transform=\"translate(150.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-5.56\" y=\"8.555\">15</text></g><g transform=\"translate(200.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-5.56\" y=\"8.555\">20</text></g></g><g class=\"toyplot-coordinates-Axis-coordinates\" style=\"visibility:hidden\" transform=\"\"><line style=\"stroke:rgb(43.9%,50.2%,56.5%);stroke-opacity:1.0;stroke-width:1.0\" x1=\"0\" x2=\"0\" y1=\"-3.0\" y2=\"4.5\"></line><text style=\"alignment-baseline:alphabetic;fill:rgb(43.9%,50.2%,56.5%);fill-opacity:1.0;font-size:10px;font-weight:normal;stroke:none;text-anchor:middle\" x=\"0\" y=\"-6\"></text></g></g><g class=\"toyplot-coordinates-Axis\" id=\"t81b9778aa5e248b19a6877f9e44483b8\" transform=\"translate(350.0,250.0)rotate(-90.0)translate(0,-10.0)\"><line style=\"\" x1=\"0\" x2=\"200.0\" y1=\"0\" y2=\"0\"></line><g><g transform=\"translate(0.0,-6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-6.95\" y=\"-4.4408920985e-16\">0.0</text></g><g transform=\"translate(100.0,-6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-6.95\" y=\"-4.4408920985e-16\">0.5</text></g><g transform=\"translate(200.0,-6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-6.95\" y=\"-4.4408920985e-16\">1.0</text></g></g><g class=\"toyplot-coordinates-Axis-coordinates\" style=\"visibility:hidden\" transform=\"\"><line style=\"stroke:rgb(43.9%,50.2%,56.5%);stroke-opacity:1.0;stroke-width:1.0\" x1=\"0\" x2=\"0\" y1=\"3.0\" y2=\"-4.5\"></line><text style=\"alignment-baseline:hanging;fill:rgb(43.9%,50.2%,56.5%);fill-opacity:1.0;font-size:10px;font-weight:normal;stroke:none;text-anchor:middle\" x=\"0\" y=\"6\"></text></g></g></g></svg><div class=\"toyplot-behavior\"><script>(function()\n",
       "{\n",
       "var modules={};\n",
       "modules[\"toyplot/tables\"] = (function()\n",
       "    {\n",
       "        var tables = [];\n",
       "\n",
       "        var module = {};\n",
       "\n",
       "        module.set = function(owner, key, names, columns)\n",
       "        {\n",
       "            tables.push({owner: owner, key: key, names: names, columns: columns});\n",
       "        }\n",
       "\n",
       "        module.get = function(owner, key)\n",
       "        {\n",
       "            for(var i = 0; i != tables.length; ++i)\n",
       "            {\n",
       "                var table = tables[i];\n",
       "                if(table.owner != owner)\n",
       "                    continue;\n",
       "                if(table.key != key)\n",
       "                    continue;\n",
       "                return {names: table.names, columns: table.columns};\n",
       "            }\n",
       "        }\n",
       "\n",
       "        module.get_csv = function(owner, key)\n",
       "        {\n",
       "            var table = module.get(owner, key);\n",
       "            if(table != undefined)\n",
       "            {\n",
       "                var csv = \"\";\n",
       "                csv += table.names.join(\",\") + \"\\n\";\n",
       "                for(var i = 0; i != table.columns[0].length; ++i)\n",
       "                {\n",
       "                  for(var j = 0; j != table.columns.length; ++j)\n",
       "                  {\n",
       "                    if(j)\n",
       "                      csv += \",\";\n",
       "                    csv += table.columns[j][i];\n",
       "                  }\n",
       "                  csv += \"\\n\";\n",
       "                }\n",
       "                return csv;\n",
       "            }\n",
       "        }\n",
       "\n",
       "        return module;\n",
       "    })();\n",
       "modules[\"toyplot/root/id\"] = \"te4af536ad3754199a88dc039b4e2de19\";\n",
       "modules[\"toyplot/root\"] = (function(root_id)\n",
       "    {\n",
       "        return document.querySelector(\"#\" + root_id);\n",
       "    })(modules[\"toyplot/root/id\"]);\n",
       "modules[\"toyplot/canvas/id\"] = \"td9aeebab58cc4969a1d78a34a26af4ab\";\n",
       "modules[\"toyplot/canvas\"] = (function(canvas_id)\n",
       "    {\n",
       "        return document.querySelector(\"#\" + canvas_id);\n",
       "    })(modules[\"toyplot/canvas/id\"]);\n",
       "modules[\"toyplot/menus/context\"] = (function(root, canvas)\n",
       "    {\n",
       "        var wrapper = document.createElement(\"div\");\n",
       "        wrapper.innerHTML = \"<ul class='toyplot-context-menu' style='background:#eee; border:1px solid #b8b8b8; border-radius:5px; box-shadow: 0px 0px 8px rgba(0%,0%,0%,0.25); margin:0; padding:3px 0; position:fixed; visibility:hidden;'></ul>\"\n",
       "        var menu = wrapper.firstChild;\n",
       "\n",
       "        root.appendChild(menu);\n",
       "\n",
       "        var items = [];\n",
       "\n",
       "        var ignore_mouseup = null;\n",
       "        function open_menu(e)\n",
       "        {\n",
       "            var show_menu = false;\n",
       "            for(var index=0; index != items.length; ++index)\n",
       "            {\n",
       "                var item = items[index];\n",
       "                if(item.show(e))\n",
       "                {\n",
       "                    item.item.style.display = \"block\";\n",
       "                    show_menu = true;\n",
       "                }\n",
       "                else\n",
       "                {\n",
       "                    item.item.style.display = \"none\";\n",
       "                }\n",
       "            }\n",
       "\n",
       "            if(show_menu)\n",
       "            {\n",
       "                ignore_mouseup = true;\n",
       "                menu.style.left = (e.clientX + 1) + \"px\";\n",
       "                menu.style.top = (e.clientY - 5) + \"px\";\n",
       "                menu.style.visibility = \"visible\";\n",
       "                e.stopPropagation();\n",
       "                e.preventDefault();\n",
       "            }\n",
       "        }\n",
       "\n",
       "        function close_menu()\n",
       "        {\n",
       "            menu.style.visibility = \"hidden\";\n",
       "        }\n",
       "\n",
       "        function contextmenu(e)\n",
       "        {\n",
       "            open_menu(e);\n",
       "        }\n",
       "\n",
       "        function mousemove(e)\n",
       "        {\n",
       "            ignore_mouseup = false;\n",
       "        }\n",
       "\n",
       "        function mouseup(e)\n",
       "        {\n",
       "            if(ignore_mouseup)\n",
       "            {\n",
       "                ignore_mouseup = false;\n",
       "                return;\n",
       "            }\n",
       "            close_menu();\n",
       "        }\n",
       "\n",
       "        function keydown(e)\n",
       "        {\n",
       "            if(e.key == \"Escape\" || e.key == \"Esc\" || e.keyCode == 27)\n",
       "            {\n",
       "                close_menu();\n",
       "            }\n",
       "        }\n",
       "\n",
       "        canvas.addEventListener(\"contextmenu\", contextmenu);\n",
       "        canvas.addEventListener(\"mousemove\", mousemove);\n",
       "        document.addEventListener(\"mouseup\", mouseup);\n",
       "        document.addEventListener(\"keydown\", keydown);\n",
       "\n",
       "        var module = {};\n",
       "        module.add_item = function(label, show, activate)\n",
       "        {\n",
       "            var wrapper = document.createElement(\"div\");\n",
       "            wrapper.innerHTML = \"<li class='toyplot-context-menu-item' style='background:#eee; color:#333; padding:2px 20px; list-style:none; margin:0; text-align:left;'>\" + label + \"</li>\"\n",
       "            var item = wrapper.firstChild;\n",
       "\n",
       "            items.push({item: item, show: show});\n",
       "\n",
       "            function mouseover()\n",
       "            {\n",
       "                this.style.background = \"steelblue\";\n",
       "                this.style.color = \"white\";\n",
       "            }\n",
       "\n",
       "            function mouseout()\n",
       "            {\n",
       "                this.style.background = \"#eee\";\n",
       "                this.style.color = \"#333\";\n",
       "            }\n",
       "\n",
       "            function choose_item(e)\n",
       "            {\n",
       "                close_menu();\n",
       "                activate();\n",
       "\n",
       "                e.stopPropagation();\n",
       "                e.preventDefault();\n",
       "            }\n",
       "\n",
       "            item.addEventListener(\"mouseover\", mouseover);\n",
       "            item.addEventListener(\"mouseout\", mouseout);\n",
       "            item.addEventListener(\"mouseup\", choose_item);\n",
       "            item.addEventListener(\"contextmenu\", choose_item);\n",
       "\n",
       "            menu.appendChild(item);\n",
       "        };\n",
       "        return module;\n",
       "    })(modules[\"toyplot/root\"],modules[\"toyplot/canvas\"]);\n",
       "modules[\"toyplot/io\"] = (function()\n",
       "    {\n",
       "        var module = {};\n",
       "        module.save_file = function(mime_type, charset, data, filename)\n",
       "        {\n",
       "            var uri = \"data:\" + mime_type + \";charset=\" + charset + \",\" + data;\n",
       "            uri = encodeURI(uri);\n",
       "\n",
       "            var link = document.createElement(\"a\");\n",
       "            if(typeof link.download != \"undefined\")\n",
       "            {\n",
       "              link.href = uri;\n",
       "              link.style = \"visibility:hidden\";\n",
       "              link.download = filename;\n",
       "\n",
       "              document.body.appendChild(link);\n",
       "              link.click();\n",
       "              document.body.removeChild(link);\n",
       "            }\n",
       "            else\n",
       "            {\n",
       "              window.open(uri);\n",
       "            }\n",
       "        };\n",
       "        return module;\n",
       "    })();\n",
       "modules[\"toyplot.coordinates.Axis\"] = (\n",
       "        function(canvas)\n",
       "        {\n",
       "            function sign(x)\n",
       "            {\n",
       "                return x < 0 ? -1 : x > 0 ? 1 : 0;\n",
       "            }\n",
       "\n",
       "            function mix(a, b, amount)\n",
       "            {\n",
       "                return ((1.0 - amount) * a) + (amount * b);\n",
       "            }\n",
       "\n",
       "            function log(x, base)\n",
       "            {\n",
       "                return Math.log(Math.abs(x)) / Math.log(base);\n",
       "            }\n",
       "\n",
       "            function in_range(a, x, b)\n",
       "            {\n",
       "                var left = Math.min(a, b);\n",
       "                var right = Math.max(a, b);\n",
       "                return left <= x && x <= right;\n",
       "            }\n",
       "\n",
       "            function inside(range, projection)\n",
       "            {\n",
       "                for(var i = 0; i != projection.length; ++i)\n",
       "                {\n",
       "                    var segment = projection[i];\n",
       "                    if(in_range(segment.range.min, range, segment.range.max))\n",
       "                        return true;\n",
       "                }\n",
       "                return false;\n",
       "            }\n",
       "\n",
       "            function to_domain(range, projection)\n",
       "            {\n",
       "                for(var i = 0; i != projection.length; ++i)\n",
       "                {\n",
       "                    var segment = projection[i];\n",
       "                    if(in_range(segment.range.bounds.min, range, segment.range.bounds.max))\n",
       "                    {\n",
       "                        if(segment.scale == \"linear\")\n",
       "                        {\n",
       "                            var amount = (range - segment.range.min) / (segment.range.max - segment.range.min);\n",
       "                            return mix(segment.domain.min, segment.domain.max, amount)\n",
       "                        }\n",
       "                        else if(segment.scale[0] == \"log\")\n",
       "                        {\n",
       "                            var amount = (range - segment.range.min) / (segment.range.max - segment.range.min);\n",
       "                            var base = segment.scale[1];\n",
       "                            return sign(segment.domain.min) * Math.pow(base, mix(log(segment.domain.min, base), log(segment.domain.max, base), amount));\n",
       "                        }\n",
       "                    }\n",
       "                }\n",
       "            }\n",
       "\n",
       "            var axes = {};\n",
       "\n",
       "            function display_coordinates(e)\n",
       "            {\n",
       "                var current = canvas.createSVGPoint();\n",
       "                current.x = e.clientX;\n",
       "                current.y = e.clientY;\n",
       "\n",
       "                for(var axis_id in axes)\n",
       "                {\n",
       "                    var axis = document.querySelector(\"#\" + axis_id);\n",
       "                    var coordinates = axis.querySelector(\".toyplot-coordinates-Axis-coordinates\");\n",
       "                    if(coordinates)\n",
       "                    {\n",
       "                        var projection = axes[axis_id];\n",
       "                        var local = current.matrixTransform(axis.getScreenCTM().inverse());\n",
       "                        if(inside(local.x, projection))\n",
       "                        {\n",
       "                            var domain = to_domain(local.x, projection);\n",
       "                            coordinates.style.visibility = \"visible\";\n",
       "                            coordinates.setAttribute(\"transform\", \"translate(\" + local.x + \")\");\n",
       "                            var text = coordinates.querySelector(\"text\");\n",
       "                            text.textContent = domain.toFixed(2);\n",
       "                        }\n",
       "                        else\n",
       "                        {\n",
       "                            coordinates.style.visibility= \"hidden\";\n",
       "                        }\n",
       "                    }\n",
       "                }\n",
       "            }\n",
       "\n",
       "            canvas.addEventListener(\"click\", display_coordinates);\n",
       "\n",
       "            var module = {};\n",
       "            module.show_coordinates = function(axis_id, projection)\n",
       "            {\n",
       "                axes[axis_id] = projection;\n",
       "            }\n",
       "\n",
       "            return module;\n",
       "        })(modules[\"toyplot/canvas\"]);\n",
       "(function(tables, context_menu, io, owner_id, key, label, names, columns, filename)\n",
       "        {\n",
       "            tables.set(owner_id, key, names, columns);\n",
       "\n",
       "            var owner = document.querySelector(\"#\" + owner_id);\n",
       "            function show_item(e)\n",
       "            {\n",
       "                return owner.contains(e.target);\n",
       "            }\n",
       "\n",
       "            function choose_item()\n",
       "            {\n",
       "                io.save_file(\"text/csv\", \"utf-8\", tables.get_csv(owner_id, key), filename + \".csv\");\n",
       "            }\n",
       "\n",
       "            context_menu.add_item(\"Save \" + label + \" as CSV\", show_item, choose_item);\n",
       "        })(modules[\"toyplot/tables\"],modules[\"toyplot/menus/context\"],modules[\"toyplot/io\"],\"t0e3d356c90ae4b5c95027704843cb9a7\",\"data\",\"scatterplot\",[\"x\", \"y0\"],[[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19], [0.0, 0.0027700831024930744, 0.011080332409972297, 0.02493074792243767, 0.04432132963988919, 0.06925207756232686, 0.09972299168975068, 0.13573407202216065, 0.17728531855955676, 0.22437673130193903, 0.27700831024930744, 0.33518005540166207, 0.39889196675900274, 0.4681440443213295, 0.5429362880886426, 0.6232686980609419, 0.709141274238227, 0.8005540166204984, 0.8975069252077561, 1.0]],\"toyplot\");\n",
       "(function(axis, axis_id, projection)\n",
       "        {\n",
       "            axis.show_coordinates(axis_id, projection);\n",
       "        })(modules[\"toyplot.coordinates.Axis\"],\"t59bbd2a44f6b490ab2e42c8e009b5714\",[{\"domain\": {\"bounds\": {\"max\": Infinity, \"min\": -Infinity}, \"max\": 20.0, \"min\": 0.0}, \"range\": {\"bounds\": {\"max\": Infinity, \"min\": -Infinity}, \"max\": 200.0, \"min\": 0.0}, \"scale\": \"linear\"}]);\n",
       "(function(axis, axis_id, projection)\n",
       "        {\n",
       "            axis.show_coordinates(axis_id, projection);\n",
       "        })(modules[\"toyplot.coordinates.Axis\"],\"t7b181bf365d24ebeaed76e4dec21234f\",[{\"domain\": {\"bounds\": {\"max\": Infinity, \"min\": -Infinity}, \"max\": 1.0, \"min\": 0.0}, \"range\": {\"bounds\": {\"max\": Infinity, \"min\": -Infinity}, \"max\": 200.0, \"min\": 0.0}, \"scale\": \"linear\"}]);\n",
       "(function(tables, context_menu, io, owner_id, key, label, names, columns, filename)\n",
       "        {\n",
       "            tables.set(owner_id, key, names, columns);\n",
       "\n",
       "            var owner = document.querySelector(\"#\" + owner_id);\n",
       "            function show_item(e)\n",
       "            {\n",
       "                return owner.contains(e.target);\n",
       "            }\n",
       "\n",
       "            function choose_item()\n",
       "            {\n",
       "                io.save_file(\"text/csv\", \"utf-8\", tables.get_csv(owner_id, key), filename + \".csv\");\n",
       "            }\n",
       "\n",
       "            context_menu.add_item(\"Save \" + label + \" as CSV\", show_item, choose_item);\n",
       "        })(modules[\"toyplot/tables\"],modules[\"toyplot/menus/context\"],modules[\"toyplot/io\"],\"t0734e149b6424f2aa2e50dab0a70f3ad\",\"data\",\"scatterplot\",[\"x\", \"y0\"],[[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19], [0.0, 0.0027700831024930744, 0.011080332409972297, 0.02493074792243767, 0.04432132963988919, 0.06925207756232686, 0.09972299168975068, 0.13573407202216065, 0.17728531855955676, 0.22437673130193903, 0.27700831024930744, 0.33518005540166207, 0.39889196675900274, 0.4681440443213295, 0.5429362880886426, 0.6232686980609419, 0.709141274238227, 0.8005540166204984, 0.8975069252077561, 1.0]],\"toyplot\");\n",
       "(function(axis, axis_id, projection)\n",
       "        {\n",
       "            axis.show_coordinates(axis_id, projection);\n",
       "        })(modules[\"toyplot.coordinates.Axis\"],\"t1670b1e7971d4c1790a7b7ca552a2c56\",[{\"domain\": {\"bounds\": {\"max\": Infinity, \"min\": -Infinity}, \"max\": 20.0, \"min\": 0.0}, \"range\": {\"bounds\": {\"max\": Infinity, \"min\": -Infinity}, \"max\": 200.0, \"min\": 0.0}, \"scale\": \"linear\"}]);\n",
       "(function(axis, axis_id, projection)\n",
       "        {\n",
       "            axis.show_coordinates(axis_id, projection);\n",
       "        })(modules[\"toyplot.coordinates.Axis\"],\"t81b9778aa5e248b19a6877f9e44483b8\",[{\"domain\": {\"bounds\": {\"max\": Infinity, \"min\": -Infinity}, \"max\": 1.0, \"min\": 0.0}, \"range\": {\"bounds\": {\"max\": Infinity, \"min\": -Infinity}, \"max\": 200.0, \"min\": 0.0}, \"scale\": \"linear\"}]);\n",
       "})();</script></div></div>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "import toyplot.marker\n",
    "\n",
    "marker_a = toyplot.marker.create(shape=\"^\", angle=-30, size=15)\n",
    "marker_b = toyplot.marker.create(shape=\"o\", label=\"B\", lstyle={\"fill\":\"white\"})\n",
    "\n",
    "canvas = toyplot.Canvas(600, 300)\n",
    "canvas.cartesian(grid=(1, 2, 0)).scatterplot(y, marker=marker_a, size=10)\n",
    "canvas.cartesian(grid=(1, 2, 1)).scatterplot(y, marker=marker_b, size=15);"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "In addition to using markers in plots and scatterplots, markers can be embedded in any figure text, using custom HTML markup.  The markup itself can be fairly verbose, so :class:`toyplot.marker.Marker` provides API to make it easier:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 19,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div class=\"toyplot\" id=\"t2996c293de114e75b92dce4687cd9c2d\" style=\"text-align:center\"><svg class=\"toyplot-canvas-Canvas\" height=\"120.0px\" id=\"t61aca2508bc64c81bcad29811e220d96\" preserveAspectRatio=\"xMidYMid meet\" style=\"background-color:transparent;fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:Helvetica;font-size:12px;opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0;stroke-width:1.0\" viewBox=\"0 0 480.0 120.0\" width=\"480.0px\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:toyplot=\"http://www.sandia.gov/toyplot\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"><g class=\"toyplot-coordinates-Cartesian\" id=\"t0a2bf29fe27340a9bd31cccc5959b1ef\"><clipPath id=\"teb5166d0fd894d7a94c02414976e03d5\"><rect height=\"40.0\" width=\"400.0\" x=\"40.0\" y=\"40.0\"></rect></clipPath><g clip-path=\"url(#teb5166d0fd894d7a94c02414976e03d5)\"><g class=\"toyplot-mark-Text\" id=\"tc396d7f3fb0149a5a69024ce30f76428\"><g class=\"toyplot-Series\"><g class=\"toyplot-Datum\" transform=\"translate(240.0,60.0)\"><g style=\"fill:none\" transform=\"translate(-96.353999999999999, 0.0)\"><rect height=\"16.65\" width=\"16.65\" x=\"-8.325\" y=\"-8.325\"></rect><g><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:12.4875px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-4.16458125\" y=\"3.19055625\">A</text></g></g><text style=\"fill:rgb(40%,76.1%,64.7%);fill-opacity:1.0;font-family:helvetica;font-size:18.0px;font-weight:normal;opacity:1.0;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-88.029\" y=\"4.599\"> is a marker and so is </text><g transform=\"translate(96.353999999999999, 0.0)\"><line y1=\"-8.325\" y2=\"8.325\"></line><line transform=\"rotate(60)\" y1=\"-8.325\" y2=\"8.325\"></line><line transform=\"rotate(-60)\" y1=\"-8.325\" y2=\"8.325\"></line></g></g></g></g></g></g></svg><div class=\"toyplot-behavior\"><script>(function()\n",
       "{\n",
       "var modules={};\n",
       "})();</script></div></div>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "marker_a = toyplot.marker.create(shape=\"s\", label=\"A\", mstyle={\"fill\":\"none\"})\n",
    "marker_b = toyplot.marker.create(shape=\"*\")\n",
    "text = marker_a + \" is a marker and so is \" + marker_b\n",
    "\n",
    "style = {\"font-size\": \"18px\"}\n",
    "\n",
    "canvas = toyplot.Canvas(width=\"5in\", height=\"1.25in\")\n",
    "axes = canvas.cartesian(show=False)\n",
    "axes.text(0, 0, text=text, style=style);"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "You can also convert markers to HTML explicitly, if you prefer:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 20,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "<marker shape='s' mstyle='fill:none' label='A'/>\n"
     ]
    }
   ],
   "source": [
    "print(marker_a.to_html())"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "This makes it easy to create a table documenting all of the available marker shape codes:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 21,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div class=\"toyplot\" id=\"t76adf709316e4ed8aeaed2b68c02cacd\" style=\"text-align:center\"><svg class=\"toyplot-canvas-Canvas\" height=\"1200.0px\" id=\"t0392545de9244a039135941bbb9e3841\" preserveAspectRatio=\"xMidYMid meet\" style=\"background-color:transparent;fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:Helvetica;font-size:12px;opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0;stroke-width:1.0\" viewBox=\"0 0 400.0 1200.0\" width=\"400.0px\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:toyplot=\"http://www.sandia.gov/toyplot\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"><g class=\"toyplot-coordinates-Table\" id=\"t565f8428169148618dce4a0d89a9421c\"><g transform=\"translate(125.0,68.965517241379303)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:16.0px;font-weight:bold;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-46.232\" y=\"4.088\">Shape Code</text></g><g transform=\"translate(275.0,68.965517241379303)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:16.0px;font-weight:bold;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-26.232\" y=\"4.088\">Marker</text></g><g transform=\"translate(125.0,106.89655172413794)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:monospace;font-size:16.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-19.2\" y=\"3.776\">None</text></g><g transform=\"translate(275.0,106.89655172413794)\"><g style=\"fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0\" transform=\"translate(0.0, -4.4408920985006262e-16)\"></g></g><g transform=\"translate(125.0,144.82758620689657)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:monospace;font-size:16.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-4.8\" y=\"3.776\">|</text></g><g transform=\"translate(275.0,144.82758620689657)\"><g style=\"fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0\" transform=\"translate(0.0, -4.4408920985006262e-16)\"><line y1=\"-7.5\" y2=\"7.5\"></line></g></g><g transform=\"translate(125.0,182.75862068965517)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:monospace;font-size:16.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-4.8\" y=\"3.776\">/</text></g><g transform=\"translate(275.0,182.75862068965517)\"><g style=\"fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0\" transform=\"translate(0.0, -4.4408920985006262e-16)\"><line transform=\"rotate(45)\" y1=\"-7.5\" y2=\"7.5\"></line></g></g><g transform=\"translate(125.0,220.68965517241378)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:monospace;font-size:16.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-4.8\" y=\"3.776\">-</text></g><g transform=\"translate(275.0,220.68965517241378)\"><g style=\"fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0\" transform=\"translate(0.0, -4.4408920985006262e-16)\"><line transform=\"rotate(-90)\" y1=\"-7.5\" y2=\"7.5\"></line></g></g><g transform=\"translate(125.0,258.62068965517238)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:monospace;font-size:16.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-4.8\" y=\"3.776\">\\</text></g><g transform=\"translate(275.0,258.62068965517238)\"><g style=\"fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0\" transform=\"translate(0.0, -4.4408920985006262e-16)\"><line transform=\"rotate(-45)\" y1=\"-7.5\" y2=\"7.5\"></line></g></g><g transform=\"translate(125.0,296.55172413793099)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:monospace;font-size:16.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-4.8\" y=\"3.776\">+</text></g><g transform=\"translate(275.0,296.55172413793099)\"><g style=\"fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0\" transform=\"translate(0.0, -4.4408920985006262e-16)\"><line y1=\"-7.5\" y2=\"7.5\"></line><line transform=\"rotate(-90)\" y1=\"-7.5\" y2=\"7.5\"></line></g></g><g transform=\"translate(125.0,334.48275862068959)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:monospace;font-size:16.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-4.8\" y=\"3.776\">x</text></g><g transform=\"translate(275.0,334.48275862068959)\"><g style=\"fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0\" transform=\"translate(0.0, -4.4408920985006262e-16)\"><line transform=\"rotate(45)\" y1=\"-7.5\" y2=\"7.5\"></line><line transform=\"rotate(-45)\" y1=\"-7.5\" y2=\"7.5\"></line></g></g><g transform=\"translate(125.0,372.4137931034482)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:monospace;font-size:16.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-4.8\" y=\"3.776\">*</text></g><g transform=\"translate(275.0,372.4137931034482)\"><g style=\"fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0\" transform=\"translate(0.0, -4.4408920985006262e-16)\"><line y1=\"-7.5\" y2=\"7.5\"></line><line transform=\"rotate(60)\" y1=\"-7.5\" y2=\"7.5\"></line><line transform=\"rotate(-60)\" y1=\"-7.5\" y2=\"7.5\"></line></g></g><g transform=\"translate(125.0,410.3448275862068)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:monospace;font-size:16.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-4.8\" y=\"3.776\">^</text></g><g transform=\"translate(275.0,410.3448275862068)\"><g style=\"fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0\" transform=\"translate(0.0, -4.4408920985006262e-16)\"><polygon points=\"-7.5,7.5 0,-7.5 7.5,7.5\"></polygon></g></g><g transform=\"translate(125.0,448.27586206896541)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:monospace;font-size:16.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-4.8\" y=\"3.776\">&gt;</text></g><g transform=\"translate(275.0,448.27586206896541)\"><g style=\"fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0\" transform=\"translate(0.0, -4.4408920985006262e-16)\"><polygon points=\"-7.5,7.5 0,-7.5 7.5,7.5\" transform=\"rotate(90)\"></polygon></g></g><g transform=\"translate(125.0,486.20689655172401)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:monospace;font-size:16.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-4.8\" y=\"3.776\">v</text></g><g transform=\"translate(275.0,486.20689655172401)\"><g style=\"fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0\" transform=\"translate(0.0, -4.4408920985006262e-16)\"><polygon points=\"-7.5,7.5 0,-7.5 7.5,7.5\" transform=\"rotate(-180)\"></polygon></g></g><g transform=\"translate(125.0,524.13793103448256)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:monospace;font-size:16.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-4.8\" y=\"3.776\">&lt;</text></g><g transform=\"translate(275.0,524.13793103448256)\"><g style=\"fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0\" transform=\"translate(0.0, -4.4408920985006262e-16)\"><polygon points=\"-7.5,7.5 0,-7.5 7.5,7.5\" transform=\"rotate(-90)\"></polygon></g></g><g transform=\"translate(125.0,562.06896551724117)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:monospace;font-size:16.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-4.8\" y=\"3.776\">s</text></g><g transform=\"translate(275.0,562.06896551724117)\"><g style=\"fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0\" transform=\"translate(0.0, -4.4408920985006262e-16)\"><rect height=\"15.0\" width=\"15.0\" x=\"-7.5\" y=\"-7.5\"></rect></g></g><g transform=\"translate(125.0,599.99999999999989)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:monospace;font-size:16.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-4.8\" y=\"3.776\">d</text></g><g transform=\"translate(275.0,599.99999999999989)\"><g style=\"fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0\" transform=\"translate(0.0, -4.4408920985006262e-16)\"><rect height=\"15.0\" transform=\"rotate(-45)\" width=\"15.0\" x=\"-7.5\" y=\"-7.5\"></rect></g></g><g transform=\"translate(125.0,637.93103448275849)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:monospace;font-size:16.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-4.8\" y=\"3.776\">o</text></g><g transform=\"translate(275.0,637.93103448275849)\"><g style=\"fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0\" transform=\"translate(0.0, -4.4408920985006262e-16)\"><circle r=\"7.5\"></circle></g></g><g transform=\"translate(125.0,675.8620689655171)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:monospace;font-size:16.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-9.6\" y=\"3.776\">oo</text></g><g transform=\"translate(275.0,675.8620689655171)\"><g style=\"fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0\" transform=\"translate(0.0, -4.4408920985006262e-16)\"><circle r=\"7.5\"></circle><circle r=\"3.75\"></circle></g></g><g transform=\"translate(125.0,713.7931034482757)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:monospace;font-size:16.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-9.6\" y=\"3.776\">o|</text></g><g transform=\"translate(275.0,713.7931034482757)\"><g style=\"fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0\" transform=\"translate(0.0, -4.4408920985006262e-16)\"><circle r=\"7.5\"></circle><line y1=\"-7.5\" y2=\"7.5\"></line></g></g><g transform=\"translate(125.0,751.72413793103431)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:monospace;font-size:16.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-9.6\" y=\"3.776\">o/</text></g><g transform=\"translate(275.0,751.72413793103431)\"><g style=\"fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0\" transform=\"translate(0.0, -4.4408920985006262e-16)\"><circle r=\"7.5\"></circle><line transform=\"rotate(45)\" y1=\"-7.5\" y2=\"7.5\"></line></g></g><g transform=\"translate(125.0,789.65517241379291)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:monospace;font-size:16.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-9.6\" y=\"3.776\">o-</text></g><g transform=\"translate(275.0,789.65517241379291)\"><g style=\"fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0\" transform=\"translate(0.0, -4.4408920985006262e-16)\"><circle r=\"7.5\"></circle><line transform=\"rotate(-90)\" y1=\"-7.5\" y2=\"7.5\"></line></g></g><g transform=\"translate(125.0,827.58620689655152)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:monospace;font-size:16.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-9.6\" y=\"3.776\">o\\</text></g><g transform=\"translate(275.0,827.58620689655152)\"><g style=\"fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0\" transform=\"translate(0.0, -4.4408920985006262e-16)\"><circle r=\"7.5\"></circle><line transform=\"rotate(-45)\" y1=\"-7.5\" y2=\"7.5\"></line></g></g><g transform=\"translate(125.0,865.51724137931012)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:monospace;font-size:16.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-9.6\" y=\"3.776\">o+</text></g><g transform=\"translate(275.0,865.51724137931012)\"><g style=\"fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0\" transform=\"translate(0.0, -4.4408920985006262e-16)\"><circle r=\"7.5\"></circle><line y1=\"-7.5\" y2=\"7.5\"></line><line transform=\"rotate(-90)\" y1=\"-7.5\" y2=\"7.5\"></line></g></g><g transform=\"translate(125.0,903.44827586206873)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:monospace;font-size:16.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-9.6\" y=\"3.776\">ox</text></g><g transform=\"translate(275.0,903.44827586206873)\"><g style=\"fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0\" transform=\"translate(0.0, -4.4408920985006262e-16)\"><circle r=\"7.5\"></circle><line transform=\"rotate(45)\" y1=\"-7.5\" y2=\"7.5\"></line><line transform=\"rotate(-45)\" y1=\"-7.5\" y2=\"7.5\"></line></g></g><g transform=\"translate(125.0,941.37931034482733)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:monospace;font-size:16.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-9.6\" y=\"3.776\">o*</text></g><g transform=\"translate(275.0,941.37931034482733)\"><g style=\"fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0\" transform=\"translate(0.0, -4.4408920985006262e-16)\"><circle r=\"7.5\"></circle><line y1=\"-7.5\" y2=\"7.5\"></line><line transform=\"rotate(60)\" y1=\"-7.5\" y2=\"7.5\"></line><line transform=\"rotate(-60)\" y1=\"-7.5\" y2=\"7.5\"></line></g></g><g transform=\"translate(125.0,979.31034482758594)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:monospace;font-size:16.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-19.2\" y=\"3.776\">r3x1</text></g><g transform=\"translate(275.0,979.31034482758594)\"><g style=\"fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0\" transform=\"translate(0.0, -4.4408920985006262e-16)\"><rect height=\"15.0\" width=\"45.0\" x=\"-22.5\" y=\"-7.5\"></rect></g></g><g transform=\"translate(125.0,1017.2413793103444)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:monospace;font-size:16.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-19.2\" y=\"3.776\">r2x1</text></g><g transform=\"translate(275.0,1017.2413793103444)\"><g style=\"fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0\" transform=\"translate(0.0, -4.4408920985006262e-16)\"><rect height=\"15.0\" width=\"30.0\" x=\"-15.0\" y=\"-7.5\"></rect></g></g><g transform=\"translate(125.0,1055.1724137931033)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:monospace;font-size:16.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-19.2\" y=\"3.776\">r1x1</text></g><g transform=\"translate(275.0,1055.1724137931033)\"><g style=\"fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0\" transform=\"translate(0.0, -4.4408920985006262e-16)\"><rect height=\"15.0\" width=\"15.0\" x=\"-7.5\" y=\"-7.5\"></rect></g></g><g transform=\"translate(125.0,1093.1034482758619)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:monospace;font-size:16.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-19.2\" y=\"3.776\">r1x2</text></g><g transform=\"translate(275.0,1093.1034482758619)\"><g style=\"fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0\" transform=\"translate(0.0, -4.4408920985006262e-16)\"><rect height=\"30.0\" width=\"15.0\" x=\"-7.5\" y=\"-15.0\"></rect></g></g><g transform=\"translate(125.0,1131.0344827586205)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:monospace;font-size:16.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-38.4\" y=\"3.776\">r0.5x1.5</text></g><g transform=\"translate(275.0,1131.0344827586205)\"><g style=\"fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0\" transform=\"translate(0.0, -4.4408920985006262e-16)\"><rect height=\"22.5\" width=\"7.5\" x=\"-3.75\" y=\"-11.25\"></rect></g></g><line style=\"stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0;stroke-width:0.5\" x1=\"50.0\" x2=\"350.0\" y1=\"87.931034482758619\" y2=\"87.931034482758619\"></line><line style=\"stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0;stroke-width:0.5\" x1=\"200.0\" x2=\"200.0\" y1=\"50.0\" y2=\"1149.9999999999998\"></line></g></svg><div class=\"toyplot-behavior\"><script>(function()\n",
       "{\n",
       "var modules={};\n",
       "modules[\"toyplot/tables\"] = (function()\n",
       "    {\n",
       "        var tables = [];\n",
       "\n",
       "        var module = {};\n",
       "\n",
       "        module.set = function(owner, key, names, columns)\n",
       "        {\n",
       "            tables.push({owner: owner, key: key, names: names, columns: columns});\n",
       "        }\n",
       "\n",
       "        module.get = function(owner, key)\n",
       "        {\n",
       "            for(var i = 0; i != tables.length; ++i)\n",
       "            {\n",
       "                var table = tables[i];\n",
       "                if(table.owner != owner)\n",
       "                    continue;\n",
       "                if(table.key != key)\n",
       "                    continue;\n",
       "                return {names: table.names, columns: table.columns};\n",
       "            }\n",
       "        }\n",
       "\n",
       "        module.get_csv = function(owner, key)\n",
       "        {\n",
       "            var table = module.get(owner, key);\n",
       "            if(table != undefined)\n",
       "            {\n",
       "                var csv = \"\";\n",
       "                csv += table.names.join(\",\") + \"\\n\";\n",
       "                for(var i = 0; i != table.columns[0].length; ++i)\n",
       "                {\n",
       "                  for(var j = 0; j != table.columns.length; ++j)\n",
       "                  {\n",
       "                    if(j)\n",
       "                      csv += \",\";\n",
       "                    csv += table.columns[j][i];\n",
       "                  }\n",
       "                  csv += \"\\n\";\n",
       "                }\n",
       "                return csv;\n",
       "            }\n",
       "        }\n",
       "\n",
       "        return module;\n",
       "    })();\n",
       "modules[\"toyplot/root/id\"] = \"t76adf709316e4ed8aeaed2b68c02cacd\";\n",
       "modules[\"toyplot/root\"] = (function(root_id)\n",
       "    {\n",
       "        return document.querySelector(\"#\" + root_id);\n",
       "    })(modules[\"toyplot/root/id\"]);\n",
       "modules[\"toyplot/canvas/id\"] = \"t0392545de9244a039135941bbb9e3841\";\n",
       "modules[\"toyplot/canvas\"] = (function(canvas_id)\n",
       "    {\n",
       "        return document.querySelector(\"#\" + canvas_id);\n",
       "    })(modules[\"toyplot/canvas/id\"]);\n",
       "modules[\"toyplot/menus/context\"] = (function(root, canvas)\n",
       "    {\n",
       "        var wrapper = document.createElement(\"div\");\n",
       "        wrapper.innerHTML = \"<ul class='toyplot-context-menu' style='background:#eee; border:1px solid #b8b8b8; border-radius:5px; box-shadow: 0px 0px 8px rgba(0%,0%,0%,0.25); margin:0; padding:3px 0; position:fixed; visibility:hidden;'></ul>\"\n",
       "        var menu = wrapper.firstChild;\n",
       "\n",
       "        root.appendChild(menu);\n",
       "\n",
       "        var items = [];\n",
       "\n",
       "        var ignore_mouseup = null;\n",
       "        function open_menu(e)\n",
       "        {\n",
       "            var show_menu = false;\n",
       "            for(var index=0; index != items.length; ++index)\n",
       "            {\n",
       "                var item = items[index];\n",
       "                if(item.show(e))\n",
       "                {\n",
       "                    item.item.style.display = \"block\";\n",
       "                    show_menu = true;\n",
       "                }\n",
       "                else\n",
       "                {\n",
       "                    item.item.style.display = \"none\";\n",
       "                }\n",
       "            }\n",
       "\n",
       "            if(show_menu)\n",
       "            {\n",
       "                ignore_mouseup = true;\n",
       "                menu.style.left = (e.clientX + 1) + \"px\";\n",
       "                menu.style.top = (e.clientY - 5) + \"px\";\n",
       "                menu.style.visibility = \"visible\";\n",
       "                e.stopPropagation();\n",
       "                e.preventDefault();\n",
       "            }\n",
       "        }\n",
       "\n",
       "        function close_menu()\n",
       "        {\n",
       "            menu.style.visibility = \"hidden\";\n",
       "        }\n",
       "\n",
       "        function contextmenu(e)\n",
       "        {\n",
       "            open_menu(e);\n",
       "        }\n",
       "\n",
       "        function mousemove(e)\n",
       "        {\n",
       "            ignore_mouseup = false;\n",
       "        }\n",
       "\n",
       "        function mouseup(e)\n",
       "        {\n",
       "            if(ignore_mouseup)\n",
       "            {\n",
       "                ignore_mouseup = false;\n",
       "                return;\n",
       "            }\n",
       "            close_menu();\n",
       "        }\n",
       "\n",
       "        function keydown(e)\n",
       "        {\n",
       "            if(e.key == \"Escape\" || e.key == \"Esc\" || e.keyCode == 27)\n",
       "            {\n",
       "                close_menu();\n",
       "            }\n",
       "        }\n",
       "\n",
       "        canvas.addEventListener(\"contextmenu\", contextmenu);\n",
       "        canvas.addEventListener(\"mousemove\", mousemove);\n",
       "        document.addEventListener(\"mouseup\", mouseup);\n",
       "        document.addEventListener(\"keydown\", keydown);\n",
       "\n",
       "        var module = {};\n",
       "        module.add_item = function(label, show, activate)\n",
       "        {\n",
       "            var wrapper = document.createElement(\"div\");\n",
       "            wrapper.innerHTML = \"<li class='toyplot-context-menu-item' style='background:#eee; color:#333; padding:2px 20px; list-style:none; margin:0; text-align:left;'>\" + label + \"</li>\"\n",
       "            var item = wrapper.firstChild;\n",
       "\n",
       "            items.push({item: item, show: show});\n",
       "\n",
       "            function mouseover()\n",
       "            {\n",
       "                this.style.background = \"steelblue\";\n",
       "                this.style.color = \"white\";\n",
       "            }\n",
       "\n",
       "            function mouseout()\n",
       "            {\n",
       "                this.style.background = \"#eee\";\n",
       "                this.style.color = \"#333\";\n",
       "            }\n",
       "\n",
       "            function choose_item(e)\n",
       "            {\n",
       "                close_menu();\n",
       "                activate();\n",
       "\n",
       "                e.stopPropagation();\n",
       "                e.preventDefault();\n",
       "            }\n",
       "\n",
       "            item.addEventListener(\"mouseover\", mouseover);\n",
       "            item.addEventListener(\"mouseout\", mouseout);\n",
       "            item.addEventListener(\"mouseup\", choose_item);\n",
       "            item.addEventListener(\"contextmenu\", choose_item);\n",
       "\n",
       "            menu.appendChild(item);\n",
       "        };\n",
       "        return module;\n",
       "    })(modules[\"toyplot/root\"],modules[\"toyplot/canvas\"]);\n",
       "modules[\"toyplot/io\"] = (function()\n",
       "    {\n",
       "        var module = {};\n",
       "        module.save_file = function(mime_type, charset, data, filename)\n",
       "        {\n",
       "            var uri = \"data:\" + mime_type + \";charset=\" + charset + \",\" + data;\n",
       "            uri = encodeURI(uri);\n",
       "\n",
       "            var link = document.createElement(\"a\");\n",
       "            if(typeof link.download != \"undefined\")\n",
       "            {\n",
       "              link.href = uri;\n",
       "              link.style = \"visibility:hidden\";\n",
       "              link.download = filename;\n",
       "\n",
       "              document.body.appendChild(link);\n",
       "              link.click();\n",
       "              document.body.removeChild(link);\n",
       "            }\n",
       "            else\n",
       "            {\n",
       "              window.open(uri);\n",
       "            }\n",
       "        };\n",
       "        return module;\n",
       "    })();\n",
       "(function(tables, context_menu, io, owner_id, key, label, names, columns, filename)\n",
       "        {\n",
       "            tables.set(owner_id, key, names, columns);\n",
       "\n",
       "            var owner = document.querySelector(\"#\" + owner_id);\n",
       "            function show_item(e)\n",
       "            {\n",
       "                return owner.contains(e.target);\n",
       "            }\n",
       "\n",
       "            function choose_item()\n",
       "            {\n",
       "                io.save_file(\"text/csv\", \"utf-8\", tables.get_csv(owner_id, key), filename + \".csv\");\n",
       "            }\n",
       "\n",
       "            context_menu.add_item(\"Save \" + label + \" as CSV\", show_item, choose_item);\n",
       "        })(modules[\"toyplot/tables\"],modules[\"toyplot/menus/context\"],modules[\"toyplot/io\"],\"t565f8428169148618dce4a0d89a9421c\",\"data\",\"table data\",[\"Shape Code\", \"Marker\"],[[\"None\", \"|\", \"/\", \"-\", \"\\\\\", \"+\", \"x\", \"*\", \"^\", \"&gt;\", \"v\", \"&lt;\", \"s\", \"d\", \"o\", \"oo\", \"o|\", \"o/\", \"o-\", \"o\\\\\", \"o+\", \"ox\", \"o*\", \"r3x1\", \"r2x1\", \"r1x1\", \"r1x2\", \"r0.5x1.5\"], [\"<marker mstyle='fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0' size='15'/>\", \"<marker shape='|' mstyle='fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0' size='15'/>\", \"<marker shape='/' mstyle='fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0' size='15'/>\", \"<marker shape='-' mstyle='fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0' size='15'/>\", \"<marker shape='\\\\' mstyle='fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0' size='15'/>\", \"<marker shape='+' mstyle='fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0' size='15'/>\", \"<marker shape='x' mstyle='fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0' size='15'/>\", \"<marker shape='*' mstyle='fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0' size='15'/>\", \"<marker shape='^' mstyle='fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0' size='15'/>\", \"<marker shape='&gt;' mstyle='fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0' size='15'/>\", \"<marker shape='v' mstyle='fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0' size='15'/>\", \"<marker shape='&lt;' mstyle='fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0' size='15'/>\", \"<marker shape='s' mstyle='fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0' size='15'/>\", \"<marker shape='d' mstyle='fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0' size='15'/>\", \"<marker shape='o' mstyle='fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0' size='15'/>\", \"<marker shape='oo' mstyle='fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0' size='15'/>\", \"<marker shape='o|' mstyle='fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0' size='15'/>\", \"<marker shape='o/' mstyle='fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0' size='15'/>\", \"<marker shape='o-' mstyle='fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0' size='15'/>\", \"<marker shape='o\\\\' mstyle='fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0' size='15'/>\", \"<marker shape='o+' mstyle='fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0' size='15'/>\", \"<marker shape='ox' mstyle='fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0' size='15'/>\", \"<marker shape='o*' mstyle='fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0' size='15'/>\", \"<marker shape='r3x1' mstyle='fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0' size='15'/>\", \"<marker shape='r2x1' mstyle='fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0' size='15'/>\", \"<marker shape='r1x1' mstyle='fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0' size='15'/>\", \"<marker shape='r1x2' mstyle='fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0' size='15'/>\", \"<marker shape='r0.5x1.5' mstyle='fill:rgb(100%,93.3%,73.3%);fill-opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0' size='15'/>\"]],\"toyplot\");\n",
       "})();</script></div></div>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "markers = [None, \"|\",\"/\",\"-\",\"\\\\\",\"+\",\"x\",\"*\",\"^\",\">\",\"v\",\"<\",\"s\",\"d\",\n",
    "           \"o\",\"oo\",\"o|\", \"o/\", \"o-\", \"o\\\\\", \"o+\",\"ox\",\"o*\",\"r3x1\",\"r2x1\",\"r1x1\", \"r1x2\", \"r0.5x1.5\"]\n",
    "mstyle = {\"stroke\":toyplot.color.black, \"fill\":\"#feb\"}\n",
    "labels = [str(marker) for marker in markers]\n",
    "markers = [toyplot.marker.create(shape=marker, mstyle=mstyle, size=15).to_html() for marker in markers]\n",
    "\n",
    "# This is necessary because \"<\" and \">\" are interpreted as tags when rendering text.\n",
    "from xml.sax.saxutils import escape\n",
    "labels = [escape(label) for label in labels]\n",
    "\n",
    "canvas, table = toyplot.table(trows=1, rows=len(markers), columns=2, width=400, height=1200)\n",
    "table.cells.grid.vlines[...,1] = \"single\"\n",
    "table.cells.grid.hlines[1,...] = \"single\"\n",
    "table.top.cell[0,...].data = [\"Shape Code\", \"Marker\"]\n",
    "table.top.cell[0,...].lstyle = {\"font-size\":\"16px\", \"font-weight\":\"bold\"}\n",
    "table.body.column[0].data = labels\n",
    "table.body.column[0].lstyle = {\"font-size\":\"16px\", \"font-family\":\"monospace\"}\n",
    "table.body.column[1].data = markers"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "There are several items here worth noting - first, you can pass *None* or an empty string to produce an invisible marker, if you need to hide a datum or declutter the display.  Second, observe that several of the marker shapes contain internal details that require a contrasting stroke and fill to be visible.  Finally, the rectangular `rWxH` markers can be specified using any values (including floating point values) for their width and height."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Keep in mind that you can embed markers in *any* text string in Toyplot, including labels, tick marks, and more.  And because :class:`toyplot.mark.Mark` objects have a public `markers` attribute that is used when creating legends, you can be very creative when annotating figures:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 23,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<table class=\"toyplot-data-Table\" style=\"border-collapse:collapse; border:none; color: #292724\"><tr style=\"border:none;border-bottom:1px solid #292724\"><th style=\"text-align:left;border:none;padding-right:1em;\">Date</th><th style=\"text-align:left;border:none;padding-right:1em;\">Delivered</th><th style=\"text-align:left;border:none;padding-right:1em;\">On Time</th></tr><tr style=\"border:none\"><td style=\"border:none;padding-right:1em;\">15feb2005</td><td style=\"border:none;padding-right:1em;\">553</td><td style=\"border:none;padding-right:1em;\">1.0000</td></tr><tr style=\"border:none\"><td style=\"border:none;padding-right:1em;\">15mar2005</td><td style=\"border:none;padding-right:1em;\">507</td><td style=\"border:none;padding-right:1em;\">1.0000</td></tr><tr style=\"border:none\"><td style=\"border:none;padding-right:1em;\">15apr2005</td><td style=\"border:none;padding-right:1em;\">586</td><td style=\"border:none;padding-right:1em;\">1.0000</td></tr><tr style=\"border:none\"><td style=\"border:none;padding-right:1em;\">15may2005</td><td style=\"border:none;padding-right:1em;\">488</td><td style=\"border:none;padding-right:1em;\">1.0000</td></tr><tr style=\"border:none\"><td style=\"border:none;padding-right:1em;\">15jun2005</td><td style=\"border:none;padding-right:1em;\">404</td><td style=\"border:none;padding-right:1em;\">1.0000</td></tr><tr style=\"border:none\"><td style=\"border:none;padding-right:1em;\">15jul2005</td><td style=\"border:none;padding-right:1em;\">306</td><td style=\"border:none;padding-right:1em;\">1.0000</td></tr><tr style=\"border:none\"><td style=\"border:none;padding-right:1em;\">15aug2005</td><td style=\"border:none;padding-right:1em;\">323</td><td style=\"border:none;padding-right:1em;\">0.9905</td></tr><tr style=\"border:none\"><td style=\"border:none;padding-right:1em;\">15sep2005</td><td style=\"border:none;padding-right:1em;\">531</td><td style=\"border:none;padding-right:1em;\">0.9959</td></tr><tr style=\"border:none\"><td style=\"border:none;padding-right:1em;\">15oct2005</td><td style=\"border:none;padding-right:1em;\">677</td><td style=\"border:none;padding-right:1em;\">0.9600</td></tr><tr style=\"border:none\"><td style=\"border:none;padding-right:1em;\">15nov2005</td><td style=\"border:none;padding-right:1em;\">695</td><td style=\"border:none;padding-right:1em;\">0.9624</td></tr><tr style=\"border:none\"><td style=\"border:none;padding-right:1em;\">15dec2005</td><td style=\"border:none;padding-right:1em;\">867</td><td style=\"border:none;padding-right:1em;\">0.9229</td></tr><tr style=\"border:none\"><td style=\"border:none;padding-right:1em;\">15jan2006</td><td style=\"border:none;padding-right:1em;\">557</td><td style=\"border:none;padding-right:1em;\">0.9888</td></tr></table>"
      ],
      "text/plain": [
       "<toyplot.data.Table at 0x1142cf690>"
      ]
     },
     "execution_count": 23,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "import toyplot.data\n",
    "data = toyplot.data.deliveries()\n",
    "data"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 24,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div class=\"toyplot\" id=\"t1a1efa22c4fe4af9ae526fc558ee9528\" style=\"text-align:center\"><svg class=\"toyplot-canvas-Canvas\" height=\"300.0px\" id=\"ta0cad96e7a314d4f996bc7eff77ae5f7\" preserveAspectRatio=\"xMidYMid meet\" style=\"background-color:transparent;fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:Helvetica;font-size:12px;opacity:1.0;stroke:rgb(16.1%,15.3%,14.1%);stroke-opacity:1.0;stroke-width:1.0\" viewBox=\"0 0 600.0 300.0\" width=\"600.0px\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:toyplot=\"http://www.sandia.gov/toyplot\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"><g class=\"toyplot-coordinates-Cartesian\" id=\"t30ef82f54ed34b4da0f2ac5a139d78f6\"><clipPath id=\"t3726acae59724402978fa4ce1e687909\"><rect height=\"220.0\" width=\"520.0\" x=\"40.0\" y=\"40.0\"></rect></clipPath><g clip-path=\"url(#t3726acae59724402978fa4ce1e687909)\"><g class=\"toyplot-mark-Plot\" id=\"t78306b1b6a0d4dc5a812d37853e3c4b1\" style=\"fill:none\"><g class=\"toyplot-Series\"><path d=\"M 50.0 127.11111111111111 L 91.666666666666657 137.33333333333331 L 133.33333333333331 119.77777777777779 L 175.0 141.55555555555554 L 216.66666666666666 160.22222222222223 L 258.33333333333337 181.99999999999997 L 300.0 178.22222222222223 L 341.66666666666669 132.0 L 383.33333333333331 99.555555555555557 L 425.0 95.555555555555543 L 466.66666666666669 57.333333333333329 L 508.33333333333331 126.22222222222221\" style=\"stroke:rgb(54.5%,0%,0%);stroke-opacity:1.0;stroke-width:2.0\"></path></g></g></g><g class=\"toyplot-coordinates-Axis\" id=\"t2c3248a2eb564592b7ef14f94f62b8d0\" transform=\"translate(50.0,250.0)translate(0,10.0)\"><line style=\"\" x1=\"0\" x2=\"458.3333333333333\" y1=\"0\" y2=\"0\"></line><g><g transform=\"translate(0.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-2.78\" y=\"8.555\">0</text></g><g transform=\"translate(166.66666666666666,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-2.78\" y=\"8.555\">4</text></g><g transform=\"translate(333.3333333333333,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-2.78\" y=\"8.555\">8</text></g><g transform=\"translate(500.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-5.56\" y=\"8.555\">12</text></g></g><g class=\"toyplot-coordinates-Axis-coordinates\" style=\"visibility:hidden\" transform=\"\"><line style=\"stroke:rgb(43.9%,50.2%,56.5%);stroke-opacity:1.0;stroke-width:1.0\" x1=\"0\" x2=\"0\" y1=\"-3.0\" y2=\"4.5\"></line><text style=\"alignment-baseline:alphabetic;fill:rgb(43.9%,50.2%,56.5%);fill-opacity:1.0;font-size:10px;font-weight:normal;stroke:none;text-anchor:middle\" x=\"0\" y=\"-6\"></text></g></g><g class=\"toyplot-coordinates-Axis\" id=\"t120f4d6268fa42a5af626645f0d981de\" transform=\"translate(50.0,250.0)rotate(-90.0)translate(0,-10.0)\"><line style=\"\" x1=\"68.0\" x2=\"192.66666666666669\" y1=\"0\" y2=\"0\"></line><g><g transform=\"translate(0.0,-6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-2.78\" y=\"-4.4408920985e-16\">0</text></g><g transform=\"translate(66.66666666666666,-6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-8.34\" y=\"-4.4408920985e-16\">300</text></g><g transform=\"translate(133.33333333333331,-6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-8.34\" y=\"-4.4408920985e-16\">600</text></g><g transform=\"translate(200.0,-6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-8.34\" y=\"-4.4408920985e-16\">900</text></g></g><g transform=\"translate(100.0,-22)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:12.0px;font-weight:bold;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-28.35\" y=\"0.0\">Deliveries</text></g><g class=\"toyplot-coordinates-Axis-coordinates\" style=\"visibility:hidden\" transform=\"\"><line style=\"stroke:rgb(43.9%,50.2%,56.5%);stroke-opacity:1.0;stroke-width:1.0\" x1=\"0\" x2=\"0\" y1=\"3.0\" y2=\"-4.5\"></line><text style=\"alignment-baseline:hanging;fill:rgb(43.9%,50.2%,56.5%);fill-opacity:1.0;font-size:10px;font-weight:normal;stroke:none;text-anchor:middle\" x=\"0\" y=\"6\"></text></g></g></g><g class=\"toyplot-coordinates-Cartesian\" id=\"t5b5d27b10eb84be182870cdc7cf9d5c9\"><clipPath id=\"tfe2eda23b2654cd6a535ee32546db613\"><rect height=\"220.0\" width=\"520.0\" x=\"40.0\" y=\"40.0\"></rect></clipPath><g clip-path=\"url(#tfe2eda23b2654cd6a535ee32546db613)\"><g class=\"toyplot-mark-Plot\" id=\"tc7546b57e2b64f0686edc3adf0b366c9\" style=\"fill:none\"><g class=\"toyplot-Series\"><path d=\"M 50.0 50.0 L 91.666666666666657 50.0 L 133.33333333333331 50.0 L 175.0 50.0 L 216.66666666666666 50.0 L 258.33333333333337 50.0 L 300.0 74.643320363164605 L 341.66666666666669 60.635538261997389 L 383.33333333333331 153.76134889753581 L 425.0 147.53566796368352 L 466.66666666666669 250.0 L 508.33333333333331 79.053177691309969\" style=\"stroke:rgb(27.5%,51%,70.6%);stroke-opacity:1.0;stroke-width:2.0\"></path></g></g></g><g class=\"toyplot-coordinates-Axis\" id=\"tc494213df47b46f68f6dd565a0442eac\" transform=\"translate(550.0,250.0)rotate(-90.0)translate(0,10.0)\"><line style=\"\" x1=\"0\" x2=\"200.0\" y1=\"0\" y2=\"0\"></line><g><g transform=\"translate(5.447470817120602,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-9.73\" y=\"8.555\">0.93</text></g><g transform=\"translate(70.29831387808049,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-9.73\" y=\"8.555\">0.95</text></g><g transform=\"translate(135.14915693904038,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-9.73\" y=\"8.555\">0.98</text></g><g transform=\"translate(200.0,6)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:10.0px;font-weight:normal;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-9.73\" y=\"8.555\">1.00</text></g></g><g transform=\"translate(100.0,22)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:12.0px;font-weight:bold;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-24.006\" y=\"10.266\">On Time</text></g><g class=\"toyplot-coordinates-Axis-coordinates\" style=\"visibility:hidden\" transform=\"\"><line style=\"stroke:rgb(43.9%,50.2%,56.5%);stroke-opacity:1.0;stroke-width:1.0\" x1=\"0\" x2=\"0\" y1=\"-3.0\" y2=\"4.5\"></line><text style=\"alignment-baseline:alphabetic;fill:rgb(43.9%,50.2%,56.5%);fill-opacity:1.0;font-size:10px;font-weight:normal;stroke:none;text-anchor:middle\" x=\"0\" y=\"-6\"></text></g></g><g transform=\"translate(300.0,42.0)\"><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:14.0px;font-weight:bold;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-100.87\" y=\"-4.823\">Deliveries (</text><g style=\"fill:rgb(54.5%,0%,0%);fill-opacity:1.0;stroke:rgb(54.5%,0%,0%);stroke-opacity:1.0;stroke-width:2.0\" transform=\"translate(-19.690999999999995, -8.4000000000000004)\"><line transform=\"rotate(45)\" y1=\"-6.4750000000000005\" y2=\"6.4750000000000005\"></line></g><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:14.0px;font-weight:bold;stroke:none;vertical-align:baseline;white-space:pre\" x=\"-13.216\" y=\"-4.823\">) vs. On Time (</text><g style=\"fill:rgb(27.5%,51%,70.6%);fill-opacity:1.0;stroke:rgb(27.5%,51%,70.6%);stroke-opacity:1.0;stroke-width:2.0\" transform=\"translate(89.733000000000004, -8.4000000000000004)\"><line transform=\"rotate(45)\" y1=\"-6.4750000000000005\" y2=\"6.4750000000000005\"></line></g><text style=\"fill:rgb(16.1%,15.3%,14.1%);fill-opacity:1.0;font-family:helvetica;font-size:14.0px;font-weight:bold;stroke:none;vertical-align:baseline;white-space:pre\" x=\"96.208\" y=\"-4.823\">)</text></g></g></svg><div class=\"toyplot-behavior\"><script>(function()\n",
       "{\n",
       "var modules={};\n",
       "modules[\"toyplot/tables\"] = (function()\n",
       "    {\n",
       "        var tables = [];\n",
       "\n",
       "        var module = {};\n",
       "\n",
       "        module.set = function(owner, key, names, columns)\n",
       "        {\n",
       "            tables.push({owner: owner, key: key, names: names, columns: columns});\n",
       "        }\n",
       "\n",
       "        module.get = function(owner, key)\n",
       "        {\n",
       "            for(var i = 0; i != tables.length; ++i)\n",
       "            {\n",
       "                var table = tables[i];\n",
       "                if(table.owner != owner)\n",
       "                    continue;\n",
       "                if(table.key != key)\n",
       "                    continue;\n",
       "                return {names: table.names, columns: table.columns};\n",
       "            }\n",
       "        }\n",
       "\n",
       "        module.get_csv = function(owner, key)\n",
       "        {\n",
       "            var table = module.get(owner, key);\n",
       "            if(table != undefined)\n",
       "            {\n",
       "                var csv = \"\";\n",
       "                csv += table.names.join(\",\") + \"\\n\";\n",
       "                for(var i = 0; i != table.columns[0].length; ++i)\n",
       "                {\n",
       "                  for(var j = 0; j != table.columns.length; ++j)\n",
       "                  {\n",
       "                    if(j)\n",
       "                      csv += \",\";\n",
       "                    csv += table.columns[j][i];\n",
       "                  }\n",
       "                  csv += \"\\n\";\n",
       "                }\n",
       "                return csv;\n",
       "            }\n",
       "        }\n",
       "\n",
       "        return module;\n",
       "    })();\n",
       "modules[\"toyplot/root/id\"] = \"t1a1efa22c4fe4af9ae526fc558ee9528\";\n",
       "modules[\"toyplot/root\"] = (function(root_id)\n",
       "    {\n",
       "        return document.querySelector(\"#\" + root_id);\n",
       "    })(modules[\"toyplot/root/id\"]);\n",
       "modules[\"toyplot/canvas/id\"] = \"ta0cad96e7a314d4f996bc7eff77ae5f7\";\n",
       "modules[\"toyplot/canvas\"] = (function(canvas_id)\n",
       "    {\n",
       "        return document.querySelector(\"#\" + canvas_id);\n",
       "    })(modules[\"toyplot/canvas/id\"]);\n",
       "modules[\"toyplot/menus/context\"] = (function(root, canvas)\n",
       "    {\n",
       "        var wrapper = document.createElement(\"div\");\n",
       "        wrapper.innerHTML = \"<ul class='toyplot-context-menu' style='background:#eee; border:1px solid #b8b8b8; border-radius:5px; box-shadow: 0px 0px 8px rgba(0%,0%,0%,0.25); margin:0; padding:3px 0; position:fixed; visibility:hidden;'></ul>\"\n",
       "        var menu = wrapper.firstChild;\n",
       "\n",
       "        root.appendChild(menu);\n",
       "\n",
       "        var items = [];\n",
       "\n",
       "        var ignore_mouseup = null;\n",
       "        function open_menu(e)\n",
       "        {\n",
       "            var show_menu = false;\n",
       "            for(var index=0; index != items.length; ++index)\n",
       "            {\n",
       "                var item = items[index];\n",
       "                if(item.show(e))\n",
       "                {\n",
       "                    item.item.style.display = \"block\";\n",
       "                    show_menu = true;\n",
       "                }\n",
       "                else\n",
       "                {\n",
       "                    item.item.style.display = \"none\";\n",
       "                }\n",
       "            }\n",
       "\n",
       "            if(show_menu)\n",
       "            {\n",
       "                ignore_mouseup = true;\n",
       "                menu.style.left = (e.clientX + 1) + \"px\";\n",
       "                menu.style.top = (e.clientY - 5) + \"px\";\n",
       "                menu.style.visibility = \"visible\";\n",
       "                e.stopPropagation();\n",
       "                e.preventDefault();\n",
       "            }\n",
       "        }\n",
       "\n",
       "        function close_menu()\n",
       "        {\n",
       "            menu.style.visibility = \"hidden\";\n",
       "        }\n",
       "\n",
       "        function contextmenu(e)\n",
       "        {\n",
       "            open_menu(e);\n",
       "        }\n",
       "\n",
       "        function mousemove(e)\n",
       "        {\n",
       "            ignore_mouseup = false;\n",
       "        }\n",
       "\n",
       "        function mouseup(e)\n",
       "        {\n",
       "            if(ignore_mouseup)\n",
       "            {\n",
       "                ignore_mouseup = false;\n",
       "                return;\n",
       "            }\n",
       "            close_menu();\n",
       "        }\n",
       "\n",
       "        function keydown(e)\n",
       "        {\n",
       "            if(e.key == \"Escape\" || e.key == \"Esc\" || e.keyCode == 27)\n",
       "            {\n",
       "                close_menu();\n",
       "            }\n",
       "        }\n",
       "\n",
       "        canvas.addEventListener(\"contextmenu\", contextmenu);\n",
       "        canvas.addEventListener(\"mousemove\", mousemove);\n",
       "        document.addEventListener(\"mouseup\", mouseup);\n",
       "        document.addEventListener(\"keydown\", keydown);\n",
       "\n",
       "        var module = {};\n",
       "        module.add_item = function(label, show, activate)\n",
       "        {\n",
       "            var wrapper = document.createElement(\"div\");\n",
       "            wrapper.innerHTML = \"<li class='toyplot-context-menu-item' style='background:#eee; color:#333; padding:2px 20px; list-style:none; margin:0; text-align:left;'>\" + label + \"</li>\"\n",
       "            var item = wrapper.firstChild;\n",
       "\n",
       "            items.push({item: item, show: show});\n",
       "\n",
       "            function mouseover()\n",
       "            {\n",
       "                this.style.background = \"steelblue\";\n",
       "                this.style.color = \"white\";\n",
       "            }\n",
       "\n",
       "            function mouseout()\n",
       "            {\n",
       "                this.style.background = \"#eee\";\n",
       "                this.style.color = \"#333\";\n",
       "            }\n",
       "\n",
       "            function choose_item(e)\n",
       "            {\n",
       "                close_menu();\n",
       "                activate();\n",
       "\n",
       "                e.stopPropagation();\n",
       "                e.preventDefault();\n",
       "            }\n",
       "\n",
       "            item.addEventListener(\"mouseover\", mouseover);\n",
       "            item.addEventListener(\"mouseout\", mouseout);\n",
       "            item.addEventListener(\"mouseup\", choose_item);\n",
       "            item.addEventListener(\"contextmenu\", choose_item);\n",
       "\n",
       "            menu.appendChild(item);\n",
       "        };\n",
       "        return module;\n",
       "    })(modules[\"toyplot/root\"],modules[\"toyplot/canvas\"]);\n",
       "modules[\"toyplot/io\"] = (function()\n",
       "    {\n",
       "        var module = {};\n",
       "        module.save_file = function(mime_type, charset, data, filename)\n",
       "        {\n",
       "            var uri = \"data:\" + mime_type + \";charset=\" + charset + \",\" + data;\n",
       "            uri = encodeURI(uri);\n",
       "\n",
       "            var link = document.createElement(\"a\");\n",
       "            if(typeof link.download != \"undefined\")\n",
       "            {\n",
       "              link.href = uri;\n",
       "              link.style = \"visibility:hidden\";\n",
       "              link.download = filename;\n",
       "\n",
       "              document.body.appendChild(link);\n",
       "              link.click();\n",
       "              document.body.removeChild(link);\n",
       "            }\n",
       "            else\n",
       "            {\n",
       "              window.open(uri);\n",
       "            }\n",
       "        };\n",
       "        return module;\n",
       "    })();\n",
       "modules[\"toyplot.coordinates.Axis\"] = (\n",
       "        function(canvas)\n",
       "        {\n",
       "            function sign(x)\n",
       "            {\n",
       "                return x < 0 ? -1 : x > 0 ? 1 : 0;\n",
       "            }\n",
       "\n",
       "            function mix(a, b, amount)\n",
       "            {\n",
       "                return ((1.0 - amount) * a) + (amount * b);\n",
       "            }\n",
       "\n",
       "            function log(x, base)\n",
       "            {\n",
       "                return Math.log(Math.abs(x)) / Math.log(base);\n",
       "            }\n",
       "\n",
       "            function in_range(a, x, b)\n",
       "            {\n",
       "                var left = Math.min(a, b);\n",
       "                var right = Math.max(a, b);\n",
       "                return left <= x && x <= right;\n",
       "            }\n",
       "\n",
       "            function inside(range, projection)\n",
       "            {\n",
       "                for(var i = 0; i != projection.length; ++i)\n",
       "                {\n",
       "                    var segment = projection[i];\n",
       "                    if(in_range(segment.range.min, range, segment.range.max))\n",
       "                        return true;\n",
       "                }\n",
       "                return false;\n",
       "            }\n",
       "\n",
       "            function to_domain(range, projection)\n",
       "            {\n",
       "                for(var i = 0; i != projection.length; ++i)\n",
       "                {\n",
       "                    var segment = projection[i];\n",
       "                    if(in_range(segment.range.bounds.min, range, segment.range.bounds.max))\n",
       "                    {\n",
       "                        if(segment.scale == \"linear\")\n",
       "                        {\n",
       "                            var amount = (range - segment.range.min) / (segment.range.max - segment.range.min);\n",
       "                            return mix(segment.domain.min, segment.domain.max, amount)\n",
       "                        }\n",
       "                        else if(segment.scale[0] == \"log\")\n",
       "                        {\n",
       "                            var amount = (range - segment.range.min) / (segment.range.max - segment.range.min);\n",
       "                            var base = segment.scale[1];\n",
       "                            return sign(segment.domain.min) * Math.pow(base, mix(log(segment.domain.min, base), log(segment.domain.max, base), amount));\n",
       "                        }\n",
       "                    }\n",
       "                }\n",
       "            }\n",
       "\n",
       "            var axes = {};\n",
       "\n",
       "            function display_coordinates(e)\n",
       "            {\n",
       "                var current = canvas.createSVGPoint();\n",
       "                current.x = e.clientX;\n",
       "                current.y = e.clientY;\n",
       "\n",
       "                for(var axis_id in axes)\n",
       "                {\n",
       "                    var axis = document.querySelector(\"#\" + axis_id);\n",
       "                    var coordinates = axis.querySelector(\".toyplot-coordinates-Axis-coordinates\");\n",
       "                    if(coordinates)\n",
       "                    {\n",
       "                        var projection = axes[axis_id];\n",
       "                        var local = current.matrixTransform(axis.getScreenCTM().inverse());\n",
       "                        if(inside(local.x, projection))\n",
       "                        {\n",
       "                            var domain = to_domain(local.x, projection);\n",
       "                            coordinates.style.visibility = \"visible\";\n",
       "                            coordinates.setAttribute(\"transform\", \"translate(\" + local.x + \")\");\n",
       "                            var text = coordinates.querySelector(\"text\");\n",
       "                            text.textContent = domain.toFixed(2);\n",
       "                        }\n",
       "                        else\n",
       "                        {\n",
       "                            coordinates.style.visibility= \"hidden\";\n",
       "                        }\n",
       "                    }\n",
       "                }\n",
       "            }\n",
       "\n",
       "            canvas.addEventListener(\"click\", display_coordinates);\n",
       "\n",
       "            var module = {};\n",
       "            module.show_coordinates = function(axis_id, projection)\n",
       "            {\n",
       "                axes[axis_id] = projection;\n",
       "            }\n",
       "\n",
       "            return module;\n",
       "        })(modules[\"toyplot/canvas\"]);\n",
       "(function(tables, context_menu, io, owner_id, key, label, names, columns, filename)\n",
       "        {\n",
       "            tables.set(owner_id, key, names, columns);\n",
       "\n",
       "            var owner = document.querySelector(\"#\" + owner_id);\n",
       "            function show_item(e)\n",
       "            {\n",
       "                return owner.contains(e.target);\n",
       "            }\n",
       "\n",
       "            function choose_item()\n",
       "            {\n",
       "                io.save_file(\"text/csv\", \"utf-8\", tables.get_csv(owner_id, key), filename + \".csv\");\n",
       "            }\n",
       "\n",
       "            context_menu.add_item(\"Save \" + label + \" as CSV\", show_item, choose_item);\n",
       "        })(modules[\"toyplot/tables\"],modules[\"toyplot/menus/context\"],modules[\"toyplot/io\"],\"t78306b1b6a0d4dc5a812d37853e3c4b1\",\"data\",\"plot data\",[\"x\", \"y0\"],[[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], [553.0, 507.0, 586.0, 488.0, 404.0, 306.0, 323.0, 531.0, 677.0, 695.0, 867.0, 557.0]],\"toyplot\");\n",
       "(function(axis, axis_id, projection)\n",
       "        {\n",
       "            axis.show_coordinates(axis_id, projection);\n",
       "        })(modules[\"toyplot.coordinates.Axis\"],\"t2c3248a2eb564592b7ef14f94f62b8d0\",[{\"domain\": {\"bounds\": {\"max\": Infinity, \"min\": -Infinity}, \"max\": 12.0, \"min\": 0.0}, \"range\": {\"bounds\": {\"max\": Infinity, \"min\": -Infinity}, \"max\": 500.0, \"min\": 0.0}, \"scale\": \"linear\"}]);\n",
       "(function(axis, axis_id, projection)\n",
       "        {\n",
       "            axis.show_coordinates(axis_id, projection);\n",
       "        })(modules[\"toyplot.coordinates.Axis\"],\"t120f4d6268fa42a5af626645f0d981de\",[{\"domain\": {\"bounds\": {\"max\": Infinity, \"min\": -Infinity}, \"max\": 900.0, \"min\": 0.0}, \"range\": {\"bounds\": {\"max\": Infinity, \"min\": -Infinity}, \"max\": 200.0, \"min\": 0.0}, \"scale\": \"linear\"}]);\n",
       "(function(tables, context_menu, io, owner_id, key, label, names, columns, filename)\n",
       "        {\n",
       "            tables.set(owner_id, key, names, columns);\n",
       "\n",
       "            var owner = document.querySelector(\"#\" + owner_id);\n",
       "            function show_item(e)\n",
       "            {\n",
       "                return owner.contains(e.target);\n",
       "            }\n",
       "\n",
       "            function choose_item()\n",
       "            {\n",
       "                io.save_file(\"text/csv\", \"utf-8\", tables.get_csv(owner_id, key), filename + \".csv\");\n",
       "            }\n",
       "\n",
       "            context_menu.add_item(\"Save \" + label + \" as CSV\", show_item, choose_item);\n",
       "        })(modules[\"toyplot/tables\"],modules[\"toyplot/menus/context\"],modules[\"toyplot/io\"],\"tc7546b57e2b64f0686edc3adf0b366c9\",\"data\",\"plot data\",[\"x\", \"y0\"],[[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], [1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 0.9905, 0.9959, 0.96, 0.9624, 0.9229, 0.9888]],\"toyplot\");\n",
       "(function(axis, axis_id, projection)\n",
       "        {\n",
       "            axis.show_coordinates(axis_id, projection);\n",
       "        })(modules[\"toyplot.coordinates.Axis\"],\"tc494213df47b46f68f6dd565a0442eac\",[{\"domain\": {\"bounds\": {\"max\": Infinity, \"min\": -Infinity}, \"max\": 1.0, \"min\": 0.9229}, \"range\": {\"bounds\": {\"max\": Infinity, \"min\": -Infinity}, \"max\": 200.0, \"min\": 0.0}, \"scale\": \"linear\"}]);\n",
       "})();</script></div></div>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "canvas = toyplot.Canvas(width=600, height=300)\n",
    "axes = canvas.cartesian(xlabel=\"Date\", ylabel=\"Deliveries\", ymin=0)\n",
    "deliveries = axes.plot(data[\"Delivered\"], color=\"darkred\")\n",
    "\n",
    "axes = axes.share(\"x\", ylabel=\"On Time\")\n",
    "on_time = axes.plot(data[\"On Time\"], color=\"steelblue\")\n",
    "\n",
    "axes.label.text = \"Deliveries (\" + deliveries.markers[0] + \") vs. On Time (\" + on_time.markers[0] + \")\""
   ]
  }
 ],
 "metadata": {
  "anaconda-cloud": {},
  "celltoolbar": "Raw Cell Format",
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.7.4"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 1
}