CINXE.COM

<!DOCTYPE html><html lang="en" class="dark"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><link rel="apple-touch-icon" type="image/png" sizes="180x180" href="https://mintlify.s3-us-west-1.amazonaws.com/queue-4c50ebb3/_generated/favicon/apple-touch-icon.png?v=3"/><link rel="icon" type="image/png" sizes="32x32" href="https://mintlify.s3-us-west-1.amazonaws.com/queue-4c50ebb3/_generated/favicon/favicon-32x32.png?v=3"/><link rel="icon" type="image/png" sizes="16x16" href="https://mintlify.s3-us-west-1.amazonaws.com/queue-4c50ebb3/_generated/favicon/favicon-16x16.png?v=3"/><link rel="shortcut icon" type="image/x-icon" href="https://mintlify.s3-us-west-1.amazonaws.com/queue-4c50ebb3/_generated/favicon/favicon.ico?v=3"/><meta name="msapplication-config" content="https://mintlify.s3-us-west-1.amazonaws.com/queue-4c50ebb3/_generated/favicon/browserconfig.xml?v=3"/><meta name="apple-mobile-web-app-title" content="Docs"/><meta name="application-name" content="Docs"/><meta name="msapplication-TileColor" content="#030712"/><meta name="theme-color" content="#ffffff"/><link rel="sitemap" type="application/xml" href="/sitemap.xml"/><meta name="charset" content="utf-8"/><meta name="og:type" content="website"/><meta name="og:site_name" content="Docs"/><meta name="twitter:card" content="summary_large_image"/><meta name="og:title" content="Data Visualization - Docs"/><meta name="twitter:title" content="Data Visualization - Docs"/><meta name="og:image" content="https://mintlify.com/docs/api/og?division=Documentation&title=Data+Visualization&logoLight=https%3A%2F%2Fmintlify.s3-us-west-1.amazonaws.com%2Fqueue-4c50ebb3%2Fassets%2Fimages%2Fmorph_logo_svg.svg&logoDark=https%3A%2F%2Fmintlify.s3-us-west-1.amazonaws.com%2Fqueue-4c50ebb3%2Fassets%2Fimages%2Fmorph_logo_svg_w.svg&primaryColor=%23030712&lightColor=%23f9fafb&darkColor=%23030712"/><meta name="twitter:image" content="https://mintlify.com/docs/api/og?division=Documentation&title=Data+Visualization&logoLight=https%3A%2F%2Fmintlify.s3-us-west-1.amazonaws.com%2Fqueue-4c50ebb3%2Fassets%2Fimages%2Fmorph_logo_svg.svg&logoDark=https%3A%2F%2Fmintlify.s3-us-west-1.amazonaws.com%2Fqueue-4c50ebb3%2Fassets%2Fimages%2Fmorph_logo_svg_w.svg&primaryColor=%23030712&lightColor=%23f9fafb&darkColor=%23030712"/><title>Data Visualization - Docs</title><meta name="og:url" content="/docs/en/workspace/visualization"/><link rel="canonical" href="/docs/en/workspace/visualization"/><meta name="next-head-count" content="23"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css" integrity="sha384-Xi8rHCmBmhbuyyhbI88391ZKP2dmfnOl4rT9ZfRI7mLTdk1wblIUnrIq35nqwEvC" crossorigin="anonymous"/><link rel="preload" href="/_next/static/media/a34f9d1faa5f3315-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/media/bb3ef058b751a6ad-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><script id="mode-toggle" data-nscript="beforeInteractive"> try { if (localStorage.isDarkMode === 'true') { document.documentElement.classList.add('dark'); } else if (localStorage.isDarkMode === 'false') { document.documentElement.classList.remove('dark'); } else if ((true && !('isDarkMode' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches) || false) { document.documentElement.classList.add('dark'); } else { document.documentElement.classList.remove('dark'); } } catch (_) {} </script><link rel="preload" href="/_next/static/css/1b0bee2a213c6d45.css" as="style"/><link rel="stylesheet" href="/_next/static/css/1b0bee2a213c6d45.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-42372ed130431b0a.js"></script><script src="/_next/static/chunks/webpack-bf3c4f880e1dcd79.js" defer=""></script><script src="/_next/static/chunks/framework-d17a13b7014ce556.js" defer=""></script><script src="/_next/static/chunks/main-6f86f9a153903fae.js" defer=""></script><script src="/_next/static/chunks/pages/_app-d7664e96f6979e7c.js" defer=""></script><script src="/_next/static/chunks/2edb282b-7fa355f49eaeb230.js" defer=""></script><script src="/_next/static/chunks/e893f787-54a006ae51267903.js" defer=""></script><script src="/_next/static/chunks/086d643d-3aa1cf46914548d9.js" defer=""></script><script src="/_next/static/chunks/9097-75a5bfb192203d09.js" defer=""></script><script src="/_next/static/chunks/6430-16e004706658d885.js" defer=""></script><script src="/_next/static/chunks/2073-a80af447b2775d64.js" defer=""></script><script src="/_next/static/chunks/pages/_sites/%5Bsubdomain%5D/%5B%5B...slug%5D%5D-7d0e3c1d0f130c24.js" defer=""></script><script src="/_next/static/Een-WiNRwYtikoUb8u0AO/_buildManifest.js" defer=""></script><script src="/_next/static/Een-WiNRwYtikoUb8u0AO/_ssgManifest.js" defer=""></script><style id="__jsx-4145347147">:root{--font-inter:'__Inter_e5ab12', '__Inter_Fallback_e5ab12';--font-jetbrains-mono:'__JetBrains_Mono_3c557b', '__JetBrains_Mono_Fallback_3c557b'}</style></head><div id="__next"><main class="jsx-4145347147"><style>:root { --primary: 3 7 18; --primary-light: 249 250 251; --primary-dark: 3 7 18; --background-light: 255 255 255; --background-dark: 14 14 16; --gray-50: 241 243 244; --gray-100: 236 237 239; --gray-200: 222 224 228; --gray-300: 203 207 213; --gray-400: 151 158 170; --gray-500: 104 111 125; --gray-600: 73 83 97; --gray-700: 53 63 79; --gray-800: 30 40 54; --gray-900: 17 23 38; --gray-950: 3 7 18; }</style><div class="relative antialiased text-gray-500 dark:text-gray-400"><span class="fixed inset-0 bg-background-light dark:bg-background-dark -z-10"></span><div id="navbar" class="z-30 fixed lg:sticky top-0 w-full"><div id="navbar-transition" class="absolute w-full h-full backdrop-blur flex-none transition-colors duration-500 border-b border-gray-500/5 dark:border-gray-300/[0.06] supports-backdrop-blur:bg-background-light/60 dark:bg-transparent"></div><div class="max-w-8xl mx-auto relative"><div class=""><div class="relative"><div class="flex items-center lg:px-12 h-16 min-w-0 mx-4 lg:mx-0"><div class="h-full relative flex-1 flex items-center gap-x-4 min-w-0 border-b border-gray-500/5 dark:border-gray-300/[0.06]"><div class="flex-1 flex items-center gap-x-4"><a href="/"><span class="sr-only">Docs home page</span><img class="w-auto h-7 relative object-contain block dark:hidden" src="https://mintlify.s3-us-west-1.amazonaws.com/queue-4c50ebb3/assets/images/morph_logo_svg.svg" alt="light logo"/><img class="w-auto h-7 relative object-contain hidden dark:block" src="https://mintlify.s3-us-west-1.amazonaws.com/queue-4c50ebb3/assets/images/morph_logo_svg_w.svg" alt="dark logo"/></a><div class="flex items-center gap-x-2"><button type="button" id="radix-:R25fcql6:" aria-haspopup="menu" aria-expanded="false" data-state="closed" class="group bg-background-light dark:bg-background-dark disabled:pointer-events-none [&>span]:line-clamp-1 overflow-hidden group outline-none group-hover:text-zinc-950/70 dark:group-hover:text-white/70 text-xs gap-1.5 text-gray-500 dark:text-gray-400 leading-5 font-semibold border border-gray-200 dark:border-gray-800 hover:border-gray-300 dark:hover:border-gray-700 rounded-full py-1 px-3 flex items-center space-x-2 whitespace-nowrap">English<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down"><path d="m6 9 6 6 6-6"></path></svg></button></div></div><div class="hidden lg:block mx-px relative flex-1 bg-white dark:bg-gray-900 pointer-events-auto rounded-lg min-w-0"><button type="button" class="w-full flex items-center text-sm leading-6 rounded-lg py-1.5 pl-3.5 pr-3 shadow-sm text-gray-400 dark:text-white/50 bg-background-light dark:bg-background-dark dark:brightness-[1.1] dark:ring-1 dark:hover:brightness-[1.25] ring-1 ring-gray-400/20 hover:ring-gray-600/25 dark:ring-gray-600/30 dark:hover:ring-gray-500/30 focus:outline-primary justify-between truncate gap-2 min-w-[43px]" id="search-bar-entry"><div class="flex items-center gap-3 min-w-[42px]"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search min-w-4 flex-none text-gray-700 hover:text-gray-800 dark:text-gray-300 hover:dark:text-gray-200"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.3-4.3"></path></svg><div class="truncate min-w-0">Search...</div></div></button></div><div class="flex-1 relative hidden lg:flex items-center ml-auto justify-end space-x-4"><nav class="text-sm"><ul class="flex space-x-6 items-center"><li class="block lg:hidden"><a class="whitespace-nowrap font-medium text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300" href="https://www.morphdb.io">Website</a></li><li class="whitespace-nowrap hidden lg:flex" id="topbar-cta-button"><a target="_blank" class="group px-4 py-1.5 relative inline-flex items-center text-sm font-medium" href="https://www.morphdb.io"><span class="absolute inset-0 bg-primary-dark dark:bg-primary-light/10 border-primary-light/30 rounded-full dark:border group-hover:opacity-[0.9] dark:group-hover:border-primary-light/60"></span><div class="mr-0.5 space-x-2.5 flex items-center"><span class="z-10 text-white dark:text-primary-light">Website</span><svg width="3" height="24" viewBox="0 -9 3 24" class="h-5 rotate-0 overflow-visible text-white/90 dark:text-primary-light"><path d="M0 0L3 3L0 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path></svg></div></a></li></ul></nav><div class="flex items-center"><button class="group p-2 flex items-center justify-center" aria-label="Toggle dark mode"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 block text-gray-400 dark:hidden group-hover:text-gray-600"><g clip-path="url(#clip0_2880_7340)"><path d="M8 1.11133V2.00022" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12.8711 3.12891L12.2427 3.75735" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.8889 8H14" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12.8711 12.8711L12.2427 12.2427" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M8 14.8889V14" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M3.12891 12.8711L3.75735 12.2427" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M1.11133 8H2.00022" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M3.12891 3.12891L3.75735 3.75735" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M8.00043 11.7782C10.0868 11.7782 11.7782 10.0868 11.7782 8.00043C11.7782 5.91402 10.0868 4.22266 8.00043 4.22266C5.91402 4.22266 4.22266 5.91402 4.22266 8.00043C4.22266 10.0868 5.91402 11.7782 8.00043 11.7782Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></g><defs><clipPath id="clip0_2880_7340"><rect width="16" height="16" fill="white"></rect></clipPath></defs></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-moon h-4 w-4 hidden dark:block text-gray-500 dark:group-hover:text-gray-300"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path></svg></button></div></div><div class="flex lg:hidden items-center gap-2"><button type="button" class="text-gray-500 w-8 h-8 flex items-center justify-center hover:text-gray-600 dark:text-gray-400 dark:hover:text-gray-300" id="search-bar-entry-mobile"><span class="sr-only">Search...</span><svg class="h-4 w-4 bg-gray-500 dark:bg-gray-400 hover:bg-gray-600 dark:hover:bg-gray-300" style="-webkit-mask-image:url(https://mintlify.b-cdn.net/v6.6.0/solid/magnifying-glass.svg);-webkit-mask-repeat:no-repeat;-webkit-mask-position:center"></svg></button><button aria-label="More actions" class="h-7 w-5 flex items-center justify-end"><svg class="h-4 w-4 bg-gray-500 dark:bg-gray-400 hover:bg-gray-600 dark:hover:bg-gray-300" style="-webkit-mask-image:url(https://mintlify.b-cdn.net/v6.6.0/solid/ellipsis-vertical.svg);-webkit-mask-repeat:no-repeat;-webkit-mask-position:center"></svg></button></div></div></div><div class="flex items-center h-14 py-4 px-5 lg:hidden"><button type="button" class="text-gray-500 hover:text-gray-600 dark:text-gray-400 dark:hover:text-gray-300"><span class="sr-only">Navigation</span><svg class="h-4" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"></path></svg></button><div class="ml-4 flex text-sm leading-6 whitespace-nowrap min-w-0 space-x-3"><div class="flex items-center space-x-3"><span>Workspace</span><svg width="3" height="24" viewBox="0 -9 3 24" class="h-5 rotate-0 overflow-visible fill-gray-400"><path d="M0 0L3 3L0 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path></svg></div><div class="font-semibold text-gray-900 truncate dark:text-gray-200">Data Visualization</div></div></div></div><div class="hidden lg:flex px-12 h-12"><div class="h-full flex text-sm space-x-6"><a class="group relative h-full flex items-center text-gray-800 dark:text-gray-200 font-semibold" href="/docs/en/getting-started/why-morph">Guides<div class="absolute bottom-0 h-[1.5px] w-full bg-primary dark:bg-primary-light"></div></a><a class="group relative h-full flex items-center font-medium text-gray-600 dark:text-gray-400 group-hover:text-gray-800 dark:group-hover:text-gray-300" href="/sql-python/en/sql/quickstart-sql">SQL & Python<div class="absolute bottom-0 h-[1.5px] w-full group-hover:bg-gray-200 dark:group-hover:bg-gray-700"></div></a><a class="group relative h-full flex items-center font-medium text-gray-600 dark:text-gray-400 group-hover:text-gray-800 dark:group-hover:text-gray-300" href="/data-application/en/how-to-build-data-application">Data Application<div class="absolute bottom-0 h-[1.5px] w-full group-hover:bg-gray-200 dark:group-hover:bg-gray-700"></div></a><a class="group relative h-full flex items-center font-medium text-gray-600 dark:text-gray-400 group-hover:text-gray-800 dark:group-hover:text-gray-300" href="/integrations/en/database/snowflake">Integrations<div class="absolute bottom-0 h-[1.5px] w-full group-hover:bg-gray-200 dark:group-hover:bg-gray-700"></div></a><a class="group relative h-full flex items-center font-medium text-gray-600 dark:text-gray-400 group-hover:text-gray-800 dark:group-hover:text-gray-300" href="/sample-data-app/en/introduction/about-sample-apps">Sample Data Apps<div class="absolute bottom-0 h-[1.5px] w-full group-hover:bg-gray-200 dark:group-hover:bg-gray-700"></div></a><a class="group relative h-full flex items-center font-medium text-gray-600 dark:text-gray-400 group-hover:text-gray-800 dark:group-hover:text-gray-300" href="/troubleshooting/en/support/contact-support">Troubleshooting<div class="absolute bottom-0 h-[1.5px] w-full group-hover:bg-gray-200 dark:group-hover:bg-gray-700"></div></a><a class="group relative h-full flex items-center font-medium text-gray-600 dark:text-gray-400 group-hover:text-gray-800 dark:group-hover:text-gray-300" href="/changelog/en/2024-changelog">Changelog<div class="absolute bottom-0 h-[1.5px] w-full group-hover:bg-gray-200 dark:group-hover:bg-gray-700"></div></a></div></div></div></div></div><div class="px-4 mx-auto max-w-8xl lg:px-8 min-h-screen"><div class="z-20 hidden lg:block fixed bottom-0 right-auto w-[18rem] top-[7.1rem]" id="sidebar"><div class="absolute inset-0 z-10 stable-scrollbar-gutter overflow-auto pr-8 pb-10" id="sidebar-content"><div class="relative lg:text-sm lg:leading-6"><div class="sticky top-0 h-8 bg-gradient-to-b from-background-light dark:from-background-dark"></div><div id="navigation-items"><li class="list-none"><a href="https://www.morphdb.io/blogs" target="_blank" rel="noreferrer" class="pl-4 group flex items-center lg:text-sm lg:leading-6 mb-5 sm:mb-4 font-medium text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300"><div class="mr-4 rounded-md p-1 zinc-box group-hover:brightness-100 group-hover:ring-0 ring-1 ring-gray-950/5 dark:ring-gray-700/40"><svg class="h-4 w-4 secondary-opacity group-hover:fill-primary-dark group-hover:bg-white bg-gray-400 dark:bg-gray-500" style="-webkit-mask-image:url(https://mintlify.b-cdn.net/v6.6.0/duotone/newspaper.svg);-webkit-mask-repeat:no-repeat;-webkit-mask-position:center"></svg></div>Blog</a></li><li class="list-none"><a href="https://stackblitz.com/edit/vitejs-vite-7fyrdn?file=src%2Findex.mdx" target="_blank" rel="noreferrer" class="pl-4 group flex items-center lg:text-sm lg:leading-6 mb-5 sm:mb-4 font-medium text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300"><div class="mr-4 rounded-md p-1 zinc-box group-hover:brightness-100 group-hover:ring-0 ring-1 ring-gray-950/5 dark:ring-gray-700/40"><svg class="h-4 w-4 secondary-opacity group-hover:fill-primary-dark group-hover:bg-white bg-gray-400 dark:bg-gray-500" style="-webkit-mask-image:url(https://mintlify.b-cdn.net/v6.6.0/duotone/code.svg);-webkit-mask-repeat:no-repeat;-webkit-mask-position:center"></svg></div>Data App Example</a></li><div class="mt-12 lg:mt-8"><h5 class="pl-4 mb-3.5 lg:mb-2.5 font-semibold text-gray-900 dark:text-gray-200">Getting Started</h5><ul><li id="/docs/en/getting-started/why-morph" class="scroll-m-4 first:scroll-m-20"><a class="group mt-2 lg:mt-0 flex items-center pr-3 py-1.5 cursor-pointer focus:outline-primary dark:focus:outline-primary-light space-x-3 rounded-lg hover:bg-gray-600/5 dark:hover:bg-gray-200/5 text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300" style="padding-left:1rem" href="/docs/en/getting-started/why-morph"><div class="flex-1 flex items-center space-x-2.5"><div>Why Morph?</div></div></a></li><li id="/docs/en/getting-started/how-morph-works" class="scroll-m-4 first:scroll-m-20"><a class="group mt-2 lg:mt-0 flex items-center pr-3 py-1.5 cursor-pointer focus:outline-primary dark:focus:outline-primary-light space-x-3 rounded-lg hover:bg-gray-600/5 dark:hover:bg-gray-200/5 text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300" style="padding-left:1rem" href="/docs/en/getting-started/how-morph-works"><div class="flex-1 flex items-center space-x-2.5"><div>How Morph Works</div></div></a></li></ul></div><div class="mt-12 lg:mt-8"><h5 class="pl-4 mb-3.5 lg:mb-2.5 font-semibold text-gray-900 dark:text-gray-200">Workspace</h5><ul><li id="/docs/en/workspace/about-workspace" class="scroll-m-4 first:scroll-m-20"><a class="group mt-2 lg:mt-0 flex items-center pr-3 py-1.5 cursor-pointer focus:outline-primary dark:focus:outline-primary-light space-x-3 rounded-lg hover:bg-gray-600/5 dark:hover:bg-gray-200/5 text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300" style="padding-left:1rem" href="/docs/en/workspace/about-workspace"><div class="flex-1 flex items-center space-x-2.5"><div>Workspace Overview</div></div></a></li><li id="/docs/en/workspace/environment" class="scroll-m-4 first:scroll-m-20"><a class="group mt-2 lg:mt-0 flex items-center pr-3 py-1.5 cursor-pointer focus:outline-primary dark:focus:outline-primary-light space-x-3 rounded-lg hover:bg-gray-600/5 dark:hover:bg-gray-200/5 text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300" style="padding-left:1rem" href="/docs/en/workspace/environment"><div class="flex-1 flex items-center space-x-2.5"><div>Development Environment</div></div></a></li><li id="/docs/en/workspace/vscode-extensions" class="scroll-m-4 first:scroll-m-20"><a class="group mt-2 lg:mt-0 flex items-center pr-3 py-1.5 cursor-pointer focus:outline-primary dark:focus:outline-primary-light space-x-3 rounded-lg hover:bg-gray-600/5 dark:hover:bg-gray-200/5 text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300" style="padding-left:1rem" href="/docs/en/workspace/vscode-extensions"><div class="flex-1 flex items-center space-x-2.5"><div>VS Code Extensions</div></div></a></li><li id="/docs/en/workspace/sql-python" class="scroll-m-4 first:scroll-m-20"><a class="group mt-2 lg:mt-0 flex items-center pr-3 py-1.5 cursor-pointer focus:outline-primary dark:focus:outline-primary-light space-x-3 rounded-lg hover:bg-gray-600/5 dark:hover:bg-gray-200/5 text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300" style="padding-left:1rem" href="/docs/en/workspace/sql-python"><div class="flex-1 flex items-center space-x-2.5"><div>Build with SQL & Python</div></div></a></li><li id="/docs/en/workspace/template" class="scroll-m-4 first:scroll-m-20"><a class="group mt-2 lg:mt-0 flex items-center pr-3 py-1.5 cursor-pointer focus:outline-primary dark:focus:outline-primary-light space-x-3 rounded-lg hover:bg-gray-600/5 dark:hover:bg-gray-200/5 text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300" style="padding-left:1rem" href="/docs/en/workspace/template"><div class="flex-1 flex items-center space-x-2.5"><div>Template</div></div></a></li><li id="/docs/en/workspace/visualization" class="scroll-m-4 first:scroll-m-20"><a class="group mt-2 lg:mt-0 flex items-center pr-3 py-1.5 cursor-pointer focus:outline-primary dark:focus:outline-primary-light space-x-3 rounded-lg bg-primary/10 text-primary font-semibold dark:text-primary-light dark:bg-primary-light/10" style="padding-left:1rem" href="/docs/en/workspace/visualization"><div class="flex-1 flex items-center space-x-2.5"><div>Data Visualization</div></div></a></li><li id="/docs/en/workspace/data-application" class="scroll-m-4 first:scroll-m-20"><a class="group mt-2 lg:mt-0 flex items-center pr-3 py-1.5 cursor-pointer focus:outline-primary dark:focus:outline-primary-light space-x-3 rounded-lg hover:bg-gray-600/5 dark:hover:bg-gray-200/5 text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300" style="padding-left:1rem" href="/docs/en/workspace/data-application"><div class="flex-1 flex items-center space-x-2.5"><div>Data Applications</div></div></a></li><li id="/docs/en/workspace/about-canvas" class="scroll-m-4 first:scroll-m-20"><a class="group mt-2 lg:mt-0 flex items-center pr-3 py-1.5 cursor-pointer focus:outline-primary dark:focus:outline-primary-light space-x-3 rounded-lg hover:bg-gray-600/5 dark:hover:bg-gray-200/5 text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300" style="padding-left:1rem" href="/docs/en/workspace/about-canvas"><div class="flex-1 flex items-center space-x-2.5"><div>Canvas</div></div></a></li><li id="/docs/en/workspace/job-schedule" class="scroll-m-4 first:scroll-m-20"><a class="group mt-2 lg:mt-0 flex items-center pr-3 py-1.5 cursor-pointer focus:outline-primary dark:focus:outline-primary-light space-x-3 rounded-lg hover:bg-gray-600/5 dark:hover:bg-gray-200/5 text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300" style="padding-left:1rem" href="/docs/en/workspace/job-schedule"><div class="flex-1 flex items-center space-x-2.5"><div>Job Scheduling</div></div></a></li></ul></div><div class="mt-12 lg:mt-8"><h5 class="pl-4 mb-3.5 lg:mb-2.5 font-semibold text-gray-900 dark:text-gray-200">Data Sources</h5><ul><li id="/docs/en/data-sources/builtin-postgres" class="scroll-m-4 first:scroll-m-20"><a class="group mt-2 lg:mt-0 flex items-center pr-3 py-1.5 cursor-pointer focus:outline-primary dark:focus:outline-primary-light space-x-3 rounded-lg hover:bg-gray-600/5 dark:hover:bg-gray-200/5 text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300" style="padding-left:1rem" href="/docs/en/data-sources/builtin-postgres"><div class="flex-1 flex items-center space-x-2.5"><div>Built-in PostgreSQL</div></div></a></li><li id="/docs/en/data-sources/connectors" class="scroll-m-4 first:scroll-m-20"><a class="group mt-2 lg:mt-0 flex items-center pr-3 py-1.5 cursor-pointer focus:outline-primary dark:focus:outline-primary-light space-x-3 rounded-lg hover:bg-gray-600/5 dark:hover:bg-gray-200/5 text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300" style="padding-left:1rem" href="/docs/en/data-sources/connectors"><div class="flex-1 flex items-center space-x-2.5"><div>Connectors: DB / DWH / SaaS</div></div></a></li></ul></div><div class="mt-12 lg:mt-8"><h5 class="pl-4 mb-3.5 lg:mb-2.5 font-semibold text-gray-900 dark:text-gray-200">Morph AI</h5><ul><li id="/docs/en/morph-ai/features-of-morphai" class="scroll-m-4 first:scroll-m-20"><a class="group mt-2 lg:mt-0 flex items-center pr-3 py-1.5 cursor-pointer focus:outline-primary dark:focus:outline-primary-light space-x-3 rounded-lg hover:bg-gray-600/5 dark:hover:bg-gray-200/5 text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300" style="padding-left:1rem" href="/docs/en/morph-ai/features-of-morphai"><div class="flex-1 flex items-center space-x-2.5"><div>Morph AI Features</div></div></a></li><li id="/docs/en/morph-ai/code-generation" class="scroll-m-4 first:scroll-m-20"><a class="group mt-2 lg:mt-0 flex items-center pr-3 py-1.5 cursor-pointer focus:outline-primary dark:focus:outline-primary-light space-x-3 rounded-lg hover:bg-gray-600/5 dark:hover:bg-gray-200/5 text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300" style="padding-left:1rem" href="/docs/en/morph-ai/code-generation"><div class="flex-1 flex items-center space-x-2.5"><div>Code Generation</div></div></a></li><li id="/docs/en/morph-ai/code-assistant" class="scroll-m-4 first:scroll-m-20"><a class="group mt-2 lg:mt-0 flex items-center pr-3 py-1.5 cursor-pointer focus:outline-primary dark:focus:outline-primary-light space-x-3 rounded-lg hover:bg-gray-600/5 dark:hover:bg-gray-200/5 text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300" style="padding-left:1rem" href="/docs/en/morph-ai/code-assistant"><div class="flex-1 flex items-center space-x-2.5"><div>Coding Assistant</div></div></a></li><li id="/docs/en/morph-ai/data-pipeline-builder" class="scroll-m-4 first:scroll-m-20"><a class="group mt-2 lg:mt-0 flex items-center pr-3 py-1.5 cursor-pointer focus:outline-primary dark:focus:outline-primary-light space-x-3 rounded-lg hover:bg-gray-600/5 dark:hover:bg-gray-200/5 text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300" style="padding-left:1rem" href="/docs/en/morph-ai/data-pipeline-builder"><div class="flex-1 flex items-center space-x-2.5"><div>Data Pipeline Builder</div></div></a></li></ul></div><div class="mt-12 lg:mt-8"><h5 class="pl-4 mb-3.5 lg:mb-2.5 font-semibold text-gray-900 dark:text-gray-200">Rest API</h5><ul><li id="/docs/en/rest-api/overview" class="scroll-m-4 first:scroll-m-20"><a class="group mt-2 lg:mt-0 flex items-center pr-3 py-1.5 cursor-pointer focus:outline-primary dark:focus:outline-primary-light space-x-3 rounded-lg hover:bg-gray-600/5 dark:hover:bg-gray-200/5 text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300" style="padding-left:1rem" href="/docs/en/rest-api/overview"><div class="flex-1 flex items-center space-x-2.5"><div>Overview</div></div></a></li><li id="/docs/en/rest-api/authentication" class="scroll-m-4 first:scroll-m-20"><a class="group mt-2 lg:mt-0 flex items-center pr-3 py-1.5 cursor-pointer focus:outline-primary dark:focus:outline-primary-light space-x-3 rounded-lg hover:bg-gray-600/5 dark:hover:bg-gray-200/5 text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300" style="padding-left:1rem" href="/docs/en/rest-api/authentication"><div class="flex-1 flex items-center space-x-2.5"><div>Authentication</div></div></a></li><li id="/docs/en/rest-api/quickstart" class="scroll-m-4 first:scroll-m-20"><a class="group mt-2 lg:mt-0 flex items-center pr-3 py-1.5 cursor-pointer focus:outline-primary dark:focus:outline-primary-light space-x-3 rounded-lg hover:bg-gray-600/5 dark:hover:bg-gray-200/5 text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300" style="padding-left:1rem" href="/docs/en/rest-api/quickstart"><div class="flex-1 flex items-center space-x-2.5"><div>Quickstart</div></div></a></li></ul></div><div class="mt-12 lg:mt-8"><h5 class="pl-4 mb-3.5 lg:mb-2.5 font-semibold text-gray-900 dark:text-gray-200">Team Setting</h5><ul><li id="/docs/en/team-setting/credit" class="scroll-m-4 first:scroll-m-20"><a class="group mt-2 lg:mt-0 flex items-center pr-3 py-1.5 cursor-pointer focus:outline-primary dark:focus:outline-primary-light space-x-3 rounded-lg hover:bg-gray-600/5 dark:hover:bg-gray-200/5 text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300" style="padding-left:1rem" href="/docs/en/team-setting/credit"><div class="flex-1 flex items-center space-x-2.5"><div>Credit</div></div></a></li><li id="/docs/en/team-setting/manage-members" class="scroll-m-4 first:scroll-m-20"><a class="group mt-2 lg:mt-0 flex items-center pr-3 py-1.5 cursor-pointer focus:outline-primary dark:focus:outline-primary-light space-x-3 rounded-lg hover:bg-gray-600/5 dark:hover:bg-gray-200/5 text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300" style="padding-left:1rem" href="/docs/en/team-setting/manage-members"><div class="flex-1 flex items-center space-x-2.5"><div>Manage Members</div></div></a></li></ul></div></div></div></div></div><div class="" id="content-container"><div class="flex flex-row gap-12 box-border w-full pt-40 lg:pt-10"><div class="relative grow box-border flex-col w-full mx-auto px-1 lg:pl-[23.7rem] lg:-ml-12 xl:w-[calc(100%-28rem)]" id="content-area"><header id="header" class="relative"><div class="mt-0.5 space-y-2.5"><div class="eyebrow h-5 text-primary dark:text-primary-light text-sm font-semibold">Workspace</div><div class="flex items-center"><h1 class="inline-block text-2xl sm:text-3xl font-extrabold text-gray-900 tracking-tight dark:text-gray-200">Data Visualization</h1></div></div></header><div class="flex flex-col gap-8"><div class="flex flex-col gap-6 xl:hidden [&:not(:empty)]:mt-8"></div></div><div class="relative mt-8 prose prose-gray dark:prose-invert"><p>Visualization is crucial to understanding data. This section shows you how to visualise data on the Morph workspace.</p> <h2 class="flex whitespace-pre-wrap group" id="using-the-visualization-function"><div class="absolute"><a href="#using-the-visualization-function" class="-ml-10 flex items-center opacity-0 border-0 group-hover:opacity-100" aria-label="Navigate to header"><div class="w-6 h-6 text-gray-400 rounded-md flex items-center justify-center zinc-box bg-white ring-1 ring-gray-400/30 dark:ring-gray-700/25 hover:ring-gray-400/60 dark:hover:ring-white/20"><svg xmlns="http://www.w3.org/2000/svg" fill="gray" height="12px" viewBox="0 0 576 512"><path d="M0 256C0 167.6 71.6 96 160 96h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C98.1 144 48 194.1 48 256s50.1 112 112 112h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C71.6 416 0 344.4 0 256zm576 0c0 88.4-71.6 160-160 160H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c61.9 0 112-50.1 112-112s-50.1-112-112-112H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c88.4 0 160 71.6 160 160zM184 232H392c13.3 0 24 10.7 24 24s-10.7 24-24 24H184c-13.3 0-24-10.7-24-24s10.7-24 24-24z"></path></svg></div></a></div><span class="cursor-pointer">Using the visualization function</span></h2> <p>Morph provides a function for realising simple visualizations in the GUI by creating a file with the extension vg.json. To realise general visualizations such as bar charts and line graphs, the visualization results can be immediately obtained by aggregating the original data.</p> <h3 class="flex whitespace-pre-wrap group" id="treatment"><div class="absolute"><a href="#treatment" class="-ml-10 flex items-center opacity-0 border-0 group-hover:opacity-100" aria-label="Navigate to header"><div class="w-6 h-6 text-gray-400 rounded-md flex items-center justify-center zinc-box bg-white ring-1 ring-gray-400/30 dark:ring-gray-700/25 hover:ring-gray-400/60 dark:hover:ring-white/20"><svg xmlns="http://www.w3.org/2000/svg" fill="gray" height="12px" viewBox="0 0 576 512"><path d="M0 256C0 167.6 71.6 96 160 96h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C98.1 144 48 194.1 48 256s50.1 112 112 112h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C71.6 416 0 344.4 0 256zm576 0c0 88.4-71.6 160-160 160H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c61.9 0 112-50.1 112-112s-50.1-112-112-112H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c88.4 0 160 71.6 160 160zM184 232H392c13.3 0 24 10.7 24 24s-10.7 24-24 24H184c-13.3 0-24-10.7-24-24s10.7-24 24-24z"></path></svg></div></a></div><span class="cursor-pointer">Treatment</span></h3> <p>First, open the SQL, Python file containing the aggregated source data for the data you want to visualize.</p> <p>When you open the file, an icon to start the visualization function appears in the top right-hand corner. Click here.</p>  <p>A file with the extension vg.json is generated on the same level of the directory. Open that file.</p> <p>A GUI screen for visualization will appear as follows. Set each value and a beautiful graph will be displayed in real time.</p>  <h3 class="flex whitespace-pre-wrap group" id="visualization-sample"><div class="absolute"><a href="#visualization-sample" class="-ml-10 flex items-center opacity-0 border-0 group-hover:opacity-100" aria-label="Navigate to header"><div class="w-6 h-6 text-gray-400 rounded-md flex items-center justify-center zinc-box bg-white ring-1 ring-gray-400/30 dark:ring-gray-700/25 hover:ring-gray-400/60 dark:hover:ring-white/20"><svg xmlns="http://www.w3.org/2000/svg" fill="gray" height="12px" viewBox="0 0 576 512"><path d="M0 256C0 167.6 71.6 96 160 96h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C98.1 144 48 194.1 48 256s50.1 112 112 112h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C71.6 416 0 344.4 0 256zm576 0c0 88.4-71.6 160-160 160H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c61.9 0 112-50.1 112-112s-50.1-112-112-112H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c88.4 0 160 71.6 160 160zM184 232H392c13.3 0 24 10.7 24 24s-10.7 24-24 24H184c-13.3 0-24-10.7-24-24s10.7-24 24-24z"></path></svg></div></a></div><span class="cursor-pointer">Visualization sample</span></h3> <iframe src="https://www.loom.com/embed/9274b8d8cc214161a5d22d67516ceeda?sid=c1a9dbf7-ff99-4b3d-b6d6-60e420c4e21a" controls="" class="w-full aspect-video"></iframe> <h2 class="flex whitespace-pre-wrap group" id="implement-more-complex-visualizations"><div class="absolute"><a href="#implement-more-complex-visualizations" class="-ml-10 flex items-center opacity-0 border-0 group-hover:opacity-100" aria-label="Navigate to header"><div class="w-6 h-6 text-gray-400 rounded-md flex items-center justify-center zinc-box bg-white ring-1 ring-gray-400/30 dark:ring-gray-700/25 hover:ring-gray-400/60 dark:hover:ring-white/20"><svg xmlns="http://www.w3.org/2000/svg" fill="gray" height="12px" viewBox="0 0 576 512"><path d="M0 256C0 167.6 71.6 96 160 96h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C98.1 144 48 194.1 48 256s50.1 112 112 112h72c13.3 0 24 10.7 24 24s-10.7 24-24 24H160C71.6 416 0 344.4 0 256zm576 0c0 88.4-71.6 160-160 160H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c61.9 0 112-50.1 112-112s-50.1-112-112-112H344c-13.3 0-24-10.7-24-24s10.7-24 24-24h72c88.4 0 160 71.6 160 160zM184 232H392c13.3 0 24 10.7 24 24s-10.7 24-24 24H184c-13.3 0-24-10.7-24-24s10.7-24 24-24z"></path></svg></div></a></div><span class="cursor-pointer">Implement more complex visualizations</span></h2> <p>If you want to implement more complex visualizations, you can use Python visualization libraries to visualize your data.</p> <p>Morph recommends using Plotly and Matplotlib for data visualization. Create an object for visualization in these libraries, write a function to return it and execute it, and Morph’s CLI will automatically execute the visualization part. Below are some sample visualizations using Plotly and Matplotlib.</p> <p><strong>Plotly</strong></p> <div class="mt-5 mb-8 not-prose rounded-xl relative text-gray-50 bg-[#0F1117] dark:bg-codeblock dark:ring-1 dark:ring-gray-800/50 codeblock-dark"><div class="min-w-full relative text-sm leading-6 children:!my-0 children:!shadow-none children:!bg-transparent transition-[height] duration-300 ease-in-out" style="font-variant-ligatures:none;height:auto"><div class="overflow-x-auto h-full p-5 overflow-y-hidden scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-white/20 dark:scrollbar-thumb-white/20 hover:scrollbar-thumb-white/25 dark:hover:scrollbar-thumb-white/25 active:scrollbar-thumb-white/25 dark:active:scrollbar-thumb-white/25"><pre class="language-python"><code class="language-python"><span class=""><span class="token keyword">import</span> plotly<span class="token punctuation">.</span>express <span class="token keyword">as</span> px</span>  <span class=""><span class="token keyword">import</span> morph</span> <span class=""><span class="token keyword">from</span> morph <span class="token keyword">import</span> MorphGlobalContext</span>  <span class=""><span class="token decorator annotation punctuation">@morph<span class="token punctuation">.</span>func</span><span class="token punctuation">(</span></span> <span class=""> name<span class="token operator">=</span><span class="token string">"${MORPH_NAME}"</span><span class="token punctuation">,</span></span> <span class=""> description<span class="token operator">=</span><span class="token string">"${MORPH_DESCRIPTION}"</span><span class="token punctuation">,</span></span> <span class=""><span class="token punctuation">)</span></span> <span class=""><span class="token decorator annotation punctuation">@morph<span class="token punctuation">.</span>load_data</span><span class="token punctuation">(</span><span class="token string">"${MORPH_PARENT_NAME}"</span><span class="token punctuation">)</span></span> <span class=""><span class="token keyword">def</span> <span class="token function">main</span><span class="token punctuation">(</span>context<span class="token punctuation">:</span> MorphGlobalContext<span class="token punctuation">)</span> <span class="token operator">-</span><span class="token operator">></span> px<span class="token punctuation">.</span>line<span class="token punctuation">:</span></span> <span class=""> data <span class="token operator">=</span> context<span class="token punctuation">.</span>data<span class="token punctuation">[</span><span class="token string">"${MORPH_PARENT_NAME}"</span><span class="token punctuation">]</span></span> <span class=""> <span class="token comment"># This is where you write your code.</span></span> <span class=""> <span class="token comment"># The `px.line` function creates a line plot using Plotly Express.</span></span> <span class=""> fig <span class="token operator">=</span> px<span class="token punctuation">.</span>line<span class="token punctuation">(</span>data<span class="token punctuation">,</span> x<span class="token operator">=</span><span class="token string">"X Axis"</span><span class="token punctuation">,</span> y<span class="token operator">=</span><span class="token string">"Y Axis"</span><span class="token punctuation">,</span> markers<span class="token operator">=</span><span class="token boolean">True</span><span class="token punctuation">)</span></span> <span class=""> fig<span class="token punctuation">.</span>update_layout<span class="token punctuation">(</span>title<span class="token operator">=</span><span class="token string">"Plotly Plot"</span><span class="token punctuation">)</span></span> <span class=""> <span class="token keyword">return</span> fig</span> </code></pre></div></div></div> <p><strong>Matplotlib</strong></p> <div class="mt-5 mb-8 not-prose rounded-xl relative text-gray-50 bg-[#0F1117] dark:bg-codeblock dark:ring-1 dark:ring-gray-800/50 codeblock-dark"><div class="min-w-full relative text-sm leading-6 children:!my-0 children:!shadow-none children:!bg-transparent transition-[height] duration-300 ease-in-out" style="font-variant-ligatures:none;height:auto"><div class="overflow-x-auto h-full p-5 overflow-y-hidden scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-white/20 dark:scrollbar-thumb-white/20 hover:scrollbar-thumb-white/25 dark:hover:scrollbar-thumb-white/25 active:scrollbar-thumb-white/25 dark:active:scrollbar-thumb-white/25"><pre class="language-python"><code class="language-python"><span class=""><span class="token keyword">import</span> matplotlib<span class="token punctuation">.</span>pyplot <span class="token keyword">as</span> plt</span>  <span class=""><span class="token keyword">import</span> morph</span> <span class=""><span class="token keyword">from</span> morph <span class="token keyword">import</span> MorphGlobalContext</span>  <span class=""><span class="token decorator annotation punctuation">@morph<span class="token punctuation">.</span>func</span><span class="token punctuation">(</span></span> <span class=""> name<span class="token operator">=</span><span class="token string">"${MORPH_NAME}"</span><span class="token punctuation">,</span></span> <span class=""> description<span class="token operator">=</span><span class="token string">"${MORPH_DESCRIPTION}"</span><span class="token punctuation">,</span></span> <span class=""><span class="token punctuation">)</span></span> <span class=""><span class="token decorator annotation punctuation">@morph<span class="token punctuation">.</span>load_data</span><span class="token punctuation">(</span><span class="token string">"${MORPH_PARENT_NAME}"</span><span class="token punctuation">)</span></span> <span class=""><span class="token keyword">def</span> <span class="token function">main</span><span class="token punctuation">(</span>context<span class="token punctuation">:</span> MorphGlobalContext<span class="token punctuation">)</span> <span class="token operator">-</span><span class="token operator">></span> plt<span class="token punctuation">.</span>Figure<span class="token punctuation">:</span></span> <span class=""> data <span class="token operator">=</span> context<span class="token punctuation">.</span>data<span class="token punctuation">[</span><span class="token string">"${MORPH_PARENT_NAME}"</span><span class="token punctuation">]</span></span> <span class=""> <span class="token comment"># This is where you write your code.</span></span> <span class=""> <span class="token comment"># The `plot` function creates a line plot using Matplotlib.</span></span> <span class=""> fig<span class="token punctuation">,</span> ax <span class="token operator">=</span> plt<span class="token punctuation">.</span>subplots<span class="token punctuation">(</span><span class="token punctuation">)</span></span> <span class=""> ax<span class="token punctuation">.</span>plot<span class="token punctuation">(</span>data<span class="token punctuation">[</span><span class="token string">"X-Axis"</span><span class="token punctuation">]</span><span class="token punctuation">,</span> data<span class="token punctuation">[</span><span class="token string">"Y-Axis"</span><span class="token punctuation">]</span><span class="token punctuation">,</span> marker<span class="token operator">=</span><span class="token string">"o"</span><span class="token punctuation">)</span></span> <span class=""> ax<span class="token punctuation">.</span>set_title<span class="token punctuation">(</span><span class="token string">"Matplotlib Plot"</span><span class="token punctuation">)</span></span> <span class=""> ax<span class="token punctuation">.</span>set_xlabel<span class="token punctuation">(</span><span class="token string">"X-Axis"</span><span class="token punctuation">)</span></span> <span class=""> ax<span class="token punctuation">.</span>set_ylabel<span class="token punctuation">(</span><span class="token string">"Y-Axis"</span><span class="token punctuation">)</span></span> <span class=""> <span class="token keyword">return</span> fig</span> </code></pre></div></div></div> <div class="my-4 px-5 py-4 overflow-hidden rounded-xl flex gap-3 border border-emerald-500/20 bg-emerald-50/50 dark:border-emerald-500/30 dark:bg-emerald-500/10"><div class="mt-0.5 w-4"><svg width="11" height="14" viewBox="0 0 11 14" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="text-emerald-600 dark:text-emerald-400/80 w-3.5 h-auto" aria-label="Tip"><path d="M3.12794 12.4232C3.12794 12.5954 3.1776 12.7634 3.27244 12.907L3.74114 13.6095C3.88471 13.8248 4.21067 14 4.46964 14H6.15606C6.41415 14 6.74017 13.825 6.88373 13.6095L7.3508 12.9073C7.43114 12.7859 7.49705 12.569 7.49705 12.4232L7.50055 11.3513H3.12521L3.12794 12.4232ZM5.31288 0C2.52414 0.00875889 0.5 2.26889 0.5 4.78826C0.5 6.00188 0.949566 7.10829 1.69119 7.95492C2.14321 8.47011 2.84901 9.54727 3.11919 10.4557C3.12005 10.4625 3.12175 10.4698 3.12261 10.4771H7.50342C7.50427 10.4698 7.50598 10.463 7.50684 10.4557C7.77688 9.54727 8.48281 8.47011 8.93484 7.95492C9.67728 7.13181 10.1258 6.02703 10.1258 4.78826C10.1258 2.15486 7.9709 0.000106649 5.31288 0ZM7.94902 7.11267C7.52078 7.60079 6.99082 8.37878 6.6077 9.18794H4.02051C3.63739 8.37878 3.10743 7.60079 2.67947 7.11294C2.11997 6.47551 1.8126 5.63599 1.8126 4.78826C1.8126 3.09829 3.12794 1.31944 5.28827 1.3126C7.2435 1.3126 8.81315 2.88226 8.81315 4.78826C8.81315 5.63599 8.50688 6.47551 7.94902 7.11267ZM4.87534 2.18767C3.66939 2.18767 2.68767 3.16939 2.68767 4.37534C2.68767 4.61719 2.88336 4.81288 3.12521 4.81288C3.36705 4.81288 3.56274 4.61599 3.56274 4.37534C3.56274 3.6515 4.1515 3.06274 4.87534 3.06274C5.11719 3.06274 5.31288 2.86727 5.31288 2.62548C5.31288 2.38369 5.11599 2.18767 4.87534 2.18767Z"></path></svg></div><div class="text-sm prose min-w-0 text-emerald-900 dark:text-emerald-200"><p>These visualizations output the results of the execution in HTML and PNG. If you want to access these raw data, you can specify the output destination with <code>@morph.func</code>’s <code>output_paths</code>. By specifying <code>@morph.func(output_paths=[‘/tmp/morph/{name}/{now()}{ext()}’])</code> in this way, the output is output to <code>_private/{name of function}/{time stamp of execution}{.png, .html}</code>.</p></div></div></div><div class="leading-6 mt-14"><div class="mb-12 px-0.5 flex items-center text-sm font-semibold text-gray-700 dark:text-gray-200"><a class="flex items-center space-x-3 group" href="/docs/en/workspace/template"><svg viewBox="0 0 3 6" class="h-1.5 stroke-gray-400 overflow-visible group-hover:stroke-gray-600 dark:group-hover:stroke-gray-300"><path d="M3 0L0 3L3 6" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="group-hover:text-gray-900 dark:group-hover:text-white">Template</span></a><a class="flex items-center ml-auto space-x-3 group" href="/docs/en/workspace/data-application"><span class="group-hover:text-gray-900 dark:group-hover:text-white">Data Applications</span><svg viewBox="0 0 3 6" class="rotate-180 h-1.5 stroke-gray-400 overflow-visible group-hover:stroke-gray-600 dark:group-hover:stroke-gray-300"><path d="M3 0L0 3L3 6" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></a></div><footer id="footer" class="flex gap-12 justify-between pt-10 border-t border-gray-100 sm:flex dark:border-gray-800/50 pb-28"><div class="flex gap-6"><a href="https://x.com/morphdbHQ" target="_blank"><span class="sr-only">x</span><svg class="w-5 h-5 bg-gray-400 dark:bg-gray-500 hover:bg-gray-500 dark:hover:bg-gray-400" style="-webkit-mask-image:url(https://mintlify.b-cdn.net/v6.6.0/brands/x-twitter.svg);-webkit-mask-repeat:no-repeat;-webkit-mask-position:center"></svg></a><a href="https://github.com/useMorph" target="_blank"><span class="sr-only">github</span><svg class="w-5 h-5 bg-gray-400 dark:bg-gray-500 hover:bg-gray-500 dark:hover:bg-gray-400" style="-webkit-mask-image:url(https://mintlify.b-cdn.net/v6.6.0/brands/github.svg);-webkit-mask-repeat:no-repeat;-webkit-mask-position:center"></svg></a><a href="https://www.linkedin.com/company/morphdbhq" target="_blank"><span class="sr-only">linkedin</span><svg class="w-5 h-5 bg-gray-400 dark:bg-gray-500 hover:bg-gray-500 dark:hover:bg-gray-400" style="-webkit-mask-image:url(https://mintlify.b-cdn.net/v6.6.0/brands/linkedin.svg);-webkit-mask-repeat:no-repeat;-webkit-mask-position:center"></svg></a></div><div class="flex items-center justify-between"><div class="sm:flex"><a href="https://mintlify.com/preview-request?utm_campaign=poweredBy&utm_medium=docs&utm_source=docs.morph-data.io" target="_blank" rel="noreferrer" class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">Powered by Mintlify</a></div></div></footer></div></div><div class="z-10 hidden xl:flex pl-10 box-border w-[19rem]" id="table-of-contents"><div id="table-of-contents-content" class="fixed text-gray-600 text-sm leading-6 w-[16.5rem] overflow-y-auto space-y-2 h-[calc(100%-10rem)]"><div class="text-gray-700 dark:text-gray-300 font-medium flex items-center space-x-2"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" xmlns="http://www.w3.org/2000/svg" class="h-3 w-3"><path d="M2.44434 12.6665H13.5554" stroke-linecap="round" stroke-linejoin="round"></path><path d="M2.44434 3.3335H13.5554" stroke-linecap="round" stroke-linejoin="round"></path><path d="M2.44434 8H7.33323" stroke-linecap="round" stroke-linejoin="round"></path></svg><span>On this page</span></div><ul><li><a href="#using-the-visualization-function" class="py-1 block font-medium hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300">Using the visualization function</a></li><li style="margin-left:1rem"><a href="#treatment" class="group flex items-start py-1 whitespace-pre-wrap text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300">Treatment</a></li><li style="margin-left:1rem"><a href="#visualization-sample" class="group flex items-start py-1 whitespace-pre-wrap text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300">Visualization sample</a></li><li><a href="#implement-more-complex-visualizations" class="py-1 block font-medium hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300">Implement more complex visualizations</a></li></ul></div></div></div></div></div></div></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"mdxSource":{"compiledSource":"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const _components = Object.assign({\n p: \"p\",\n strong: \"strong\",\n pre: \"pre\",\n code: \"code\",\n span: \"span\"\n }, _provideComponents(), props.components), {Heading, ZoomImage, CodeBlock, Tip} = _components;\n if (!CodeBlock) _missingMdxReference(\"CodeBlock\", true);\n if (!Heading) _missingMdxReference(\"Heading\", true);\n if (!Tip) _missingMdxReference(\"Tip\", true);\n if (!ZoomImage) _missingMdxReference(\"ZoomImage\", true);\n return _jsxs(_Fragment, {\n children: [_jsx(_components.p, {\n children: \"Visualization is crucial to understanding data. This section shows you how to visualise data on the Morph workspace.\"\n }), \"\\n\", _jsx(Heading, {\n level: \"2\",\n id: \"using-the-visualization-function\",\n children: \"Using the visualization function\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Morph provides a function for realising simple visualizations in the GUI by creating a file with the extension vg.json.\\nTo realise general visualizations such as bar charts and line graphs, the visualization results can be immediately obtained by aggregating the original data.\"\n }), \"\\n\", _jsx(Heading, {\n level: \"3\",\n id: \"treatment\",\n children: \"Treatment\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"First, open the SQL, Python file containing the aggregated source data for the data you want to visualize.\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"When you open the file, an icon to start the visualization function appears in the top right-hand corner. Click here.\"\n }), \"\\n\", _jsx(ZoomImage, {\n children: _jsx(\"img\", {\n src: \"https://mintlify.s3-us-west-1.amazonaws.com/queue-4c50ebb3/assets/images/docs/visualization-how-to-start.png\",\n alt: \"vg-json-editor\"\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"A file with the extension vg.json is generated on the same level of the directory. Open that file.\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"A GUI screen for visualization will appear as follows. Set each value and a beautiful graph will be displayed in real time.\"\n }), \"\\n\", _jsx(ZoomImage, {\n children: _jsx(\"img\", {\n src: \"https://mintlify.s3-us-west-1.amazonaws.com/queue-4c50ebb3/assets/images/docs/visualization-overview.png\",\n alt: \"vg-json-editor\"\n })\n }), \"\\n\", _jsx(Heading, {\n level: \"3\",\n id: \"visualization-sample\",\n children: \"Visualization sample\"\n }), \"\\n\", _jsx(\"iframe\", {\n src: \"https://www.loom.com/embed/9274b8d8cc214161a5d22d67516ceeda?sid=c1a9dbf7-ff99-4b3d-b6d6-60e420c4e21a\",\n controls: true,\n className: \"w-full aspect-video\"\n }), \"\\n\", _jsx(Heading, {\n level: \"2\",\n id: \"implement-more-complex-visualizations\",\n children: \"Implement more complex visualizations\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"If you want to implement more complex visualizations, you can use Python visualization libraries to visualize your data.\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Morph recommends using Plotly and Matplotlib for data visualization. Create an object for visualization in these libraries, write a function to return it and execute it, and Morph’s CLI will automatically execute the visualization part.\\nBelow are some sample visualizations using Plotly and Matplotlib.\"\n }), \"\\n\", _jsx(_components.p, {\n children: _jsx(_components.strong, {\n children: \"Plotly\"\n })\n }), \"\\n\", _jsx(CodeBlock, {\n filename: \"\",\n expandable: \"false\",\n children: _jsx(_components.pre, {\n className: \"language-python\",\n children: _jsxs(_components.code, {\n className: \"language-python\",\n children: [_jsxs(_components.span, {\n className: \"\",\n children: [_jsx(_components.span, {\n className: \"token keyword\",\n children: \"import\"\n }), \" plotly\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), \"express \", _jsx(_components.span, {\n className: \"token keyword\",\n children: \"as\"\n }), \" px\"]\n }), \"\\n\", \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [_jsx(_components.span, {\n className: \"token keyword\",\n children: \"import\"\n }), \" morph\"]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [_jsx(_components.span, {\n className: \"token keyword\",\n children: \"from\"\n }), \" morph \", _jsx(_components.span, {\n className: \"token keyword\",\n children: \"import\"\n }), \" MorphGlobalContext\"]\n }), \"\\n\", \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [_jsxs(_components.span, {\n className: \"token decorator annotation punctuation\",\n children: [\"@morph\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), \"func\"]\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [\" name\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"\\\"${MORPH_NAME}\\\"\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [\" description\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"\\\"${MORPH_DESCRIPTION}\\\"\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"\",\n children: _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [_jsxs(_components.span, {\n className: \"token decorator annotation punctuation\",\n children: [\"@morph\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), \"load_data\"]\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"\\\"${MORPH_PARENT_NAME}\\\"\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [_jsx(_components.span, {\n className: \"token keyword\",\n children: \"def\"\n }), \" \", _jsx(_components.span, {\n className: \"token function\",\n children: \"main\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), \"context\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \":\"\n }), \" MorphGlobalContext\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), \" \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"-\"\n }), _jsx(_components.span, {\n className: \"token operator\",\n children: \"\u003e\"\n }), \" px\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), \"line\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \":\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [\" data \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), \" context\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), \"data\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"[\"\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"\\\"${MORPH_PARENT_NAME}\\\"\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"]\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [\" \", _jsx(_components.span, {\n className: \"token comment\",\n children: \"# This is where you write your code.\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [\" \", _jsx(_components.span, {\n className: \"token comment\",\n children: \"# The `px.line` function creates a line plot using Plotly Express.\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [\" fig \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), \" px\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), \"line\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), \"data\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \" x\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"\\\"X Axis\\\"\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \" y\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"\\\"Y Axis\\\"\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \" markers\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), _jsx(_components.span, {\n className: \"token boolean\",\n children: \"True\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [\" fig\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), \"update_layout\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), \"title\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"\\\"Plotly Plot\\\"\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [\" \", _jsx(_components.span, {\n className: \"token keyword\",\n children: \"return\"\n }), \" fig\"]\n }), \"\\n\"]\n })\n })\n }), \"\\n\", _jsx(_components.p, {\n children: _jsx(_components.strong, {\n children: \"Matplotlib\"\n })\n }), \"\\n\", _jsx(CodeBlock, {\n filename: \"\",\n expandable: \"false\",\n children: _jsx(_components.pre, {\n className: \"language-python\",\n children: _jsxs(_components.code, {\n className: \"language-python\",\n children: [_jsxs(_components.span, {\n className: \"\",\n children: [_jsx(_components.span, {\n className: \"token keyword\",\n children: \"import\"\n }), \" matplotlib\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), \"pyplot \", _jsx(_components.span, {\n className: \"token keyword\",\n children: \"as\"\n }), \" plt\"]\n }), \"\\n\", \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [_jsx(_components.span, {\n className: \"token keyword\",\n children: \"import\"\n }), \" morph\"]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [_jsx(_components.span, {\n className: \"token keyword\",\n children: \"from\"\n }), \" morph \", _jsx(_components.span, {\n className: \"token keyword\",\n children: \"import\"\n }), \" MorphGlobalContext\"]\n }), \"\\n\", \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [_jsxs(_components.span, {\n className: \"token decorator annotation punctuation\",\n children: [\"@morph\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), \"func\"]\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [\" name\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"\\\"${MORPH_NAME}\\\"\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [\" description\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"\\\"${MORPH_DESCRIPTION}\\\"\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"\",\n children: _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [_jsxs(_components.span, {\n className: \"token decorator annotation punctuation\",\n children: [\"@morph\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), \"load_data\"]\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"\\\"${MORPH_PARENT_NAME}\\\"\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [_jsx(_components.span, {\n className: \"token keyword\",\n children: \"def\"\n }), \" \", _jsx(_components.span, {\n className: \"token function\",\n children: \"main\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), \"context\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \":\"\n }), \" MorphGlobalContext\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), \" \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"-\"\n }), _jsx(_components.span, {\n className: \"token operator\",\n children: \"\u003e\"\n }), \" plt\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), \"Figure\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \":\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [\" data \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), \" context\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), \"data\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"[\"\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"\\\"${MORPH_PARENT_NAME}\\\"\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"]\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [\" \", _jsx(_components.span, {\n className: \"token comment\",\n children: \"# This is where you write your code.\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [\" \", _jsx(_components.span, {\n className: \"token comment\",\n children: \"# The `plot` function creates a line plot using Matplotlib.\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [\" fig\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \" ax \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), \" plt\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), \"subplots\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [\" ax\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), \"plot\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), \"data\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"[\"\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"\\\"X-Axis\\\"\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"]\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \" data\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"[\"\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"\\\"Y-Axis\\\"\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"]\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \" marker\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"\\\"o\\\"\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [\" ax\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), \"set_title\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"\\\"Matplotlib Plot\\\"\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [\" ax\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), \"set_xlabel\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"\\\"X-Axis\\\"\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [\" ax\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), \"set_ylabel\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"\\\"Y-Axis\\\"\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [\" \", _jsx(_components.span, {\n className: \"token keyword\",\n children: \"return\"\n }), \" fig\"]\n }), \"\\n\"]\n })\n })\n }), \"\\n\", _jsx(Tip, {\n children: _jsxs(_components.p, {\n children: [\"These visualizations output the results of the execution in HTML and PNG. If you want to access these raw data, you can specify the output destination with \", _jsx(_components.code, {\n children: \"@morph.func\"\n }), \"’s \", _jsx(_components.code, {\n children: \"output_paths\"\n }), \".\\nBy specifying \", _jsx(_components.code, {\n children: \"@morph.func(output_paths=[‘/tmp/morph/{name}/{now()}{ext()}’])\"\n }), \" in this way, the output is output to \", _jsx(_components.code, {\n children: \"_private/{name of function}/{time stamp of execution}{.png, .html}\"\n }), \".\"]\n })\n })]\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n children: _jsx(_createMdxContent, props)\n })) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{},"scope":{"mintConfig":{"$schema":"https://mintlify.com/schema.json","name":"Docs","logo":{"light":"https://mintlify.s3-us-west-1.amazonaws.com/queue-4c50ebb3/assets/images/morph_logo_svg.svg","dark":"https://mintlify.s3-us-west-1.amazonaws.com/queue-4c50ebb3/assets/images/morph_logo_svg_w.svg"},"favicon":"/favicon.svg","versions":["English","日本語"],"colors":{"primary":"#030712","light":"#f9fafb","dark":"#030712","anchors":{"from":"#0D9373","to":"#07C983"}},"topbarCtaButton":{"name":"Website","url":"https://www.morphdb.io"},"topbarLinks":[],"navigation":[{"group":"Getting Started","version":"English","pages":["docs/en/getting-started/why-morph","docs/en/getting-started/how-morph-works"]},{"group":"Workspace","version":"English","pages":["docs/en/workspace/about-workspace","docs/en/workspace/environment","docs/en/workspace/vscode-extensions","docs/en/workspace/sql-python","docs/en/workspace/template","docs/en/workspace/visualization","docs/en/workspace/data-application","docs/en/workspace/about-canvas","docs/en/workspace/job-schedule"]},{"group":"Data Sources","version":"English","pages":["docs/en/data-sources/builtin-postgres","docs/en/data-sources/connectors"]},{"group":"Morph AI","version":"English","pages":["docs/en/morph-ai/features-of-morphai","docs/en/morph-ai/code-generation","docs/en/morph-ai/code-assistant","docs/en/morph-ai/data-pipeline-builder"]},{"group":"Rest API","version":"English","pages":["docs/en/rest-api/overview","docs/en/rest-api/authentication","docs/en/rest-api/quickstart"]},{"group":"Team Setting","version":"English","pages":["docs/en/team-setting/credit","docs/en/team-setting/manage-members"]},{"group":"SQL","version":"English","pages":["sql-python/en/sql/quickstart-sql","sql-python/en/sql/config","sql-python/en/sql/load_data","sql-python/en/sql/variables"]},{"group":"Python","version":"English","pages":["sql-python/en/python/quickstart-python","sql-python/en/python/how-to-install-pip","sql-python/en/python/env-vars","sql-python/en/python/morph-global-context","sql-python/en/python/morph-func","sql-python/en/python/morph-load_data","sql-python/en/python/morph-variables","sql-python/en/python/morphlib-execute_sql","sql-python/en/python/morphlib-insert_records","sql-python/en/python/morphlib-update_records","sql-python/en/python/morphlib-insert_or_update_records","sql-python/en/python/morphlib-delete_records"]},{"group":"Framework","version":"English","pages":["sql-python/en/framework/overview","sql-python/en/framework/morph-project","sql-python/en/framework/output-paths"]},{"group":"CLI Commands","version":"English","pages":["sql-python/en/cli-commands/run","sql-python/en/cli-commands/create","sql-python/en/cli-commands/compile","sql-python/en/cli-commands/clean","sql-python/en/cli-commands/template","sql-python/en/cli-commands/init","sql-python/en/cli-commands/new","sql-python/en/cli-commands/print"]},{"group":"Getting Started","version":"English","pages":["data-application/en/how-to-build-data-application","data-application/en/mdx-setup","data-application/en/layout-components","data-application/en/custom-components","data-application/en/update-library"]},{"group":"MDX Deep Dive","version":"English","pages":["data-application/en/mdx-1-basic","data-application/en/mdx-2-styling","data-application/en/mdx-3-js"]},{"group":"Using Morph Data","version":"English","pages":["data-application/en/morph-data-basic","data-application/en/morph-data-getjson","data-application/en/morph-data-data-table","data-application/en/morph-data-embed","data-application/en/morph-data-metrics","data-application/en/use-variables","data-application/en/morph-data-variable-input","data-application/en/morph-data-variable-date-picker","data-application/en/morph-data-variable-select"]},{"group":"Connect SQL","version":"English","pages":["integrations/en/database/snowflake","integrations/en/database/bigquery","integrations/en/database/redshift","integrations/en/database/mysql","integrations/en/database/postgresql","integrations/en/database/athena"]},{"group":"Connect SaaS","version":"English","pages":["integrations/en/saas/airtable","integrations/en/saas/attio","integrations/en/saas/freee","integrations/en/saas/hubspot","integrations/en/saas/intercom","integrations/en/saas/linear","integrations/en/saas/mailchimp","integrations/en/saas/notion","integrations/en/saas/salesforce","integrations/en/saas/stripe"]},{"group":"Getting Started","version":"English","pages":["sample-data-app/en/introduction/about-sample-apps","sample-data-app/en/introduction/how-to-use"]},{"group":"Sample Data Apps","version":"English","pages":["sample-data-app/en/aws-cost-report","sample-data-app/en/google-analytics-conversion"]},{"group":"Support","version":"English","pages":["troubleshooting/en/support/contact-support"]},{"group":"Workspace","version":"English","pages":["troubleshooting/en/workspace/mdx-api-error","troubleshooting/en/workspace/mdx-bad-gateway"]},{"group":"Changelog","version":"English","pages":["changelog/en/2024-changelog"]},{"group":"Getting Started","version":"日本語","pages":["docs/ja/getting-started/why-morph","docs/ja/getting-started/how-morph-works"]},{"group":"Workspace","version":"日本語","pages":["docs/ja/workspace/about-workspace","docs/ja/workspace/environment","docs/ja/workspace/vscode-extensions","docs/ja/workspace/sql-python","docs/ja/workspace/template","docs/ja/workspace/visualization","docs/ja/workspace/data-application","docs/ja/workspace/about-canvas","docs/ja/workspace/job-schedule"]},{"group":"Data Sources","version":"日本語","pages":["docs/ja/data-sources/builtin-postgres","docs/ja/data-sources/connectors"]},{"group":"Morph AI","version":"日本語","pages":["docs/ja/morph-ai/features-of-morphai","docs/ja/morph-ai/code-generation","docs/ja/morph-ai/code-assistant","docs/ja/morph-ai/data-pipeline-builder"]},{"group":"Rest API","version":"日本語","pages":["docs/ja/rest-api/overview","docs/ja/rest-api/authentication","docs/ja/rest-api/quickstart"]},{"group":"Team Setting","version":"日本語","pages":["docs/ja/team-setting/credit","docs/ja/team-setting/manage-members"]},{"group":"SQL","version":"日本語","pages":["sql-python/ja/sql/quickstart-sql","sql-python/ja/sql/config","sql-python/ja/sql/load_data","sql-python/ja/sql/variables"]},{"group":"Python","version":"日本語","pages":["sql-python/ja/python/quickstart-python","sql-python/ja/python/how-to-install-pip","sql-python/ja/python/env-vars","sql-python/ja/python/morph-global-context","sql-python/ja/python/morph-func","sql-python/ja/python/morph-load_data","sql-python/ja/python/morph-variables","sql-python/ja/python/morphlib-execute_sql","sql-python/ja/python/morphlib-insert_records","sql-python/ja/python/morphlib-update_records","sql-python/ja/python/morphlib-insert_or_update_records","sql-python/ja/python/morphlib-delete_records"]},{"group":"Framework","version":"日本語","pages":["sql-python/ja/framework/overview","sql-python/ja/framework/morph-project","sql-python/ja/framework/output-paths"]},{"group":"CLI Commands","version":"日本語","pages":["sql-python/ja/cli-commands/run","sql-python/ja/cli-commands/create","sql-python/ja/cli-commands/compile","sql-python/ja/cli-commands/clean","sql-python/ja/cli-commands/template","sql-python/ja/cli-commands/init","sql-python/ja/cli-commands/new","sql-python/ja/cli-commands/print"]},{"group":"Getting Started","version":"日本語","pages":["data-application/ja/how-to-build-data-application","data-application/ja/mdx-setup","data-application/ja/layout-components","data-application/ja/custom-components","data-application/ja/update-library"]},{"group":"MDX 詳解","version":"日本語","pages":["data-application/ja/mdx-1-basic","data-application/ja/mdx-2-styling","data-application/ja/mdx-3-js"]},{"group":"Morphのデータを扱う","version":"日本語","pages":["data-application/ja/morph-data-basic","data-application/ja/morph-data-getjson","data-application/ja/morph-data-data-table","data-application/ja/morph-data-embed","data-application/ja/morph-data-metrics","data-application/ja/use-variables","data-application/ja/morph-data-variable-input","data-application/ja/morph-data-variable-date-picker","data-application/ja/morph-data-variable-select"]},{"group":"SQLデータベースに接続する","version":"日本語","pages":["integrations/ja/database/snowflake","integrations/ja/database/bigquery","integrations/ja/database/redshift","integrations/ja/database/mysql","integrations/ja/database/postgresql","integrations/ja/database/athena"]},{"group":"SaaSに接続する","version":"日本語","pages":["integrations/ja/saas/airtable","integrations/ja/saas/attio","integrations/ja/saas/freee","integrations/ja/saas/hubspot","integrations/ja/saas/intercom","integrations/ja/saas/linear","integrations/ja/saas/mailchimp","integrations/ja/saas/notion","integrations/ja/saas/salesforce","integrations/ja/saas/stripe"]},{"group":"Getting Started","version":"日本語","pages":["sample-data-app/ja/introduction/about-sample-apps","sample-data-app/ja/introduction/how-to-use"]},{"group":"サンプルデータアプリ","version":"日本語","pages":["sample-data-app/ja/aws-cost-report","sample-data-app/ja/google-analytics-conversion"]},{"group":"サポート","version":"日本語","pages":["troubleshooting/ja/support/contact-support"]},{"group":"ワークスペース","version":"日本語","pages":["troubleshooting/ja/workspace/mdx-api-error","troubleshooting/ja/workspace/mdx-bad-gateway"]},{"group":"Changelog","version":"日本語","pages":["changelog/ja/2024-changelog"]}],"anchors":[{"name":"Blog","url":"https://www.morphdb.io/blogs","icon":"newspaper","_id":"6731df83c7431aae17f0081b"},{"name":"Data App Example","url":"https://stackblitz.com/edit/vitejs-vite-7fyrdn?file=src%2Findex.mdx","icon":"code","_id":"6731df83c7431aae17f0081c"}],"tabs":[{"name":"Guides","url":"docs","_id":"6731df83c7431aae17f00814"},{"name":"SQL \u0026 Python","url":"sql-python","_id":"6731df83c7431aae17f00815"},{"name":"Data Application","url":"data-application","_id":"6731df83c7431aae17f00816"},{"name":"Integrations","url":"integrations","_id":"6731df83c7431aae17f00817"},{"name":"Sample Data Apps","url":"sample-data-app","_id":"6731df83c7431aae17f00818"},{"name":"Troubleshooting","url":"troubleshooting","_id":"6731df83c7431aae17f00819"},{"name":"Changelog","url":"changelog","_id":"6731df83c7431aae17f0081a"}],"footerSocials":{"x":"https://x.com/morphdbHQ","github":"https://github.com/useMorph","linkedin":"https://www.linkedin.com/company/morphdbhq"},"repo":{"github":{"owner":"usemorph","repo":"morph-docs-2","contentDirectory":"","deployBranch":"main","isPrivate":true}}},"pageMetadata":{"title":"Data Visualization","description":null,"href":"/docs/en/workspace/visualization"}}},"mdxExtracts":{"tableOfContents":[{"title":"Using the visualization function","slug":"using-the-visualization-function","depth":2,"children":[{"title":"Treatment","slug":"treatment","depth":3,"children":[]},{"title":"Visualization sample","slug":"visualization-sample","depth":3,"children":[]}]},{"title":"Implement more complex visualizations","slug":"implement-more-complex-visualizations","depth":2,"children":[]}],"codeExamples":{}},"description":null,"pageData":{"navWithMetadata":[{"group":"Getting Started","version":"English","pages":[{"title":"Why Morph?","description":null,"href":"/docs/en/getting-started/why-morph"},{"title":"How Morph Works","description":null,"href":"/docs/en/getting-started/how-morph-works"}]},{"group":"Workspace","version":"English","pages":[{"title":"Workspace Overview","description":null,"href":"/docs/en/workspace/about-workspace"},{"title":"Development Environment","description":null,"href":"/docs/en/workspace/environment"},{"title":"VS Code Extensions","description":null,"href":"/docs/en/workspace/vscode-extensions"},{"title":"Build with SQL \u0026 Python","description":null,"href":"/docs/en/workspace/sql-python"},{"title":"Template","description":null,"href":"/docs/en/workspace/template"},{"title":"Data Visualization","description":null,"href":"/docs/en/workspace/visualization"},{"title":"Data Applications","description":null,"href":"/docs/en/workspace/data-application"},{"title":"Canvas","description":null,"href":"/docs/en/workspace/about-canvas"},{"title":"Job Scheduling","description":null,"href":"/docs/en/workspace/job-schedule"}]},{"group":"Data Sources","version":"English","pages":[{"title":"Built-in PostgreSQL","description":null,"href":"/docs/en/data-sources/builtin-postgres"},{"title":"Connectors: DB / DWH / SaaS","description":null,"href":"/docs/en/data-sources/connectors"}]},{"group":"Morph AI","version":"English","pages":[{"title":"Morph AI Features","description":null,"href":"/docs/en/morph-ai/features-of-morphai"},{"title":"Code Generation","description":null,"href":"/docs/en/morph-ai/code-generation"},{"title":"Coding Assistant","description":null,"href":"/docs/en/morph-ai/code-assistant"},{"title":"Data Pipeline Builder","description":null,"href":"/docs/en/morph-ai/data-pipeline-builder"}]},{"group":"Rest API","version":"English","pages":[{"title":"Overview","description":null,"href":"/docs/en/rest-api/overview"},{"title":"Authentication","description":null,"href":"/docs/en/rest-api/authentication"},{"title":"Quickstart","description":null,"href":"/docs/en/rest-api/quickstart"}]},{"group":"Team Setting","version":"English","pages":[{"title":"Credit","description":null,"href":"/docs/en/team-setting/credit"},{"title":"Manage Members","description":null,"href":"/docs/en/team-setting/manage-members"}]},{"group":"SQL","version":"English","pages":[{"title":"Quickstart - SQL","description":null,"href":"/sql-python/en/sql/quickstart-sql"},{"title":"config","description":null,"href":"/sql-python/en/sql/config"},{"title":"load_data","description":null,"href":"/sql-python/en/sql/load_data"},{"title":"Variables","description":null,"href":"/sql-python/en/sql/variables"}]},{"group":"Python","version":"English","pages":[{"title":"Quickstart - Python","description":null,"href":"/sql-python/en/python/quickstart-python"},{"title":"How to install pip packages","description":null,"href":"/sql-python/en/python/how-to-install-pip"},{"title":"Env vars","description":null,"href":"/sql-python/en/python/env-vars"},{"title":"MorphGlobalContext","description":null,"href":"/sql-python/en/python/morph-global-context"},{"title":"@morph.func","description":null,"href":"/sql-python/en/python/morph-func"},{"title":"@morph.load_data","description":null,"href":"/sql-python/en/python/morph-load_data"},{"title":"@morph.variables","description":null,"href":"/sql-python/en/python/morph-variables"},{"title":"morph_lib.database.execute_sql","description":null,"href":"/sql-python/en/python/morphlib-execute_sql"},{"title":"morph_lib.database.insert_records","description":null,"href":"/sql-python/en/python/morphlib-insert_records"},{"title":"morph_lib.database.update_records","description":null,"href":"/sql-python/en/python/morphlib-update_records"},{"title":"morph_lib.database.insert_or_update_records","description":null,"href":"/sql-python/en/python/morphlib-insert_or_update_records"},{"title":"morph_lib.database.delete_records","description":null,"href":"/sql-python/en/python/morphlib-delete_records"}]},{"group":"Framework","version":"English","pages":[{"title":"Overview","description":null,"href":"/sql-python/en/framework/overview"},{"title":"morph_project.yml","description":null,"href":"/sql-python/en/framework/morph-project"},{"title":"output_paths","description":null,"href":"/sql-python/en/framework/output-paths"}]},{"group":"CLI Commands","version":"English","pages":[{"title":"run","description":null,"href":"/sql-python/en/cli-commands/run"},{"title":"create","description":null,"href":"/sql-python/en/cli-commands/create"},{"title":"compile","description":null,"href":"/sql-python/en/cli-commands/compile"},{"title":"clean","description":null,"href":"/sql-python/en/cli-commands/clean"},{"title":"template","description":null,"href":"/sql-python/en/cli-commands/template"},{"title":"init","description":null,"href":"/sql-python/en/cli-commands/init"},{"title":"new","description":null,"href":"/sql-python/en/cli-commands/new"},{"title":"print","description":null,"href":"/sql-python/en/cli-commands/print"}]},{"group":"Getting Started","version":"English","pages":[{"title":"How to build data applications","description":null,"href":"/data-application/en/how-to-build-data-application"},{"title":"MDX Setup","description":null,"href":"/data-application/en/mdx-setup"},{"title":"Layout Components","description":null,"href":"/data-application/en/layout-components"},{"title":"Custom Components","description":null,"href":"/data-application/en/custom-components"},{"title":"Updating the Library","description":null,"href":"/data-application/en/update-library"}]},{"group":"MDX Deep Dive","version":"English","pages":[{"title":"Basic Usage","description":null,"href":"/data-application/en/mdx-1-basic"},{"title":"Styling","description":null,"href":"/data-application/en/mdx-2-styling"},{"title":"Using React and JavaScript","description":null,"href":"/data-application/en/mdx-3-js"}]},{"group":"Using Morph Data","version":"English","pages":[{"title":"How data fetching works","description":null,"href":"/data-application/en/morph-data-basic"},{"title":"getJson()","description":null,"href":"/data-application/en/morph-data-getjson"},{"title":"\u003cDataTable /\u003e","description":null,"href":"/data-application/en/morph-data-data-table"},{"title":"\u003cEmbed /\u003e","description":null,"href":"/data-application/en/morph-data-embed"},{"title":"\u003cMetrics /\u003e","description":null,"href":"/data-application/en/morph-data-metrics"},{"title":"Using Variables","description":null,"href":"/data-application/en/use-variables"},{"title":"\u003cVariableInput /\u003e","description":null,"href":"/data-application/en/morph-data-variable-input"},{"title":"\u003cVariableDatePicker /\u003e","description":null,"href":"/data-application/en/morph-data-variable-date-picker"},{"title":"\u003cVariableSelect /\u003e","description":null,"href":"/data-application/en/morph-data-variable-select"}]},{"group":"Connect SQL","version":"English","pages":[{"title":"Snowflake","description":null,"href":"/integrations/en/database/snowflake"},{"title":"BigQuery","description":null,"href":"/integrations/en/database/bigquery"},{"title":"Redshift","description":null,"href":"/integrations/en/database/redshift"},{"title":"MySQL","description":null,"href":"/integrations/en/database/mysql"},{"title":"PostgreSQL","description":null,"href":"/integrations/en/database/postgresql"},{"title":"AWS Athena","description":null,"href":"/integrations/en/database/athena"}]},{"group":"Connect SaaS","version":"English","pages":[{"title":"Airtable","description":null,"href":"/integrations/en/saas/airtable"},{"title":"Attio","description":null,"href":"/integrations/en/saas/attio"},{"title":"Freee","description":null,"href":"/integrations/en/saas/freee"},{"title":"Hubspot","description":null,"href":"/integrations/en/saas/hubspot"},{"title":"Intercom","description":null,"href":"/integrations/en/saas/intercom"},{"title":"Linear","description":null,"href":"/integrations/en/saas/linear"},{"title":"Mailchimp","description":null,"href":"/integrations/en/saas/mailchimp"},{"title":"Notion","description":null,"href":"/integrations/en/saas/notion"},{"title":"Salesforce","description":null,"href":"/integrations/en/saas/salesforce"},{"title":"Stripe","description":null,"href":"/integrations/en/saas/stripe"}]},{"group":"Getting Started","version":"English","pages":[{"title":"About Sample Data Apps","description":null,"href":"/sample-data-app/en/introduction/about-sample-apps"},{"title":"How to use Sample Data Apps","description":null,"href":"/sample-data-app/en/introduction/how-to-use"}]},{"group":"Sample Data Apps","version":"English","pages":[{"title":"AWS Cost Report","description":null,"href":"/sample-data-app/en/aws-cost-report"},{"title":"Google Analytics(GA4) Conversion Analysis","description":null,"href":"/sample-data-app/en/google-analytics-conversion"}]},{"group":"Support","version":"English","pages":[{"title":"Contact Support","description":null,"href":"/troubleshooting/en/support/contact-support"}]},{"group":"Workspace","version":"English","pages":[{"title":"MDX preview error - Unexpected end of JSON input","description":null,"href":"/troubleshooting/en/workspace/mdx-api-error"},{"title":"MDX preview error - Bad Gateway","description":null,"href":"/troubleshooting/en/workspace/mdx-bad-gateway"}]},{"group":"Changelog","version":"English","pages":[{"title":"2024 changelog","description":null,"href":"/changelog/en/2024-changelog"}]},{"group":"Getting Started","version":"日本語","pages":[{"title":"Morphの特徴","description":null,"href":"/docs/ja/getting-started/why-morph"},{"title":"使用の流れ","description":null,"href":"/docs/ja/getting-started/how-morph-works"}]},{"group":"Workspace","version":"日本語","pages":[{"title":"ワークスペースの概要","description":null,"href":"/docs/ja/workspace/about-workspace"},{"title":"開発環境について","description":null,"href":"/docs/ja/workspace/environment"},{"title":"VS Code Extensions","description":null,"href":"/docs/ja/workspace/vscode-extensions"},{"title":"SQL/Pythonで分析をする","description":null,"href":"/docs/ja/workspace/sql-python"},{"title":"テンプレート","description":null,"href":"/docs/ja/workspace/template"},{"title":"データを可視化をする","description":null,"href":"/docs/ja/workspace/visualization"},{"title":"データアプリケーションを構築する","description":null,"href":"/docs/ja/workspace/data-application"},{"title":"キャンバス: データフローの可視化","description":null,"href":"/docs/ja/workspace/about-canvas"},{"title":"ジョブスケジューリング","description":null,"href":"/docs/ja/workspace/job-schedule"}]},{"group":"Data Sources","version":"日本語","pages":[{"title":"データベース: ビルトインPostgreSQL","description":null,"href":"/docs/ja/data-sources/builtin-postgres"},{"title":"コネクター: DB / DWH / SaaS","description":null,"href":"/docs/ja/data-sources/connectors"}]},{"group":"Morph AI","version":"日本語","pages":[{"title":"Morph AIの機能","description":null,"href":"/docs/ja/morph-ai/features-of-morphai"},{"title":"コード生成","description":null,"href":"/docs/ja/morph-ai/code-generation"},{"title":"コーディングアシスタント","description":null,"href":"/docs/ja/morph-ai/code-assistant"},{"title":"データパイプラインの自動構築","description":null,"href":"/docs/ja/morph-ai/data-pipeline-builder"}]},{"group":"Rest API","version":"日本語","pages":[{"title":"REST APIの概要","description":null,"href":"/docs/ja/rest-api/overview"},{"title":"認証","description":null,"href":"/docs/ja/rest-api/authentication"},{"title":"クイックスタート","description":null,"href":"/docs/ja/rest-api/quickstart"}]},{"group":"Team Setting","version":"日本語","pages":[{"title":"クレジット消費と管理","description":null,"href":"/docs/ja/team-setting/credit"},{"title":"メンバーの管理","description":null,"href":"/docs/ja/team-setting/manage-members"}]},{"group":"SQL","version":"日本語","pages":[{"title":"クイックスタート - SQL","description":null,"href":"/sql-python/ja/sql/quickstart-sql"},{"title":"config","description":null,"href":"/sql-python/ja/sql/config"},{"title":"load_data","description":null,"href":"/sql-python/ja/sql/load_data"},{"title":"変数を使う","description":null,"href":"/sql-python/ja/sql/variables"}]},{"group":"Python","version":"日本語","pages":[{"title":"クイックスタート - Python","description":null,"href":"/sql-python/ja/python/quickstart-python"},{"title":"pipによるPythonパッケージのインストール方法","description":null,"href":"/sql-python/ja/python/how-to-install-pip"},{"title":"環境変数","description":null,"href":"/sql-python/ja/python/env-vars"},{"title":"MorphGlobalContext","description":null,"href":"/sql-python/ja/python/morph-global-context"},{"title":"@morph.func","description":null,"href":"/sql-python/ja/python/morph-func"},{"title":"@morph.load_data","description":null,"href":"/sql-python/ja/python/morph-load_data"},{"title":"@morph.variables","description":null,"href":"/sql-python/ja/python/morph-variables"},{"title":"morph_lib.database.execute_sql","description":null,"href":"/sql-python/ja/python/morphlib-execute_sql"},{"title":"morph_lib.database.insert_records","description":null,"href":"/sql-python/ja/python/morphlib-insert_records"},{"title":"morph_lib.database.update_records","description":null,"href":"/sql-python/ja/python/morphlib-update_records"},{"title":"morph_lib.database.insert_or_update_records","description":null,"href":"/sql-python/ja/python/morphlib-insert_or_update_records"},{"title":"morph_lib.database.delete_records","description":null,"href":"/sql-python/ja/python/morphlib-delete_records"}]},{"group":"Framework","version":"日本語","pages":[{"title":"フレームワークの概要","description":null,"href":"/sql-python/ja/framework/overview"},{"title":"morph_project.yml","description":null,"href":"/sql-python/ja/framework/morph-project"},{"title":"実行結果の出力パス","description":null,"href":"/sql-python/ja/framework/output-paths"}]},{"group":"CLI Commands","version":"日本語","pages":[{"title":"run","description":null,"href":"/sql-python/ja/cli-commands/run"},{"title":"create","description":null,"href":"/sql-python/ja/cli-commands/create"},{"title":"compile","description":null,"href":"/sql-python/ja/cli-commands/compile"},{"title":"clean","description":null,"href":"/sql-python/ja/cli-commands/clean"},{"title":"template","description":null,"href":"/sql-python/ja/cli-commands/template"},{"title":"init","description":null,"href":"/sql-python/ja/cli-commands/init"},{"title":"new","description":null,"href":"/sql-python/ja/cli-commands/new"},{"title":"print","description":null,"href":"/sql-python/ja/cli-commands/print"}]},{"group":"Getting Started","version":"日本語","pages":[{"title":"データアプリケーションの構築方法","description":null,"href":"/data-application/ja/how-to-build-data-application"},{"title":"MDXのセットアップ","description":null,"href":"/data-application/ja/mdx-setup"},{"title":"レイアウトコンポーネント","description":null,"href":"/data-application/ja/layout-components"},{"title":"カスタムコンポーネント","description":null,"href":"/data-application/ja/custom-components"},{"title":"ライブラリのアップデート","description":null,"href":"/data-application/ja/update-library"}]},{"group":"MDX 詳解","version":"日本語","pages":[{"title":"基本的な書き方","description":null,"href":"/data-application/ja/mdx-1-basic"},{"title":"スタイリング","description":null,"href":"/data-application/ja/mdx-2-styling"},{"title":"React, JavaScriptの使用","description":null,"href":"/data-application/ja/mdx-3-js"}]},{"group":"Morphのデータを扱う","version":"日本語","pages":[{"title":"データ取得の仕組み","description":null,"href":"/data-application/ja/morph-data-basic"},{"title":"getJson()","description":null,"href":"/data-application/ja/morph-data-getjson"},{"title":"\u003cDataTable /\u003e","description":null,"href":"/data-application/ja/morph-data-data-table"},{"title":"\u003cEmbed /\u003e","description":null,"href":"/data-application/ja/morph-data-embed"},{"title":"\u003cMetrics /\u003e","description":null,"href":"/data-application/ja/morph-data-metrics"},{"title":"変数を使う (variable関数)","description":null,"href":"/data-application/ja/use-variables"},{"title":"\u003cVariableInput /\u003e","description":null,"href":"/data-application/ja/morph-data-variable-input"},{"title":"\u003cVariableDatePicker /\u003e","description":null,"href":"/data-application/ja/morph-data-variable-date-picker"},{"title":"\u003cVariableSelect /\u003e","description":null,"href":"/data-application/ja/morph-data-variable-select"}]},{"group":"SQLデータベースに接続する","version":"日本語","pages":[{"title":"Snowflake","description":null,"href":"/integrations/ja/database/snowflake"},{"title":"BigQuery","description":null,"href":"/integrations/ja/database/bigquery"},{"title":"Redshift","description":null,"href":"/integrations/ja/database/redshift"},{"title":"MySQL","description":null,"href":"/integrations/ja/database/mysql"},{"title":"PostgreSQL","description":null,"href":"/integrations/ja/database/postgresql"},{"title":"AWS Athena","description":null,"href":"/integrations/ja/database/athena"}]},{"group":"SaaSに接続する","version":"日本語","pages":[{"title":"Airtable","description":null,"href":"/integrations/ja/saas/airtable"},{"title":"Attio","description":null,"href":"/integrations/ja/saas/attio"},{"title":"Freee","description":null,"href":"/integrations/ja/saas/freee"},{"title":"Hubspot","description":null,"href":"/integrations/ja/saas/hubspot"},{"title":"Intercom","description":null,"href":"/integrations/ja/saas/intercom"},{"title":"Linear","description":null,"href":"/integrations/ja/saas/linear"},{"title":"Mailchimp","description":null,"href":"/integrations/ja/saas/mailchimp"},{"title":"Notion","description":null,"href":"/integrations/ja/saas/notion"},{"title":"Salesforce","description":null,"href":"/integrations/ja/saas/salesforce"},{"title":"Stripe","description":null,"href":"/integrations/ja/saas/stripe"}]},{"group":"Getting Started","version":"日本語","pages":[{"title":"サンプルデータアプリについて","description":null,"href":"/sample-data-app/ja/introduction/about-sample-apps"},{"title":"サンプルデータアプリの使い方","description":null,"href":"/sample-data-app/ja/introduction/how-to-use"}]},{"group":"サンプルデータアプリ","version":"日本語","pages":[{"title":"AWSのコストレポート","description":null,"href":"/sample-data-app/ja/aws-cost-report"},{"title":"Google Analytics(GA4)コンバージョン分析","description":null,"href":"/sample-data-app/ja/google-analytics-conversion"}]},{"group":"サポート","version":"日本語","pages":[{"title":"サポートに連絡する","description":null,"href":"/troubleshooting/ja/support/contact-support"}]},{"group":"ワークスペース","version":"日本語","pages":[{"title":"MDXのプレビューでエラー - Unexpected end of JSON input","description":null,"href":"/troubleshooting/ja/workspace/mdx-api-error"},{"title":"MDXのプレビューでエラー: Bad Gateway","description":null,"href":"/troubleshooting/ja/workspace/mdx-bad-gateway"}]},{"group":"Changelog","version":"日本語","pages":[{"title":"2024 changelog","description":null,"href":"/changelog/ja/2024-changelog"}]}],"pageMetadata":{"title":"Data Visualization","description":null,"href":"/docs/en/workspace/visualization"},"mintConfig":{"layout":"topnav","sidebar":{"items":"container"},"topbar":{"style":"default"},"search":{"location":"top"},"rounded":"default","codeBlock":{"mode":"dark"},"topbarCtaButton":{"name":"Website","url":"https://www.morphdb.io"},"$schema":"https://mintlify.com/schema.json","name":"Docs","logo":{"light":"https://mintlify.s3-us-west-1.amazonaws.com/queue-4c50ebb3/assets/images/morph_logo_svg.svg","dark":"https://mintlify.s3-us-west-1.amazonaws.com/queue-4c50ebb3/assets/images/morph_logo_svg_w.svg"},"favicon":"/favicon.svg","versions":["English","日本語"],"colors":{"primary":"#030712","light":"#f9fafb","dark":"#030712","anchors":{"from":"#0D9373","to":"#07C983"}},"topbarLinks":[],"navigation":[{"group":"Getting Started","version":"English","pages":["docs/en/getting-started/why-morph","docs/en/getting-started/how-morph-works"]},{"group":"Workspace","version":"English","pages":["docs/en/workspace/about-workspace","docs/en/workspace/environment","docs/en/workspace/vscode-extensions","docs/en/workspace/sql-python","docs/en/workspace/template","docs/en/workspace/visualization","docs/en/workspace/data-application","docs/en/workspace/about-canvas","docs/en/workspace/job-schedule"]},{"group":"Data Sources","version":"English","pages":["docs/en/data-sources/builtin-postgres","docs/en/data-sources/connectors"]},{"group":"Morph AI","version":"English","pages":["docs/en/morph-ai/features-of-morphai","docs/en/morph-ai/code-generation","docs/en/morph-ai/code-assistant","docs/en/morph-ai/data-pipeline-builder"]},{"group":"Rest API","version":"English","pages":["docs/en/rest-api/overview","docs/en/rest-api/authentication","docs/en/rest-api/quickstart"]},{"group":"Team Setting","version":"English","pages":["docs/en/team-setting/credit","docs/en/team-setting/manage-members"]},{"group":"SQL","version":"English","pages":["sql-python/en/sql/quickstart-sql","sql-python/en/sql/config","sql-python/en/sql/load_data","sql-python/en/sql/variables"]},{"group":"Python","version":"English","pages":["sql-python/en/python/quickstart-python","sql-python/en/python/how-to-install-pip","sql-python/en/python/env-vars","sql-python/en/python/morph-global-context","sql-python/en/python/morph-func","sql-python/en/python/morph-load_data","sql-python/en/python/morph-variables","sql-python/en/python/morphlib-execute_sql","sql-python/en/python/morphlib-insert_records","sql-python/en/python/morphlib-update_records","sql-python/en/python/morphlib-insert_or_update_records","sql-python/en/python/morphlib-delete_records"]},{"group":"Framework","version":"English","pages":["sql-python/en/framework/overview","sql-python/en/framework/morph-project","sql-python/en/framework/output-paths"]},{"group":"CLI Commands","version":"English","pages":["sql-python/en/cli-commands/run","sql-python/en/cli-commands/create","sql-python/en/cli-commands/compile","sql-python/en/cli-commands/clean","sql-python/en/cli-commands/template","sql-python/en/cli-commands/init","sql-python/en/cli-commands/new","sql-python/en/cli-commands/print"]},{"group":"Getting Started","version":"English","pages":["data-application/en/how-to-build-data-application","data-application/en/mdx-setup","data-application/en/layout-components","data-application/en/custom-components","data-application/en/update-library"]},{"group":"MDX Deep Dive","version":"English","pages":["data-application/en/mdx-1-basic","data-application/en/mdx-2-styling","data-application/en/mdx-3-js"]},{"group":"Using Morph Data","version":"English","pages":["data-application/en/morph-data-basic","data-application/en/morph-data-getjson","data-application/en/morph-data-data-table","data-application/en/morph-data-embed","data-application/en/morph-data-metrics","data-application/en/use-variables","data-application/en/morph-data-variable-input","data-application/en/morph-data-variable-date-picker","data-application/en/morph-data-variable-select"]},{"group":"Connect SQL","version":"English","pages":["integrations/en/database/snowflake","integrations/en/database/bigquery","integrations/en/database/redshift","integrations/en/database/mysql","integrations/en/database/postgresql","integrations/en/database/athena"]},{"group":"Connect SaaS","version":"English","pages":["integrations/en/saas/airtable","integrations/en/saas/attio","integrations/en/saas/freee","integrations/en/saas/hubspot","integrations/en/saas/intercom","integrations/en/saas/linear","integrations/en/saas/mailchimp","integrations/en/saas/notion","integrations/en/saas/salesforce","integrations/en/saas/stripe"]},{"group":"Getting Started","version":"English","pages":["sample-data-app/en/introduction/about-sample-apps","sample-data-app/en/introduction/how-to-use"]},{"group":"Sample Data Apps","version":"English","pages":["sample-data-app/en/aws-cost-report","sample-data-app/en/google-analytics-conversion"]},{"group":"Support","version":"English","pages":["troubleshooting/en/support/contact-support"]},{"group":"Workspace","version":"English","pages":["troubleshooting/en/workspace/mdx-api-error","troubleshooting/en/workspace/mdx-bad-gateway"]},{"group":"Changelog","version":"English","pages":["changelog/en/2024-changelog"]},{"group":"Getting Started","version":"日本語","pages":["docs/ja/getting-started/why-morph","docs/ja/getting-started/how-morph-works"]},{"group":"Workspace","version":"日本語","pages":["docs/ja/workspace/about-workspace","docs/ja/workspace/environment","docs/ja/workspace/vscode-extensions","docs/ja/workspace/sql-python","docs/ja/workspace/template","docs/ja/workspace/visualization","docs/ja/workspace/data-application","docs/ja/workspace/about-canvas","docs/ja/workspace/job-schedule"]},{"group":"Data Sources","version":"日本語","pages":["docs/ja/data-sources/builtin-postgres","docs/ja/data-sources/connectors"]},{"group":"Morph AI","version":"日本語","pages":["docs/ja/morph-ai/features-of-morphai","docs/ja/morph-ai/code-generation","docs/ja/morph-ai/code-assistant","docs/ja/morph-ai/data-pipeline-builder"]},{"group":"Rest API","version":"日本語","pages":["docs/ja/rest-api/overview","docs/ja/rest-api/authentication","docs/ja/rest-api/quickstart"]},{"group":"Team Setting","version":"日本語","pages":["docs/ja/team-setting/credit","docs/ja/team-setting/manage-members"]},{"group":"SQL","version":"日本語","pages":["sql-python/ja/sql/quickstart-sql","sql-python/ja/sql/config","sql-python/ja/sql/load_data","sql-python/ja/sql/variables"]},{"group":"Python","version":"日本語","pages":["sql-python/ja/python/quickstart-python","sql-python/ja/python/how-to-install-pip","sql-python/ja/python/env-vars","sql-python/ja/python/morph-global-context","sql-python/ja/python/morph-func","sql-python/ja/python/morph-load_data","sql-python/ja/python/morph-variables","sql-python/ja/python/morphlib-execute_sql","sql-python/ja/python/morphlib-insert_records","sql-python/ja/python/morphlib-update_records","sql-python/ja/python/morphlib-insert_or_update_records","sql-python/ja/python/morphlib-delete_records"]},{"group":"Framework","version":"日本語","pages":["sql-python/ja/framework/overview","sql-python/ja/framework/morph-project","sql-python/ja/framework/output-paths"]},{"group":"CLI Commands","version":"日本語","pages":["sql-python/ja/cli-commands/run","sql-python/ja/cli-commands/create","sql-python/ja/cli-commands/compile","sql-python/ja/cli-commands/clean","sql-python/ja/cli-commands/template","sql-python/ja/cli-commands/init","sql-python/ja/cli-commands/new","sql-python/ja/cli-commands/print"]},{"group":"Getting Started","version":"日本語","pages":["data-application/ja/how-to-build-data-application","data-application/ja/mdx-setup","data-application/ja/layout-components","data-application/ja/custom-components","data-application/ja/update-library"]},{"group":"MDX 詳解","version":"日本語","pages":["data-application/ja/mdx-1-basic","data-application/ja/mdx-2-styling","data-application/ja/mdx-3-js"]},{"group":"Morphのデータを扱う","version":"日本語","pages":["data-application/ja/morph-data-basic","data-application/ja/morph-data-getjson","data-application/ja/morph-data-data-table","data-application/ja/morph-data-embed","data-application/ja/morph-data-metrics","data-application/ja/use-variables","data-application/ja/morph-data-variable-input","data-application/ja/morph-data-variable-date-picker","data-application/ja/morph-data-variable-select"]},{"group":"SQLデータベースに接続する","version":"日本語","pages":["integrations/ja/database/snowflake","integrations/ja/database/bigquery","integrations/ja/database/redshift","integrations/ja/database/mysql","integrations/ja/database/postgresql","integrations/ja/database/athena"]},{"group":"SaaSに接続する","version":"日本語","pages":["integrations/ja/saas/airtable","integrations/ja/saas/attio","integrations/ja/saas/freee","integrations/ja/saas/hubspot","integrations/ja/saas/intercom","integrations/ja/saas/linear","integrations/ja/saas/mailchimp","integrations/ja/saas/notion","integrations/ja/saas/salesforce","integrations/ja/saas/stripe"]},{"group":"Getting Started","version":"日本語","pages":["sample-data-app/ja/introduction/about-sample-apps","sample-data-app/ja/introduction/how-to-use"]},{"group":"サンプルデータアプリ","version":"日本語","pages":["sample-data-app/ja/aws-cost-report","sample-data-app/ja/google-analytics-conversion"]},{"group":"サポート","version":"日本語","pages":["troubleshooting/ja/support/contact-support"]},{"group":"ワークスペース","version":"日本語","pages":["troubleshooting/ja/workspace/mdx-api-error","troubleshooting/ja/workspace/mdx-bad-gateway"]},{"group":"Changelog","version":"日本語","pages":["changelog/ja/2024-changelog"]}],"anchors":[{"name":"Blog","url":"https://www.morphdb.io/blogs","icon":"newspaper","_id":"6731df83c7431aae17f0081b"},{"name":"Data App Example","url":"https://stackblitz.com/edit/vitejs-vite-7fyrdn?file=src%2Findex.mdx","icon":"code","_id":"6731df83c7431aae17f0081c"}],"tabs":[{"name":"Guides","url":"docs","_id":"6731df83c7431aae17f00814"},{"name":"SQL \u0026 Python","url":"sql-python","_id":"6731df83c7431aae17f00815"},{"name":"Data Application","url":"data-application","_id":"6731df83c7431aae17f00816"},{"name":"Integrations","url":"integrations","_id":"6731df83c7431aae17f00817"},{"name":"Sample Data Apps","url":"sample-data-app","_id":"6731df83c7431aae17f00818"},{"name":"Troubleshooting","url":"troubleshooting","_id":"6731df83c7431aae17f00819"},{"name":"Changelog","url":"changelog","_id":"6731df83c7431aae17f0081a"}],"footerSocials":{"x":"https://x.com/morphdbHQ","github":"https://github.com/useMorph","linkedin":"https://www.linkedin.com/company/morphdbhq"},"repo":{"github":{"owner":"usemorph","repo":"morph-docs-2","contentDirectory":"","deployBranch":"main","isPrivate":true}}},"apiReferenceData":{}},"favicons":{"icons":[{"rel":"apple-touch-icon","sizes":"180x180","href":"https://mintlify.s3-us-west-1.amazonaws.com/queue-4c50ebb3/_generated/favicon/apple-touch-icon.png?v=3","type":"image/png"},{"rel":"icon","sizes":"32x32","href":"https://mintlify.s3-us-west-1.amazonaws.com/queue-4c50ebb3/_generated/favicon/favicon-32x32.png?v=3","type":"image/png"},{"rel":"icon","sizes":"16x16","href":"https://mintlify.s3-us-west-1.amazonaws.com/queue-4c50ebb3/_generated/favicon/favicon-16x16.png?v=3","type":"image/png"},{"rel":"shortcut icon","href":"https://mintlify.s3-us-west-1.amazonaws.com/queue-4c50ebb3/_generated/favicon/favicon.ico?v=3","type":"image/x-icon"}],"browserconfig":"https://mintlify.s3-us-west-1.amazonaws.com/queue-4c50ebb3/_generated/favicon/browserconfig.xml?v=3"},"subdomain":"docs.morph-data.io","internalAnalyticsWriteKey":"phc_TXdpocbGVeZVm5VJmAsHTMrCofBQu3e0kN8HGMNGTVW","trieve":{"datasetId":"677378ce-aec4-4e4e-b2d7-054bbf68d662","chatEnabled":true},"shouldIndex":true,"org":{"createdAt":"2024-09-30T05:26:19.425Z"},"cssFiles":[],"jsFiles":[],"mdxSourceWithNoJs":{"compiledSource":"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const _components = Object.assign({\n p: \"p\",\n strong: \"strong\",\n pre: \"pre\",\n code: \"code\",\n span: \"span\"\n }, _provideComponents(), props.components), {Heading, ZoomImage, CodeBlock, Tip} = _components;\n if (!CodeBlock) _missingMdxReference(\"CodeBlock\", true);\n if (!Heading) _missingMdxReference(\"Heading\", true);\n if (!Tip) _missingMdxReference(\"Tip\", true);\n if (!ZoomImage) _missingMdxReference(\"ZoomImage\", true);\n return _jsxs(_Fragment, {\n children: [_jsx(_components.p, {\n children: \"Visualization is crucial to understanding data. This section shows you how to visualise data on the Morph workspace.\"\n }), \"\\n\", _jsx(Heading, {\n level: \"2\",\n id: \"using-the-visualization-function\",\n children: \"Using the visualization function\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Morph provides a function for realising simple visualizations in the GUI by creating a file with the extension vg.json.\\nTo realise general visualizations such as bar charts and line graphs, the visualization results can be immediately obtained by aggregating the original data.\"\n }), \"\\n\", _jsx(Heading, {\n level: \"3\",\n id: \"treatment\",\n children: \"Treatment\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"First, open the SQL, Python file containing the aggregated source data for the data you want to visualize.\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"When you open the file, an icon to start the visualization function appears in the top right-hand corner. Click here.\"\n }), \"\\n\", _jsx(ZoomImage, {\n children: _jsx(\"img\", {\n src: \"https://mintlify.s3-us-west-1.amazonaws.com/queue-4c50ebb3/assets/images/docs/visualization-how-to-start.png\",\n alt: \"vg-json-editor\"\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"A file with the extension vg.json is generated on the same level of the directory. Open that file.\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"A GUI screen for visualization will appear as follows. Set each value and a beautiful graph will be displayed in real time.\"\n }), \"\\n\", _jsx(ZoomImage, {\n children: _jsx(\"img\", {\n src: \"https://mintlify.s3-us-west-1.amazonaws.com/queue-4c50ebb3/assets/images/docs/visualization-overview.png\",\n alt: \"vg-json-editor\"\n })\n }), \"\\n\", _jsx(Heading, {\n level: \"3\",\n id: \"visualization-sample\",\n children: \"Visualization sample\"\n }), \"\\n\", _jsx(\"iframe\", {\n src: \"https://www.loom.com/embed/9274b8d8cc214161a5d22d67516ceeda?sid=c1a9dbf7-ff99-4b3d-b6d6-60e420c4e21a\",\n controls: true,\n className: \"w-full aspect-video\"\n }), \"\\n\", _jsx(Heading, {\n level: \"2\",\n id: \"implement-more-complex-visualizations\",\n children: \"Implement more complex visualizations\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"If you want to implement more complex visualizations, you can use Python visualization libraries to visualize your data.\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Morph recommends using Plotly and Matplotlib for data visualization. Create an object for visualization in these libraries, write a function to return it and execute it, and Morph’s CLI will automatically execute the visualization part.\\nBelow are some sample visualizations using Plotly and Matplotlib.\"\n }), \"\\n\", _jsx(_components.p, {\n children: _jsx(_components.strong, {\n children: \"Plotly\"\n })\n }), \"\\n\", _jsx(CodeBlock, {\n filename: \"\",\n expandable: \"false\",\n children: _jsx(_components.pre, {\n className: \"language-python\",\n children: _jsxs(_components.code, {\n className: \"language-python\",\n children: [_jsxs(_components.span, {\n className: \"\",\n children: [_jsx(_components.span, {\n className: \"token keyword\",\n children: \"import\"\n }), \" plotly\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), \"express \", _jsx(_components.span, {\n className: \"token keyword\",\n children: \"as\"\n }), \" px\"]\n }), \"\\n\", \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [_jsx(_components.span, {\n className: \"token keyword\",\n children: \"import\"\n }), \" morph\"]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [_jsx(_components.span, {\n className: \"token keyword\",\n children: \"from\"\n }), \" morph \", _jsx(_components.span, {\n className: \"token keyword\",\n children: \"import\"\n }), \" MorphGlobalContext\"]\n }), \"\\n\", \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [_jsxs(_components.span, {\n className: \"token decorator annotation punctuation\",\n children: [\"@morph\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), \"func\"]\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [\" name\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"\\\"${MORPH_NAME}\\\"\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [\" description\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"\\\"${MORPH_DESCRIPTION}\\\"\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"\",\n children: _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [_jsxs(_components.span, {\n className: \"token decorator annotation punctuation\",\n children: [\"@morph\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), \"load_data\"]\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"\\\"${MORPH_PARENT_NAME}\\\"\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [_jsx(_components.span, {\n className: \"token keyword\",\n children: \"def\"\n }), \" \", _jsx(_components.span, {\n className: \"token function\",\n children: \"main\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), \"context\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \":\"\n }), \" MorphGlobalContext\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), \" \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"-\"\n }), _jsx(_components.span, {\n className: \"token operator\",\n children: \"\u003e\"\n }), \" px\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), \"line\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \":\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [\" data \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), \" context\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), \"data\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"[\"\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"\\\"${MORPH_PARENT_NAME}\\\"\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"]\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [\" \", _jsx(_components.span, {\n className: \"token comment\",\n children: \"# This is where you write your code.\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [\" \", _jsx(_components.span, {\n className: \"token comment\",\n children: \"# The `px.line` function creates a line plot using Plotly Express.\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [\" fig \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), \" px\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), \"line\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), \"data\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \" x\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"\\\"X Axis\\\"\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \" y\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"\\\"Y Axis\\\"\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \" markers\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), _jsx(_components.span, {\n className: \"token boolean\",\n children: \"True\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [\" fig\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), \"update_layout\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), \"title\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"\\\"Plotly Plot\\\"\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [\" \", _jsx(_components.span, {\n className: \"token keyword\",\n children: \"return\"\n }), \" fig\"]\n }), \"\\n\"]\n })\n })\n }), \"\\n\", _jsx(_components.p, {\n children: _jsx(_components.strong, {\n children: \"Matplotlib\"\n })\n }), \"\\n\", _jsx(CodeBlock, {\n filename: \"\",\n expandable: \"false\",\n children: _jsx(_components.pre, {\n className: \"language-python\",\n children: _jsxs(_components.code, {\n className: \"language-python\",\n children: [_jsxs(_components.span, {\n className: \"\",\n children: [_jsx(_components.span, {\n className: \"token keyword\",\n children: \"import\"\n }), \" matplotlib\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), \"pyplot \", _jsx(_components.span, {\n className: \"token keyword\",\n children: \"as\"\n }), \" plt\"]\n }), \"\\n\", \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [_jsx(_components.span, {\n className: \"token keyword\",\n children: \"import\"\n }), \" morph\"]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [_jsx(_components.span, {\n className: \"token keyword\",\n children: \"from\"\n }), \" morph \", _jsx(_components.span, {\n className: \"token keyword\",\n children: \"import\"\n }), \" MorphGlobalContext\"]\n }), \"\\n\", \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [_jsxs(_components.span, {\n className: \"token decorator annotation punctuation\",\n children: [\"@morph\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), \"func\"]\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [\" name\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"\\\"${MORPH_NAME}\\\"\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [\" description\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"\\\"${MORPH_DESCRIPTION}\\\"\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"\",\n children: _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [_jsxs(_components.span, {\n className: \"token decorator annotation punctuation\",\n children: [\"@morph\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), \"load_data\"]\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"\\\"${MORPH_PARENT_NAME}\\\"\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [_jsx(_components.span, {\n className: \"token keyword\",\n children: \"def\"\n }), \" \", _jsx(_components.span, {\n className: \"token function\",\n children: \"main\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), \"context\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \":\"\n }), \" MorphGlobalContext\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n }), \" \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"-\"\n }), _jsx(_components.span, {\n className: \"token operator\",\n children: \"\u003e\"\n }), \" plt\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), \"Figure\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \":\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [\" data \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), \" context\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), \"data\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"[\"\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"\\\"${MORPH_PARENT_NAME}\\\"\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"]\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [\" \", _jsx(_components.span, {\n className: \"token comment\",\n children: \"# This is where you write your code.\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [\" \", _jsx(_components.span, {\n className: \"token comment\",\n children: \"# The `plot` function creates a line plot using Matplotlib.\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [\" fig\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \" ax \", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), \" plt\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), \"subplots\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [\" ax\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), \"plot\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), \"data\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"[\"\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"\\\"X-Axis\\\"\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"]\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \" data\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"[\"\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"\\\"Y-Axis\\\"\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"]\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \",\"\n }), \" marker\", _jsx(_components.span, {\n className: \"token operator\",\n children: \"=\"\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"\\\"o\\\"\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [\" ax\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), \"set_title\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"\\\"Matplotlib Plot\\\"\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [\" ax\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), \"set_xlabel\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"\\\"X-Axis\\\"\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [\" ax\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \".\"\n }), \"set_ylabel\", _jsx(_components.span, {\n className: \"token punctuation\",\n children: \"(\"\n }), _jsx(_components.span, {\n className: \"token string\",\n children: \"\\\"Y-Axis\\\"\"\n }), _jsx(_components.span, {\n className: \"token punctuation\",\n children: \")\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"\",\n children: [\" \", _jsx(_components.span, {\n className: \"token keyword\",\n children: \"return\"\n }), \" fig\"]\n }), \"\\n\"]\n })\n })\n }), \"\\n\", _jsx(Tip, {\n children: _jsxs(_components.p, {\n children: [\"These visualizations output the results of the execution in HTML and PNG. If you want to access these raw data, you can specify the output destination with \", _jsx(_components.code, {\n children: \"@morph.func\"\n }), \"’s \", _jsx(_components.code, {\n children: \"output_paths\"\n }), \".\\nBy specifying \", _jsx(_components.code, {\n children: \"@morph.func(output_paths=[‘/tmp/morph/{name}/{now()}{ext()}’])\"\n }), \" in this way, the output is output to \", _jsx(_components.code, {\n children: \"_private/{name of function}/{time stamp of execution}{.png, .html}\"\n }), \".\"]\n })\n })]\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n children: _jsx(_createMdxContent, props)\n })) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter":{},"scope":{"mintConfig":{"$schema":"https://mintlify.com/schema.json","name":"Docs","logo":{"light":"https://mintlify.s3-us-west-1.amazonaws.com/queue-4c50ebb3/assets/images/morph_logo_svg.svg","dark":"https://mintlify.s3-us-west-1.amazonaws.com/queue-4c50ebb3/assets/images/morph_logo_svg_w.svg"},"favicon":"/favicon.svg","versions":["English","日本語"],"colors":{"primary":"#030712","light":"#f9fafb","dark":"#030712","anchors":{"from":"#0D9373","to":"#07C983"}},"topbarCtaButton":{"name":"Website","url":"https://www.morphdb.io"},"topbarLinks":[],"navigation":[{"group":"Getting Started","version":"English","pages":["docs/en/getting-started/why-morph","docs/en/getting-started/how-morph-works"]},{"group":"Workspace","version":"English","pages":["docs/en/workspace/about-workspace","docs/en/workspace/environment","docs/en/workspace/vscode-extensions","docs/en/workspace/sql-python","docs/en/workspace/template","docs/en/workspace/visualization","docs/en/workspace/data-application","docs/en/workspace/about-canvas","docs/en/workspace/job-schedule"]},{"group":"Data Sources","version":"English","pages":["docs/en/data-sources/builtin-postgres","docs/en/data-sources/connectors"]},{"group":"Morph AI","version":"English","pages":["docs/en/morph-ai/features-of-morphai","docs/en/morph-ai/code-generation","docs/en/morph-ai/code-assistant","docs/en/morph-ai/data-pipeline-builder"]},{"group":"Rest API","version":"English","pages":["docs/en/rest-api/overview","docs/en/rest-api/authentication","docs/en/rest-api/quickstart"]},{"group":"Team Setting","version":"English","pages":["docs/en/team-setting/credit","docs/en/team-setting/manage-members"]},{"group":"SQL","version":"English","pages":["sql-python/en/sql/quickstart-sql","sql-python/en/sql/config","sql-python/en/sql/load_data","sql-python/en/sql/variables"]},{"group":"Python","version":"English","pages":["sql-python/en/python/quickstart-python","sql-python/en/python/how-to-install-pip","sql-python/en/python/env-vars","sql-python/en/python/morph-global-context","sql-python/en/python/morph-func","sql-python/en/python/morph-load_data","sql-python/en/python/morph-variables","sql-python/en/python/morphlib-execute_sql","sql-python/en/python/morphlib-insert_records","sql-python/en/python/morphlib-update_records","sql-python/en/python/morphlib-insert_or_update_records","sql-python/en/python/morphlib-delete_records"]},{"group":"Framework","version":"English","pages":["sql-python/en/framework/overview","sql-python/en/framework/morph-project","sql-python/en/framework/output-paths"]},{"group":"CLI Commands","version":"English","pages":["sql-python/en/cli-commands/run","sql-python/en/cli-commands/create","sql-python/en/cli-commands/compile","sql-python/en/cli-commands/clean","sql-python/en/cli-commands/template","sql-python/en/cli-commands/init","sql-python/en/cli-commands/new","sql-python/en/cli-commands/print"]},{"group":"Getting Started","version":"English","pages":["data-application/en/how-to-build-data-application","data-application/en/mdx-setup","data-application/en/layout-components","data-application/en/custom-components","data-application/en/update-library"]},{"group":"MDX Deep Dive","version":"English","pages":["data-application/en/mdx-1-basic","data-application/en/mdx-2-styling","data-application/en/mdx-3-js"]},{"group":"Using Morph Data","version":"English","pages":["data-application/en/morph-data-basic","data-application/en/morph-data-getjson","data-application/en/morph-data-data-table","data-application/en/morph-data-embed","data-application/en/morph-data-metrics","data-application/en/use-variables","data-application/en/morph-data-variable-input","data-application/en/morph-data-variable-date-picker","data-application/en/morph-data-variable-select"]},{"group":"Connect SQL","version":"English","pages":["integrations/en/database/snowflake","integrations/en/database/bigquery","integrations/en/database/redshift","integrations/en/database/mysql","integrations/en/database/postgresql","integrations/en/database/athena"]},{"group":"Connect SaaS","version":"English","pages":["integrations/en/saas/airtable","integrations/en/saas/attio","integrations/en/saas/freee","integrations/en/saas/hubspot","integrations/en/saas/intercom","integrations/en/saas/linear","integrations/en/saas/mailchimp","integrations/en/saas/notion","integrations/en/saas/salesforce","integrations/en/saas/stripe"]},{"group":"Getting Started","version":"English","pages":["sample-data-app/en/introduction/about-sample-apps","sample-data-app/en/introduction/how-to-use"]},{"group":"Sample Data Apps","version":"English","pages":["sample-data-app/en/aws-cost-report","sample-data-app/en/google-analytics-conversion"]},{"group":"Support","version":"English","pages":["troubleshooting/en/support/contact-support"]},{"group":"Workspace","version":"English","pages":["troubleshooting/en/workspace/mdx-api-error","troubleshooting/en/workspace/mdx-bad-gateway"]},{"group":"Changelog","version":"English","pages":["changelog/en/2024-changelog"]},{"group":"Getting Started","version":"日本語","pages":["docs/ja/getting-started/why-morph","docs/ja/getting-started/how-morph-works"]},{"group":"Workspace","version":"日本語","pages":["docs/ja/workspace/about-workspace","docs/ja/workspace/environment","docs/ja/workspace/vscode-extensions","docs/ja/workspace/sql-python","docs/ja/workspace/template","docs/ja/workspace/visualization","docs/ja/workspace/data-application","docs/ja/workspace/about-canvas","docs/ja/workspace/job-schedule"]},{"group":"Data Sources","version":"日本語","pages":["docs/ja/data-sources/builtin-postgres","docs/ja/data-sources/connectors"]},{"group":"Morph AI","version":"日本語","pages":["docs/ja/morph-ai/features-of-morphai","docs/ja/morph-ai/code-generation","docs/ja/morph-ai/code-assistant","docs/ja/morph-ai/data-pipeline-builder"]},{"group":"Rest API","version":"日本語","pages":["docs/ja/rest-api/overview","docs/ja/rest-api/authentication","docs/ja/rest-api/quickstart"]},{"group":"Team Setting","version":"日本語","pages":["docs/ja/team-setting/credit","docs/ja/team-setting/manage-members"]},{"group":"SQL","version":"日本語","pages":["sql-python/ja/sql/quickstart-sql","sql-python/ja/sql/config","sql-python/ja/sql/load_data","sql-python/ja/sql/variables"]},{"group":"Python","version":"日本語","pages":["sql-python/ja/python/quickstart-python","sql-python/ja/python/how-to-install-pip","sql-python/ja/python/env-vars","sql-python/ja/python/morph-global-context","sql-python/ja/python/morph-func","sql-python/ja/python/morph-load_data","sql-python/ja/python/morph-variables","sql-python/ja/python/morphlib-execute_sql","sql-python/ja/python/morphlib-insert_records","sql-python/ja/python/morphlib-update_records","sql-python/ja/python/morphlib-insert_or_update_records","sql-python/ja/python/morphlib-delete_records"]},{"group":"Framework","version":"日本語","pages":["sql-python/ja/framework/overview","sql-python/ja/framework/morph-project","sql-python/ja/framework/output-paths"]},{"group":"CLI Commands","version":"日本語","pages":["sql-python/ja/cli-commands/run","sql-python/ja/cli-commands/create","sql-python/ja/cli-commands/compile","sql-python/ja/cli-commands/clean","sql-python/ja/cli-commands/template","sql-python/ja/cli-commands/init","sql-python/ja/cli-commands/new","sql-python/ja/cli-commands/print"]},{"group":"Getting Started","version":"日本語","pages":["data-application/ja/how-to-build-data-application","data-application/ja/mdx-setup","data-application/ja/layout-components","data-application/ja/custom-components","data-application/ja/update-library"]},{"group":"MDX 詳解","version":"日本語","pages":["data-application/ja/mdx-1-basic","data-application/ja/mdx-2-styling","data-application/ja/mdx-3-js"]},{"group":"Morphのデータを扱う","version":"日本語","pages":["data-application/ja/morph-data-basic","data-application/ja/morph-data-getjson","data-application/ja/morph-data-data-table","data-application/ja/morph-data-embed","data-application/ja/morph-data-metrics","data-application/ja/use-variables","data-application/ja/morph-data-variable-input","data-application/ja/morph-data-variable-date-picker","data-application/ja/morph-data-variable-select"]},{"group":"SQLデータベースに接続する","version":"日本語","pages":["integrations/ja/database/snowflake","integrations/ja/database/bigquery","integrations/ja/database/redshift","integrations/ja/database/mysql","integrations/ja/database/postgresql","integrations/ja/database/athena"]},{"group":"SaaSに接続する","version":"日本語","pages":["integrations/ja/saas/airtable","integrations/ja/saas/attio","integrations/ja/saas/freee","integrations/ja/saas/hubspot","integrations/ja/saas/intercom","integrations/ja/saas/linear","integrations/ja/saas/mailchimp","integrations/ja/saas/notion","integrations/ja/saas/salesforce","integrations/ja/saas/stripe"]},{"group":"Getting Started","version":"日本語","pages":["sample-data-app/ja/introduction/about-sample-apps","sample-data-app/ja/introduction/how-to-use"]},{"group":"サンプルデータアプリ","version":"日本語","pages":["sample-data-app/ja/aws-cost-report","sample-data-app/ja/google-analytics-conversion"]},{"group":"サポート","version":"日本語","pages":["troubleshooting/ja/support/contact-support"]},{"group":"ワークスペース","version":"日本語","pages":["troubleshooting/ja/workspace/mdx-api-error","troubleshooting/ja/workspace/mdx-bad-gateway"]},{"group":"Changelog","version":"日本語","pages":["changelog/ja/2024-changelog"]}],"anchors":[{"name":"Blog","url":"https://www.morphdb.io/blogs","icon":"newspaper","_id":"6731df83c7431aae17f0081b"},{"name":"Data App Example","url":"https://stackblitz.com/edit/vitejs-vite-7fyrdn?file=src%2Findex.mdx","icon":"code","_id":"6731df83c7431aae17f0081c"}],"tabs":[{"name":"Guides","url":"docs","_id":"6731df83c7431aae17f00814"},{"name":"SQL \u0026 Python","url":"sql-python","_id":"6731df83c7431aae17f00815"},{"name":"Data Application","url":"data-application","_id":"6731df83c7431aae17f00816"},{"name":"Integrations","url":"integrations","_id":"6731df83c7431aae17f00817"},{"name":"Sample Data Apps","url":"sample-data-app","_id":"6731df83c7431aae17f00818"},{"name":"Troubleshooting","url":"troubleshooting","_id":"6731df83c7431aae17f00819"},{"name":"Changelog","url":"changelog","_id":"6731df83c7431aae17f0081a"}],"footerSocials":{"x":"https://x.com/morphdbHQ","github":"https://github.com/useMorph","linkedin":"https://www.linkedin.com/company/morphdbhq"},"repo":{"github":{"owner":"usemorph","repo":"morph-docs-2","contentDirectory":"","deployBranch":"main","isPrivate":true}}},"pageMetadata":{"title":"Data Visualization","description":null,"href":"/docs/en/workspace/visualization"}}}},"__N_SSG":true},"page":"/_sites/[subdomain]/[[...slug]]","query":{"subdomain":"docs.morph-data.io","slug":["docs","en","workspace","visualization"]},"buildId":"Een-WiNRwYtikoUb8u0AO","isFallback":false,"isExperimentalCompile":false,"gsp":true,"scriptLoader":[]}</script></html></body></html>