https://vistools-browser.webflow.io/gallery

1<!DOCTYPE html><!-- This site was created in Webflow. https://webflow.com --><!-- Last Published: Tue Jan 10 2023 20:59:40 GMT+0000 (Coordinated Universal Time) --><html data-wf-domain="vistools-browser.webflow.io" data-wf-page="60ec1d9d1484679c45ee0d12" data-wf-site="60e466e23b0be0137581279d"><head><meta charset="utf-8"/><link href="https://uploads-ssl.webflow.com" rel="preconnect" crossorigin="anonymous"/><title>Gallery</title><meta content="Gallery" property="og:title"/><meta content="Gallery" name="twitter:title"/><meta content="width=device-width, initial-scale=1" name="viewport"/><meta content="Webflow" name="generator"/><link href="https://cdn.prod.website-files.com/60e466e23b0be0137581279d/css/vistools-browser.webflow.286e245e5.css" rel="stylesheet" type="text/css"/><link href="https://fonts.googleapis.com" rel="preconnect"/><link href="https://fonts.gstatic.com" rel="preconnect" crossorigin="anonymous"/>

1<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>

1<script type="text/javascript">WebFont.load({  google: {    families: ["Changa One:400,400italic","Varela Round:400","Open Sans:300,300italic,400,400italic,600,600italic,700,700italic,800,800italic","Montserrat:100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic","PT Sans:400,400italic,700,700italic"]  }});</script>

1<script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>

1<link href="https://cdn.prod.website-files.com/img/favicon.ico" rel="shortcut icon" type="image/x-icon"/><link href="https://cdn.prod.website-files.com/img/webclip.png" rel="apple-touch-icon"/>

1<script id="jetboost-script" type="text/javascript"> window.JETBOOST_SITE_ID = "ckqx04hw407vc0mu057sr65q7"; (function(d) { var s = d.createElement("script"); s.src = "https://cdn.jetboost.io/jetboost.js"; s.async = 1; d.getElementsByTagName("head")[0].appendChild(s); })(document); </script>

1<script type="text/javascript">window.__WEBFLOW_CURRENCY_SETTINGS = {"currencyCode":"USD","$init":true,"symbol":"$","decimal":".","fractionDigits":2,"group":",","template":"{{wf {\"path\":\"symbol\",\"type\":\"PlainText\"} }} {{wf {\"path\":\"amount\",\"type\":\"CommercePrice\"} }} {{wf {\"path\":\"currencyCode\",\"type\":\"PlainText\"} }}","hideDecimalForWholeNumbers":false};</script>

1</head><body class="body"><div data-collapse="medium" data-animation="default" data-duration="100" data-easing="ease" data-easing2="ease" role="banner" class="navbar-2 w-nav"><div class="w-container"><a href="/" class="w-nav-brand"><div class="w-row"><div class="w-col w-col-3"><img src="https://cdn.prod.website-files.com/60e466e23b0be0137581279d/610a4c836ef53442ef227d1a_logo.png" loading="lazy" width="36" height="36" alt="" class="image-18"/></div><div class="w-col w-col-9"><div class="text-block-2"><span><strong class="bold-text-2 datatype-3">VISBROWSER</strong></span></div></div></div></a><nav role="navigation" class="w-nav-menu"><a href="/gallery" aria-current="page" class="w-nav-link w--current"><span class="text-span-4"><strong>Gallery</strong></span></a><a href="/contribute" class="nav-link-4 w-nav-link"><span>Add a Tool</span></a><a href="/about" class="nav-link-5 w-nav-link"><span>About</span></a></nav><div class="w-nav-button"><div class="w-icon-nav-menu"></div></div></div></div><form action="/search" class="search-2 w-form"><input class="searchparent jetboost-list-search-input-2pem w-input" maxlength="256" name="query" filter-by="*" placeholder="Search great visualization works" type="search" id="search" required=""/><input type="submit" class="search-button-2 w-button" value="Write a blog"/><a href="/add-a-blog" target="_blank" class="button-8 w-button">Upload a Blog</a></form><div class="container-5 w-container"><div class="jetboost-list-wrapper-2pem w-dyn-list"><div role="list" class="collection-list-5 w-dyn-items"><div role="listitem" class="collection-item-5 w-dyn-item"><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="heatmap-basics-with-seaborn" /></div><a href="/post/heatmap-basics-with-seaborn" target="_blank" class="link-block-7 w-inline-block"><div class="w-layout-grid grid-5"><h3 class="heading-11">Heatmap Basics with Seaborn</h3><img src="https://cdn.prod.website-files.com/60e466e23b0be0137581279d/60ec17ca995cdebed39e0476_icons8-thumbs-up-48.png" loading="lazy" width="20" alt="thumbup
2" class="image-13"/><div class="text-block-38">14</div><div id="w-node-_9005355b-12b1-3f53-94df-d421511f3456-45ee0d12" class="text-block-40"><span class="text-span-7"> Tags </span></div><div id="w-node-_29ffda43-4a03-b338-4e47-bd4439490cdd-45ee0d12" class="text-block-41"><span class="text-span-8"> Description </span></div><img height="" loading="lazy" width="400" src="https://cdn.prod.website-files.com/60e46f830c94d8830ab9fabd/60ec28b2f1e9a8a413e77f6d_vis%20example3.jpeg" alt="Heatmap Basics with Seaborn" id="w-node-a493d482-e092-c03a-9538-0c4605ca7831-45ee0d12" class="image-14"/><div id="w-node-_3a15db92-e36f-6094-2ae9-d06f7d861d0b-45ee0d12" class="text-block-36">December 12, 2021</div><div id="w-node-b7dede0f-9279-01e0-8bdf-4db317e6cb98-45ee0d12" class="text-block-39">python, seaborn, coding, heatmap</div><p id="w-node-a3328694-a35e-eaa4-1100-fb206475de15-45ee0d12" class="paragraph-5">A guide for how to create heatmaps with Matplotlib and Seaborn</p></div></a></div><div role="listitem" class="collection-item-5 w-dyn-item"><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="a-magic-pi" /></div><a href="/post/a-magic-pi" target="_blank" class="link-block-7 w-inline-block"><div class="w-layout-grid grid-5"><h3 class="heading-11">A Magic Pi</h3><img src="https://cdn.prod.website-files.com/60e466e23b0be0137581279d/60ec17ca995cdebed39e0476_icons8-thumbs-up-48.png" loading="lazy" width="20" alt="thumbup
3" class="image-13"/><div class="text-block-38">10</div><div id="w-node-_9005355b-12b1-3f53-94df-d421511f3456-45ee0d12" class="text-block-40"><span class="text-span-7"> Tags </span></div><div id="w-node-_29ffda43-4a03-b338-4e47-bd4439490cdd-45ee0d12" class="text-block-41"><span class="text-span-8"> Description </span></div><img height="" loading="lazy" width="400" src="https://cdn.prod.website-files.com/60e46f830c94d8830ab9fabd/60ec664f4921b9d2981070ad_vis%20example1.jpg" alt="A Magic Pi" id="w-node-a493d482-e092-c03a-9538-0c4605ca7831-45ee0d12" class="image-14"/><div id="w-node-_3a15db92-e36f-6094-2ae9-d06f7d861d0b-45ee0d12" class="text-block-36">March 14, 2021</div><div id="w-node-b7dede0f-9279-01e0-8bdf-4db317e6cb98-45ee0d12" class="text-block-39">coding, art, processing, java</div><p id="w-node-a3328694-a35e-eaa4-1100-fb206475de15-45ee0d12" class="paragraph-5">Happy Pi Day!! In this Coding Challenge, I use the &quot;monte Carlo&quot; method to approximate the value of Pi in Processing (Java).
4</p></div></a></div><div role="listitem" class="collection-item-5 w-dyn-item"><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="how-to-create-a-storytelling-visualization" /></div><a href="/post/how-to-create-a-storytelling-visualization" target="_blank" class="link-block-7 w-inline-block"><div class="w-layout-grid grid-5"><h3 class="heading-11">How to create a  Storytelling visualization</h3><img src="https://cdn.prod.website-files.com/60e466e23b0be0137581279d/60ec17ca995cdebed39e0476_icons8-thumbs-up-48.png" loading="lazy" width="20" alt="thumbup
5" class="image-13"/><div class="text-block-38">12</div><div id="w-node-_9005355b-12b1-3f53-94df-d421511f3456-45ee0d12" class="text-block-40"><span class="text-span-7"> Tags </span></div>

5<div id="w-node-_29ffda43-4a03-b338-4e47-bd4439490cdd-45ee0d12" class="text-block-41"><span class="text-span-8"> Description </span></div><img class="image-14" src="https://cdn.prod.website-files.com/60e46f830c94d8830ab9fabd/60f6cffee3df2d399880cd8f_vis%20example.png" width="400" height="" alt="How to create a  Storytelling visualization" sizes="(max-width: 479px) 100vw, 400px" id="w-node-a493d482-e092-c03a-9538-0c4605ca7831-45ee0d12" loading="lazy" srcset="https://cdn.prod.website-files.com/60e46f830c94d8830ab9fabd/60f6cffee3df2d399880cd8f_vis%20example-p-500.png 500w, https://cdn.prod.website-files.com/60e46f830c94d8830ab9fabd/60f6cffee3df2d399880cd8f_vis%20example-p-800.png 800w, https://cdn.prod.website-files.com/60e46f830c94d8830ab9fabd/60f6cffee3df2d399880cd8f_vis%20example.png 1024w"/><div id="w-node-_3a15db92-e36f-6094-2ae9-d06f7d861d0b-45ee0d12" class="text-block-36">August 29, 2021</div><div id="w-node-b7dede0f-9279-01e0-8bdf-4db317e6cb98-45ee0d12" class="text-block-39">storytelling, adobe illustrator, art</div><p id="w-node-a3328694-a35e-eaa4-1100-fb206475de15-45ee0d12" class="paragraph-5">We’re addicted to data. It helps us find golden revenue opportunities. It helps us slash project costs. Whatever path we seek or decision we are trying to make, we rely on data to get there. But sometimes instead of hastening decisions, data can actually hinder them. That’s because those who spend time gathering data have a tendency to want to show off ALL of it. Even data visualization experts – with ability to render beautiful, colorful charts and tables – will struggle to give their data meaning unless they know how to tell a story.</p></div></a></div></div></div></div>

5<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=60e466e23b0be0137581279d" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

5<script src="https://cdn.prod.website-files.com/60e466e23b0be0137581279d/js/webflow.61faf4b54.js" type="text/javascript"></script>

5<!-- Hosted Library script file on CDN for free -->

6<script src="https://cdn.finsweet.com/files/cmslibrary-v1.8.js"></script>

6

7<script>
8(function() {
9	// create a new Library instance and store it in a variable called "projectsGrid"
10	var projectsGrid = new FsLibrary('.Container 6')
11  
12	// define our filter group(s)
13	var myFilters = [
14	{
15		filterWrapper: ".Search 2",
16		filterType: "exclusive"]
17 // run filter on our instance
18	projectsGrid.filter({
19		filterArray: myFilters, // the filter group name we defined
20    activeClass: 'fltr-active', // the active class we give to our buttons
21		animation: {
22			enable: true,
23			duration: 200,
24			easing: 'ease-out',
25			effects: 'fade translate(0px,20px)'
26			}
27  })
28})();
29</script>

29</body></html>