Treemap Visualization - Matomo Plugins Marketplace

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Treemap Visualization - Matomo Plugins Marketplace</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Visualise any report in Matomo as a Treemap. Click on the Treemap icon in each report to load the visualisation."> <meta name="author" content=""> <meta name="robots" content="noindex, follow"> <meta name="twitter:card" content="gallery"> <meta name="twitter:site" content="@matomo_org"> <meta name="twitter:title" content="Treemap Visualization"> <meta name="twitter:description" content="Visualise any report in Matomo as a Treemap. Click on the Treemap icon in each report to load the visualisation."> <meta property='og:title' content='Treemap Visualization' /> <meta property='og:description' content='Visualise any report in Matomo as a Treemap. Click on the Treemap icon in each report to load the visualisation.' /> <meta property='og:site_name' content='Matomo.org' /> <meta property='og:type' content='website' /> <meta property='og:url' content='https://plugins.matomo.org/TreemapVisualization?wp=1' /> <meta name="twitter:url" content="https://plugins.matomo.org/TreemapVisualization?wp=1" /> <meta property='og:image' content='https://plugins.matomo.org/TreemapVisualization/images/5.0.3/Screen_Resolution_Treemap.png?w=800' /> <meta name="twitter:image0" content="https://plugins.matomo.org/TreemapVisualization/images/5.0.3/Screen_Resolution_Treemap.png?w=800"> <meta name="twitter:image1" content="https://plugins.matomo.org/TreemapVisualization/images/5.0.3/Screen_Resolution_Treemap.png?w=800"> <meta name="twitter:image2" content="https://plugins.matomo.org/TreemapVisualization/images/5.0.3/Screen_Resolution_Treemap.png?w=800"> <link rel="preload" href="https://plugins.matomo.org/fonts/nunito-v9-latin-ext-regular.woff2" as="font" crossorigin> <link rel="preload" href="https://plugins.matomo.org/fonts/fontawesome/fontawesome-webfont.woff2" as="font" crossorigin> <style> .main-div-readme { display: flex; } .left-div-readme { width: 50%; } .right-div-readme { flex-grow: 1; width: 50%; } </style> <link rel="canonical" href="https://plugins.matomo.org/TreemapVisualization"/> <link rel="preconnect" href="//privacy-proxy.usercentrics.eu"> <link rel="preload" href="//privacy-proxy.usercentrics.eu/latest/uc-block.bundle.js" as="script"> <script id="usercentrics-cmp" src="https://web.cmp.usercentrics.eu/ui/loader.js" data-ruleset-id="6aAQmNLzvgWkfQ" async></script> <script type="application/javascript" src="https://privacy-proxy.usercentrics.eu/latest/uc-block.bundle.js"></script> <link rel="preload" href="https://plugins.matomo.org/fonts/nunito-v9-latin-ext-700.woff2" as="font" crossorigin> <link rel="preload" href="https://plugins.matomo.org/fonts/icomoon.woff" as="font" crossorigin>  <link rel="stylesheet" type="text/css" href="/css/app.css?v=10" media="screen"> <link rel="stylesheet" type="text/css" href="/css/marketplace.css?v=7" media="screen"> <link rel="stylesheet" type="text/css" href="/css/font-awesome.min.css" media="screen"> <link rel="icon" type="image/png" href="./favicon.png"/> <script src="/js/iframeResizer.min.js"></script> <script src="/js/jquery.js"></script> <script src="/js/app.js"></script> </head> <body> <iframe src="https://shop.matomo.org/header/?marketplace=plugins&pluginName=TreemapVisualization&v=2&wp=1" id="shopHeader" name="shopHeader" scrolling="no" class="shopIframe"></iframe> <div class="container-content page-header-container-content"> <header class="page-header default text-center"> <div class="container"> <div class="row"> <div class="col-lg-10 col-lg-offset-1"> <h1>Treemap Visualization</h1> <p>Visualise any report in Matomo as a Treemap. Click on the Treemap icon in each report to load the visualisation.</p> </div> </div> </div> </header> </div> <div class="container content"> <div class="row"> <div class="col-lg-10 col-lg-offset-1"> <ul id="plugininfo" class="btn-group btn-group-justified tabs-navigations"> <li class="btn btnDescription active"><a onclick="userOpensPluginTab('TreemapVisualization', 'description')" href="#description" data-toggle="tab">Description</a></li> <li class="btn btnPreview"><a onclick="userOpensPluginTab('TreemapVisualization', 'preview')" href="#preview" data-toggle="tab">Preview</a></li> </ul> </div> </div> <div class="row"> <div class="col-lg-10 col-lg-offset-1"> <div class="tab-content"> <div class="tab-pane active" id="description"> <p>TreemapVisualization contains a new report visualization that will display your reports as tiles of different sizes and will show you how each metric has changed from the last period.</p> <p>The treemap visualization displays rows of data as squares whose size corresponds to a metric in each row.</p> <p>If you're looking at the visits in a report, the row with the most visits will take up the most space. Just like other graph visualizations, <strong>you can use it to easily see which rows have the largest values</strong>. The treemap differs from other graphs though, in that <strong>it can show many more rows</strong>.</p> <h4>Treemap colors for comparison with previous period</h4> <p>The treemap visualization will also show you one thing that no other visualization included with Matomo does: the <strong>evolution</strong> of each row. Hovering over a treemap square will show you how much the row changed from the last period (ie, the last day, week, etc.).</p> <p>Each treemap square is colored based on the evolution value <strong>so you can easily see how your data is changing</strong>. A red square means the change is negative; a green square means the change is positive. The more green the bigger the change; the more red the smaller the change.</p> <h4>Known limitations</h4> <ul> <li>Treemaps will not work with flattened tables. Currently, if a table is flattened, the treemap icon will be removed.</li> <li>Evolution values cannot be calculated for subtables (reports that are displayed when you click on a row or node).</li> </ul> <h4>Feedback, bug report or requests</h4> <p><a href="https://github.com/matomo-org/plugin-TreemapVisualization/issues">github.com/matono-org/plugin-TreemapVisualization/issues</a></p> <hr /> <div class="plugin-compatibility"> <p> View and download this plugin for a specific Matomo version: </p> <ul> <li><a href="?matomoversion=4">Matomo 4.x</a> </li> <li><a href="?matomoversion=5">Matomo 5.x</a> (currently selected)</li> </ul> </div> </div> <div class="tab-pane" id="preview"> <ul class="thumbnails"> <li > <h2> Screen Resolution Treemap </h2> <div class="thumbnail"> <a data-img-url="https://plugins.matomo.org/TreemapVisualization/images/5.0.3/Screen_Resolution_Treemap.png?w=1024" target="_blank"><img src="https://plugins.matomo.org/TreemapVisualization/images/5.0.3/Screen_Resolution_Treemap.png?w=1024" alt="" loading="lazy"></a> </div> </li> <li > <h2> Social Network Treemap </h2> <div class="thumbnail"> <a data-img-url="https://plugins.matomo.org/TreemapVisualization/images/5.0.3/Social_Network_Treemap.png?w=1024" target="_blank"><img src="https://plugins.matomo.org/TreemapVisualization/images/5.0.3/Social_Network_Treemap.png?w=1024" alt="" loading="lazy"></a> </div> </li> <li > <h2> Treemap </h2> <div class="thumbnail"> <a data-img-url="https://plugins.matomo.org/TreemapVisualization/images/5.0.3/Treemap.png?w=1024" target="_blank"><img src="https://plugins.matomo.org/TreemapVisualization/images/5.0.3/Treemap.png?w=1024" alt="" loading="lazy"></a> </div> </li> </ul> </div> </div> </div> </div> <div class="row"> <div class="col-lg-10 col-lg-offset-1"> <div class="row marketplace-metadata"> <div class="col-lg-4 col-md-4"> <div class="data"> <p><strong>Version</strong></p> <p>5.0.3</p> </div> <div class="data"> <p><strong>License</strong></p> <p> <a target="_blank" rel="nofollow noopener" href="https://plugins.matomo.org/TreemapVisualization/5.0.3/license" >GPL v3+</a> </p> </div> <div class="data"> <p><strong>Keywords</strong></p> <p>treemap, graph, visualization, infovis, jit</p> </div> </div> <div class="col-lg-4 col-md-4"> <div class="data"> <p><strong>Last Updated</strong></p> <p>Jan 20th 2025</p> </div> <a name="requirements"></a> <div class="data"> <p><strong>Requirements</strong></p> <p> Matomo >=5.0.0-b1,<6.0.0-b1<br /> <a title="View requirements for Matomo 4" href="?matomoversion=4#requirements">Matomo 4.x</a>, <a title="View requirements for Matomo 5" href="?matomoversion=5#requirements">Matomo 5.x</a> </p> </div> <div class="data"> <p><strong>Downloads</strong></p> <p title="Latest version: 3,171 Downloads">61677</p> </div> <div class="data"> <p><strong>Changelog</strong></p> <p><a rel="noopener" href="https://plugins.matomo.org/TreemapVisualization/changelog?matomoversion=5&wp=1">View Changelog</a></p> </div> </div> <div class="col-md-clearfix col-sm-clearfix"></div> <div class="col-lg-4 col-md-4"> <div class="data"> <p><strong>Authors</strong></p> <p> <a rel="noopener" href="https://matomo.org">Matomo</a> </p> </div> <div class="data"> <p><strong>Websites</strong></p> <p> <a rel="noopener" href="https://matomo.org">Plugin Website</a>, <a rel="noopener" href="https://github.com/matomo-org/plugin-TreemapVisualization">GitHub</a> </p> </div> <div class="data"> <p><strong>Activity</strong></p> <p> 276 commits by 32 developers (last commit 10 days ago) </p> </div> <div class="data"> <p><strong>Developer</strong></p> <p></p> <p class="donation"><a target="_self" href="https://plugins.matomo.org/developer/matomo-org?wp=1">More from this developer</a></p> </div> </div> </div> <div class="row marketplace-metadata support-metadata"> <div class="col-lg-12 col-md-12"> <p><strong>Support</strong></p> <div class="row support-area" > <div class="col-lg-4 col-md-4 col-sm-12 support-section"> <span class="support-title">Documentation:</span><br /> <a target="_blank" href="https://matomo.org/docs/">https://matomo.org/docs/</a> </div> <div class="col-lg-4 col-md-4 col-sm-12 support-section"> <span class="support-title">Forum:</span><br /> <a target="_blank" href="https://forum.matomo.org">https://forum.matomo.org</a> </div> <div class="col-lg-4 col-md-4 col-sm-12 support-section"> <span class="support-title">Email:</span><br /> hello@matomo.org </div> </div><div class="row support-area"> <div class="col-lg-4 col-md-4 col-sm-12 support-section"> <span class="support-title">Issues / Bugs:</span><br /> <a target="_blank" href="https://github.com/matomo-org/plugin-TreemapVisualization/issues">https://github.com/matomo-org/plugin-TreemapVisualization/issues</a> </div> <div class="col-lg-4 col-md-4 col-sm-12 support-section"> <span class="support-title">Source:</span><br /> <a target="_blank" href="https://github.com/matomo-org/plugin-TreemapVisualization">https://github.com/matomo-org/plugin-TreemapVisualization</a> </div> <div class="col-lg-4 col-md-4 col-sm-12 support-section"> <span class="support-title">RSS:</span><br /> <a target="_blank" href="https://matomo.org/feed/">https://matomo.org/feed/</a> </div> </div><div class="row support-area"> </div> </div> </div> </div> </div> <div class="row"> <div class="col-lg-10 col-lg-offset-1"> <a class="btn btn-primary btn-small btn-block btn-download-marketplace" type="button" href="/api/2.0/plugins/TreemapVisualization/download/5.0.3">Free Download for Matomo On-Premise</a> <a class="btn btn-primary btn-small btn-block btn-download-marketplace" type="button" href="/api/2.0/plugins/TreemapVisualization/download/5.0.3">Free Download for Matomo for WordPress</a> </div> </div> <div style="text-align: center;list-style-position: inside;"> <div class="plugin-compatibility"> <p> View and download this plugin for a specific Matomo version: </p> <ul> <li><a href="?matomoversion=4">Matomo 4.x</a> </li> <li><a href="?matomoversion=5">Matomo 5.x</a> (currently selected)</li> </ul> </div> <hr /> </div> <script type="text/javascript"> _paq.push(['setCustomVariable', 1, "PluginName", "TreemapVisualization", "page"]); _paq.push(['setCustomVariable', 2, "PluginStatus", "free", "page"]); _paq.push(['setCustomVariable', 3, "PluginType", "plugin", "page"]); _paq.push(['setCustomVariable', 4, "PluginOwner", "matomo-org", "page"]); </script>  <div id="myModal" class="modal fade"> <div class="modal-dialog"> <div class="modal-content modal-image-content"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <div class="modal-body modal-image-body"> <img id="mimg" data-src="#"/> </div> </div> </div> </div> <p class="sharePage"> Please share <a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://plugins.matomo.org/TreemapVisualization%3Fwp%3D1"><span class="fa fa-facebook-official"></span></a> <a target="_blank" href="https://twitter.com/intent/tweet?url=https://plugins.matomo.org/TreemapVisualization%3Fwp%3D1&text=Check+out+Treemap%20Visualization+for+Matomo+Analytics&related=innocrafthq"><span class="fa fa-twitter"></span></a> <a target="_blank" href="https://www.linkedin.com/shareArticle?mini=true&url=https://plugins.matomo.org/TreemapVisualization%3Fwp%3D1&title=Treemap%20Visualization&summary=&source="><span class="fa fa-linkedin"></span></a> <a target="_blank" href="https://pinterest.com/pin/create/button/?url=https://plugins.matomo.org/TreemapVisualization%3Fwp%3D1&media=ewrwerwer&description=wwerwer"><span class="fa fa-pinterest-square"></span></a> <a href="mailto:?&subject=Treemap Visualization&body=Check this out: https://plugins.matomo.org/TreemapVisualization%3Fwp%3D1"><span class="fa fa-envelope-o"></span></a> </p> <script type="application/ld+json"> { "@context": "http://schema.org/", "@type": "Product", "name": "Matomo Plugin TreemapVisualization (Piwik)", "image": "https://plugins.matomo.org/TreemapVisualization/images/5.0.3/Treemap.png?w=800", "description": "Visualise any report in Matomo as a Treemap. Click on the Treemap icon in each report to load the visualisation.", "applicationCategory": "BusinessApplication", "operatingSystem": "Windows, Linux, OSX", "softwareVersion": "5.0.3", "offers": { "@type": "Offer", "price": "0.00", "priceCurrency": "EUR" } } </script> </div>  <footer class="container footer-page"> <div class="row"> <div class="col-lg-10 col-lg-offset-1 text-center"> <a class="go-top ui-scroll-top" href="#"><span><i class="ficon-arrow-up"></i>Go to top</span></a> </div> </div> <div class="row footer-menu"> <div class="col-lg-10 col-lg-offset-1 text-center"> <ul id="menu-footer_marketplace" class="nav"><li class="menu-faq"><a href="https://shop.matomo.org/faq/">FAQ</a></li> <li class="menu-privacy"><a href="https://matomo.org/privacy-policy/">Privacy</a></li> <li class="menu-terms"><a href="https://shop.matomo.org/terms-conditions/">Terms</a></li> <li class="menu-contact"><a href="https://matomo.org/contact/marketplace/">Contact</a></li> <li class="menu-developers"><a href="https://developer.matomo.org">Developers</a></li> </ul> </div> </div> <div class="row footer-copyright"> <div class="col-lg-10 col-lg-offset-1 text-center"> <p>2025 © Matomo.org. </p> <p><small>Matomo respects your privacy and gives you full control over your data.</small></p> </div> </div> </footer> <script type="text/javascript"> var $iframes = $('iframe#shopHeader'); if ($iframes.length == 1 && $iframes[0]) { iFrameResize({checkOrigin: ['https://shop.matomo.org']}, $iframes[0]); } </script>  <script type="text/plain" data-usercentrics="Matomo"> var _paq = _paq || []; _paq.push(['disableCookies']); _paq.push(['setCustomVariable', 1, "Currency", "USD", "visit"]); _paq.push(["setDomains", ['shop.matomo.org', 'plugins.matomo.org', 'themes.matomo.org']]); _paq.push(["trackPageView"]); _paq.push(["enableLinkTracking"]); _paq.push(["enableHeartBeatTimer"]); _paq.push(["trackVisibleContentImpressions", true, 0]); _paq.push(['enableJSErrorTracking']); function track() { (function() { var u=(("https:" == document.location.protocol) ? "https" : "http") + "://demo-web.matomo.org/"; _paq.push(["setTrackerUrl", u+"piwik.php"]); _paq.push(["setSiteId", "11"]); var d=document, g=d.createElement("script"), s=d.getElementsByTagName("script")[0]; g.type="text/javascript"; g.defer=true; g.async=true; g.src=u+"piwik.js"; s.parentNode.insertBefore(g,s); })(); } if (window.addEventListener) { window.addEventListener("load", track, false); } else if (window.attachEvent) { window.attachEvent("onload",track); } else { track(); } </script>  </body> </html>

CINXE.COM

Treemap Visualization - Matomo Plugins Marketplace