CINXE.COM
Figure Friday 2024 - week 37 - Dash Python - Plotly Community Forum
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Figure Friday 2024 - week 37 - Dash Python - Plotly Community Forum</title> <meta name="description" content="Child mortality rates (the estimated share of newborns who die before reaching the age of five) have gone down over the last two centuries, but in many places the rates are still unacceptably high. This week’s Figure-Fr&hellip;"> <meta name="generator" content="Discourse 3.5.0.beta1-dev - https://github.com/discourse/discourse version 402ec6bf5c857ddc07be9cb9673734cc7152b7be"> <link rel="icon" type="image/png" href="https://us1.discourse-cdn.com/flex020/uploads/plot/optimized/3X/4/d/4dad2bfe3c0428d932d3f58ebd2bafcfd94a60cd_2_32x32.svg"> <link rel="apple-touch-icon" type="image/png" href="https://us1.discourse-cdn.com/flex020/uploads/plot/optimized/3X/d/6/d6d946d2566c8b2e332e5055af69eb7b46655cd5_2_180x180.png"> <meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff"> <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#111111"> <meta name="color-scheme" content="light dark"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, viewport-fit=cover"> <link rel="canonical" href="https://community.plotly.com/t/figure-friday-2024-week-37/87233" /> <link rel="search" type="application/opensearchdescription+xml" href="https://community.plotly.com/opensearch.xml" title="Plotly Community Forum Search"> <link href="https://sea2.discourse-cdn.com/flex020/stylesheets/color_definitions_plotly-light_10_4_1c80b734958facac72562bf65d277239a663fb77.css?__ws=community.plotly.com" media="(prefers-color-scheme: light)" rel="stylesheet" class="light-scheme"/><link href="https://sea2.discourse-cdn.com/flex020/stylesheets/color_definitions_dark_14_4_d14dd4f2a2a308697ff79f8b3336d0aa6a2364a6.css?__ws=community.plotly.com" media="(prefers-color-scheme: dark)" rel="stylesheet" class="dark-scheme"/> <link href="https://sea2.discourse-cdn.com/flex020/stylesheets/desktop_33ac7771e780900d970512652f5edb5cb3dc75bc.css?__ws=community.plotly.com" media="all" rel="stylesheet" data-target="desktop" /> <link href="https://sea2.discourse-cdn.com/flex020/stylesheets/automation_33ac7771e780900d970512652f5edb5cb3dc75bc.css?__ws=community.plotly.com" media="all" rel="stylesheet" data-target="automation" /> <link href="https://sea2.discourse-cdn.com/flex020/stylesheets/chat_33ac7771e780900d970512652f5edb5cb3dc75bc.css?__ws=community.plotly.com" media="all" rel="stylesheet" data-target="chat" /> <link href="https://sea2.discourse-cdn.com/flex020/stylesheets/checklist_33ac7771e780900d970512652f5edb5cb3dc75bc.css?__ws=community.plotly.com" media="all" rel="stylesheet" data-target="checklist" /> <link href="https://sea2.discourse-cdn.com/flex020/stylesheets/discourse-adplugin_33ac7771e780900d970512652f5edb5cb3dc75bc.css?__ws=community.plotly.com" media="all" rel="stylesheet" data-target="discourse-adplugin" /> <link href="https://sea2.discourse-cdn.com/flex020/stylesheets/discourse-ai_33ac7771e780900d970512652f5edb5cb3dc75bc.css?__ws=community.plotly.com" media="all" rel="stylesheet" data-target="discourse-ai" /> <link href="https://sea2.discourse-cdn.com/flex020/stylesheets/discourse-akismet_33ac7771e780900d970512652f5edb5cb3dc75bc.css?__ws=community.plotly.com" media="all" rel="stylesheet" data-target="discourse-akismet" /> <link href="https://sea2.discourse-cdn.com/flex020/stylesheets/discourse-cakeday_33ac7771e780900d970512652f5edb5cb3dc75bc.css?__ws=community.plotly.com" media="all" rel="stylesheet" data-target="discourse-cakeday" /> <link href="https://sea2.discourse-cdn.com/flex020/stylesheets/discourse-data-explorer_33ac7771e780900d970512652f5edb5cb3dc75bc.css?__ws=community.plotly.com" media="all" rel="stylesheet" data-target="discourse-data-explorer" /> <link href="https://sea2.discourse-cdn.com/flex020/stylesheets/discourse-details_33ac7771e780900d970512652f5edb5cb3dc75bc.css?__ws=community.plotly.com" media="all" rel="stylesheet" data-target="discourse-details" /> <link href="https://sea2.discourse-cdn.com/flex020/stylesheets/discourse-lazy-videos_33ac7771e780900d970512652f5edb5cb3dc75bc.css?__ws=community.plotly.com" media="all" rel="stylesheet" data-target="discourse-lazy-videos" /> <link href="https://sea2.discourse-cdn.com/flex020/stylesheets/discourse-local-dates_33ac7771e780900d970512652f5edb5cb3dc75bc.css?__ws=community.plotly.com" media="all" rel="stylesheet" data-target="discourse-local-dates" /> <link href="https://sea2.discourse-cdn.com/flex020/stylesheets/discourse-math_33ac7771e780900d970512652f5edb5cb3dc75bc.css?__ws=community.plotly.com" media="all" rel="stylesheet" data-target="discourse-math" /> <link href="https://sea2.discourse-cdn.com/flex020/stylesheets/discourse-narrative-bot_33ac7771e780900d970512652f5edb5cb3dc75bc.css?__ws=community.plotly.com" media="all" rel="stylesheet" data-target="discourse-narrative-bot" /> <link href="https://sea2.discourse-cdn.com/flex020/stylesheets/discourse-policy_33ac7771e780900d970512652f5edb5cb3dc75bc.css?__ws=community.plotly.com" media="all" rel="stylesheet" data-target="discourse-policy" /> <link href="https://sea2.discourse-cdn.com/flex020/stylesheets/discourse-presence_33ac7771e780900d970512652f5edb5cb3dc75bc.css?__ws=community.plotly.com" media="all" rel="stylesheet" data-target="discourse-presence" /> <link href="https://sea2.discourse-cdn.com/flex020/stylesheets/discourse-reactions_33ac7771e780900d970512652f5edb5cb3dc75bc.css?__ws=community.plotly.com" media="all" rel="stylesheet" data-target="discourse-reactions" /> <link href="https://sea2.discourse-cdn.com/flex020/stylesheets/discourse-solved_33ac7771e780900d970512652f5edb5cb3dc75bc.css?__ws=community.plotly.com" media="all" rel="stylesheet" data-target="discourse-solved" /> <link href="https://sea2.discourse-cdn.com/flex020/stylesheets/discourse-templates_33ac7771e780900d970512652f5edb5cb3dc75bc.css?__ws=community.plotly.com" media="all" rel="stylesheet" data-target="discourse-templates" /> <link href="https://sea2.discourse-cdn.com/flex020/stylesheets/discourse-topic-voting_33ac7771e780900d970512652f5edb5cb3dc75bc.css?__ws=community.plotly.com" media="all" rel="stylesheet" data-target="discourse-topic-voting" /> <link href="https://sea2.discourse-cdn.com/flex020/stylesheets/footnote_33ac7771e780900d970512652f5edb5cb3dc75bc.css?__ws=community.plotly.com" media="all" rel="stylesheet" data-target="footnote" /> <link href="https://sea2.discourse-cdn.com/flex020/stylesheets/hosted-site_33ac7771e780900d970512652f5edb5cb3dc75bc.css?__ws=community.plotly.com" media="all" rel="stylesheet" data-target="hosted-site" /> <link href="https://sea2.discourse-cdn.com/flex020/stylesheets/poll_33ac7771e780900d970512652f5edb5cb3dc75bc.css?__ws=community.plotly.com" media="all" rel="stylesheet" data-target="poll" /> <link href="https://sea2.discourse-cdn.com/flex020/stylesheets/spoiler-alert_33ac7771e780900d970512652f5edb5cb3dc75bc.css?__ws=community.plotly.com" media="all" rel="stylesheet" data-target="spoiler-alert" /> <link href="https://sea2.discourse-cdn.com/flex020/stylesheets/chat_desktop_33ac7771e780900d970512652f5edb5cb3dc75bc.css?__ws=community.plotly.com" media="all" rel="stylesheet" data-target="chat_desktop" /> <link href="https://sea2.discourse-cdn.com/flex020/stylesheets/discourse-ai_desktop_33ac7771e780900d970512652f5edb5cb3dc75bc.css?__ws=community.plotly.com" media="all" rel="stylesheet" data-target="discourse-ai_desktop" /> <link href="https://sea2.discourse-cdn.com/flex020/stylesheets/discourse-reactions_desktop_33ac7771e780900d970512652f5edb5cb3dc75bc.css?__ws=community.plotly.com" media="all" rel="stylesheet" data-target="discourse-reactions_desktop" /> <link href="https://sea2.discourse-cdn.com/flex020/stylesheets/discourse-topic-voting_desktop_33ac7771e780900d970512652f5edb5cb3dc75bc.css?__ws=community.plotly.com" media="all" rel="stylesheet" data-target="discourse-topic-voting_desktop" /> <link href="https://sea2.discourse-cdn.com/flex020/stylesheets/poll_desktop_33ac7771e780900d970512652f5edb5cb3dc75bc.css?__ws=community.plotly.com" media="all" rel="stylesheet" data-target="poll_desktop" /> <link href="https://sea2.discourse-cdn.com/flex020/stylesheets/desktop_theme_5_fdd949d2d7801a51bcd1b70d951df057fd2cb166.css?__ws=community.plotly.com" media="all" rel="stylesheet" data-target="desktop_theme" data-theme-id="5" data-theme-name="custom header links"/> <link href="https://sea2.discourse-cdn.com/flex020/stylesheets/desktop_theme_7_221c196245a0897eb969b0b1f0db3cda5dc78a4e.css?__ws=community.plotly.com" media="all" rel="stylesheet" data-target="desktop_theme" data-theme-id="7" data-theme-name="discourse-tag-sidebars"/> <link href="https://sea2.discourse-cdn.com/flex020/stylesheets/desktop_theme_2_56a136877959eead3d836aa317c950c11a3ed8f4.css?__ws=community.plotly.com" media="all" rel="stylesheet" data-target="desktop_theme" data-theme-id="2" data-theme-name="base style"/> <link href="https://sea2.discourse-cdn.com/flex020/stylesheets/desktop_theme_3_eb8562e2462efe7992860f964e438923a8b56057.css?__ws=community.plotly.com" media="all" rel="stylesheet" data-target="desktop_theme" data-theme-id="3" data-theme-name="header links"/> <link href="https://sea2.discourse-cdn.com/flex020/stylesheets/desktop_theme_6_35b6c967ba87fb2c41c704babd20ff5187fdaac9.css?__ws=community.plotly.com" media="all" rel="stylesheet" data-target="desktop_theme" data-theme-id="6" data-theme-name="house ads"/> <link href="https://sea2.discourse-cdn.com/flex020/stylesheets/desktop_theme_4_37375169a6f70ea76da957f136ffecbc1343bebc.css?__ws=community.plotly.com" media="all" rel="stylesheet" data-target="desktop_theme" data-theme-id="4" data-theme-name="plotly light"/> <script defer="" src="https://sea2.discourse-cdn.com/flex020/theme-javascripts/e0be0f227c4f7f52cdffda4c89899b164037dc16.js?__ws=community.plotly.com" data-theme-id="4" nonce="jXEG1CXrq0i5vP8eUvRi8yF4Z"></script> <!-- Global site tag (gtag.js) - AdWords: 1009791370 --> <script async="" src="https://www.googletagmanager.com/gtag/js?id=AW-1009791370" nonce="jXEG1CXrq0i5vP8eUvRi8yF4Z"></script> <script defer="" src="https://sea2.discourse-cdn.com/flex020/theme-javascripts/0c2e38f62f793a5051d0d14872c9bf34469a6aa3.js?__ws=community.plotly.com" data-theme-id="3" nonce="jXEG1CXrq0i5vP8eUvRi8yF4Z"></script> <script defer="" src="https://sea2.discourse-cdn.com/flex020/theme-javascripts/d94ac2bc7117e2106ded661606dbd9691e2ffe88.js?__ws=community.plotly.com" data-theme-id="8" nonce="jXEG1CXrq0i5vP8eUvRi8yF4Z"></script> <link rel="alternate nofollow" type="application/rss+xml" title="RSS feed of 'Figure Friday 2024 - week 37'" href="https://community.plotly.com/t/figure-friday-2024-week-37/87233.rss" /> <meta property="og:site_name" content="Plotly Community Forum" /> <meta property="og:type" content="website" /> <meta name="twitter:card" content="summary" /> <meta name="twitter:image" content="https://us1.discourse-cdn.com/flex020/uploads/plot/optimized/3X/6/e/6e4359f32e7df2c687540556632d61186a320c0e_2_1024x796.jpeg" /> <meta property="og:image" content="https://us1.discourse-cdn.com/flex020/uploads/plot/optimized/3X/6/e/6e4359f32e7df2c687540556632d61186a320c0e_2_1024x796.jpeg" /> <meta property="og:url" content="https://community.plotly.com/t/figure-friday-2024-week-37/87233" /> <meta name="twitter:url" content="https://community.plotly.com/t/figure-friday-2024-week-37/87233" /> <meta property="og:title" content="Figure Friday 2024 - week 37" /> <meta name="twitter:title" content="Figure Friday 2024 - week 37" /> <meta property="og:description" content="Child mortality rates (the estimated share of newborns who die before reaching the age of five) have gone down over the last two centuries, but in many places the rates are still unacceptably high. This week’s Figure-Friday data set is on child mortality rates in countries around the globe, going back to the eighteen hundred. Sample Figure: Things to consider: can you replicate the sample graph with Plotly? can you improve the sample graph built? would a different figure tell the data sto..." /> <meta name="twitter:description" content="Child mortality rates (the estimated share of newborns who die before reaching the age of five) have gone down over the last two centuries, but in many places the rates are still unacceptably high. This week’s Figure-Friday data set is on child mortality rates in countries around the globe, going back to the eighteen hundred. Sample Figure: Things to consider: can you replicate the sample graph with Plotly? can you improve the sample graph built? would a different figure tell the data sto..." /> <meta property="og:article:section" content="Dash Python" /> <meta property="og:article:section:color" content="0E76BD" /> <meta property="og:article:tag" content="figure-friday" /> <meta name="twitter:label1" value="Reading time" /> <meta name="twitter:data1" value="3 mins 🕑" /> <meta name="twitter:label2" value="Likes" /> <meta name="twitter:data2" value="38 ❤" /> <meta property="article:published_time" content="2024-09-13T13:42:54+00:00" /> <meta property="og:ignore_canonical" content="true" /> <script type="application/ld+json">{"@context":"http://schema.org","@type":"QAPage","name":"Figure Friday 2024 - week 37","mainEntity":{"@type":"Question","name":"Figure Friday 2024 - week 37","text":"Child mortality rates (the estimated share of newborns who die before reaching the age of five) have gone down over the last two centuries, but in many places the rates are still unacceptably high.\n\nThis week’s Figure-Friday <a href=\"https://github.com/plotly/Figure-Friday/blob/main/2024/week-37/child-mortality.csv\">data set<\/a> is on child mortality rates in countries around the globe, going b…","upvoteCount":4,"answerCount":0,"datePublished":"2024-09-13T13:42:54.672Z","author":{"@type":"Person","name":"adamschroeder","url":"https://community.plotly.com/u/adamschroeder"}}}</script> </head> <body class="crawler browser-update"> <script defer="" src="https://sea2.discourse-cdn.com/flex020/theme-javascripts/8a94b765fb088b99b43c978ee0d1a2ddd8f75a82.js?__ws=community.plotly.com" data-theme-id="7" nonce="jXEG1CXrq0i5vP8eUvRi8yF4Z"></script> <header> <a href="/"> Plotly Community Forum </a> </header> <div id="main-outlet" class="wrap" role="main"> <div id="topic-title"> <h1> <a href="/t/figure-friday-2024-week-37/87233">Figure Friday 2024 - week 37</a> </h1> <div class="topic-category" itemscope itemtype="http://schema.org/BreadcrumbList"> <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a href="/c/python/25" class="badge-wrapper bullet" itemprop="item"> <span class='badge-category-bg' style='background-color: #0E76BD'></span> <span class='badge-category clear-badge'> <span class='category-name' itemprop='name'>Dash Python</span> </span> </a> <meta itemprop="position" content="1" /> </span> </div> <div class="topic-category"> <div class='discourse-tags list-tags'> <a href='https://community.plotly.com/tag/figure-friday' class='discourse-tag' rel="tag">figure-friday</a> </div> </div> </div> <div itemscope itemtype='http://schema.org/DiscussionForumPosting'> <meta itemprop='headline' content='Figure Friday 2024 - week 37'> <link itemprop='url' href='https://community.plotly.com/t/figure-friday-2024-week-37/87233'> <meta itemprop='datePublished' content='2024-09-13T13:42:54Z'> <meta itemprop='articleSection' content='Dash Python'> <meta itemprop='keywords' content='figure-friday'> <div itemprop='publisher' itemscope itemtype="http://schema.org/Organization"> <meta itemprop='name' content='Plotly'> <div itemprop='logo' itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop='url' content='https://us1.discourse-cdn.com/flex020/uploads/plot/original/3X/f/3/f3da33405ee7e693abfd12bd4ae334a55e8345d0.png'> </div> </div> <div id='post_1' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" rel='nofollow' href='https://community.plotly.com/u/adamschroeder'><span itemprop='name'>adamschroeder</span></a> </span> <link itemprop="mainEntityOfPage" href="https://community.plotly.com/t/figure-friday-2024-week-37/87233"> <link itemprop="image" href="https://us1.discourse-cdn.com/flex020/uploads/plot/original/3X/6/e/6e4359f32e7df2c687540556632d61186a320c0e.jpeg"> <span class="crawler-post-infos"> <time datetime='2024-09-13T13:42:54Z' class='post-time'> September 13, 2024, 1:42pm </time> <meta itemprop='dateModified' content='2024-09-13T13:42:54Z'> <span itemprop='position'>1</span> </span> </div> <div class='post' itemprop='text'> <p>Child mortality rates (the estimated share of newborns who die before reaching the age of five) have gone down over the last two centuries, but in many places the rates are still unacceptably high.</p> <p>This week’s Figure-Friday <a href="https://github.com/plotly/Figure-Friday/blob/main/2024/week-37/child-mortality.csv">data set</a> is on child mortality rates in countries around the globe, going back to the eighteen hundred.</p> <p><a href="https://ourworldindata.org/grapher/child-mortality?time=earliest..latest">Sample Figure</a>:<br> <div class="lightbox-wrapper"><a class="lightbox" href="https://us1.discourse-cdn.com/flex020/uploads/plot/original/3X/6/e/6e4359f32e7df2c687540556632d61186a320c0e.jpeg" data-download-href="/uploads/short-url/fJqOVpDyjwBprubfPCf15G0xXDU.jpeg?dl=1" title="child-mortality"><img src="https://us1.discourse-cdn.com/flex020/uploads/plot/optimized/3X/6/e/6e4359f32e7df2c687540556632d61186a320c0e_2_642x500.jpeg" alt="child-mortality" data-base62-sha1="fJqOVpDyjwBprubfPCf15G0xXDU" width="642" height="500" srcset="https://us1.discourse-cdn.com/flex020/uploads/plot/optimized/3X/6/e/6e4359f32e7df2c687540556632d61186a320c0e_2_642x500.jpeg, https://us1.discourse-cdn.com/flex020/uploads/plot/optimized/3X/6/e/6e4359f32e7df2c687540556632d61186a320c0e_2_963x750.jpeg 1.5x, https://us1.discourse-cdn.com/flex020/uploads/plot/optimized/3X/6/e/6e4359f32e7df2c687540556632d61186a320c0e_2_1284x1000.jpeg 2x" data-dominant-color="F9F8F8"><div class="meta"><svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg><span class="filename">child-mortality</span><span class="informations">1920×1494 125 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg></div></a></div></p> <h3><a name="p-182806-things-to-consider-1" class="anchor" href="#p-182806-things-to-consider-1"></a>Things to consider:</h3> <ul> <li>can you replicate the sample graph with Plotly?</li> <li>can you improve the sample graph built?</li> <li>would a different figure tell the data story better?</li> <li>are you able to replicate or improve <a href="https://ourworldindata.org/grapher/child-mortality?time=earliest..latest">the app</a> built by Our World in Data?</li> </ul> <h1><a name="p-182806-participation-instructions-2" class="anchor" href="#p-182806-participation-instructions-2"></a>Participation Instructions:</h1> <ul> <li><strong>Create</strong> - use the weekly data set to build your own Plotly visualization or Dash app. Or, enhance the sample figure provided in this post, using Plotly or Dash.</li> <li><strong>Submit</strong> - post your creation to LinkedIn or Twitter with the hashtags <code>#FigureFriday</code> and <code>#plotly</code> by midnight Thursday, your time zone. Please also submit your visualization as a new post in this thread.</li> <li><strong>Celebrate</strong> - join the <a href="https://us06web.zoom.us/meeting/register/tZIuceqhqT4iHNS1T-23AWqtxmFKaCRlwTUq">Figure Friday sessions </a> to showcase your creation and receive feedback from the community.</li> </ul> <p><img src="https://emoji.discourse-cdn.com/twitter/point_right.png?v=12" title=":point_right:" class="emoji" alt=":point_right:" loading="lazy" width="20" height="20"> If you prefer to collaborate with others on Discord, join the <a href="https://discord.gg/Pa8scsgepB">Plotly Discord channel </a>.</p> <p>Thank you to <a href="https://makeovermonday.co.uk/">MakeoverMonday</a> and <a href="https://ourworldindata.org/grapher/child-mortality?time=earliest..latest">OurWorldInData</a> for the data.</p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="4" /> <span class='post-likes'>4 Likes</span> </div> <div class='crawler-linkback-list' itemscope itemtype='http://schema.org/ItemList'> <div itemprop='itemListElement' itemscope itemtype='http://schema.org/ListItem'> <a itemprop='url' href="https://community.plotly.com/t/figure-friday-2024-week-36/87101">Figure Friday 2024 - week 36</a> <meta itemprop='position' content='6'> </div> </div> </div> <div id='post_3' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" rel='nofollow' href='https://community.plotly.com/u/li.nguyen'><span itemprop='name'>li.nguyen</span></a> </span> <link itemprop="image" href="https://us1.discourse-cdn.com/flex020/uploads/plot/original/3X/1/d/1de4cee47377891a6d37e61fe1239ab05c83199b.png"> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-09-16T13:31:10Z' class='post-time'> September 16, 2024, 1:31pm </time> <meta itemprop='dateModified' content='2024-09-16T13:31:10Z'> <span itemprop='position'>3</span> </span> </div> <div class='post' itemprop='text'> <aside class="quote group-Plotly-Team" data-username="adamschroeder" data-post="1" data-topic="87233"> <div class="title"> <div class="quote-controls"></div> <img loading="lazy" alt="" width="24" height="24" src="https://sea2.discourse-cdn.com/flex020/user_avatar/community.plotly.com/adamschroeder/48/17280_2.png" class="avatar"> adamschroeder:</div> <blockquote> <h3>Things to consider:</h3> <ul> <li>can you replicate the sample graph with Plotly?</li> <li>can you improve the sample graph built?</li> <li>would a different figure tell the data story better?</li> <li>are you able to replicate or improve <a href="https://ourworldindata.org/grapher/child-mortality?time=earliest..latest">the app </a> built by Our World in Data?</li> </ul> </blockquote> </aside> <p>Hey guys <img src="https://emoji.discourse-cdn.com/twitter/wave.png?v=12" title=":wave:" class="emoji" alt=":wave:" loading="lazy" width="20" height="20"></p> <p>I was a bit busy the last weeks, but happy to finally join you guys again!</p> <p>The initial visualisation was already well made, the only thing I’ve changed was the color palette, because it didn’t seem to be colour blind proof, when I’ve uploaded it to the <a href="https://www.color-blindness.com/coblis-color-blindness-simulator">simulator</a>. I’ve also removed the animation, and replaced it with a filter instead.</p> <p><div class="lightbox-wrapper"><a class="lightbox" href="https://us1.discourse-cdn.com/flex020/uploads/plot/original/3X/1/d/1de4cee47377891a6d37e61fe1239ab05c83199b.png" data-download-href="/uploads/short-url/4gs45iiv5eMlTvHm4JMGyPiwexB.png?dl=1" title="Screenshot 2024-09-16 at 15.22.08"><img src="https://us1.discourse-cdn.com/flex020/uploads/plot/optimized/3X/1/d/1de4cee47377891a6d37e61fe1239ab05c83199b_2_690x437.png" alt="Screenshot 2024-09-16 at 15.22.08" data-base62-sha1="4gs45iiv5eMlTvHm4JMGyPiwexB" width="690" height="437" srcset="https://us1.discourse-cdn.com/flex020/uploads/plot/optimized/3X/1/d/1de4cee47377891a6d37e61fe1239ab05c83199b_2_690x437.png, https://us1.discourse-cdn.com/flex020/uploads/plot/optimized/3X/1/d/1de4cee47377891a6d37e61fe1239ab05c83199b_2_1035x655.png 1.5x, https://us1.discourse-cdn.com/flex020/uploads/plot/original/3X/1/d/1de4cee47377891a6d37e61fe1239ab05c83199b.png 2x" data-dominant-color="FAFBFB"><div class="meta"><svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg><span class="filename">Screenshot 2024-09-16 at 15.22.08</span><span class="informations">1042×661 58 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg></div></a></div></p> <p>I’ve also replicated the app using Vizro in <strong><160 lines of code</strong>. The table view is not identical but you get the idea <img src="https://emoji.discourse-cdn.com/twitter/slight_smile.png?v=12" title=":slight_smile:" class="emoji" alt=":slight_smile:" loading="lazy" width="20" height="20"></p> <p><img src="https://us1.discourse-cdn.com/flex020/uploads/plot/original/3X/3/9/392a4601585eb2605e4366734a6340361c068f61.gif" alt="figure-friday-week-37" data-base62-sha1="89HMKsWK0Zl3bI1jp5Z6sFOQVxv" width="600" height="359" class="animated"></p> <p><img src="https://emoji.discourse-cdn.com/twitter/1234.png?v=12" title=":1234:" class="emoji" alt=":1234:" loading="lazy" width="20" height="20"> <strong>Code:</strong> <a href="https://py.cafe/huong-li-nguyen/figure-friday-week-37" class="inline-onebox">PyCafe - Vizro - Visualizing Under-Five Mortality Rates by Country</a><br> <img src="https://emoji.discourse-cdn.com/twitter/computer.png?v=12" title=":computer:" class="emoji" alt=":computer:" loading="lazy" width="20" height="20"> <strong>App:</strong> <a href="https://py.cafe/app/huong-li-nguyen/figure-friday-week-37" class="inline-onebox">PyCafe - Vizro - Visualizing Under-Five Mortality Rates by Country</a></p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="5" /> <span class='post-likes'>5 Likes</span> </div> </div> <div id='post_4' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" rel='nofollow' href='https://community.plotly.com/u/li.nguyen'><span itemprop='name'>li.nguyen</span></a> </span> <link itemprop="image" href="https://us1.discourse-cdn.com/flex020/uploads/plot/original/3X/c/4/c40ed35820d6666ed00c90229a4961d063c1280c.png"> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-09-16T13:35:52Z' class='post-time'> September 16, 2024, 1:35pm </time> <meta itemprop='dateModified' content='2024-09-16T13:35:52Z'> <span itemprop='position'>4</span> </span> </div> <div class='post' itemprop='text'> <p>I have one Plotly question actually!</p> <p>Does anyone know <strong>how I can have the y-axis zeroline on the same height as the x-axis line in the line chart?</strong> (similar to how it is done in the original chart) <img src="https://emoji.discourse-cdn.com/twitter/thinking.png?v=12" title=":thinking:" class="emoji" alt=":thinking:" loading="lazy" width="20" height="20"> I’ve tried a couple of post fig updates, but didn’t seem to find the right one.</p> <p><div class="lightbox-wrapper"><a class="lightbox" href="https://us1.discourse-cdn.com/flex020/uploads/plot/original/3X/c/4/c40ed35820d6666ed00c90229a4961d063c1280c.png" data-download-href="/uploads/short-url/rYplz3VR9OcceSgdXadpyNdZRuI.png?dl=1" title="Screenshot 2024-09-16 at 14.15.14"><img src="https://us1.discourse-cdn.com/flex020/uploads/plot/original/3X/c/4/c40ed35820d6666ed00c90229a4961d063c1280c.png" alt="Screenshot 2024-09-16 at 14.15.14" data-base62-sha1="rYplz3VR9OcceSgdXadpyNdZRuI" width="690" height="112" data-dominant-color="FDFDFD"><div class="meta"><svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg><span class="filename">Screenshot 2024-09-16 at 14.15.14</span><span class="informations">742×121 1.58 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg></div></a></div></p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="1" /> <span class='post-likes'>1 Like</span> </div> </div> <div id='post_5' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" rel='nofollow' href='https://community.plotly.com/u/adamschroeder'><span itemprop='name'>adamschroeder</span></a> </span> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-09-16T16:19:35Z' class='post-time'> September 16, 2024, 4:19pm </time> <meta itemprop='dateModified' content='2024-09-16T16:19:35Z'> <span itemprop='position'>5</span> </span> </div> <div class='post' itemprop='text'> <p>Nice app, <a class="mention" href="/u/li.nguyen">@li.nguyen</a> . I appreciate how you build apps and graphs that are accessible to everyone.</p> <p>Is there a reason you chose to have the map animation go from present to past time as opposed to past to present? And any reason you chose to have it start at 1957?</p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="1" /> <span class='post-likes'>1 Like</span> </div> </div> <div id='post_6' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" rel='nofollow' href='https://community.plotly.com/u/adamschroeder'><span itemprop='name'>adamschroeder</span></a> </span> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-09-16T16:29:18Z' class='post-time'> September 16, 2024, 4:29pm </time> <meta itemprop='dateModified' content='2024-09-16T16:29:18Z'> <span itemprop='position'>6</span> </span> </div> <div class='post' itemprop='text'> <p>Li, try to add the range attribute to the figure: <code>range_y=[0,70]</code></p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="3" /> <span class='post-likes'>3 Likes</span> </div> </div> <div id='post_7' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" rel='nofollow' href='https://community.plotly.com/u/li.nguyen'><span itemprop='name'>li.nguyen</span></a> </span> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-09-16T16:36:09Z' class='post-time'> September 16, 2024, 4:36pm </time> <meta itemprop='dateModified' content='2024-09-16T16:36:09Z'> <span itemprop='position'>7</span> </span> </div> <div class='post' itemprop='text'> <p>Uhh interesting, that is completely unintentional! I also didn’t configure anything extra, so that was the default behaviour as soon as I set <code>animation_frame="Year"</code> inside the <code>px.choropleth</code>. I’ll take a look later why it does that <img src="https://emoji.discourse-cdn.com/twitter/thinking.png?v=12" title=":thinking:" class="emoji" alt=":thinking:" loading="lazy" width="20" height="20"></p> <p>Your second suggestion worked like a charm! <img src="https://emoji.discourse-cdn.com/twitter/star.png?v=12" title=":star:" class="emoji" alt=":star:" loading="lazy" width="20" height="20"></p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="2" /> <span class='post-likes'>2 Likes</span> </div> </div> <div id='post_8' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" rel='nofollow' href='https://community.plotly.com/u/hebertodelrio'><span itemprop='name'>hebertodelrio</span></a> </span> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-09-17T04:10:32Z' class='post-time'> September 17, 2024, 4:10am </time> <meta itemprop='dateModified' content='2024-09-17T04:10:32Z'> <span itemprop='position'>8</span> </span> </div> <div class='post' itemprop='text'> <p>fig.update_yaxes(rangemode=‘nonnegative’)</p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="3" /> <span class='post-likes'>3 Likes</span> </div> </div> <div id='post_9' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" rel='nofollow' href='https://community.plotly.com/u/hebertodelrio'><span itemprop='name'>hebertodelrio</span></a> </span> <link itemprop="image" href="https://us1.discourse-cdn.com/flex020/uploads/plot/original/3X/b/3/b3ca9001b039312f7f1a5bce62622c17104e1409.png"> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-09-17T04:56:43Z' class='post-time'> September 17, 2024, 4:56am </time> <meta itemprop='dateModified' content='2024-09-20T23:24:41Z'> <span itemprop='position'>9</span> </span> </div> <div class='post' itemprop='text'> <p>I am really sorry that I have not been able to participate as much as I would like to, but unfortunately this semester I am a bit busy with my classes. Here is my attempt to replicate the sample graph.</p> <p><div class="lightbox-wrapper"><a class="lightbox" href="https://us1.discourse-cdn.com/flex020/uploads/plot/original/3X/b/3/b3ca9001b039312f7f1a5bce62622c17104e1409.png" data-download-href="/uploads/short-url/pEvseDpiaC8lPgHzgHRPjgWkGWl.png?dl=1" title="newplot" rel="noopener nofollow ugc"><img src="https://us1.discourse-cdn.com/flex020/uploads/plot/optimized/3X/b/3/b3ca9001b039312f7f1a5bce62622c17104e1409_2_690x492.png" alt="newplot" data-base62-sha1="pEvseDpiaC8lPgHzgHRPjgWkGWl" width="690" height="492" srcset="https://us1.discourse-cdn.com/flex020/uploads/plot/optimized/3X/b/3/b3ca9001b039312f7f1a5bce62622c17104e1409_2_690x492.png, https://us1.discourse-cdn.com/flex020/uploads/plot/original/3X/b/3/b3ca9001b039312f7f1a5bce62622c17104e1409.png 1.5x, https://us1.discourse-cdn.com/flex020/uploads/plot/original/3X/b/3/b3ca9001b039312f7f1a5bce62622c17104e1409.png 2x" data-dominant-color="FBFAFB"><div class="meta"><svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg><span class="filename">newplot</span><span class="informations">700×500 46.8 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg></div></a></div></p> <p>Below is the code I used to generate the graph:</p> <pre><code class="lang-auto">countries = ['Brazil', 'India', 'United States', 'France', 'United Kingdom', 'Sweden'] fig = px.line( data[data['Entity'].isin(countries)], x='Year', y='Under-five mortality rate', color='Entity', template='plotly_white' ) fig.update_layout( title='Child mortality rate, 1751 to 2021', title_subtitle_text='The estimated share of newborns who die before reaching the age of five.', margin=dict(t=100, b=100, r=150), yaxis_ticksuffix='%', xaxis_title='', yaxis_title='', font_family='Merriweather', ) fig.update_yaxes(rangemode='nonnegative') fig.update_xaxes(showgrid=False, showline=True, linewidth=1, linecolor='black', ticklen=5, ticks='outside') fig.update_traces(line_width=1) fig.add_annotation( x=0, y=-0.15, xref='paper', yref='paper', text='Data source: UN IGME (2023); Gapminder (2015)', showarrow=False, xanchor='left', yanchor='auto', xshift=0, yshift=0, font_size=12 ) fig.show() </code></pre> <p>Observe that I added to <em>update_layout</em>, the following entry: <em><strong>font_family=“Merriweather”,</strong></em></p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="4" /> <span class='post-likes'>4 Likes</span> </div> </div> <div id='post_10' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" rel='nofollow' href='https://community.plotly.com/u/li.nguyen'><span itemprop='name'>li.nguyen</span></a> </span> <link itemprop="image" href="https://us1.discourse-cdn.com/flex020/uploads/plot/original/3X/7/9/798feeec6127414ede99672a676247a9c4e649e5.png"> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-09-17T08:34:30Z' class='post-time'> September 17, 2024, 8:34am </time> <meta itemprop='dateModified' content='2024-09-17T08:34:30Z'> <span itemprop='position'>10</span> </span> </div> <div class='post' itemprop='text'> <p>Fixed now! <img src="https://emoji.discourse-cdn.com/twitter/bulb.png?v=12" title=":bulb:" class="emoji" alt=":bulb:" loading="lazy" width="20" height="20"></p> <p>Turns out the animation takes on the underlying order of the dataframe by default, so one has to sort it by <code>Year</code> before. I’ve also filtered the data to only include every fifth year, as it the animation had too many ticks for my taste and looked a bit decluttered. This looks better now <img src="https://emoji.discourse-cdn.com/twitter/slight_smile.png?v=12" title=":slight_smile:" class="emoji" alt=":slight_smile:" loading="lazy" width="20" height="20"></p> <p><div class="lightbox-wrapper"><a class="lightbox" href="https://us1.discourse-cdn.com/flex020/uploads/plot/original/3X/7/9/798feeec6127414ede99672a676247a9c4e649e5.png" data-download-href="/uploads/short-url/hlo9h0mDJcmZDcoP5LvxlJXgldr.png?dl=1" title="Screenshot 2024-09-17 at 10.32.43"><img src="https://us1.discourse-cdn.com/flex020/uploads/plot/optimized/3X/7/9/798feeec6127414ede99672a676247a9c4e649e5_2_690x433.png" alt="Screenshot 2024-09-17 at 10.32.43" data-base62-sha1="hlo9h0mDJcmZDcoP5LvxlJXgldr" width="690" height="433" srcset="https://us1.discourse-cdn.com/flex020/uploads/plot/optimized/3X/7/9/798feeec6127414ede99672a676247a9c4e649e5_2_690x433.png, https://us1.discourse-cdn.com/flex020/uploads/plot/optimized/3X/7/9/798feeec6127414ede99672a676247a9c4e649e5_2_1035x649.png 1.5x, https://us1.discourse-cdn.com/flex020/uploads/plot/original/3X/7/9/798feeec6127414ede99672a676247a9c4e649e5.png 2x" data-dominant-color="F6F0F1"><div class="meta"><svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg><span class="filename">Screenshot 2024-09-17 at 10.32.43</span><span class="informations">1080×679 105 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg></div></a></div></p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="6" /> <span class='post-likes'>6 Likes</span> </div> </div> <div id='post_11' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" rel='nofollow' href='https://community.plotly.com/u/Mike_Purtell'><span itemprop='name'>Mike_Purtell</span></a> </span> <link itemprop="image" href="https://us1.discourse-cdn.com/flex020/uploads/plot/original/3X/0/4/04911e89421e221da600bd8ea79bda9e3b887d55.png"> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-09-17T15:10:02Z' class='post-time'> September 17, 2024, 3:10pm </time> <meta itemprop='dateModified' content='2024-09-17T15:10:02Z'> <span itemprop='position'>11</span> </span> </div> <div class='post' itemprop='text'> <p>This week is challenging in the sense that the provided plot is already in good condition. Many others here have made improvements to it. My very small/incremental touch is to use a moving average (window_size=10) to smooth out the early years and keep the traces distinct. Always have to be careful about any steps like this that manipulate the data. To some the spikes may be the more interesting than the linear regions on each curve.</p> <p>A comment about the data: this data set is truly eye-opening, but not unexpected. It brings to mind how lucky we are to live with the medical technology of this generation. I am surprised at how recent the data started in the United States.</p> <p>Here is the code, and a screenshot below that.</p> <pre><code class="lang-auto">import polars as pl import plotly.express as px df = ( pl.read_csv('child-mortality.csv') .filter( pl.col('Entity') .is_in(['India', 'Brazil', 'United States', 'France', 'United Kingdom', 'Sweden']) ) .select(pl.all().exclude('Code')) .pivot( index= 'Year', on='Entity' ) .sort('Year') .with_columns( pl.all().exclude('Year').rolling_mean(window_size=10), ) ) fig = px.scatter( df, 'Year', df.columns[1:] ) my_title = 'Child Mortality Rate, 1751 to 2021<br>' my_title += '<sup>The Estimated Share of newborns<sup>1</sub> who die before reaching the age of five</sup>' fig.update_layout( title = my_title, height=400, width=800, xaxis_title='Data source: UN IGME (2023); Gapminder(2015)', yaxis_title='', xaxis_title_font=dict(size=14), margin={"r":50, "t":50, "l":50, "b":50}, autosize=False, showlegend=True, template='plotly_white', legend=dict( title = '' ) ) fig.update_traces( mode='lines', marker=dict(line=dict(width=1)), ) fig.update_xaxes(showgrid=False) fig.update_yaxes(showgrid=False) fig.show() </code></pre> <p><div class="lightbox-wrapper"><a class="lightbox" href="https://us1.discourse-cdn.com/flex020/uploads/plot/original/3X/0/4/04911e89421e221da600bd8ea79bda9e3b887d55.png" data-download-href="/uploads/short-url/EoPf6jtR6j3wFGTKRAtaOtDWBv.png?dl=1" title="image" rel="noopener nofollow ugc"><img src="https://us1.discourse-cdn.com/flex020/uploads/plot/optimized/3X/0/4/04911e89421e221da600bd8ea79bda9e3b887d55_2_690x327.png" alt="image" data-base62-sha1="EoPf6jtR6j3wFGTKRAtaOtDWBv" width="690" height="327" srcset="https://us1.discourse-cdn.com/flex020/uploads/plot/optimized/3X/0/4/04911e89421e221da600bd8ea79bda9e3b887d55_2_690x327.png, https://us1.discourse-cdn.com/flex020/uploads/plot/original/3X/0/4/04911e89421e221da600bd8ea79bda9e3b887d55.png 1.5x, https://us1.discourse-cdn.com/flex020/uploads/plot/original/3X/0/4/04911e89421e221da600bd8ea79bda9e3b887d55.png 2x" data-dominant-color="FBFBFC"><div class="meta"><svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg><span class="filename">image</span><span class="informations">829×393 56.1 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg></div></a></div></p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="3" /> <span class='post-likes'>3 Likes</span> </div> </div> <div id='post_12' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" rel='nofollow' href='https://community.plotly.com/u/adamschroeder'><span itemprop='name'>adamschroeder</span></a> </span> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-09-17T17:00:15Z' class='post-time'> September 17, 2024, 5:00pm </time> <meta itemprop='dateModified' content='2024-09-17T17:00:15Z'> <span itemprop='position'>12</span> </span> </div> <div class='post' itemprop='text'> <p>Nice replica, <a class="mention" href="/u/hebertodelrio">@hebertodelrio</a> . I’m glad you found some time to participate in Figure Friday <img src="https://emoji.discourse-cdn.com/twitter/slight_smile.png?v=12" title=":slight_smile:" class="emoji" alt=":slight_smile:" loading="lazy" width="20" height="20"></p> <p>And thank you for sharing your example. I like how you added the annotation at the bottom.</p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="0" /> <span class='post-likes'></span> </div> </div> <div id='post_13' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" rel='nofollow' href='https://community.plotly.com/u/adamschroeder'><span itemprop='name'>adamschroeder</span></a> </span> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-09-17T17:05:43Z' class='post-time'> September 17, 2024, 5:05pm </time> <meta itemprop='dateModified' content='2024-09-17T17:05:43Z'> <span itemprop='position'>13</span> </span> </div> <div class='post' itemprop='text'> <p>Hi <a class="mention" href="/u/mike_purtell">@Mike_Purtell</a><br> I find it a little more readable when a moving average is implemented. Is there a particular reason you chose 10 as opposed to 5 or 3 or any other number? I wonder if there is a best practice in regard to choosing a moving average.</p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="0" /> <span class='post-likes'></span> </div> </div> <div id='post_14' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" rel='nofollow' href='https://community.plotly.com/u/Mike_Purtell'><span itemprop='name'>Mike_Purtell</span></a> </span> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-09-17T19:18:24Z' class='post-time'> September 17, 2024, 7:18pm </time> <meta itemprop='dateModified' content='2024-09-17T19:18:24Z'> <span itemprop='position'>14</span> </span> </div> <div class='post' itemprop='text'> <p>Hi <a class="mention" href="/u/adam">@adam</a>, I did not spend much time selecting the moving average window, 10 is just an arbitrary selection. For best practice I would say to pick the minimum moving average window that has enough noise cleanup while preserving the meat of the signal. Some applications would be intolerant of any moving average. I think this is a good use case for putting in a callback to change the moving average window and regenerate the graphs, I may try to do that. Thank you.</p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="2" /> <span class='post-likes'>2 Likes</span> </div> </div> <div id='post_15' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" rel='nofollow' href='https://community.plotly.com/u/hebertodelrio'><span itemprop='name'>hebertodelrio</span></a> </span> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-09-19T23:17:57Z' class='post-time'> September 19, 2024, 11:17pm </time> <meta itemprop='dateModified' content='2024-09-19T23:44:05Z'> <span itemprop='position'>15</span> </span> </div> <div class='post' itemprop='text'> <p>I made a modification to the <em><strong>quarto</strong></em> document that generated the graph so that it could include as the font a free font from the internet <em><strong>Merriweather</strong></em>, that it is closer to the font used in the sample plot than the default Plotly font. I also added to the <em>update_layout</em> method, the parameter: <em><strong>font_family=“Merryweather”</strong></em>.</p> <p>Since <em><strong>quarto</strong></em> uses a <em><strong>Jupyter kernel</strong></em> to process the code cells, I added, as the first code cell in my document, the following code cell that loads the font:</p> <pre><code class="lang-auto">from IPython.core.display import HTML HTML(""" <style> @import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap'); </style> """ ) </code></pre> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="0" /> <span class='post-likes'></span> </div> </div> <div id='post_16' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" rel='nofollow' href='https://community.plotly.com/u/U-Danny'><span itemprop='name'>U-Danny</span></a> </span> <link itemprop="image" href="https://us1.discourse-cdn.com/flex020/uploads/plot/original/3X/2/9/292263680ed5305129be2a79b60569efd8520233.png"> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-09-20T01:22:59Z' class='post-time'> September 20, 2024, 1:22am </time> <meta itemprop='dateModified' content='2024-09-20T01:22:59Z'> <span itemprop='position'>16</span> </span> </div> <div class='post' itemprop='text'> <p>Hi, I find Figure-Friday interesting to learn and improve on data visualization, in this case <a class="mention" href="/u/li.nguyen">@li.nguyen</a> 's proposal for the use of maps, I can add a statistical visual resource for each year, and also in the line graph a country multi selector.<br> <div class="lightbox-wrapper"><a class="lightbox" href="https://us1.discourse-cdn.com/flex020/uploads/plot/original/3X/2/9/292263680ed5305129be2a79b60569efd8520233.png" data-download-href="/uploads/short-url/5RTfG83mW0jS40PeTalpquvR4eT.png?dl=1" title="map_1" rel="noopener nofollow ugc"><img src="https://us1.discourse-cdn.com/flex020/uploads/plot/optimized/3X/2/9/292263680ed5305129be2a79b60569efd8520233_2_690x309.png" alt="map_1" data-base62-sha1="5RTfG83mW0jS40PeTalpquvR4eT" width="690" height="309" srcset="https://us1.discourse-cdn.com/flex020/uploads/plot/optimized/3X/2/9/292263680ed5305129be2a79b60569efd8520233_2_690x309.png, https://us1.discourse-cdn.com/flex020/uploads/plot/optimized/3X/2/9/292263680ed5305129be2a79b60569efd8520233_2_1035x463.png 1.5x, https://us1.discourse-cdn.com/flex020/uploads/plot/original/3X/2/9/292263680ed5305129be2a79b60569efd8520233.png 2x" data-dominant-color="D8DCD1"><div class="meta"><svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg><span class="filename">map_1</span><span class="informations">1365×613 147 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg></div></a></div><br> <div class="lightbox-wrapper"><a class="lightbox" href="https://us1.discourse-cdn.com/flex020/uploads/plot/original/3X/2/a/2a2f85bf05277e6cafb13e405501fd3c0b633f5b.png" data-download-href="/uploads/short-url/61bRWMitNFoXKPmy043ldotSd5h.png?dl=1" title="chart_1" rel="noopener nofollow ugc"><img src="https://us1.discourse-cdn.com/flex020/uploads/plot/optimized/3X/2/a/2a2f85bf05277e6cafb13e405501fd3c0b633f5b_2_690x309.png" alt="chart_1" data-base62-sha1="61bRWMitNFoXKPmy043ldotSd5h" width="690" height="309" srcset="https://us1.discourse-cdn.com/flex020/uploads/plot/optimized/3X/2/a/2a2f85bf05277e6cafb13e405501fd3c0b633f5b_2_690x309.png, https://us1.discourse-cdn.com/flex020/uploads/plot/optimized/3X/2/a/2a2f85bf05277e6cafb13e405501fd3c0b633f5b_2_1035x463.png 1.5x, https://us1.discourse-cdn.com/flex020/uploads/plot/original/3X/2/a/2a2f85bf05277e6cafb13e405501fd3c0b633f5b.png 2x" data-dominant-color="F6F7F7"><div class="meta"><svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg><span class="filename">chart_1</span><span class="informations">1365×613 61.1 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg></div></a></div></p> <p>One consideration, using axes in a fixed range (0-100%) gives a better perspective to compare two entities, sometimes that could speculate figures for a country with a small drop in its figures.</p> <p><a href="https://github.com/U-Danny/plotly_files/blob/main/dash_friday_37.py" rel="noopener nofollow ugc">Application code</a></p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="3" /> <span class='post-likes'>3 Likes</span> </div> </div> <div id='post_17' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" rel='nofollow' href='https://community.plotly.com/u/adamschroeder'><span itemprop='name'>adamschroeder</span></a> </span> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-09-20T12:56:57Z' class='post-time'> September 20, 2024, 12:56pm </time> <meta itemprop='dateModified' content='2024-09-20T12:56:57Z'> <span itemprop='position'>17</span> </span> </div> <div class='post' itemprop='text'> <p>Nice app, <a class="mention" href="/u/u-danny">@U-Danny</a></p> <p>What made you add the box plot next to the map, as opposed to a different type of visualization?</p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="0" /> <span class='post-likes'></span> </div> </div> <div id='post_18' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" rel='nofollow' href='https://community.plotly.com/u/U-Danny'><span itemprop='name'>U-Danny</span></a> </span> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-09-20T13:44:21Z' class='post-time'> September 20, 2024, 1:44pm </time> <meta itemprop='dateModified' content='2024-09-20T13:44:21Z'> <span itemprop='position'>18</span> </span> </div> <div class='post' itemprop='text'> <p>Hi, although on the map you can see the changes by color, in a boxplot you can see the presence of atypical values, the symmetry of the distribution, this can lead to a more in-depth analysis.</p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="1" /> <span class='post-likes'>1 Like</span> </div> </div> </div> <div id="related-topics" class="more-topics__list " role="complementary" aria-labelledby="related-topics-title"> <h3 id="related-topics-title" class="more-topics__list-title"> Related topics </h3> <div class="topic-list-container" itemscope itemtype='http://schema.org/ItemList'> <meta itemprop='itemListOrder' content='http://schema.org/ItemListOrderDescending'> <table class='topic-list'> <thead> <tr> <th>Topic</th> <th></th> <th class="replies">Replies</th> <th class="views">Views</th> <th>Activity</th> </tr> </thead> <tbody> <tr class="topic-list-item" id="topic-list-item-89022"> <td class="main-link" itemprop='itemListElement' itemscope itemtype='http://schema.org/ListItem'> <meta itemprop='position' content='1'> <span class="link-top-line"> <a itemprop='url' href='https://community.plotly.com/t/figure-friday-2024-week-48/89022' class='title raw-link raw-topic-link'>Figure Friday 2024 - week 48</a> </span> <div class="link-bottom-line"> <a href='/c/python/25' class='badge-wrapper bullet'> <span class='badge-category-bg' style='background-color: #0E76BD'></span> <span class='badge-category clear-badge'> <span class='category-name'>Dash Python</span> </span> </a> <div class="discourse-tags"> <a href='https://community.plotly.com/tag/announcements' class='discourse-tag'>announcements</a> , <a href='https://community.plotly.com/tag/figure-friday' class='discourse-tag'>figure-friday</a> </div> </div> </td> <td class="replies"> <span class='posts' title='posts'>26</span> </td> <td class="views"> <span class='views' title='views'>259</span> </td> <td> December 7, 2024 </td> </tr> <tr class="topic-list-item" id="topic-list-item-86927"> <td class="main-link" itemprop='itemListElement' itemscope itemtype='http://schema.org/ListItem'> <meta itemprop='position' content='2'> <span class="link-top-line"> <a itemprop='url' href='https://community.plotly.com/t/figure-friday-2024-week-35/86927' class='title raw-link raw-topic-link'>Figure Friday 2024 - week 35</a> </span> <div class="link-bottom-line"> <a href='/c/python/25' class='badge-wrapper bullet'> <span class='badge-category-bg' style='background-color: #0E76BD'></span> <span class='badge-category clear-badge'> <span class='category-name'>Dash Python</span> </span> </a> <div class="discourse-tags"> <a href='https://community.plotly.com/tag/figure-friday' class='discourse-tag'>figure-friday</a> </div> </div> </td> <td class="replies"> <span class='posts' title='posts'>19</span> </td> <td class="views"> <span class='views' title='views'>290</span> </td> <td> September 10, 2024 </td> </tr> <tr class="topic-list-item" id="topic-list-item-86264"> <td class="main-link" itemprop='itemListElement' itemscope itemtype='http://schema.org/ListItem'> <meta itemprop='position' content='3'> <span class="link-top-line"> <a itemprop='url' href='https://community.plotly.com/t/figure-friday-2024-week-31/86264' class='title raw-link raw-topic-link'>Figure Friday 2024 - week 31</a> </span> <div class="link-bottom-line"> <a href='/c/python/25' class='badge-wrapper bullet'> <span class='badge-category-bg' style='background-color: #0E76BD'></span> <span class='badge-category clear-badge'> <span class='category-name'>Dash Python</span> </span> </a> <div class="discourse-tags"> <a href='https://community.plotly.com/tag/figure-friday' class='discourse-tag'>figure-friday</a> </div> </div> </td> <td class="replies"> <span class='posts' title='posts'>19</span> </td> <td class="views"> <span class='views' title='views'>338</span> </td> <td> August 10, 2024 </td> </tr> <tr class="topic-list-item" id="topic-list-item-87101"> <td class="main-link" itemprop='itemListElement' itemscope itemtype='http://schema.org/ListItem'> <meta itemprop='position' content='4'> <span class="link-top-line"> <a itemprop='url' href='https://community.plotly.com/t/figure-friday-2024-week-36/87101' class='title raw-link raw-topic-link'>Figure Friday 2024 - week 36</a> </span> <div class="link-bottom-line"> <a href='/c/python/25' class='badge-wrapper bullet'> <span class='badge-category-bg' style='background-color: #0E76BD'></span> <span class='badge-category clear-badge'> <span class='category-name'>Dash Python</span> </span> </a> <div class="discourse-tags"> <a href='https://community.plotly.com/tag/figure-friday' class='discourse-tag'>figure-friday</a> </div> </div> </td> <td class="replies"> <span class='posts' title='posts'>20</span> </td> <td class="views"> <span class='views' title='views'>372</span> </td> <td> October 29, 2024 </td> </tr> <tr class="topic-list-item" id="topic-list-item-87572"> <td class="main-link" itemprop='itemListElement' itemscope itemtype='http://schema.org/ListItem'> <meta itemprop='position' content='5'> <span class="link-top-line"> <a itemprop='url' href='https://community.plotly.com/t/figure-friday-2024-week-39/87572' class='title raw-link raw-topic-link'>Figure Friday 2024 - week 39</a> </span> <div class="link-bottom-line"> <a href='/c/python/25' class='badge-wrapper bullet'> <span class='badge-category-bg' style='background-color: #0E76BD'></span> <span class='badge-category clear-badge'> <span class='category-name'>Dash Python</span> </span> </a> <div class="discourse-tags"> <a href='https://community.plotly.com/tag/figure-friday' class='discourse-tag'>figure-friday</a> </div> </div> </td> <td class="replies"> <span class='posts' title='posts'>2</span> </td> <td class="views"> <span class='views' title='views'>121</span> </td> <td> October 4, 2024 </td> </tr> </tbody> </table> </div> </div> </div> <footer class="container wrap"> <nav class='crawler-nav'> <ul> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='/' itemprop="url">Home </a> </span> </li> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='/categories' itemprop="url">Categories </a> </span> </li> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='/guidelines' itemprop="url">Guidelines </a> </span> </li> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='/tos' itemprop="url">Terms of Service </a> </span> </li> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='/privacy' itemprop="url">Privacy Policy </a> </span> </li> </ul> </nav> <p class='powered-by-link'>Powered by <a href="https://www.discourse.org">Discourse</a>, best viewed with JavaScript enabled</p> </footer> <div class="buorg"><div>Unfortunately, <a href="https://www.discourse.org/faq/#browser">your browser is unsupported</a>. Please <a href="https://browsehappy.com">switch to a supported browser</a> to view rich content, log in and reply.</div></div> </body> </html>