CINXE.COM

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">  <meta name="description" content="We recreated John Snow’s iconic cholera map, using the Flourish 3D Map template. See how we added an additional height dimension and learn how to make similar extruded maps for free.">  <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@f_l_o_u_r_i_s_h"> <meta name="twitter:image" content="https://flourish.studio/images/blog/snow-metatag.png"> <meta name="twitter:title" content="Masters series: Recreating John Snow's cholera map"> <meta name="twitter:description" content="We recreated John Snow’s iconic cholera map, using the Flourish 3D Map template. See how we added an additional height dimension and learn how to make similar extruded maps for free."> <meta name="twitter:creator" content="@f_l_o_u_r_i_s_h"> <meta property="og:title" content="Masters series: Recreating John Snow's cholera map"> <meta property="og:image" content="https://flourish.studio/images/blog/snow-metatag.png"> <meta property="og:type" content="website"> <meta property="og:description" content="We recreated John Snow’s iconic cholera map, using the Flourish 3D Map template. See how we added an additional height dimension and learn how to make similar extruded maps for free."> <meta property="og:site_name" content="Flourish"> <meta property="fb:app_id" content="102649676918117"> <title>Masters series: Recreating John Snow's cholera map</title> <script src="https://cdn-au.onetrust.com/consent/c7f22011-a5da-4a30-8750-4cb18703c00d/OtAutoBlock.js" type="text/javascript"></script> <script src="https://cdn-au.onetrust.com/consent/c7f22011-a5da-4a30-8750-4cb18703c00d/otSDKStub.js" type="text/javascript" charset="UTF-8" data-domain-script="c7f22011-a5da-4a30-8750-4cb18703c00d"></script> <script type="text/javascript">function OptanonWrapper() { }</script> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-44635456-19', 'auto'); ga('send', 'pageview'); // If called, calls the callback immediately. // If not called within `timeout` milliseconds, calls callback. // Alsp prevents double-calling. function createFunctionWithTimeout(callback, timeout) { var called = false; function fn() { if (!called) { called = true; callback(); } } setTimeout(fn, timeout || 1000); // default is 1000ms return fn; } var trackOutboundLink = function(url) { ga('send', 'event', 'outbound', 'click', url, { 'transport': 'beacon', 'hitCallback': createFunctionWithTimeout(function() { document.location = url; }) }); }, trackEmailClick = function(address_type) { ga('send', 'event', { eventCategory: 'click', eventAction: 'email', eventLabel: address_type }); }, trackFormSubmit = function(label, method, path, params) { ga('send', 'event', { eventCategory: 'outbound', eventAction: 'click', eventLabel: label, hitCallback: createFunctionWithTimeout(function() { params = params || {}; // params is optional var form = document.createElement('form'); form.setAttribute('method', method); form.setAttribute('action', path); for (var key in params) { if (params.hasOwnProperty(key)) { var hiddenField = document.createElement('input'); hiddenField.setAttribute('type', 'hidden'); hiddenField.setAttribute('name', key); hiddenField.setAttribute('value', params[key]); form.appendChild(hiddenField); } } document.body.appendChild(form); form.submit(); }) }); }; </script> <script src="https://www.googleoptimize.com/optimize.js?id=OPT-MLMV2BQ"></script>  <script src="/js/d3-dispatch.js"></script> <script src="/js/d3-interpolate.js"></script> <script src="/js/d3-selection.js"></script> <script src="/js/d3-timer.js"></script> <script src="/js/d3-transition.js"></script> <link rel="alternate" href="/atom.xml" title="Flourish" type="application/atom+xml"> <link href="/highlight.css?3e9f1d3cf8a99ebe7f3f230bae0e7d41" rel="stylesheet"> <link href="/style.css?20112024" rel="stylesheet">  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-PBJJP4J');</script>  <meta name="generator" content="Hexo 6.2.0"></head> <body onclick class="is-static">  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PBJJP4J" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>   <div class="row header not-logged-in"> <div class="row-inner"> <a href="/" class="logo clickable menu-item"> <img data-target="home" id="logo" src="/images/Flourish_Logo_Black_small.png" alt="Flourish logo"> </a> <div class="menu-holder"> <div class="menu desktop-nav"> <div class="dropdown-menu sub-menu" id="main-menu"> <div class="dropdown-menu-item-wrapper"> <a class="dropdown-menu-item" href="/" id="blog-menu-item"><h1 data-section="data-visualization-storytelling" class="menu-item">Data visualization and storytelling</h1></a> </div> </div> <div id="account-menu"> <a class="btn log-in-link" target="_blank" rel="noopener" href="https://app.flourish.studio/login" onclick="trackOutboundLink('https://app.flourish.studio/login'); return false;">Log in</a> <a class="btn sign-up-link" target="_blank" rel="noopener" href="https://app.flourish.studio/register" onclick="trackOutboundLink('https://app.flourish.studio/register'); return false;">Sign up</a> </div> </div> <div class="mobile-nav"> <div id="account-menu-blog"> <a class="btn sign-up-link" target="_blank" rel="noopener" href="https://app.flourish.studio/register" onclick="trackOutboundLink('https://app.flourish.studio/register'); return false;">Sign up</a> </div> </div> </div> </div> </div> <div class="content"> <div class="row static"> <div class="page page-" id="page-blog"> <div class="page-content-container"> <div class="row-inner"> <div class="social-buttons side"> <div class="social-button facebook round"><img class="social-icon" src="/images/icons/facebook-logo.svg"></div> <div class="social-button twitter round"><img class="social-icon" src="/images/icons/x-logo-black.svg"></div> <div class="social-button linkedin round"><img class="social-icon" src="/images/icons/linkedin-logo-black.svg"></div> <div class="social-button email round"><img class="social-icon" src="/images/icons/envelope-icon.svg"></div> </div> <div class="page-content-paragraphs"> <article class="article article-type-post"> <div class="article-inner"> <header class="article-header"> <h1 class="article-title" itemprop="name"> Masters series: Recreating John Snow's cholera map </h1> <h2 class="subtitle"> See an interactive version of John Snow's iconic cholera map </h2> <div class="article-meta text-width"> Posted on <strong><time datetime="2022-02-21T00:00:00.000Z" itemprop="datePublished">21 February 2022</time></strong> by <strong>Mafe Callejón</strong> </div> <div class="social-buttons top text-width"> <div class="social-button facebook round"><img class="social-icon" src="/images/icons/facebook-logo.svg"></div> <div class="social-button twitter round"><img class="social-icon" src="/images/icons/x-logo-black.svg"></i></div> <div class="social-button linkedin round"><img class="social-icon" src="/images/icons/linkedin-logo-black.svg"></div> <div class="social-button email round"><img class="social-icon" src="/images/icons/envelope-icon.svg"></div> </div> </header> <div class="article-entry"> <figure class="small right"> <img src="/images/blog/john_snow.jpg" class="shadow" alt="Image of John Snow"> <p class="caption" style="text-align: center">John Snow was an English physician who used a dot map to identify the source of London's cholera epidemic in the 19th century. Image via <a target="_blank" rel="noopener" href="https://commons.wikimedia.org/wiki/File:John_Snow.jpg" target-"_blank">Wikimedia Commons.</a></p> </figure> <p><em>The Flourish team spends a lot of time admiring work by the best visualization practitioners. And so do our users. When a cool visualization goes viral, we often get asked: “Can I do that in Flourish?”. Hence this blog series, which celebrates popular visualizations and looks at how you can achieve similar things in Flourish. You can check out previous Master’s series posts <a href="https://flourish.studio/blog/categories/masters/">here</a>.</em></p> <p>For today’s Masters series post, we recreated a pivotal project in the history of mapping and epidemiology: John Snow’s cholera map. Using our <a target="_blank" rel="noopener" href="https://app.flourish.studio/templates#template-time-map"><strong>3D Map</strong> template</a> with a styled base map and extruded regions, we displayed the iconic map with an additional height dimension.</p> <p>John Snow was an English physician who lived in the 19th century. Although he did remarkable advancements in the field of anaesthetics, he is widely known among the data visualization community for his map depicting deaths in Soho from the cholera outbreak of 1854.</p> <p>Unlike his contemporaries, John Snow believed cholera was transmitted through contaminated sources of water rather than through the air and he managed to prove his point through his now-famous map. After the cholera outbreak on Broad Street in 1854, he plotted deaths and discovered that most of them had occurred close to a public water pump. </p> <figure class="wide"> <img class="half" src="/images/blog/cholera-map.jpg" class="" alt="John Snow's 1854 cholera map with annotations"> <div class="half flourish-embed flourish-map" data-src="visualisation/8733460?70747"><script src="https://public.flourish.studio/resources/embed.js" data-ot-ignore></script></div> <p class="center">Left: Snow's map of the cholera outbreak on Broad Street in 1854 was published in the report <i>On the Mode of Communication of Cholera</i> in 1855. Image via <a target="_blank" rel="noopener" href="https://commons.wikimedia.org/wiki/File:Snow-cholera-map-1.jpg" target-"_blank">Wikimedia Commons.</a> Right: Recreation using our <a target="_blank" rel="noopener" href="https://app.flourish.studio/templates#template-time-map">3D Map template</a></p> </figure> <figure class="text-width"> <a target="_blank" rel="noopener" href="https://app.flourish.studio/templates#template-time-map"><div class="btn cta">Create your own »</div></a> </figure> <h2 id="Why-was-this-map-so-crucial"><a href="#Why-was-this-map-so-crucial" class="headerlink" title="Why was this map so crucial?"></a>Why was this map so crucial?</h2><p>Many of the things Snow did when he build his map were not new. But, as Michael Friendly and Howard Wainer explain in their book <em>A History of Data Visualization & Graphic Communication</em>, the novelty was the connection between the graphic representation and the search for a logical explanation for the cause of the disease.</p> <figure class="wide"> <img src="/images/blog/snow-map-annotated.png" class="" alt="John Snow's 1854 cholera map"> <p class="caption" style="text-align: center"> </figure> <p>Without visualizing the data on a map, it would have been difficult to realize that most cholera deaths were clustered around a single pump. Snow’s research paved the way for data visualization as a tool for statistical analysis.</p> <h2 id="How-to-make-something-like-this-using-Flourish"><a href="#How-to-make-something-like-this-using-Flourish" class="headerlink" title="How to make something like this using Flourish"></a>How to make something like this using Flourish</h2><h3 id="Step-1-Prep-your-data"><a href="#Step-1-Prep-your-data" class="headerlink" title="Step 1: Prep your data"></a>Step 1: Prep your data</h3><p>To build this map we used <a target="_blank" rel="noopener" href="https://blog.rtwilson.com/john-snows-cholera-data-in-more-formats/">Dr. Robin Wilson’s data</a> as our source. His files were optimized for GIS systems which are not compatible with Flourish. In order to work with them, we converted the files with the coordinates for the pumps and the deaths to be in a CSV format. </p> <p>The original data contains a single set of coordinates for each building where cholera deaths were registered, which would result in a <strong>point</strong> map. In order to create our extruded map, we needed <strong>regions</strong> that contained the death data instead. To achieve this, we wrote a script that converted the initial single-pair coordinate sets into custom GeoJSON regions that replaced the stacked bars of the original map. These custom polygons are rectangles with four sets of coordinates, one for each corner, and a “count” property that contains the number of people who died at that specific location.</p> <figure class="small right shadow"> <img src="/images/blog/snow-polygon.png" alt="A custom polygon, showing format the JavaScript object follows when uploading custom GeoJSON files into Flourish."> </figure> <p>The process to get or create custom GeoJSON files varies from case to case; however, one thing you need to be aware of when uploading custom GeoJSON files into Flourish is that the JavaScript object follows this format: </p> <p><code>{"coordinates":[[[-0.138003,51.513437],[-0.137876,51.51348],[-0.137807,51.513401],[-0.137934,51.513358],[-0.138003,51.513437]]],"type":"Polygon"}</code></p> <p>The object is composed of two parts: the “coordinates” key term ahead of the latitude and longitude pairs that compose the figure, and a key-value pair that reads “type”:”Polygon”.</p> <p>While we wrote a script to help us translate the latitudes and longitudes from the dataset to polygons, it’s also possible to use free tools such as <a target="_blank" rel="noopener" href="https://geojson.io/#map=2/20.0/0.0">GeoJSON.io</a> to draw the shapes you’d like to extrude with your data.</p> <h3 id="Step-2-Build-a-3D-Map"><a href="#Step-2-Build-a-3D-Map" class="headerlink" title="Step 2: Build a 3D Map"></a>Step 2: Build a 3D Map</h3><p>Once you have sorted your polygons, it’s time to start plotting!</p> <ol> <li><p>Select one of our <strong>3D Map template</strong> starting points and clear the Points sheet and the Regions sheet. Then, upload your own data into both of these tabs.</p> </li> <li><p>In the <strong>Regions</strong> sheet, <a target="_blank" rel="noopener" href="https://help.flourish.studio/article/71-how-to-add-your-own-map-regions">bind your custom polygons</a> to the <strong>Geometry</strong> binding and bind your numeric data to the <strong>Value</strong> and <strong>Height</strong> bindings. In this case, we bound the number of deaths to both.</p> </li> </ol> <figure class="small right shadow"> <img src="/images/blog/john-snow-column-bindings.png" alt="The column bindings for the 3D Map in Flourish"> </figure> <ol start="3"> <li><p>If you have points data, bind it accordingly in the <strong>Points</strong> sheet. In our case, we used points to represent the water pumps. </p> </li> <li><p>In the <strong>Preview</strong> tab, go to the <strong>Base map</strong> setings and change the <strong>Map style</strong> to your liking. We used the <strong>Positron</strong> base map style but you can choose whichever style you prefer. </p> </li> <li><p>Go to the <strong>Regions settings</strong> and toggle the <a target="_blank" rel="noopener" href="https://help.flourish.studio/article/302-how-to-extrude-regions-in-your-3d-map"><strong>Extrude regions</strong></a> option on. This will adjust the height of your polygons to match your numeric data. Under these settings, set a minimum and maximum height for your extruded regions.</p> </li> </ol> <figure class="small right shadow"> <img src="/images/blog/snow-extrude.png" alt="The setting to activate extrusions."> </figure> <ol start="6"> <li><p>Under the <strong>Region fill</strong> settings, change the <strong>Scale type</strong> from <strong>Categorical</strong> to <strong>Numeric</strong>. This will shade the blocks according to the number of deaths. You can choose from a wide range of palettes or create a custom palette.</p> </li> <li><p>Finally, to constrain the zoom level and the vertical rotation of the map (also called <a target="_blank" rel="noopener" href="https://help.flourish.studio/article/331-how-to-set-an-initial-viewport-in-maps">pitch</a>), go to the <strong>Viewport and interaction</strong> settings.</p> </li> </ol> <h3 id="Step-3-Build-a-story"><a href="#Step-3-Build-a-story" class="headerlink" title="Step 3: Build a story"></a>Step 3: Build a story</h3><p>Add the final touches to your visualization by adding it to a <a target="_blank" rel="noopener" href="https://help.flourish.studio/article/13-creating-a-story">Flourish story</a>.</p> <ol> <li><a target="_blank" rel="noopener" href="https://help.flourish.studio/article/89-how-to-create-a-single-slide-story-in-flourish">Create a Flourish story</a> and add the visualization as a slide. </li> <li>Scale and rotate the map to your liking. Unlike regular visualizations, stories capture the current position of your map and will always display it like that.</li> <li>If you only want to display a single visualization, disable your story navigation in order to create a <a target="_blank" rel="noopener" href="https://help.flourish.studio/article/89-how-to-create-a-single-slide-story-in-flourish">single-slide story</a>. Alternatively, you can string together different views of your map and allow your users to animate between them.</li> </ol> <figure class="wide shadow"> <div class="flourish-embed" data-src="story/1113868?724315"><script src="https://public.flourish.studio/resources/embed.js" data-ot-ignore></script></div> </figure> <figure class="text-width"> <a target="_blank" rel="noopener" href="https://app.flourish.studio/templates#template-time-map"><div class="btn cta">Create your own »</div></a> </figure> <h2 id="Try-it-yourself-–-and-don’t-forget-to-credit"><a href="#Try-it-yourself-–-and-don’t-forget-to-credit" class="headerlink" title="Try it yourself – and don’t forget to credit!"></a>Try it yourself – and don’t forget to credit!</h2><p>We would love to see anything you make with this kind of technique, so whether you decided to give this famous map your own twist or create something new with custom polygons and extruded regions, let us know via <a target="_blank" rel="noopener" href="https://twitter.com/f_l_o_u_r_i_s_h">Twitter</a>.</p> <p><em>Thanks to <a target="_blank" rel="noopener" href="https://blog.rtwilson.com/john-snows-cholera-data-in-more-formats/">Dr. Robin Wilson</a> for compiling this data and making it available to the public. And to the Flourish team – Mark L, Tim, Andrew W, Bobby, Luisa, Eade, Helena, Ilias and Olivia – for collaborating on this project.</em></p> <p><em>Have you come across a brilliant visualization you’d like to see in this series? <a href="mailto:hello@flourish.studio">Let us know!</a></em></p> <figure class="wide"> <div class="flourish-embed flourish-cards" data-src="visualisation/16577475?70747"><script src="https://public.flourish.studio/resources/embed.js" data-ot-ignore></script></div> </figure> </div> <footer class="article-footer"> <div class="article-newsletter"> <h3><span class="enjoyed">Enjoyed this blog post?</span></span> <span>Get the newsletter!</h3> <form action="https://studio.us13.list-manage.com/subscribe/post?u=a41ac2fe0fc0d1ab52f5df1b9&id=190848d56d" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> <input type="email" style="display: inline-block;" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>  <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_a41ac2fe0fc0d1ab52f5df1b9_190848d56d" tabindex="-1" value=""></div> <div class="clear" style="display: inline-block;"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn_mailchimp"></div> </form> <div class="smallprint" style="line-height: 1.4em;"> By clicking "Subscribe", you agree to receive news and updates about Flourish products and services (unsubscribe any time). Read our <a href="https://flourish.studio/privacy/" target="_blank">Privacy Policy</a>. Newsletter powered by Mailchimp (<a href="https://mailchimp.com/legal/" target="_blank">privacy</a>).</div>  </div> <nav id="article-nav"> <a href="/blog/the-rise-of-wordle/" id="article-nav-newer" class="article-nav-link-wrap"> <strong class="article-nav-caption">Next <i class="fa fa-arrow-right"></i></strong> <div class="article-nav-title"> The incredible rise of Wordle – visualized! </div> </a> <a href="/blog/introducing-bubble-chart-template/" id="article-nav-older" class="article-nav-link-wrap"> <strong class="article-nav-caption"><i class="fa fa-arrow-left"></i> Previous</strong> <div class="article-nav-title">Bubbles, they bounce! Introducing bubble charts</div> </a> </nav> </footer> </div> </article> </div> <div class="bottom-bar"> <div class="text-width bottom-bar-inner"> <a href="/blog" class="blog-home">≪ Blog home</a> <span class="social-buttons bottom"> <div class="clickable social-button facebook"><img class="social-icon" src="/images/icons/facebook-logo.svg"></div> <div class="clickable social-button twitter"><img class="social-icon" src="/images/icons/x-logo-black.svg"></div> <div class="clickable social-button linkedin"><img class="social-icon" src="/images/icons/linkedin-logo-black.svg"></div> <div class="clickable social-button email"><img class="social-icon" src="/images/icons/envelope-icon.svg"></div> </span> </div> </div> </div> </div> </div> </div> </div> <div class="row footer"> <div class="row-contents"> <div class="row-inner"> <div class="footer-container">  <div class="footer-section company"> <h4>Company</h4> <ul> <li><a href="/company">About us</a></li> <li><a target="_blank" rel="noopener" href="https://www.lifeatcanva.com/en/locations/united-kingdom/">Careers</a></li> <li><a href="/security">Security</a></li> <li><a href="/pricing">Pricing</a></li> <li><a href="/terms">Terms</a></li> <li><a href="/privacy">Privacy policy</a></li> <li><a href="/resources/faq">FAQs</a></li> </ul> </div>  <div class="footer-section explore"> <h4>Explore</h4> <ul> <li><a href="/examples">Examples</a></li> <li><a href="/resources/elections">Elections & polls</a></li> <li><a href="/resources/sports">Sports & competitions</a></li> <li><a href="/visualisations/maps">Interactive maps</a></li> <li><a href="/resources/visualize-survey-data">Survey responses</a></li> <li><a href="/visualisations/scrollytelling">Scrollytelling</a></li> <li><a href="/visualisations">Chart guides</a></li> <li><a href="/blog">Blog</a></li> </ul> </div>  <div class="footer-section solutions"> <h4>Solutions</h4> <ul> <li><a href="/solutions/financial-services">Financial services</a></li> <li><a href="/solutions/professional-services">Professional services</a></li> <li><a href="/solutions/newsrooms">Newsrooms</a></li> <li><a href="/solutions/marketing">Marketing</a></li> <li><a href="/solutions/not-for-profit">Nonprofits</a></li> <li><a href="/solutions/government">Government</a></li> <li><a href="/solutions/education">Education</a></li> </ul> </div>  <div class="footer-section resources"> <h4>Resources</h4> <ul> <li><a href="/whats-new">What's new</a></li> <li><a target="_blank" rel="noopener" href="https://help.flourish.studio/">Help docs</a></li> <li><a href="/resources/training">Training</a></li> <li><a href="/resources/webinar">Webinars</a></li> <li><a href="/resources/datasets">Datasets</a></li> <li><a href="/accessibility">Accessibility</a></li> <li><a href="/experts">Experts network</a></li> <li><a href="https://flourish.studio/developers">For developers</a></li> </ul> </div>  <div class="footer-section company-info"> <h4>Flourish</h4> <p class="break-text">Flourish is a registered trademark of <span>Canva UK Operations Ltd, UK</span></p> <p>company 08825531</p> <p>33 Hoxton Square</p> <p>London N1 6NN</p> </div> </div> </div>  <div class="footer-container-black"> <div class="row-inner"> <div class="footer-section stay-in-touch"> <h4>Stay in touch</h4> <div class="footer-row-items"> <div class="btn-social-container"> <a href="/newsletter"><div class="footer-btn">Subscribe to our newsletter</div></a> <div class="social-links"> <a target="_blank" rel="noopener" href="https://x.com/f_l_o_u_r_i_s_h" aria-label="X"><img class="icon" src="/images/icons/x-logo.svg"></a> <a target="_blank" rel="noopener" href="https://www.instagram.com/madewithflourish/" aria-label="instagram"><img class="icon" src="/images/icons/instagram-logo.svg"></a> <a target="_blank" rel="noopener" href="https://www.linkedin.com/company/f-l-o-u-r-i-s-h" aria-label="LinkedIn"><img class="icon" src="/images/icons/linkedin-logo.svg"></a> <a target="_blank" rel="noopener" href="https://www.youtube.com/channel/UCWTf4OgEH_MiDvfmjPdkTxg" aria-label="YouTube"><img class="icon" src="/images/icons/youtube-logo.svg"></a> </div> </div> <div class="footer-credit"> <p>© 2024 Flourish, a Canva UK Operations Limited brand. All rights reserved.</p> </div> </div> </div> </div> </div> </div> </div> </div> <script src="/js/script.js?0faceefc032ab10252303efc87a295d8"></script> <script src="/js/store-inbound-fields.js"></script> <script src="/js/blog-post.js"></script> </body> </html>