{"id":23584,"date":"2025-05-22T10:39:00","date_gmt":"2025-05-22T14:39:00","guid":{"rendered":"https:\/\/dvsnightingstg.wpenginepowered.com\/?p=23584"},"modified":"2025-05-22T10:43:23","modified_gmt":"2025-05-22T14:43:23","slug":"scrollytelling-with-closeread","status":"publish","type":"post","link":"https:\/\/nightingaledvs.com\/scrollytelling-with-closeread\/","title":{"rendered":"Scrollytelling with Closeread: The Super Low-Code Way to Bring Your Data Project to the Web!"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Introduction<\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">What is Scrollytelling?<\/h4>\n\n\n\n<p>Scrollytelling is a dynamic, interactive storytelling technique often used in web-based formats, that reveals insights, visuals, and narrative elements as the user scrolls down the page. It allows data stories to unfold gradually, guiding the reader through a structured narrative in a way that feels both natural and engaging.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Why Scrollytelling Is Effective for Data Communication<\/h4>\n\n\n\n<p>Scrollytelling is a powerful way to communicate data because it helps reduce information overload, boosts user engagement, and makes insights easier to digest. Rather than overwhelming users with dense dashboards or complex visuals all at once, it guides them through your story step by step\u2014just by scrolling.<\/p>\n\n\n\n<p>Scrollytelling is not a replacement for other presentation methods such as dashboards and static pdf reports. Instead, it works best when there\u2019s a need to communicate stories or data insights to a broad audience with varying levels of data literacy. It allows you to wrap each insight in meaningful context and empowers you to control the pacing and structure of your narrative while keeping readers engaged through suspense and sequential reveals. This results in a smoother, more intuitive experience, especially for readers who need guidance or are less data-savvy. This level of engagement is often difficult to achieve with other traditional methods of presentation. As a dynamic and versatile technique, scrollytelling supports various content formats such as text, charts, maps, GIFs, images and more.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">The Challenge<\/h4>\n\n\n\n<p>Despite its many advantages, scrollytelling has traditionally required web development skills\u2014something many dataviz professionals don\u2019t typically have. In the past, even large media houses with dedicated teams would spend significant time and effort building a scrollytelling project. The tradeoffs were high, making it a less viable option for time-sensitive or resource-constrained projects.<\/p>\n\n\n\n<p>For smaller teams or solo practitioners, this barrier has often made web-based storytelling feel out of reach. But that changes today. Thanks to the many developer communities, the barriers have been so significantly lowered that you can put up your scrollytelling project in a few hours, many of the times, without even needing to code!<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">What You\u2019ll Learn in This Tutorial<\/h4>\n\n\n\n<p>By the end of this tutorial, you\u2019ll be able to build and deploy a fully functional scrollytelling project that takes your insights beyond dashboards and onto the web! Specifically, you\u2019ll be able to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Set up your environment and craft your data story using the scrollytelling technique<\/li>\n\n\n\n<li>Build your project locally and deploy it to the web for free using GitHub and Vercel (or any other deployment platform that supports dynamic webpages)<\/li>\n<\/ul>\n\n\n\n<p>Don\u2019t worry\u2014we\u2019ll walk through everything step by step, from scratch. Whether you\u2019re an absolute beginner or just looking to sharpen your skills, this tutorial will help you build your first scrollytelling project from the ground up!<\/p>\n\n\n\n<p>One more thing: This tutorial is designed to be hands-on, so as you follow along, feel free to copy each line of code and paste it into your Closeread document to see it in action.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Tools we\u2019ll be using<\/h2>\n\n\n\n<p>For this project, we\u2019ll use the <a href=\"https:\/\/closeread.dev\/\" target=\"_blank\" rel=\"noreferrer noopener\">Closeread<\/a> extension to create our data scrollytelling experience. Closeread is a Quarto extension designed specifically for building interactive, scroll-based narratives. To use Closeread, you\u2019ll need two key tools:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Quarto<\/strong>: an open-source publishing system that supports Python, R, Julia, and ObservableJS. It allows you to create dynamic, multi-format documents using Markdown, Jupyter Notebooks, or your preferred editor. Since Closeread is built on top of Quarto, installing Quarto is a necessary first step.<\/li>\n\n\n\n<li><strong>A Code Editor<\/strong>: This is where you\u2019ll write and manage your project files. We\u2019ll be using Visual Studio Code (VS Code) in this tutorial, but feel free to use alternatives like RStudio, Atom, or any editor that supports Quarto projects.<\/li>\n<\/ol>\n\n\n\n<p>To get started, install the Quarto command line tool from the official <a href=\"https:\/\/quarto.org\/docs\/download\/\" target=\"_blank\" rel=\"noreferrer noopener\">Quarto website<\/a>. Follow the standard installation process for your operating system. Since I&#8217;m using Windows, I downloaded it as shown below.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" fetchpriority=\"high\" decoding=\"async\" width=\"720\" height=\"405\" src=\"https:\/\/i0.wp.com\/dvsnightingale.wpenginepowered.com\/wp-content\/uploads\/2025\/05\/download_quarto.gif?resize=720%2C405&#038;ssl=1\" alt=\"\" class=\"wp-image-23577\"\/><figcaption class=\"wp-element-caption\">Downloading the Quarto installer from the official website.<\/figcaption><\/figure>\n<\/div>\n\n\n<div style=\"height:33px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>We&#8217;ll also be using <a href=\"https:\/\/github.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub<\/a> for version control and <a href=\"https:\/\/vercel.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Vercel<\/a> to deploy the final project to the web.<\/p>\n\n\n\n<p>Once you\u2019ve installed Quarto, you\u2019re ready to install the Closeread extension. We\u2019ll cover that in the next section.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Set up your project environment<\/h2>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Step 1: Set Up Your Project Directory<\/strong><\/h4>\n\n\n\n<p>Start by creating a folder named <strong>closeread_tutorial<\/strong>. You can place this folder anywhere you&#8217;d like your project to live. Personally, I prefer to keep it on my Desktop, so my directory structure looks like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>C:\\Users\\USER\\Desktop\\closeread_tutorial<\/code><\/pre>\n\n\n\n<p>Next, open a terminal and navigate to the folder you just created. An easy way to do this is by copying the full path to the folder.<\/p>\n\n\n\n<p>If you&#8217;re on Windows, press <strong>Windows Key + R<\/strong>, type <strong>cmd<\/strong>, and hit Enter to open the Command Prompt.<\/p>\n\n\n\n<p>Then, run the following command (update the path to match your own folder location if different):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>cd \"C:\\Users\\USER\\Desktop\\closeread_tutorial\"<\/code><\/pre>\n\n\n\n<p>This sets your working directory to the project folder. You can confirm it&#8217;s successful by checking that the command prompt now matches the folder path you copied earlier.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"720\" height=\"131\" src=\"https:\/\/i0.wp.com\/dvsnightingale.wpenginepowered.com\/wp-content\/uploads\/2025\/05\/cwd-1024x187.png?resize=720%2C131&#038;ssl=1\" alt=\"\" class=\"wp-image-23575\" srcset=\"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2025\/05\/cwd.png?resize=1024%2C187&amp;ssl=1 1024w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2025\/05\/cwd.png?resize=300%2C55&amp;ssl=1 300w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2025\/05\/cwd.png?resize=768%2C140&amp;ssl=1 768w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2025\/05\/cwd.png?resize=450%2C82&amp;ssl=1 450w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2025\/05\/cwd.png?resize=800%2C146&amp;ssl=1 800w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2025\/05\/cwd.png?resize=250%2C46&amp;ssl=1 250w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2025\/05\/cwd.png?resize=550%2C101&amp;ssl=1 550w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2025\/05\/cwd.png?resize=985%2C180&amp;ssl=1 985w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2025\/05\/cwd.png?resize=1100%2C202&amp;ssl=1 1100w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2025\/05\/cwd.png?w=1105&amp;ssl=1 1105w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><figcaption class=\"wp-element-caption\">Command prompt confirming that the working directory is now set to the Closeread project folder.<\/figcaption><\/figure>\n<\/div>\n\n\n<div style=\"height:33px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Install the Closeread Extension<\/strong><\/h4>\n\n\n\n<p>To install the Closeread extension, run the following command in your command prompt:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>quarto add qmd-lab\/closeread<\/code><\/pre>\n\n\n\n<p>Make sure you&#8217;re connected to the internet, as this command will fetch the extension from an online repository. You may receive a few prompts asking whether Quarto extensions should be allowed to execute code during document rendering. Simply type <strong>Yes <\/strong>for each prompt to proceed with the installation.<\/p>\n\n\n\n<p>Your command prompt should now look similar to this:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"720\" height=\"422\" src=\"https:\/\/i0.wp.com\/dvsnightingale.wpenginepowered.com\/wp-content\/uploads\/2025\/05\/cwd-closeread-installed-1024x600.png?resize=720%2C422&#038;ssl=1\" alt=\"\" class=\"wp-image-23576\" srcset=\"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2025\/05\/cwd-closeread-installed.png?resize=1024%2C600&amp;ssl=1 1024w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2025\/05\/cwd-closeread-installed.png?resize=300%2C176&amp;ssl=1 300w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2025\/05\/cwd-closeread-installed.png?resize=768%2C450&amp;ssl=1 768w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2025\/05\/cwd-closeread-installed.png?resize=450%2C264&amp;ssl=1 450w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2025\/05\/cwd-closeread-installed.png?resize=800%2C469&amp;ssl=1 800w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2025\/05\/cwd-closeread-installed.png?resize=250%2C146&amp;ssl=1 250w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2025\/05\/cwd-closeread-installed.png?resize=550%2C322&amp;ssl=1 550w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2025\/05\/cwd-closeread-installed.png?resize=307%2C180&amp;ssl=1 307w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2025\/05\/cwd-closeread-installed.png?resize=512%2C300&amp;ssl=1 512w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2025\/05\/cwd-closeread-installed.png?resize=853%2C500&amp;ssl=1 853w, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2025\/05\/cwd-closeread-installed.png?w=1147&amp;ssl=1 1147w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><figcaption class=\"wp-element-caption\">Command prompt showing that the Closeread extension was successfully installed in the project folder.<\/figcaption><\/figure>\n<\/div>\n\n\n<p>The message highlighted in red confirms that Closeread has been successfully installed. You can also verify this by refreshing your project folder. You\u2019ll notice that a new folder named <strong>_extensions<\/strong> has been added to it.<\/p>\n\n\n\n<p>Congratulations! \ud83c\udf89 You\u2019re now all set to create your first Closeread project.<\/p>\n\n\n\n<p>Let\u2019s dive in!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Create a basic Closeread project<\/h2>\n\n\n\n<p>Now, inside your project folder, create a new file named <strong>index.qmd<\/strong>. Open the file in your code editor and paste the following lines of code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>---\ntitle: My First Closeread\nformat: closeread-html\n\n---\n\nHello World! Please read my Closeread story below.\n\n:::{.cr-section}\n\nCloseread enables scrollytelling.\n\nDraw your reader's attention with focus effects. @cr-features\n\n:::{#cr-features}\n1. Highlighting  \n2. Zooming  \n3. Panning  \n:::\n\n:::<\/code><\/pre>\n\n\n\n<p>You\u2019ve just created your first Quarto document! \ud83c\udf89<\/p>\n\n\n\n<p>Now, let\u2019s render and preview it to see your Closeread project in action. Go to your terminal and run this quarto command:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>quarto render index.qmd<\/code><\/pre>\n\n\n\n<p>This should render your project.<\/p>\n\n\n\n<p>After rendering, you\u2019ll notice that new file and folder have been added to your project directory:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A folder containing the necessary libraries and assets used by your Closeread project.<\/li>\n\n\n\n<li>An HTML file generated from your base Quarto document, which serves as the interactive output.<\/li>\n<\/ul>\n\n\n\n<p>These confirm that your project has successfully compiled and is ready for further development.<\/p>\n\n\n\n<p>To preview the project you just created, open the <strong>index.html<\/strong> file in your browser\u2014and voila! Your first Closeread project is live!<\/p>\n\n\n\n<p>We will dedicate the next section to understanding the building blocks of a Closeread project. Let&#8217;s ride on \ud83d\udd25<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Understand the building blocks of Closeread<\/h2>\n\n\n\n<p>A Closeread project is built as a section within a Quarto document, defined using <strong>fenced divs<\/strong>. At its core, a Closeread section consists of three main components: <strong>Section<\/strong>, <strong>Sticky<\/strong>, and <strong>Trigger<\/strong>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">1. Section<\/h4>\n\n\n\n<p>A <strong>Closeread section<\/strong> is created using opening and closing fenced divs with the <strong>.cr-section<\/strong> class. This defines the scrollytelling block.<\/p>\n\n\n\n<p>Here&#8217;s what the simplest Closeread section looks like:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>:::{.cr-section}\nThis is a Closeread section\n:::<\/code><\/pre>\n\n\n\n<p>This section can be enhanced with <strong>stickies<\/strong> (content that remains fixed while the user scrolls) and <strong>triggers<\/strong> (content that activates the sticky as the user scrolls). We&#8217;ll explore those next.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>\ud83d\udca1 <strong>Pro Tip:<\/strong> If you wrap your entire Quarto document in a fenced div with the <strong>.cr-section<\/strong> class, the whole thing becomes a Closeread document. \ud83d\ude09 This means everything in your document becomes part of the scrollytelling experience\u2014great for fully immersive data stories!<\/p>\n<\/blockquote>\n\n\n\n<h4 class=\"wp-block-heading\">2. Stickies<\/h4>\n\n\n\n<p>A <strong>sticky<\/strong> is an element within a Closeread section. It could be a block of text, an image, a video, or any element that can be rendered in the browser. It&#8217;s the element you want to perform <em>closeread<\/em> on. This means you can set it to <strong>stick<\/strong> to the screen as the reader scrolls through the page.<\/p>\n\n\n\n<p>Stickies can also be made <strong>invisible by default<\/strong>, and only appear when the viewer scrolls to the point where the <strong>trigger<\/strong> is activated.To declare an element as a sticky, wrap it within a fenced div and assign it an identifier prefixed with cr-, as shown below:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>:::{#cr-identifier}\nThis block of text is a sticky!\n:::<\/code><\/pre>\n\n\n\n<p>Since the sticky must be enclosed within a section, the full code would look like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>:::{.cr-section}\nThis is a Closeread section\n\n:::{#cr-identifier}\nThis block of text is a sticky within the Closeread section!\n:::\n\n:::<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">3. Triggers<\/h4>\n\n\n\n<p>As you might already know, a <strong>trigger<\/strong> is the element that activates a sticky in a Closeread document.<\/p>\n\n\n\n<p>Remember the <strong>cr-identifier<\/strong> we assigned to the sticky above? The one prefixed with cr-? That\u2019s the element we\u2019ll use to trigger the sticky.<\/p>\n\n\n\n<p>Here\u2019s how triggering works:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Identify the point in your document where you want the sticky to be activated.<\/li>\n\n\n\n<li>At that point, reference the sticky\u2019s identifier\u2014just replace the cr- prefix with @.<\/li>\n<\/ul>\n\n\n\n<p>So, <strong>cr-identifier<\/strong> becomes <strong>@identifier<\/strong>.<\/p>\n\n\n\n<p>Let\u2019s update our full code to include a trigger:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>:::{.cr-section}\nThis is a Closeread section\n\nI want my sticky to appear here \u27a1\ufe0f @cr-identifier\n\n:::{#cr-identifier}\nThis block of text is a sticky within the Closeread section!\n:::\n\n:::<\/code><\/pre>\n\n\n\n<p>Simple, right? When a reader scrolls to the trigger (<strong>@identifier<\/strong>), the sticky pops into view!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Updated code:<\/h2>\n\n\n\n<p>Now, copy the updated code and paste it into your index.qmd file, replacing everything after the line that says:<\/p>\n\n\n\n<p><strong>Hello World! Please read my Closeread story below.<\/strong><\/p>\n\n\n\n<p>Your document should look like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>---\ntitle: My First Closeread\nformat: closeread-html\n\n---\n\nHello World! Please read my Closeread story below.\n\n:::{.cr-section}\nThis is a Closeread section\n\nI want my sticky to appear here @identifier\n\n:::{#cr-identifier}\nThis block of text is a sticky within the Closeread section!\n:::\n\n:::<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Re-render the project:<\/h2>\n\n\n\n<p>Once you&#8217;ve updated your <strong>index.qmd<\/strong> file with the new code, open your terminal and run the quarto render command just like before:<\/p>\n\n\n\n<p><strong>quarto render index.qmd<\/strong><\/p>\n\n\n\n<p>Refresh your browser tab to see the updated Closeread project. As you scroll, your sticky will appear at the specified trigger point!<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"366\" src=\"https:\/\/i0.wp.com\/dvsnightingale.wpenginepowered.com\/wp-content\/uploads\/2025\/05\/closeread_preview1.gif?resize=720%2C366&#038;ssl=1\" alt=\"\" class=\"wp-image-23574\"\/><figcaption class=\"wp-element-caption\">The updated Closeread project displayed live in the browser.<\/figcaption><\/figure>\n<\/div>\n\n\n<div style=\"height:33px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Celebrate this milestone so far. If yours is not as shown in the screenshot below, take some time to review your code and ensure that it is similar to the one above.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Adding styling and interactivity to your Closeread document<\/h2>\n\n\n\n<p>Closeread offers several options for styling your project\u2014ranging from prebuilt effects to full-fledged themes. What\u2019s more, you can even extend your project\u2019s styling using an external CSS stylesheet. The Closeread <a href=\"https:\/\/closeread.dev\/guide\/styling#:~:text=Styling-,Styling,fixed%20value%2C%20or%20a%20combination%20of%20the%20two%20using%20minmax().,-(S)CSS%20customisation\" target=\"_blank\" rel=\"noreferrer noopener\">styling documentation<\/a> provides a detailed guide on how to style your document. You can declare the styling template in the YAML configuration section of your document. For this project, let\u2019s apply some of these techniques to further customize our document, starting with the basics: focus effects.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Focus Effects<\/h4>\n\n\n\n<p>Focus effects are prebuilt functions within Closeread that add interactivity and dynamism to your Closeread projects. As described in the Closeread <a href=\"https:\/\/closeread.dev\/guide\/focus-effects.html\">documentation<\/a>, these features &#8220;guide your readers\u2019 attention to aspects of your stickies.&#8221; A summary of these effects is provided in the table below:<\/p>\n\n\n\n<figure class=\"wp-block-table is-style-stripes\"><table><thead><tr><th>Effect<\/th><th>Description<\/th><th>Syntax Example<\/th><\/tr><\/thead><tbody><tr><td><strong>Scaling<\/strong><\/td><td>Magnifies or reduces the size of an element by a given factor.<\/td><td><strong>scale-by=&#8221;3&#8243;<\/strong>: Triples the size of a sticky.<\/td><\/tr><tr><td><strong>Panning<\/strong><\/td><td>Moves the view to a specified section of the sticky (e.g., top-left corner).<\/td><td><strong>pan-to&#8221;-30px,30px&#8221;<\/strong>: Pans 30 pixels left and 30 pixels down.<\/td><\/tr><tr><td><strong>Zooming<\/strong><\/td><td>Enlarges a specific portion of the context to focus the reader&#8217;s attention<\/td><td><strong>zoom-to=&#8221;3&#8243;<\/strong>: Zooms into line 3.<\/td><\/tr><tr><td><strong>Highlighting<\/strong><\/td><td>Visually emphasizes a span of text or a line by changing its style or color.<\/td><td><strong>highlight=&#8221;2-3&#8243;<\/strong>: Highlights lines 2 to 3.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<div style=\"height:33px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Focus Effects in Action<\/h4>\n\n\n\n<p>The purpose of this section is to demonstrate some of these focus effects. The next few lines contain short narratives along with their corresponding Closeread commands. We\u2019ll use some images and text blocks as stickies and apply these effects to them.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>NOTE: I\u2019ve taken a conversational approach to explain the purpose of each feature. This is to keep things engaging. But don\u2019t forget, the narratives also form part of the text you\u2019ll copy into your Closeread document!<\/p>\n<\/blockquote>\n\n\n\n<p>Now, back to our updated code. Quickly read through the following lines to get a sense of the flow. Afterwards, download these two images: grid.jpg and grid-highlighted.jpg. Create a folder named images directly inside your main project folder (where your index.qmd file is), and paste the two images you just downloaded into this folder. Then, copy the code block below into your Closeread document to see the effects in action:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Below is another block of text we'll be working with: @cr-highlighted\nFirst, let's scale this block of text by two:\nScale this block of text by two &#91;@cr-highlighted]{scale-by=\"2\"}\n\nNext, we\u2019ll highlight lines 2 and 3 while keeping the same scale:\nLines 2 and 3 are scaled and highlighted &#91;@cr-highlighted]{scale-by=\"2\" highlight=\"2-3\"}\n\nNow, let\u2019s bring in an image:\nLoads an image @cr-image\n\nIt\u2019s a bit large at first as it takes up the full screen. Let\u2019s scale it down:\nImage has been scaled down &#91;@cr-image]{scale-by=\"0.5\"}\n\nFinally, we\u2019ll pan to the portion highlighted in red:\nPan the image to the section highlighted in red &#91;@cr-image2]{pan-to=\"-75%,75%\" scale-by=\"1.5\"}\n\n:::{#cr-highlighted}\n| 1\ufe0f\u20e3 This is the first line.\n| 2\ufe0f\u20e3 This is the second line.\n| 3\ufe0f\u20e3 This is the third line.\n| 4\ufe0f\u20e3 And this is the fourth line.\n:::\n\n:::{#cr-image}\n!&#91;](images\/grid.jpg)\n:::\n\n:::{#cr-image2}\n!&#91;](images\/grid-highlighted.jpg)\n:::<\/code><\/pre>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>\ud83d\udca1Pro tip: When you <strong>pan <\/strong>and <strong>scale <\/strong>at the same time, you end up <strong>zoom<\/strong>ing! (pun intended \ud83d\ude09)<\/p>\n<\/blockquote>\n\n\n\n<p><strong>Note<\/strong>: Panning can be a bit unintuitive at first. You might need to experiment with the position values to get the result you want. A bit of trial and error helps here.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Applying Additional Styling<\/h4>\n\n\n\n<p>Up to this point, the YAML configuration section of our project looks like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>---\ntitle: My First Closeread\nformat: closeread-html\n\n---<\/code><\/pre>\n\n\n\n<p>Update it to apply the following styling:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>---\ntitle: \"Understanding Tree Diagrams\"\ntheme: \"superhero\"\nfontsize: 16px\nformat: \n    closeread-html:\n        cr-section:\n            layout: \"sidebar-left\"\n        cr-style:\n            section-background-color: \"#08508a\"\n            narrative-background-color-overlay: \"#08508a\"\n            narrative-text-color-overlay: \"#08508a\"\n            narrative-border-radius: 5px\n            narrative-overlay-max-width: 60%\n\n---<\/code><\/pre>\n\n\n\n<p><strong>What we just did<\/strong>: Modified the YAML configuration to include some additional styling, such as:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Setting the layout to <strong>sidebar-effect<\/strong><\/li>\n\n\n\n<li>Defining the background color under <strong>cr-style<\/strong><\/li>\n\n\n\n<li>Setting the theme to <strong>super-hero<\/strong><\/li>\n\n\n\n<li>Adjusting the font size, and more<\/li>\n<\/ul>\n\n\n\n<p>Each of these would have required more complex CSS code, but Closeread simplifies the process\u2014you can simply call a named section and apply the style directly.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Applying custom CSS<\/h3>\n\n\n\n<p>If you\u2019d like to further customize your Closeread project using an external .css stylesheet, you can follow the standard approach used in regular web development: by assigning styles directly to elements. All you need to do is link your Closeread document to the external stylesheet\u2014and you\u2019ll do this in the YAML section of the document (the part enclosed by triple dashes).<\/p>\n\n\n\n<p>In this example, let&#8217;s change the color of the text in the <strong>narrative section<\/strong> of our Closeread project. The narrative section is the part of your story that delivers the main content. By default, the text appears black on desktop. We want to change it to <strong>white<\/strong>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Steps:<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Within the root of your project directory, create a new empty file and name it style.css.<\/li>\n<\/ul>\n\n\n\n<p>Paste the following lines of code into the file and save it:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.narrative {\n<strong>color<\/strong>: <strong>white<\/strong>;\n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Next, reference the external CSS file in your Closeread document. You can do this by navigating to the YAML configuration section of your document and pasting the following line:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>css: style.css<\/code><\/pre>\n\n\n\n<p>Your YAML section should now look like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>---\ntitle: \"Understanding Tree Diagrams\"\ntheme: \"superhero\"\nfontsize: 16px\nformat: \n    closeread-html:\n        cr-section:\n            layout: \"sidebar-left\"\n        cr-style:\n            section-background-color: \"#08508a\"\n            narrative-background-color-overlay: \"#08508a\"\n            narrative-text-color-overlay: \"#08508a\"\n            narrative-border-radius: 5px\n            narrative-overlay-max-width: 60%\ncss: style.css\n\n---<\/code><\/pre>\n\n\n\n<p>Take note of the indentation!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Publish and deploy<\/h2>\n\n\n\n<p>You\u2019ve made it this far\u2014well done! You\u2019ve built your first Closeread project. But a project this good shouldn\u2019t live only on your computer. It\u2019s time to publish it to the web and share it with the world!You&#8217;ll use GitHub to store your project online, and Vercel to host and publish it for free.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Step 1: Create Your GitHub &amp; Vercel Accounts<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to <a href=\"https:\/\/github.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">github.com<\/a> \u2192 Click <strong>Sign Up<\/strong> and follow the steps to create your account.<\/li>\n\n\n\n<li>Then, visit <a href=\"https:\/\/vercel.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">vercel.com<\/a> \u2192 Click <strong>Start for Free<\/strong> and sign up using your GitHub account. This allows Vercel to access your repositories for deployment.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Step 2: Upload Your Project to GitHub (No Code Required)<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li>On GitHub, click the <strong>+<\/strong> icon at the top-right \u2192 Select <strong>&#8220;New repository&#8221;<\/strong>.<\/li>\n\n\n\n<li>Give your repository a name like closeread-project, and click <strong>Create repository<\/strong>.<\/li>\n\n\n\n<li>On the next page, click <strong>&#8220;Uploading an existing file&#8221;<\/strong>.<\/li>\n\n\n\n<li>Locate your Closeread project folder on your computer.<\/li>\n\n\n\n<li>Drag and drop <strong>everything inside the project folder<\/strong> into the GitHub upload area.<\/li>\n\n\n\n<li>Scroll down, add a commit message like Initial upload, and click <strong>Commit changes<\/strong>.<\/li>\n<\/ol>\n\n\n\n<p>Great! Your web story is now on GitHub.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Step 3: Deploy with Vercel<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li>On the <a href=\"https:\/\/vercel.com\/dashboard\">Vercel dashboard<\/a>, click <strong>&#8220;Add New&#8221;<\/strong> &gt; <strong>&#8220;Project&#8221;<\/strong>.<\/li>\n\n\n\n<li>You&#8217;ll be prompted to choose your preferred Git provider. Select <strong>Continue with GitHub<\/strong><\/li>\n\n\n\n<li>You\u2019ll see a list of your GitHub repositories. Select the one you just uploaded.<\/li>\n\n\n\n<li>Configure your settings:\n<ul class=\"wp-block-list\">\n<li><strong>Framework Preset<\/strong>: Choose <strong>Other<\/strong> or <strong>Static Site<\/strong><\/li>\n\n\n\n<li><strong>Output Directory<\/strong>: leave the default option (<strong>root<\/strong>)<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Click <strong>Deploy<\/strong>.<\/li>\n<\/ol>\n\n\n\n<p>Vercel will build and deploy your project in seconds.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Step 4: View &amp; Share Your Live Story<\/h4>\n\n\n\n<p>Once deployment is complete, you\u2019ll get a live URL with which you can access your project live on the web. e.g <a href=\"https:\/\/closeread-tutorial.vercel.app\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/closeread-tutorial.vercel.app\/<\/a><\/p>\n\n\n\n<p>Click the link to view your published Closeread story\u2014fully interactive and hosted online!<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"366\" src=\"https:\/\/i0.wp.com\/dvsnightingale.wpenginepowered.com\/wp-content\/uploads\/2025\/05\/Screen-Recording-2025-04-24-134112.gif?resize=720%2C366&#038;ssl=1\" alt=\"\" class=\"wp-image-23580\"\/><figcaption class=\"wp-element-caption\">Closeread project \u2013 live on the web!<\/figcaption><\/figure>\n<\/div>\n\n\n<div style=\"height:33px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>If you\u2019ve followed this tutorial up to this point, you should now be familiar with how to build a scrollytelling project from scratch using Closeread. You\u2019ve learned the core building blocks of a Closeread project\u2014such as sections, stickies, and triggers. You\u2019ve also explored how to style your project using both built-in options and external CSS files. Finally, you now know how to host your project on GitHub and deploy it with Vercel, so your story can go live and be shared with the world.<\/p>\n\n\n\n<p>This gives you a solid foundation for taking your data storytelling skills to the next level.<\/p>\n\n\n\n<p>Up next is a second project I\u2019ve included to give you a more hands-on experience. You\u2019ll find a script and an image folder linked <a href=\"https:\/\/drive.google.com\/file\/d\/1-cA2y6u7HkgA1RSn1_rBY4kGhsj7uZ8L\/view?usp=sharing\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>. Your task is simple: follow the script, insert the appropriate images, and apply the relevant Closeread effects to bring the story to life\u2014just like in the completed version <a href=\"https:\/\/closeread-tutorial.vercel.app\/\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>.<\/p>\n\n\n\n<p>This practical exercise is designed to help you reinforce everything you\u2019ve just learned and give you the space to experiment further with Closeread\u2019s effects and features. Once you\u2019re done, feel free to share your completed project with your network on social media\u2014and don\u2019t forget to tag me. I\u2019d love to see what you come up with!<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><em><strong>This project is also available on <a href=\"https:\/\/github.com\/KennethOdoh\/closeread-tutorial\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub<\/a>.<\/strong><\/em><\/p>\n<div class=\"cats\"><span class=\"cats__title\">Categories<\/span><a href=\"https:\/\/nightingaledvs.com\/.\/how-to\/\" rel=\"category tag\">How To<\/a><\/div><div class=\"tags\"><div class=\"tags__title\">Tags<\/div><a href=\"https:\/\/nightingaledvs.com\/tag\/charts\/\" rel=\"tag\">Charts<\/a><a href=\"https:\/\/nightingaledvs.com\/tag\/code\/\" rel=\"tag\">Code<\/a><a href=\"https:\/\/nightingaledvs.com\/tag\/data-visualization\/\" rel=\"tag\">Data Visualization<\/a><a href=\"https:\/\/nightingaledvs.com\/tag\/design\/\" rel=\"tag\">Design<\/a><a href=\"https:\/\/nightingaledvs.com\/tag\/how-to\/\" rel=\"tag\">How To<\/a><\/div>","protected":false},"excerpt":{"rendered":"<p>Introduction What is Scrollytelling? Scrollytelling is a dynamic, interactive storytelling technique often used in web-based formats, that reveals insights, visuals, and narrative elements as the..<\/p>\n","protected":false},"author":134,"featured_media":23581,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"bgseo_title":"","bgseo_description":"","bgseo_robots_index":"index","bgseo_robots_follow":"follow","cybocfi_hide_featured_image":"","_jetpack_memberships_contains_paid_content":false,"footnotes":"","_links_to":"","_links_to_target":""},"categories":[63],"tags":[166,228,35,43,141],"class_list":["post-23584","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to","tag-charts","tag-code","tag-data-visualization","tag-design","tag-how-to"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Scrollytelling with Closeread: The Super Low-Code Way to Bring Your Data Project to the Web! | Nightingale<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/nightingaledvs.com\/scrollytelling-with-closeread\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Scrollytelling with Closeread: The Super Low-Code Way to Bring Your Data Project to the Web! - Nightingale\" \/>\n<meta property=\"og:description\" content=\"Introduction What is Scrollytelling? Scrollytelling is a dynamic, interactive storytelling technique often used in web-based formats, that reveals insights, visuals, and narrative elements as the..\" \/>\n<meta property=\"og:url\" content=\"https:\/\/nightingaledvs.com\/scrollytelling-with-closeread\/\" \/>\n<meta property=\"og:site_name\" content=\"Nightingale\" \/>\n<meta property=\"article:published_time\" content=\"2025-05-22T14:39:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-22T14:43:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2025\/05\/screenshot.png?fit=1906%2C829&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"1906\" \/>\n\t<meta property=\"og:image:height\" content=\"829\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Kenneth Odoh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@wcareri\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kenneth Odoh\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/nightingaledvs.com\/scrollytelling-with-closeread\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/nightingaledvs.com\/scrollytelling-with-closeread\/\"},\"author\":{\"name\":\"Kenneth Odoh\",\"@id\":\"https:\/\/nightingaledvs.com\/#\/schema\/person\/db0e06a49ac0f0fc7385f5a0d63cf403\"},\"headline\":\"Scrollytelling with Closeread: The Super Low-Code Way to Bring Your Data Project to the Web!\",\"datePublished\":\"2025-05-22T14:39:00+00:00\",\"dateModified\":\"2025-05-22T14:43:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/nightingaledvs.com\/scrollytelling-with-closeread\/\"},\"wordCount\":2933,\"publisher\":{\"@id\":\"https:\/\/nightingaledvs.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/nightingaledvs.com\/scrollytelling-with-closeread\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2025\/05\/screenshot.png?fit=1906%2C829&ssl=1\",\"keywords\":[\"Charts\",\"Code\",\"Data Visualization\",\"Design\",\"How To\"],\"articleSection\":[\"How To\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/nightingaledvs.com\/scrollytelling-with-closeread\/\",\"url\":\"https:\/\/nightingaledvs.com\/scrollytelling-with-closeread\/\",\"name\":\"Scrollytelling with Closeread: The Super Low-Code Way to Bring Your Data Project to the Web! - Nightingale\",\"isPartOf\":{\"@id\":\"https:\/\/nightingaledvs.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/nightingaledvs.com\/scrollytelling-with-closeread\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/nightingaledvs.com\/scrollytelling-with-closeread\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2025\/05\/screenshot.png?fit=1906%2C829&ssl=1\",\"datePublished\":\"2025-05-22T14:39:00+00:00\",\"dateModified\":\"2025-05-22T14:43:23+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/nightingaledvs.com\/scrollytelling-with-closeread\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/nightingaledvs.com\/scrollytelling-with-closeread\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/nightingaledvs.com\/scrollytelling-with-closeread\/#primaryimage\",\"url\":\"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2025\/05\/screenshot.png?fit=1906%2C829&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2025\/05\/screenshot.png?fit=1906%2C829&ssl=1\",\"width\":1906,\"height\":829,\"caption\":\"A Closeread scrollytelling webpage featuring a tree diagram and narrative text presented in a structured, side-by-side layout.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/nightingaledvs.com\/scrollytelling-with-closeread\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/nightingaledvs.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Scrollytelling with Closeread: The Super Low-Code Way to Bring Your Data Project to the Web!\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/nightingaledvs.com\/#website\",\"url\":\"https:\/\/nightingaledvs.com\/\",\"name\":\"Nightingale\",\"description\":\"The Journal of the Data Visualization Society\",\"publisher\":{\"@id\":\"https:\/\/nightingaledvs.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/nightingaledvs.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/nightingaledvs.com\/#organization\",\"name\":\"Nightingale\",\"url\":\"https:\/\/nightingaledvs.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/nightingaledvs.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/05\/logoDVS-5.png?fit=1988%2C454&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/05\/logoDVS-5.png?fit=1988%2C454&ssl=1\",\"width\":1988,\"height\":454,\"caption\":\"Nightingale\"},\"image\":{\"@id\":\"https:\/\/nightingaledvs.com\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/nightingaledvs.com\/#\/schema\/person\/db0e06a49ac0f0fc7385f5a0d63cf403\",\"name\":\"Kenneth Odoh\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/nightingaledvs.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/nightingaledvs.com\/wp-content\/uploads\/2025\/05\/1709479741471.jpg\",\"contentUrl\":\"https:\/\/nightingaledvs.com\/wp-content\/uploads\/2025\/05\/1709479741471.jpg\",\"caption\":\"Kenneth Odoh\"},\"description\":\"Kenneth Odoh is a data analyst and visualization professional and the founder of Analytix Hive, an ed-tech company committed to building essential technology skills for the future workforce. His work spans critical areas like education, health, and environmental data science, having contributed to projects in cancer research and climate-informed agriculture. As an alumnus of notable international leadership and entrepreneurship programs, Kenneth is deeply committed to fostering digital inclusion and empowering technologically marginalized communities. With a foundation in both marketing and engineering, he possesses a unique ability to uncover and translate complex data into actionable business insights, utilizing tools such as Python, Excel, Tableau and Power BI. Kenneth is a collaborative team member known for his consistent contributions and ability to work effectively with others.\",\"sameAs\":[\"https:\/\/www.instagram.com\/wcareri\",\"https:\/\/www.linkedin.com\/in\/wcareri\",\"https:\/\/x.com\/wcareri\"],\"url\":\"#molongui-disabled-link\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Scrollytelling with Closeread: The Super Low-Code Way to Bring Your Data Project to the Web! | Nightingale","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/nightingaledvs.com\/scrollytelling-with-closeread\/","og_locale":"en_US","og_type":"article","og_title":"Scrollytelling with Closeread: The Super Low-Code Way to Bring Your Data Project to the Web! - Nightingale","og_description":"Introduction What is Scrollytelling? Scrollytelling is a dynamic, interactive storytelling technique often used in web-based formats, that reveals insights, visuals, and narrative elements as the..","og_url":"https:\/\/nightingaledvs.com\/scrollytelling-with-closeread\/","og_site_name":"Nightingale","article_published_time":"2025-05-22T14:39:00+00:00","article_modified_time":"2025-05-22T14:43:23+00:00","og_image":[{"width":1906,"height":829,"url":"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2025\/05\/screenshot.png?fit=1906%2C829&ssl=1","type":"image\/png"}],"author":"Kenneth Odoh","twitter_card":"summary_large_image","twitter_creator":"@wcareri","twitter_misc":{"Written by":"Kenneth Odoh","Est. reading time":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/nightingaledvs.com\/scrollytelling-with-closeread\/#article","isPartOf":{"@id":"https:\/\/nightingaledvs.com\/scrollytelling-with-closeread\/"},"author":{"name":"Kenneth Odoh","@id":"https:\/\/nightingaledvs.com\/#\/schema\/person\/db0e06a49ac0f0fc7385f5a0d63cf403"},"headline":"Scrollytelling with Closeread: The Super Low-Code Way to Bring Your Data Project to the Web!","datePublished":"2025-05-22T14:39:00+00:00","dateModified":"2025-05-22T14:43:23+00:00","mainEntityOfPage":{"@id":"https:\/\/nightingaledvs.com\/scrollytelling-with-closeread\/"},"wordCount":2933,"publisher":{"@id":"https:\/\/nightingaledvs.com\/#organization"},"image":{"@id":"https:\/\/nightingaledvs.com\/scrollytelling-with-closeread\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2025\/05\/screenshot.png?fit=1906%2C829&ssl=1","keywords":["Charts","Code","Data Visualization","Design","How To"],"articleSection":["How To"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/nightingaledvs.com\/scrollytelling-with-closeread\/","url":"https:\/\/nightingaledvs.com\/scrollytelling-with-closeread\/","name":"Scrollytelling with Closeread: The Super Low-Code Way to Bring Your Data Project to the Web! - Nightingale","isPartOf":{"@id":"https:\/\/nightingaledvs.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/nightingaledvs.com\/scrollytelling-with-closeread\/#primaryimage"},"image":{"@id":"https:\/\/nightingaledvs.com\/scrollytelling-with-closeread\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2025\/05\/screenshot.png?fit=1906%2C829&ssl=1","datePublished":"2025-05-22T14:39:00+00:00","dateModified":"2025-05-22T14:43:23+00:00","breadcrumb":{"@id":"https:\/\/nightingaledvs.com\/scrollytelling-with-closeread\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/nightingaledvs.com\/scrollytelling-with-closeread\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/nightingaledvs.com\/scrollytelling-with-closeread\/#primaryimage","url":"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2025\/05\/screenshot.png?fit=1906%2C829&ssl=1","contentUrl":"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2025\/05\/screenshot.png?fit=1906%2C829&ssl=1","width":1906,"height":829,"caption":"A Closeread scrollytelling webpage featuring a tree diagram and narrative text presented in a structured, side-by-side layout."},{"@type":"BreadcrumbList","@id":"https:\/\/nightingaledvs.com\/scrollytelling-with-closeread\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/nightingaledvs.com\/"},{"@type":"ListItem","position":2,"name":"Scrollytelling with Closeread: The Super Low-Code Way to Bring Your Data Project to the Web!"}]},{"@type":"WebSite","@id":"https:\/\/nightingaledvs.com\/#website","url":"https:\/\/nightingaledvs.com\/","name":"Nightingale","description":"The Journal of the Data Visualization Society","publisher":{"@id":"https:\/\/nightingaledvs.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/nightingaledvs.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/nightingaledvs.com\/#organization","name":"Nightingale","url":"https:\/\/nightingaledvs.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/nightingaledvs.com\/#\/schema\/logo\/image\/","url":"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/05\/logoDVS-5.png?fit=1988%2C454&ssl=1","contentUrl":"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/05\/logoDVS-5.png?fit=1988%2C454&ssl=1","width":1988,"height":454,"caption":"Nightingale"},"image":{"@id":"https:\/\/nightingaledvs.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/nightingaledvs.com\/#\/schema\/person\/db0e06a49ac0f0fc7385f5a0d63cf403","name":"Kenneth Odoh","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/nightingaledvs.com\/#\/schema\/person\/image\/","url":"https:\/\/nightingaledvs.com\/wp-content\/uploads\/2025\/05\/1709479741471.jpg","contentUrl":"https:\/\/nightingaledvs.com\/wp-content\/uploads\/2025\/05\/1709479741471.jpg","caption":"Kenneth Odoh"},"description":"Kenneth Odoh is a data analyst and visualization professional and the founder of Analytix Hive, an ed-tech company committed to building essential technology skills for the future workforce. His work spans critical areas like education, health, and environmental data science, having contributed to projects in cancer research and climate-informed agriculture. As an alumnus of notable international leadership and entrepreneurship programs, Kenneth is deeply committed to fostering digital inclusion and empowering technologically marginalized communities. With a foundation in both marketing and engineering, he possesses a unique ability to uncover and translate complex data into actionable business insights, utilizing tools such as Python, Excel, Tableau and Power BI. Kenneth is a collaborative team member known for his consistent contributions and ability to work effectively with others.","sameAs":["https:\/\/www.instagram.com\/wcareri","https:\/\/www.linkedin.com\/in\/wcareri","https:\/\/x.com\/wcareri"],"url":"#molongui-disabled-link"}]}},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2025\/05\/screenshot.png?fit=1906%2C829&ssl=1","jetpack-related-posts":[{"id":8312,"url":"https:\/\/nightingaledvs.com\/the-past-present-and-future-of-scrollytelling\/","url_meta":{"origin":23584,"position":0},"title":"The Past, Present, and Future of Scrollytelling","author":"Kenneth Odoh","date":"August 25, 2020","format":false,"excerpt":"Just as earthquakes are (tangentially) related to presidential elections, so too are avalanches related to data storytelling and visualization. Before I tell you how, though, let\u2019s first define \u201cscrollytelling.\u201d Scrollytelling is a form of interactive storytelling that unfolds as you scroll and includes elements that are activated or triggered by\u2026","rel":"","context":"In &quot;Data Journalism&quot;","block_context":{"text":"Data Journalism","link":"https:\/\/nightingaledvs.com\/.\/topics-in-dv\/data-journalism\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/10\/1_PjvTDSCxOgKytDVk07ugRA.gif?fit=1200%2C635&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/10\/1_PjvTDSCxOgKytDVk07ugRA.gif?fit=1200%2C635&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/10\/1_PjvTDSCxOgKytDVk07ugRA.gif?fit=1200%2C635&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/10\/1_PjvTDSCxOgKytDVk07ugRA.gif?fit=1200%2C635&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/10\/1_PjvTDSCxOgKytDVk07ugRA.gif?fit=1200%2C635&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":13356,"url":"https:\/\/nightingaledvs.com\/spotlight-do-you-feel-what-others-feel\/","url_meta":{"origin":23584,"position":1},"title":"SPOTLIGHT: Do You Feel What Others Feel?","author":"Kenneth Odoh","date":"October 19, 2022","format":false,"excerpt":"Emotions around the globe - Illustration by Gunilla Hagstr\u00f6m","rel":"","context":"In &quot;Community&quot;","block_context":{"text":"Community","link":"https:\/\/nightingaledvs.com\/.\/community\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2022\/10\/hero_image.png?fit=1119%2C1200&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2022\/10\/hero_image.png?fit=1119%2C1200&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2022\/10\/hero_image.png?fit=1119%2C1200&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2022\/10\/hero_image.png?fit=1119%2C1200&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2022\/10\/hero_image.png?fit=1119%2C1200&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":6538,"url":"https:\/\/nightingaledvs.com\/spotlight-the-process-behind-among-us-and-what-i-learned-from-the-dvs-census-challenge\/","url_meta":{"origin":23584,"position":2},"title":"SPOTLIGHT: The Process behind \u201cAmong Us\u201d and What I Learned from the DVS Census Challenge","author":"Kenneth Odoh","date":"July 20, 2021","format":false,"excerpt":"Loris\u2019s visualization won first place in this year\u2019s Data Visualization Society\u00a0Census Challenge, exploratory category. As a data visualization designer hobbyist, participating in the DVS Census Challenge opened new opportunities to me. It was a milestone in my learning path, and a boost in my recent career moves. Here, I\u2019m sharing\u2026","rel":"","context":"In &quot;Community&quot;","block_context":{"text":"Community","link":"https:\/\/nightingaledvs.com\/.\/community\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/07\/gif3.gif?fit=800%2C440&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/07\/gif3.gif?fit=800%2C440&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/07\/gif3.gif?fit=800%2C440&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/07\/gif3.gif?fit=800%2C440&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":15907,"url":"https:\/\/nightingaledvs.com\/kontinentalist-journalists-visual-stories\/","url_meta":{"origin":23584,"position":3},"title":"How One Team of Journalists Puts Visuals at the Center of Every Story","author":"Kenneth Odoh","date":"February 21, 2023","format":false,"excerpt":"As journalism outlets increasingly adopt data-driven and visually compelling \u201cscrollytelling\u201d stories, Kontinentalist has made them a fixture of its coverage.","rel":"","context":"In &quot;Data Journalism&quot;","block_context":{"text":"Data Journalism","link":"https:\/\/nightingaledvs.com\/.\/topics-in-dv\/data-journalism\/"},"img":{"alt_text":"Colleagues from the Kontinentalist news site, based in Singapore, pose on a tuktuk. Co-founder Pei Ying Loh is on far left; Editorial lead Nabilah Said is on the far right.","src":"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2023\/02\/Kontinentalist-tuktuk.jpg?fit=1200%2C852&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2023\/02\/Kontinentalist-tuktuk.jpg?fit=1200%2C852&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2023\/02\/Kontinentalist-tuktuk.jpg?fit=1200%2C852&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2023\/02\/Kontinentalist-tuktuk.jpg?fit=1200%2C852&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2023\/02\/Kontinentalist-tuktuk.jpg?fit=1200%2C852&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":5063,"url":"https:\/\/nightingaledvs.com\/data-driven-storytelling-a-short-review\/","url_meta":{"origin":23584,"position":4},"title":"Data-Driven Storytelling: A Short Review","author":"Kenneth Odoh","date":"November 27, 2019","format":false,"excerpt":"Researching how to leverage visual storytelling for medical imaging data analysis, I was looking for a road map to obtain a more structured and solid theoretical background of the field and to expand my knowledge about it. Then, I came across\u00a0Data-Driven Storytelling and it was love at first sight. This\u2026","rel":"","context":"In &quot;Data Humanism&quot;","block_context":{"text":"Data Humanism","link":"https:\/\/nightingaledvs.com\/.\/topics-in-dv\/data-humanism\/"},"img":{"alt_text":"\u201cData-Driven Storytelling\u201d by N. H. Riche, C. Hurter, N. Diakopoulos and S. Carpendale","src":"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-60.png?fit=795%2C1200&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-60.png?fit=795%2C1200&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-60.png?fit=795%2C1200&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2021\/06\/image-60.png?fit=795%2C1200&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":17328,"url":"https:\/\/nightingaledvs.com\/reimagine-street-name-diversity\/","url_meta":{"origin":23584,"position":5},"title":"Who&#8217;s on the Map? Using Data to Reimagine Street Name Diversity","author":"Kenneth Odoh","date":"May 30, 2023","format":false,"excerpt":"In 145,933 streets in 30 major European cities and 17 different countries, our team explores who is included and who is excluded in our toponymy.","rel":"","context":"In &quot;All Stories&quot;","block_context":{"text":"All Stories","link":"https:\/\/nightingaledvs.com\/.\/topics-in-dv\/all-stories\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2023\/05\/mappingdiversity-1685044491574.png?fit=1200%2C637&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2023\/05\/mappingdiversity-1685044491574.png?fit=1200%2C637&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2023\/05\/mappingdiversity-1685044491574.png?fit=1200%2C637&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2023\/05\/mappingdiversity-1685044491574.png?fit=1200%2C637&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/nightingaledvs.com\/wp-content\/uploads\/2023\/05\/mappingdiversity-1685044491574.png?fit=1200%2C637&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_shortlink":"https:\/\/wp.me\/pd2dsI-68o","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/nightingaledvs.com\/wp-json\/wp\/v2\/posts\/23584","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nightingaledvs.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nightingaledvs.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nightingaledvs.com\/wp-json\/wp\/v2\/users\/134"}],"replies":[{"embeddable":true,"href":"https:\/\/nightingaledvs.com\/wp-json\/wp\/v2\/comments?post=23584"}],"version-history":[{"count":0,"href":"https:\/\/nightingaledvs.com\/wp-json\/wp\/v2\/posts\/23584\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nightingaledvs.com\/wp-json\/wp\/v2\/media\/23581"}],"wp:attachment":[{"href":"https:\/\/nightingaledvs.com\/wp-json\/wp\/v2\/media?parent=23584"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nightingaledvs.com\/wp-json\/wp\/v2\/categories?post=23584"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nightingaledvs.com\/wp-json\/wp\/v2\/tags?post=23584"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}