text: (window.webpackJsonp=window.webpackJsonp||[]).push([[217],{271:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return l})),n.d(t,"metadata",(function(){return p})),n.d(t,"rightToc",(function(){return c})),n.d(t,"default",(function(){return u}));var r=n(2),a=n(6),o=(n(0),n(302)),i=n(304),l={title:"Plot / Matplotlib",keywords:["matplotlib","plot"]},p={unversionedId:"examples/plot-matplotlib",id:"examples/plot-matplotlib",isDocsHomePage:!1,title:"Plot / Matplotlib",description:"Use matplotlib to create plots. Also demonstrates how to provide live control over plots.",source:"@site/docs/examples/plot-matplotlib.md",slug:"/examples/plot-matplotlib",permalink:"/wave/docs/examples/plot-matplotlib",editUrl:"https://github.com/h2oai/wave/edit/master/website/docs/examples/plot-matplotlib.md",version:"current",sidebar:"someSidebar",previous:{title:"Plot / Bokeh",permalink:"/wave/docs/examples/plot-bokeh"},next:{title:"Plot / Plotly",permalink:"/wave/docs/examples/plot-plotly"}},c=[],s={rightToc:c};function u(e){var t=e.components,l=Object(a.a)(e,["components"]);return Object(o.b)("wrapper",Object(r.a)({},s,l,{components:t,mdxType:"MDXLayout"}),Object(o.b)("p",null,"Use matplotlib to create plots. Also demonstrates how to provide live control over plots."),Object(o.b)("div",{className:"cover",style:{backgroundImage:"url("+n(484).default+")"}}),Object(o.b)("pre",null,Object(o.b)("code",Object(r.a)({parentName:"pre"},{className:"language-py"}),"import uuid\nimport os\nimport numpy as np\nimport matplotlib.pyplot as plt\n\nfrom h2o_wave import ui, main, app, Q\n\nnp.random.seed(19680801)\n\n\n@app('/demo')\nasync def serve(q: Q):\n    if not q.client.initialized:  # First visit\n        q.client.initialized = True\n        q.client.points = 25\n        q.client.alpha = 50\n\n        q.page['controls'] = ui.form_card(\n            box='1 1 2 3',\n            items=[\n                ui.text_xl(\"Lets make some plots\"),\n                ui.slider(name='points', label='Points', min=5, max=50, step=1, value=q.client.points, trigger=True),\n                ui.slider(name='alpha', label='Alpha', min=5, max=100, step=1, value=q.client.alpha, trigger=True),\n            ]\n        )\n        q.page['plot'] = ui.markdown_card(box='3 1 2 3', title='Your plot!', content='')\n\n    if q.args.points:\n        q.client.points = q.args.points\n\n    if q.args.alpha:\n        q.client.alpha = q.args.alpha\n\n    n = q.client.points\n\n    # Render plot\n    plt.figure(figsize=(2, 2))\n    plt.scatter(\n        np.random.rand(n), np.random.rand(n),\n        s=(30 * np.random.rand(n)) ** 2,\n        c=np.random.rand(n),\n        alpha=q.client.alpha / 100.0\n    )\n    image_filename = f'{str(uuid.uuid4())}.png'\n    plt.savefig(image_filename)\n\n    # Upload\n    image_path, = await q.site.upload([image_filename])\n\n    # Clean up\n    os.remove(image_filename)\n\n    # Display our plot in our markdown card\n    q.page['plot'].content = f'![plot]({image_path})'\n\n    # Save page\n    await q.page.save()\n")),Object(o.b)("p",null,Object(o.b)("strong",{parentName:"p"},"Tags"),": \u2002",Object(o.b)("a",{href:Object(i.a)("docs/examples/tags#matplotlib")},"matplotlib")," \u2002",Object(o.b)("a",{href:Object(i.a)("docs/examples/tags#plot")},"plot")))}u.isMDXComponent=!0},302:function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),n.d(t,"b",(function(){return f}));var r=n(0),a=n.n(r);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function p(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var c=a.a.createContext({}),s=function(e){var t=a.a.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},u=function(e){var t=s(e.components);return a.a.createElement(c.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,c=p(e,["components","mdxType","originalType","parentName"]),u=s(n),d=r,f=u["".concat(i,".").concat(d)]||u[d]||m[d]||o;return n?a.a.createElement(f,l(l({ref:t},c),{},{components:n})):a.a.createElement(f,l({ref:t},c))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=d;var l={};for(var p in t)hasOwnProperty.call(t,p)&&(l[p]=t[p]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var c=2;c<o;c++)i[c]=n[c];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},303:function(e,t,n){"use strict";var r=n(0),a=n(19);t.a=function(){var e=Object(r.useContext)(a.a);if(null===e)throw new Error("Docusaurus context not provided");return e}},304:function(e,t,n){"use strict";n.d(t,"b",(function(){return o})),n.d(t,"a",(function(){return i}));var r=n(303),a=n(305);function o(){var e=Object(r.a)().siteConfig,t=(e=void 0===e?{}:e).baseUrl,n=void 0===t?"/":t,o=e.url;return{withBaseUrl:function(e,t){return function(e,t,n,r){var o=void 0===r?{}:r,i=o.forcePrependBaseUrl,l=void 0!==i&&i,p=o.absolute,c=void 0!==p&&p;if(!n)return n;if(n.startsWith("#"))return n;if(Object(a.b)(n))return n;if(l)return t+n;var s=n.startsWith(t)?n:t+n.replace(/^\//,"");return c?e+s:s}(o,n,e,t)}}}function i(e,t){return void 0===t&&(t={}),(0,o().withBaseUrl)(e,t)}},305:function(e,t,n){"use strict";function r(e){return!0===/^(\w*:|\/\/)/.test(e)}function a(e){return void 0!==e&&!r(e)}n.d(t,"b",(function(){return r})),n.d(t,"a",(function(){return a}))},484:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/plot-matplotlib-14dd0da4129dea8f5aae83573ba31241.png"}}]);