{"id":13702260,"url":"https://github.com/AaronWatters/jp_doodle","last_synced_at":"2025-05-05T04:31:05.816Z","repository":{"id":87271816,"uuid":"137387365","full_name":"AaronWatters/jp_doodle","owner":"AaronWatters","description":"Tools for drawing 2d and 3d interactive visualizations using Jupyter proxy widgets","archived":false,"fork":false,"pushed_at":"2023-07-12T14:24:16.000Z","size":31584,"stargazers_count":54,"open_issues_count":7,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-04T01:41:27.513Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Jupyter Notebook","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-2-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AaronWatters.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-06-14T17:13:54.000Z","updated_at":"2024-12-24T13:05:43.000Z","dependencies_parsed_at":"2024-01-03T07:18:32.958Z","dependency_job_id":null,"html_url":"https://github.com/AaronWatters/jp_doodle","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AaronWatters%2Fjp_doodle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AaronWatters%2Fjp_doodle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AaronWatters%2Fjp_doodle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AaronWatters%2Fjp_doodle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AaronWatters","download_url":"https://codeload.github.com/AaronWatters/jp_doodle/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252439509,"owners_count":21748018,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-02T21:00:32.975Z","updated_at":"2025-05-05T04:31:00.808Z","avatar_url":"https://github.com/AaronWatters.png","language":"Jupyter Notebook","funding_links":[],"categories":["Visualization"],"sub_categories":[],"readme":"\n\u003c!--\nThis file was generated by building the docs.\nPlease do not edit this file by hand.\nInstead, edit the template and rebuild to docs.\n--\u003e\n\n[![Binder](https://mybinder.org/badge.svg)](https://mybinder.org/v2/gh/AaronWatters/jp_doodle/master)\n[![Build Status](https://travis-ci.org/AaronWatters/jp_doodle.svg?branch=master)](https://travis-ci.org/AaronWatters/jp_doodle)\n[![Coverage Status](https://coveralls.io/repos/github/AaronWatters/jp_doodle/badge.svg?branch=master)](https://coveralls.io/github/AaronWatters/jp_doodle?branch=master)\n\n# `jp_doodle`\n\n\u003cb\u003e\u003ccode\u003e\u003ca href=\"https://github.com/AaronWatters/jp_doodle\"\u003ejp_doodle\u003c/a\u003e\u003c/em\u003e\u003c/code\u003e\nmakes implementing special purpose interactive visualizations easy.\u003c/b\u003e\nIt is designed to facilitate the development of bespoke scientific data presentation\nand interactive exploration tools.\n\n\u003cp\u003e\u003cb\u003eQuick references:\u003c/b\u003e\nPlease see the \n\u003ca href=\"https://aaronwatters.github.io/jp_doodle/quick_references/Dual%20canvas%20Javascript%20quick%20reference.html\"\u003e\nJavascript quick reference\u003c/a\u003e\nor the \n\u003ca href=\"https://aaronwatters.github.io/jp_doodle/quick_references/Dual%20canvas%20python%20quick%20reference.html\"\u003e\nPython/Jupyter quick reference\u003c/a\u003e\nfor an introduction to building visualizations using `jp_doodle`.\n\u003c/p\u003e\n\nBelow is a screenshot of the \n\u003ca href=\"https://aaronwatters.github.io/jp_doodle/095_nd_frames.html\"\u003emultidimensional frames\nexample\u003c/a\u003e using \u003ccode\u003ejp_doodle\u003c/code\u003e dual canvases.\n\n\u003cimg src=\"docs/images/nd_frame.png\" width=\"70%\"/\u003e\n\nPlease click the \u003ca href=\"https://youtu.be/nyuCqlTvf0c\"\u003eyoutube link\u003c/a\u003e to view\na presentation about dual canvases and related technologies.\n\n\u003ca href=\"https://youtu.be/nyuCqlTvf0c\"\u003e\n\u003cimg src=\"https://i1.ytimg.com/vi/nyuCqlTvf0c/hqdefault.jpg\" width=\"200\"/\u003e\n\u003c/a\u003e\n\nThe `jp_doodle` package provides `jQuery` plugins which make it easy to build\ninteractive visualizations in Javascript.  The package also provides Jupyter widget\ninterfaces to make it easy to build visualizations for Jupyter notebooks.\n\nMost demonstration code is provided as Jupyter notebooks\nunder the\n[`./notebooks`](./notebooks) directory.\nYou can \n\u003ca href=\"https://nbviewer.jupyter.org/github/AaronWatters/jp_doodle/tree/master/notebooks\"\u003e\nview `./notebooks` using `nbviewer`\u003c/a\u003e\nor use\n\u003ca href=\"https://mybinder.org/v2/gh/AaronWatters/jp_doodle/master\"\u003e\nBinder\u003c/a\u003e\nto run the notebooks interactively.  The `Tutorial`\nintroduces dual canvases primarily from a Javascript\nperspective.  The `Simple Python Examples` shows\nsome examples of using dual canvases in Jupyter widgets\nusing only the Python interface.  The `Feature demonstrations` sub-directory provides many other examples of how to use\nthe various features of dual canvases both in the Javascript and the Python contexts.\n\n\n# Installation\n\nTo install the package for use with Jupyter notebooks:\n\n```\npython -m pip install https://github.com/AaronWatters/jp_doodle/zipball/master\n```\n\nTo use the package with Jupyter Lab you also need to build the Jupyterlab Javascript\nresources with widget support and `jp_proxy_widget`:\n\n```\njupyter labextension install @jupyter-widgets/jupyterlab-manager  --no-build\njupyter labextension install jp_proxy_widget\n```\n\n# `dual_canvas`\n\nThe `dual_canvas` jQuery component of the `jp_doodle` package supports implementing\nvisualizations using two dimensional HTML5 canvas elements.  It provides\n\n- Graphical object creation, deletion, mutation, and smooth feature transitions.\n\n- Managed coordinate spaces including the pixel coordinate space, the canvas coordinate space\nand reference frame coordinate spaces.\n\n- Local and global event coordination to identify objects under positional mouse events and\nrelative event coordinate transformations.\n\n- Bounding box calculation and canvas fitting support.\n\n- Axis creation helpers.\n\n- A built in \"lasso tool\" for selecting multiple objects in a canvas.\n\n- Animation support.\n\n- Python wrappers for building Jupyter widgets containing dual canvases .\n\n\n\n\u003ctable\u003e\n\n\u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://aaronwatters.github.io/jp_doodle/index.html\"\u003e\n        \u003cimg width=\"200px\" src=\"docs/images/drawing.png\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ch4\u003e\u003ca href=\"https://aaronwatters.github.io/jp_doodle/index.html\"\u003e\n        Drawing\n        \u003c/a\u003e\u003c/h4\u003e\n        \u003cdiv\u003e\n        \u003cp\u003e\nThe \u003ccode\u003ejp_doodle\u003c/code\u003e package includes \u003ccode\u003ejQuery\u003c/code\u003e plugins to\nmake figures that can interact with mouse events and may be animated.\n\u003c/p\u003e\n\u003cp\u003e\nIn this figure we draw a number of objects on a canvas to illustrate\nbasic shapes.  The figure also responds to mouse-over events.\nMove the mouse over the objects to see the \"name\" of the object undeneith\nthe mouse.\n\u003c/p\u003e\n        \u003c/div\u003e\n    \u003c/td\u003e\n\u003c/tr\u003e\n\n\n\u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://aaronwatters.github.io/jp_doodle/010_events.html\"\u003e\n        \u003cimg width=\"200px\" src=\"docs/images/events.png\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ch4\u003e\u003ca href=\"https://aaronwatters.github.io/jp_doodle/010_events.html\"\u003e\n        Events\n        \u003c/a\u003e\u003c/h4\u003e\n        \u003cdiv\u003e\n        \u003cp\u003e\nThis illustration uses mouse events associated to the whole\ncanvas to allow the user to drag elements using the mouse.\n\u003c/p\u003e\n\u003cp\u003e\nIn this illustration you may move the named objects (everything colorful)\nby mousing down on the object and dragging it to a new location and then mousing up.\n\u003c/p\u003e\n        \u003c/div\u003e\n    \u003c/td\u003e\n\u003c/tr\u003e\n\n\n\u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://aaronwatters.github.io/jp_doodle/020_bindings.html\"\u003e\n        \u003cimg width=\"200px\" src=\"docs/images/bindings.png\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ch4\u003e\u003ca href=\"https://aaronwatters.github.io/jp_doodle/020_bindings.html\"\u003e\n        Bindings\n        \u003c/a\u003e\u003c/h4\u003e\n        \u003cdiv\u003e\n        \u003cp\u003e\nCanvases can respond to mouse events.  The mouse events can be associated to the\nwhole canvas or to named elements in the canvas.\n\u003c/p\u003e\n\u003cp\u003e\nIn this illustration a different click event handler attaches\nto each text area to change the text areas in different ways for 5 seconds.\n\u003c/p\u003e\n        \u003c/div\u003e\n    \u003c/td\u003e\n\u003c/tr\u003e\n\n\n\u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://aaronwatters.github.io/jp_doodle/030_animation.html\"\u003e\n        \u003cimg width=\"200px\" src=\"docs/images/clock.png\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ch4\u003e\u003ca href=\"https://aaronwatters.github.io/jp_doodle/030_animation.html\"\u003e\n        Animation\n        \u003c/a\u003e\u003c/h4\u003e\n        \u003cdiv\u003e\n        Dual canvases can be animated.  This figure includes a clock with an animated\nseconds hand and a blinking light.\n        \u003c/div\u003e\n    \u003c/td\u003e\n\u003c/tr\u003e\n\n\n\u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://aaronwatters.github.io/jp_doodle/040_lasso.html\"\u003e\n        \u003cimg width=\"200px\" src=\"docs/images/lasso.png\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ch4\u003e\u003ca href=\"https://aaronwatters.github.io/jp_doodle/040_lasso.html\"\u003e\n        Lasso\n        \u003c/a\u003e\u003c/h4\u003e\n        \u003cdiv\u003e\n        \u003cp\u003e\nDual canvasses provide a lasso feature which\nallows the user to select a group of named elements\nby encircling them with a polygonal \"lasso\".\n\u003c/p\u003e\n\u003cp\u003e\nIn this figure the user may mouse down to draw a\npolygon and mouse up to close the polygon.\nSelected circles in the lassoed area will turn\nfrom green to pink.\n\u003c/p\u003e\n        \u003c/div\u003e\n    \u003c/td\u003e\n\u003c/tr\u003e\n\n\n\u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://aaronwatters.github.io/jp_doodle/050_rectangles.html\"\u003e\n        \u003cimg width=\"200px\" src=\"docs/images/rectangle.png\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ch4\u003e\u003ca href=\"https://aaronwatters.github.io/jp_doodle/050_rectangles.html\"\u003e\n        Rectangles\n        \u003c/a\u003e\u003c/h4\u003e\n        \u003cdiv\u003e\n        \u003cp\u003e\nThe \u003ccode\u003erectangle_collection.js\u003c/code\u003e plugin provides\nan experimental implementation of a two category bar chart.\nThis proof of concept is useful as an example of a complex\ncomponent built using \u003ccode\u003ejp_doodle\u003c/code\u003e.\n\u003c/p\u003e\n\u003cp\u003e\nClick \"person type\" or \"State\" to start and stop adjusting the\nlayout of the barchart.  Mouse over the rectangles and other labels\nfor detail information.\n\u003c/p\u003e\n        \u003c/div\u003e\n    \u003c/td\u003e\n\u003c/tr\u003e\n\n\n\u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://aaronwatters.github.io/jp_doodle/060_chart.html\"\u003e\n        \u003cimg width=\"200px\" src=\"docs/images/chart.png\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ch4\u003e\u003ca href=\"https://aaronwatters.github.io/jp_doodle/060_chart.html\"\u003e\n        Chart\n        \u003c/a\u003e\u003c/h4\u003e\n        \u003cdiv\u003e\n        \u003cp\u003e\nThis chart proof of concept illustrates reference frames, object updates,\nand responses to mouse interactions.  Mouse over the figure for detail\nfrom the underlying data.\n\u003c/p\u003e\n        \u003c/div\u003e\n    \u003c/td\u003e\n\u003c/tr\u003e\n\n\n\u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://aaronwatters.github.io/jp_doodle/070_images.html\"\u003e\n        \u003cimg width=\"200px\" src=\"docs/images/Images.png\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ch4\u003e\u003ca href=\"https://aaronwatters.github.io/jp_doodle/070_images.html\"\u003e\n        Images\n        \u003c/a\u003e\u003c/h4\u003e\n        \u003cdiv\u003e\n        You can draw images on canvases in two steps.\nFirst you must load the image and identify it with a name,\nand afterward you can draw the image any number of times\nby providing x, y corner coordinates with width and height.\nYou may also specify a rectangle inside the image to draw.\n        \u003c/div\u003e\n    \u003c/td\u003e\n\u003c/tr\u003e\n\n\n\u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://aaronwatters.github.io/jp_doodle/080_transitions.html\"\u003e\n        \u003cimg width=\"200px\" src=\"docs/images/Transitions.png\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ch4\u003e\u003ca href=\"https://aaronwatters.github.io/jp_doodle/080_transitions.html\"\u003e\n        Transitions\n        \u003c/a\u003e\u003c/h4\u003e\n        \u003cdiv\u003e\n        You can change named objects on canvases using smooth transitions \nwhich interpolate between one group of attribute values and another smoothly over a time period.\n        \u003c/div\u003e\n    \u003c/td\u003e\n\u003c/tr\u003e\n\n\n\u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://aaronwatters.github.io/jp_doodle/085_assemblies.html\"\u003e\n        \u003cimg width=\"200px\" src=\"docs/images/assemblies.png\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ch4\u003e\u003ca href=\"https://aaronwatters.github.io/jp_doodle/085_assemblies.html\"\u003e\n        Assemblies\n        \u003c/a\u003e\u003c/h4\u003e\n        \u003cdiv\u003e\n        \u003cp\u003e\nAssembly definitions may be specified using Javascript and attached\nto a jp_doodle canvas.  The assemblies describe how to draw composite\nobjects which are manipulated as primative units in the jp_doodle\ndrawing system.\n\u003c/p\u003e\n\u003cp\u003e\nThis demonstration attaches a \"teddy bear\" assembly definition and then\ncreates some teddy bear assemblies and other\nstandard assemblies on the\ncanvas.\n\u003c/p\u003e\n\u003cp\u003e\nYou may move the assemblies\nby mousing down on the object and dragging it to a new location and then mousing up.\n\u003c/p\u003e\n        \u003c/div\u003e\n    \u003c/td\u003e\n\u003c/tr\u003e\n\n\n\u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://aaronwatters.github.io/jp_doodle/090_frames.html\"\u003e\n        \u003cimg width=\"200px\" src=\"docs/images/Frame.png\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ch4\u003e\u003ca href=\"https://aaronwatters.github.io/jp_doodle/090_frames.html\"\u003e\n        Frames\n        \u003c/a\u003e\u003c/h4\u003e\n        \u003cdiv\u003e\n        \u003cp\u003e\nObjects can be created in reference frames in \norder to share the same drawing order priority and the same coordinate system.\nAll objects contained in a reference frame share the same translation and vector scaling\nwith respect to the underlying canvas coordinate system.  Changes or transitions to a reference frame\ngeometry effect all objects contained in the frame.\n\u003c/p\u003e\n\u003cp\u003e\nIn this demonstration drag the\n\u003cspan style=\"color:white; background-color:blue\"\u003eblue controls\u003c/span\u003e\nto change the parameters of the frame on the right.\n        \u003c/div\u003e\n    \u003c/td\u003e\n\u003c/tr\u003e\n\n\n\u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://aaronwatters.github.io/jp_doodle/095_nd_frames.html\"\u003e\n        \u003cimg width=\"200px\" src=\"docs/images/nd_frame.png\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ch4\u003e\u003ca href=\"https://aaronwatters.github.io/jp_doodle/095_nd_frames.html\"\u003e\n        N-Dimensional Frames\n        \u003c/a\u003e\u003c/h4\u003e\n        \u003cdiv\u003e\n        \u003cp\u003e\nMultidimensional frames allow data to be projected from higher\ndimensions into 3 dimensions and then into 2 dimensions.  the\n3 dimensional representation can be rotated or otherwise animated\nbefore the presentation in 2 dimensions.\n\u003c/p\u003e\n\u003cp\u003e\nBelow we draw elements with 3 dimensional coordinates.\nDrag the mouse on the figure to rotate the diagram.\nShift-drag the mouse on the figure to translate the diagram.\n\u003c/p\u003e\n        \u003c/div\u003e\n    \u003c/td\u003e\n\u003c/tr\u003e\n\n\n\u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://aaronwatters.github.io/jp_doodle/110_nd_scatter.html\"\u003e\n        \u003cimg width=\"200px\" src=\"docs/images/nd_scatter.png\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ch4\u003e\u003ca href=\"https://aaronwatters.github.io/jp_doodle/110_nd_scatter.html\"\u003e\n        N-Dimensional Scatter Plot\n        \u003c/a\u003e\u003c/h4\u003e\n        \u003cdiv\u003e\n        \u003cp\u003e\nThe multidimensional scatter plot widget allows interactive\nexploration of dimensionality reduction projections that project\nmany features into three dimensional summaries.\n\u003c/p\u003e\n\u003cp\u003e\nThe demonstration below shows the standard \"iris\" dataset\nprojected from 4 dimensions into 3 dimensions using several\nprojection methods.\n\u003c/p\u003e\n        \u003c/div\u003e\n    \u003c/td\u003e\n\u003c/tr\u003e\n\n\n\u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://aaronwatters.github.io/jp_doodle/120_network.html\"\u003e\n        \u003cimg width=\"200px\" src=\"docs/images/network.png\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ch4\u003e\u003ca href=\"https://aaronwatters.github.io/jp_doodle/120_network.html\"\u003e\n        Network Explorer\n        \u003c/a\u003e\u003c/h4\u003e\n        \u003cdiv\u003e\n        \u003cp\u003e\nThe directed network widget allows interactive\nexploration of directed weighted network structures.\nIt was developed to facilitate the exploration and comparison of gene regulatory\nnetworks which are inferred using different methodologies.\n\u003c/p\u003e\n        \u003c/div\u003e\n    \u003c/td\u003e\n\u003c/tr\u003e\n\n\n\u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://aaronwatters.github.io/jp_doodle/array_explorer.html\"\u003e\n        \u003cimg width=\"200px\" src=\"docs/images/ArrayChooser.png\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ch4\u003e\u003ca href=\"https://aaronwatters.github.io/jp_doodle/array_explorer.html\"\u003e\n        Array explorer\n        \u003c/a\u003e\u003c/h4\u003e\n        \u003cdiv\u003e\n        This component allows an analyst to compare the rows and columns of an array of data.\n        \u003c/div\u003e\n    \u003c/td\u003e\n\u003c/tr\u003e\n\n\n\u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://aaronwatters.github.io/jp_doodle/color_chooser.html\"\u003e\n        \u003cimg width=\"200px\" src=\"docs/images/color_chooser.png\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ch4\u003e\u003ca href=\"https://aaronwatters.github.io/jp_doodle/color_chooser.html\"\u003e\n        Color chooser\n        \u003c/a\u003e\u003c/h4\u003e\n        \u003cdiv\u003e\n        A color chooser.  Choose a color and then click an object to apply the color.\n        \u003c/div\u003e\n    \u003c/td\u003e\n\u003c/tr\u003e\n\n\n\u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://aaronwatters.github.io/jp_doodle/opacity.html\"\u003e\n        \u003cimg width=\"200px\" src=\"docs/images/opacity.png\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ch4\u003e\u003ca href=\"https://aaronwatters.github.io/jp_doodle/opacity.html\"\u003e\n        Opacity Sliders\n        \u003c/a\u003e\u003c/h4\u003e\n        \u003cdiv\u003e\n        This example uses a dual canvas in a JQueryUI dialog with multiple sliders to adjust\nobject colors and opacities in another dual canvas.\n        \u003c/div\u003e\n    \u003c/td\u003e\n\u003c/tr\u003e\n\n\n\u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://aaronwatters.github.io/jp_doodle/polygon.html\"\u003e\n        \u003cimg width=\"200px\" src=\"docs/images/edit_poly.png\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ch4\u003e\u003ca href=\"https://aaronwatters.github.io/jp_doodle/polygon.html\"\u003e\n        Edit polygon\n        \u003c/a\u003e\u003c/h4\u003e\n        \u003cdiv\u003e\n        A polygon editor which illustrates combining mouse event modalities with reference frames.\nClick to start the polygon.  Type \".\" to drop a new vertex.\nClick again to close the polygon.  Press the reset button to play again.\n        \u003c/div\u003e\n    \u003c/td\u003e\n\u003c/tr\u003e\n\n\n\u003ctr\u003e\n    \u003ctd\u003e\n        \u003ca href=\"https://aaronwatters.github.io/jp_doodle/vector_field.html\"\u003e\n        \u003cimg width=\"200px\" src=\"docs/images/vector_field.png\"\u003e\n        \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n        \u003ch4\u003e\u003ca href=\"https://aaronwatters.github.io/jp_doodle/vector_field.html\"\u003e\n        Vector Field\n        \u003c/a\u003e\u003c/h4\u003e\n        \u003cdiv\u003e\n        The vector field component adds an animation of directional moving points\non a canvas.\n        \u003c/div\u003e\n    \u003c/td\u003e\n\u003c/tr\u003e\n\n\u003c/table\u003e\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAaronWatters%2Fjp_doodle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FAaronWatters%2Fjp_doodle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAaronWatters%2Fjp_doodle/lists"}