{"id":1261,"date":"2012-06-12T13:21:32","date_gmt":"2012-06-12T18:21:32","guid":{"rendered":"http:\/\/rud.is\/b\/?p=1261"},"modified":"2012-06-28T09:51:08","modified_gmt":"2012-06-28T14:51:08","slug":"slopegraphs-in-python-gratuitous-raphael-animations","status":"publish","type":"post","link":"https:\/\/rud.is\/b\/2012\/06\/12\/slopegraphs-in-python-gratuitous-raphael-animations\/","title":{"rendered":"Slopegraphs in Python \u2013 Gratuitous Rapha\u00ebl Animations"},"content":{"rendered":"<blockquote>\n<p><b>UPDATE:<\/b> <i>It seems my use of <code>&lt;script async&gt;<\/code> optimization for Rapha\u00ebl busted the inline slopegraph generation. Will work on tweaking the example posts to wait for Rapha\u00ebl to load when I get some time.<\/i><\/p>\n<\/blockquote>\n<p>So, I had to alter this to start after a user interaction. It loaded fine as a static, local page but seems to get a bit wonky embedded in a complex page. I also see some artifacts in Chrome but not in Safari. Still, not a bad foray into basic animation.<\/p>\n<style type=\"text\/css\">#s5 { width: 584; }<\/style>\n<style type=\"text\/css\">\n.s5_button {\n\t-moz-box-shadow:inset 0px 1px 0px 0px #fce2c1;\n\t-webkit-box-shadow:inset 0px 1px 0px 0px #fce2c1;\n\tbox-shadow:inset 0px 1px 0px 0px #fce2c1;\n\tbackground:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffc477), color-stop(1, #fb9e25) );\n\tbackground:-moz-linear-gradient( center top, #ffc477 5%, #fb9e25 100% );\n\tfilter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc477', endColorstr='#fb9e25');\n\tbackground-color:#ffc477;\n\t-moz-border-radius:6px;\n\t-webkit-border-radius:6px;\n\tborder-radius:6px;\n\tborder:1px solid #eeb44f;\n\tdisplay:inline-block;\n\tcolor:#ffffff;\n\tfont-family:arial;\n\tfont-size:15px;\n\tfont-weight:bold;\n\tpadding:9px 24px;\n\ttext-decoration:none;\n\ttext-shadow:1px 1px 6px #cc9f52;\n}.s5_button:hover {\n\tbackground:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fb9e25), color-stop(1, #ffc477) );\n\tbackground:-moz-linear-gradient( center top, #fb9e25 5%, #ffc477 100% );\n\tfilter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fb9e25', endColorstr='#ffc477');\n\tbackground-color:#fb9e25;\n}.s5_button:active {\n\tposition:relative;\n\ttop:1px;\n}\n\/* This imageless css button was generated by CSSButtonGenerator.com *\/\n<\/style>\n<p><center><a class=\"s5_button\" onClick=\"s5_start_anim()\">Animate Slopegraph<\/a><\/center><\/p>\n<p><center><\/p>\n<div id=\"s5\"><\/div>\n<p><\/center><br \/>\n<script type=\"text\/javascript\"><\/p>\n<p>                var s5_delay = 1000 ;\n                var s5 = new Raphael(document.getElementById('s5'), 584, 1616);\n                s5.safari();\n                var s5_headers = new Array();\n                var s5_lines = new Array();\n                var s5_labels = new Array() ;\n                var s5_values = new Array() ;            \n                var s5_didanimate = false ;            <\/p>\n<p>s5.rect(0,0,584.10546875,1616.86513065).attr({fill:'#EEEEEE',stroke:'#EEEEEE'});\n                s5_headers[0] = s5.text(109, 44, 'April 2011').attr({'font':'14.0px Palatino','font-family':'Palatino','font-size':'14','font-weight':'bold','fill':'#403B33','text-anchor':'end'});\n                s5_headers[1] = s5.text(446, 44, 'March 2012').attr({'font':'14.0px Palatino','font-family':'Palatino','font-size':'14','font-weight':'bold','fill':'#403B33','text-anchor':'start'});\n                s5.text(109, 1532, 'Japan').attr({'font':'12px Palatino','font-family':'Palatino','font-size':'12','fill':'#73573F','text-anchor':'end'});\n                s5.text(175, 1532, '1,500,000').attr({'font':'12px Palatino','font-family':'Palatino','font-size':'12','fill':'#A67F5D','text-anchor':'end'});\n                s5.text(109, 1281, 'South Korea').attr({'font':'12px Palatino','font-family':'Palatino','font-size':'12','fill':'#73573F','text-anchor':'end'});\n                s5.text(175, 1281, '3,500,000').attr({'font':'12px Palatino','font-family':'Palatino','font-size':'12','fill':'#A67F5D','text-anchor':'end'});\n                s5.text(109, 1260, 'Australia').attr({'font':'12px Palatino','font-family':'Palatino','font-size':'12','fill':'#73573F','text-anchor':'end'});\n                s5.text(175, 1260, '3,750,000').attr({'font':'12px Palatino','font-family':'Palatino','font-size':'12','fill':'#A67F5D','text-anchor':'end'});\n                s5.text(109, 969, 'Germany; Italy').attr({'font':'12px Palatino','font-family':'Palatino','font-size':'12','fill':'#73573F','text-anchor':'end'});\n                s5.text(175, 969, '10,000,000').attr({'font':'12px Palatino','font-family':'Palatino','font-size':'12','fill':'#A67F5D','text-anchor':'end'});\n                s5.text(109, 941, 'United Kingdom').attr({'font':'12px Palatino','font-family':'Palatino','font-size':'12','fill':'#73573F','text-anchor':'end'});\n                s5.text(175, 941, '11,000,000').attr({'font':'12px Palatino','font-family':'Palatino','font-size':'12','fill':'#A67F5D','text-anchor':'end'});\n                s5.text(109, 869, 'Argentina; Spain').attr({'font':'12px Palatino','font-family':'Palatino','font-size':'12','fill':'#73573F','text-anchor':'end'});\n                s5.text(175, 869, '14,000,000').attr({'font':'12px Palatino','font-family':'Palatino','font-size':'12','fill':'#A67F5D','text-anchor':'end'});\n                s5.text(109, 794, 'Columbia').attr({'font':'12px Palatino','font-family':'Palatino','font-size':'12','fill':'#73573F','text-anchor':'end'});\n                s5.text(175, 794, '18,000,000').attr({'font':'12px Palatino','font-family':'Palatino','font-size':'12','fill':'#A67F5D','text-anchor':'end'});\n                s5.text(109, 728, 'China').attr({'font':'12px Palatino','font-family':'Palatino','font-size':'12','fill':'#73573F','text-anchor':'end'});\n                s5.text(175, 728, '22,500,000').attr({'font':'12px Palatino','font-family':'Palatino','font-size':'12','fill':'#A67F5D','text-anchor':'end'});\n                s5.text(109, 413, 'Venezuela').attr({'font':'12px Palatino','font-family':'Palatino','font-size':'12','fill':'#73573F','text-anchor':'end'});\n                s5.text(175, 413, '65,000,000').attr({'font':'12px Palatino','font-family':'Palatino','font-size':'12','fill':'#A67F5D','text-anchor':'end'});\n                s5.text(109, 391, 'Indonesia').attr({'font':'12px Palatino','font-family':'Palatino','font-size':'12','fill':'#73573F','text-anchor':'end'});\n                s5.text(175, 391, '70,000,000').attr({'font':'12px Palatino','font-family':'Palatino','font-size':'12','fill':'#A67F5D','text-anchor':'end'});\n                s5.text(109, 352, 'Russia').attr({'font':'12px Palatino','font-family':'Palatino','font-size':'12','fill':'#73573F','text-anchor':'end'});\n                s5.text(175, 352, '80,000,000').attr({'font':'12px Palatino','font-family':'Palatino','font-size':'12','fill':'#A67F5D','text-anchor':'end'});\n                s5.text(109, 317, 'India').attr({'font':'12px Palatino','font-family':'Palatino','font-size':'12','fill':'#73573F','text-anchor':'end'});\n                s5.text(175, 317, '90,000,000').attr({'font':'12px Palatino','font-family':'Palatino','font-size':'12','fill':'#A67F5D','text-anchor':'end'});\n                s5.text(109, 285, 'Brazil').attr({'font':'12px Palatino','font-family':'Palatino','font-size':'12','fill':'#73573F','text-anchor':'end'});\n                s5.text(175, 285, '100,000,000').attr({'font':'12px Palatino','font-family':'Palatino','font-size':'12','fill':'#A67F5D','text-anchor':'end'});\n                s5.text(109, 80, 'United States').attr({'font':'12px Palatino','font-family':'Palatino','font-size':'12','fill':'#73573F','text-anchor':'end'});\n                s5.text(175, 80, '200,000,000').attr({'font':'12px Palatino','font-family':'Palatino','font-size':'12','fill':'#A67F5D','text-anchor':'end'});\n                s5.text(381, 1586, '1,250,000').attr({'font':'12px Palatino','font-family':'Palatino','font-size':12.0,'fill':'#A67F5D','text-anchor':'start'});\n                s5.text(446, 1586, 'South Korea').attr({'font':'12px Palatino','font-family':'Palatino','font-size':12.0,'fill':'#73573F','text-anchor':'start'});\n                s5.text(381, 1532, '1,500,000').attr({'font':'12px Palatino','font-family':'Palatino','font-size':12.0,'fill':'#A67F5D','text-anchor':'start'});\n                s5.text(446, 1532, 'Australia; Japan').attr({'font':'12px Palatino','font-family':'Palatino','font-size':12.0,'fill':'#73573F','text-anchor':'start'});\n                s5.text(381, 1121, '6,000,000').attr({'font':'12px Palatino','font-family':'Palatino','font-size':12.0,'fill':'#A67F5D','text-anchor':'start'});\n                s5.text(446, 1121, 'Columbia').attr({'font':'12px Palatino','font-family':'Palatino','font-size':12.0,'fill':'#73573F','text-anchor':'start'});\n                s5.text(381, 1075, '7,000,000').attr({'font':'12px Palatino','font-family':'Palatino','font-size':12.0,'fill':'#A67F5D','text-anchor':'start'});\n                s5.text(446, 1075, 'Italy').attr({'font':'12px Palatino','font-family':'Palatino','font-size':12.0,'fill':'#73573F','text-anchor':'start'});\n                s5.text(381, 1035, '8,000,000').attr({'font':'12px Palatino','font-family':'Palatino','font-size':12.0,'fill':'#A67F5D','text-anchor':'start'});\n                s5.text(446, 1035, 'United Kingdom').attr({'font':'12px Palatino','font-family':'Palatino','font-size':12.0,'fill':'#73573F','text-anchor':'start'});\n                s5.text(381, 1000, '9,000,000').attr({'font':'12px Palatino','font-family':'Palatino','font-size':12.0,'fill':'#A67F5D','text-anchor':'start'});\n                s5.text(446, 1000, 'Spain').attr({'font':'12px Palatino','font-family':'Palatino','font-size':12.0,'fill':'#73573F','text-anchor':'start'});\n                s5.text(381, 969, '10,000,000').attr({'font':'12px Palatino','font-family':'Palatino','font-size':12.0,'fill':'#A67F5D','text-anchor':'start'});\n                s5.text(446, 969, 'Argentina; Indonesia').attr({'font':'12px Palatino','font-family':'Palatino','font-size':12.0,'fill':'#73573F','text-anchor':'start'});\n                s5.text(381, 903, '12,500,000').attr({'font':'12px Palatino','font-family':'Palatino','font-size':12.0,'fill':'#A67F5D','text-anchor':'start'});\n                s5.text(446, 903, 'China').attr({'font':'12px Palatino','font-family':'Palatino','font-size':12.0,'fill':'#73573F','text-anchor':'start'});\n                s5.text(381, 869, '14,000,000').attr({'font':'12px Palatino','font-family':'Palatino','font-size':12.0,'fill':'#A67F5D','text-anchor':'start'});\n                s5.text(446, 869, 'Germany').attr({'font':'12px Palatino','font-family':'Palatino','font-size':12.0,'fill':'#73573F','text-anchor':'start'});\n                s5.text(381, 763, '20,000,000').attr({'font':'12px Palatino','font-family':'Palatino','font-size':12.0,'fill':'#A67F5D','text-anchor':'start'});\n                s5.text(446, 763, 'Brazil; Venezuela').attr({'font':'12px Palatino','font-family':'Palatino','font-size':12.0,'fill':'#73573F','text-anchor':'start'});\n                s5.text(381, 557, '40,000,000').attr({'font':'12px Palatino','font-family':'Palatino','font-size':12.0,'fill':'#A67F5D','text-anchor':'start'});\n                s5.text(446, 557, 'Russia').attr({'font':'12px Palatino','font-family':'Palatino','font-size':12.0,'fill':'#73573F','text-anchor':'start'});\n                s5.text(381, 539, '42,500,000').attr({'font':'12px Palatino','font-family':'Palatino','font-size':12.0,'fill':'#A67F5D','text-anchor':'start'});\n                s5.text(446, 539, 'India').attr({'font':'12px Palatino','font-family':'Palatino','font-size':12.0,'fill':'#73573F','text-anchor':'start'});\n                s5.text(381, 80, '200,000,000').attr({'font':'12px Palatino','font-family':'Palatino','font-size':12.0,'fill':'#A67F5D','text-anchor':'start'});\n                s5.text(446, 80, 'United States').attr({'font':'12px Palatino','font-family':'Palatino','font-size':12.0,'fill':'#73573F','text-anchor':'start'});<\/p>\n<p>function s5_stroke() {<\/p>\n<p>                s5_lines[0] = s5.path('M 184.140625 0 L 372.140625 0').attr({'stroke-width':0.5,stroke:'#2A464D'});\n                s5_lines[1] = s5.path('M 184.140625 0 L 372.140625 0').attr({'stroke-width':0.5,stroke:'#2A464D'});\n                s5_lines[2] = s5.path('M 184.140625 0 L 372.140625 0').attr({'stroke-width':0.5,stroke:'#2A464D'});\n                s5_lines[3] = s5.path('M 184.140625 0 L 372.140625 0').attr({'stroke-width':0.5,stroke:'#2A464D'});\n                s5_lines[4] = s5.path('M 184.140625 0 L 372.140625 0').attr({'stroke-width':0.5,stroke:'#2A464D'});\n                s5_lines[5] = s5.path('M 184.140625 0 L 372.140625 0').attr({'stroke-width':0.5,stroke:'#FF0000'});\n                s5_lines[6] = s5.path('M 184.140625 0 L 372.140625 0').attr({'stroke-width':0.5,stroke:'#2A464D'});\n                s5_lines[7] = s5.path('M 184.140625 0 L 372.140625 0').attr({'stroke-width':0.5,stroke:'#2A464D'});\n                s5_lines[8] = s5.path('M 184.140625 0 L 372.140625 0').attr({'stroke-width':0.5,stroke:'#2A464D'});\n                s5_lines[9] = s5.path('M 184.140625 0 L 372.140625 0').attr({'stroke-width':0.5,stroke:'#000000'});\n                s5_lines[10] = s5.path('M 184.140625 0 L 372.140625 0').attr({'stroke-width':0.5,stroke:'#2A464D'});\n                s5_lines[11] = s5.path('M 184.140625 0 L 372.140625 0').attr({'stroke-width':0.5,stroke:'#2A464D'});\n                s5_lines[12] = s5.path('M 184.140625 0 L 372.140625 0').attr({'stroke-width':0.5,stroke:'#2A464D'});\n                s5_lines[13] = s5.path('M 184.140625 0 L 372.140625 0').attr({'stroke-width':0.5,stroke:'#2A464D'});\n                s5_lines[14] = s5.path('M 184.140625 0 L 372.140625 0').attr({'stroke-width':0.5,stroke:'#000000'});\n                s5_lines[15] = s5.path('M 184.140625 0 L 372.140625 0').attr({'stroke-width':0.5,stroke:'#2A464D'});\n};<\/p>\n<p>s5_stroke();<\/p>\n<p>function s5_start_anim() {<\/p>\n<p>    if (s5_didanimate) {\n                s5_lines[0].hide();\n                s5_lines[1].hide();\n                s5_lines[2].hide();\n                s5_lines[3].hide();\n                s5_lines[4].hide();\n                s5_lines[5].hide();\n                s5_lines[6].hide();\n                s5_lines[7].hide();\n                s5_lines[8].hide();\n                s5_lines[8].hide();\n                s5_lines[10].hide();\n                s5_lines[11].hide();\n                s5_lines[12].hide();\n                s5_lines[13].hide();\n                s5_lines[14].hide();\n                s5_lines[15].hide();\ns5_stroke();            \n    };\n        s5_didanimate = true ;            \n                s5_lines[0].animate({path:'M 184.140625 867.30842083 L 372.140625 967.210079227'},s5_delay);\n                s5_lines[1].animate({path:'M 184.140625 1258.42717923 L 372.140625 1530.48220703'},s5_delay);\n                s5_lines[2].animate({path:'M 184.140625 283.551683809 L 372.140625 761.408395419'},s5_delay);\n                s5_lines[3].animate({path:'M 184.140625 726.437544001 L 372.140625 900.956735234'},s5_delay);\n                s5_lines[4].animate({path:'M 184.140625 792.690887994 L 372.140625 1118.87883942'},s5_delay);\n                s5_lines[5].animate({path:'M 184.140625 967.210079227 L 372.140625 867.30842083'},s5_delay);\n                s5_lines[6].animate({path:'M 184.140625 314.834176384 L 372.140625 537.60671161'},s5_delay);\n                s5_lines[7].animate({path:'M 184.140625 389.45170922 L 372.140625 967.210079227'},s5_delay);\n                s5_lines[8].animate({path:'M 184.140625 967.210079227 L 372.140625 1073.11010464'},s5_delay);\n                s5_lines[9].animate({path:'M 184.140625 1530.48220703 L 372.140625 1530.48220703'},s5_delay);\n                s5_lines[10].animate({path:'M 184.140625 349.805027802 L 372.140625 555.60671161'},s5_delay);\n                s5_lines[11].animate({path:'M 184.140625 1278.91178845 L 372.140625 1584.61513065'},s5_delay);\n                s5_lines[12].animate({path:'M 184.140625 867.30842083 L 372.140625 998.492571802'},s5_delay);\n                s5_lines[13].animate({path:'M 184.140625 938.91162251 L 372.140625 1033.46342322'},s5_delay);\n                s5_lines[14].animate({path:'M 184.140625 77.75 L 372.140625 77.75'},s5_delay);\n                s5_lines[15].animate({path:'M 184.140625 411.45503821 L 372.140625 761.408395419'},s5_delay);   <\/p>\n<p>}\n<\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>UPDATE: It seems my use of &lt;script async&gt; optimization for Rapha\u00ebl busted the inline slopegraph generation. Will work on tweaking the example posts to wait for Rapha\u00ebl to load when I get some time. So, I had to alter this to start after a user interaction. It loaded fine as a static, local page but [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":3,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":""},"categories":[24,63,15,7,640],"tags":[751,657,658],"class_list":["post-1261","post","type-post","status-publish","format-standard","hentry","category-charts-graphs","category-development","category-javascript","category-programming","category-python-2","tag-slopegraph","tag-table-chart","tag-tufte"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Slopegraphs in Python \u2013 Gratuitous Rapha\u00ebl Animations - rud.is<\/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:\/\/rud.is\/b\/2012\/06\/12\/slopegraphs-in-python-gratuitous-raphael-animations\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Slopegraphs in Python \u2013 Gratuitous Rapha\u00ebl Animations - rud.is\" \/>\n<meta property=\"og:description\" content=\"UPDATE: It seems my use of &lt;script async&gt; optimization for Rapha\u00ebl busted the inline slopegraph generation. Will work on tweaking the example posts to wait for Rapha\u00ebl to load when I get some time. So, I had to alter this to start after a user interaction. It loaded fine as a static, local page but [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rud.is\/b\/2012\/06\/12\/slopegraphs-in-python-gratuitous-raphael-animations\/\" \/>\n<meta property=\"og:site_name\" content=\"rud.is\" \/>\n<meta property=\"article:published_time\" content=\"2012-06-12T18:21:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2012-06-28T14:51:08+00:00\" \/>\n<meta name=\"author\" content=\"hrbrmstr\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"hrbrmstr\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/rud.is\/b\/2012\/06\/12\/slopegraphs-in-python-gratuitous-raphael-animations\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/rud.is\/b\/2012\/06\/12\/slopegraphs-in-python-gratuitous-raphael-animations\/\"},\"author\":{\"name\":\"hrbrmstr\",\"@id\":\"https:\/\/rud.is\/b\/#\/schema\/person\/d7cb7487ab0527447f7fda5c423ff886\"},\"headline\":\"Slopegraphs in Python \u2013 Gratuitous Rapha\u00ebl Animations\",\"datePublished\":\"2012-06-12T18:21:32+00:00\",\"dateModified\":\"2012-06-28T14:51:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/rud.is\/b\/2012\/06\/12\/slopegraphs-in-python-gratuitous-raphael-animations\/\"},\"wordCount\":94,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/rud.is\/b\/#\/schema\/person\/d7cb7487ab0527447f7fda5c423ff886\"},\"keywords\":[\"slopegraph\",\"table-chart\",\"tufte\"],\"articleSection\":[\"Charts &amp; Graphs\",\"Development\",\"Javascript\",\"Programming\",\"Python\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/rud.is\/b\/2012\/06\/12\/slopegraphs-in-python-gratuitous-raphael-animations\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/rud.is\/b\/2012\/06\/12\/slopegraphs-in-python-gratuitous-raphael-animations\/\",\"url\":\"https:\/\/rud.is\/b\/2012\/06\/12\/slopegraphs-in-python-gratuitous-raphael-animations\/\",\"name\":\"Slopegraphs in Python \u2013 Gratuitous Rapha\u00ebl Animations - rud.is\",\"isPartOf\":{\"@id\":\"https:\/\/rud.is\/b\/#website\"},\"datePublished\":\"2012-06-12T18:21:32+00:00\",\"dateModified\":\"2012-06-28T14:51:08+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/rud.is\/b\/2012\/06\/12\/slopegraphs-in-python-gratuitous-raphael-animations\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/rud.is\/b\/2012\/06\/12\/slopegraphs-in-python-gratuitous-raphael-animations\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/rud.is\/b\/2012\/06\/12\/slopegraphs-in-python-gratuitous-raphael-animations\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/rud.is\/b\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Slopegraphs in Python \u2013 Gratuitous Rapha\u00ebl Animations\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/rud.is\/b\/#website\",\"url\":\"https:\/\/rud.is\/b\/\",\"name\":\"rud.is\",\"description\":\"&quot;In God we trust. All others must bring data&quot;\",\"publisher\":{\"@id\":\"https:\/\/rud.is\/b\/#\/schema\/person\/d7cb7487ab0527447f7fda5c423ff886\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/rud.is\/b\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/rud.is\/b\/#\/schema\/person\/d7cb7487ab0527447f7fda5c423ff886\",\"name\":\"hrbrmstr\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/10\/ukr-shield.png?fit=460%2C460&ssl=1\",\"url\":\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/10\/ukr-shield.png?fit=460%2C460&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/10\/ukr-shield.png?fit=460%2C460&ssl=1\",\"width\":460,\"height\":460,\"caption\":\"hrbrmstr\"},\"logo\":{\"@id\":\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/10\/ukr-shield.png?fit=460%2C460&ssl=1\"},\"description\":\"Don't look at me\u2026I do what he does \u2014 just slower. #rstats avuncular \u2022 ?Resistance Fighter \u2022 Cook \u2022 Christian \u2022 [Master] Chef des Donn\u00e9es de S\u00e9curit\u00e9 @ @rapid7\",\"sameAs\":[\"http:\/\/rud.is\"],\"url\":\"https:\/\/rud.is\/b\/author\/hrbrmstr\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Slopegraphs in Python \u2013 Gratuitous Rapha\u00ebl Animations - rud.is","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:\/\/rud.is\/b\/2012\/06\/12\/slopegraphs-in-python-gratuitous-raphael-animations\/","og_locale":"en_US","og_type":"article","og_title":"Slopegraphs in Python \u2013 Gratuitous Rapha\u00ebl Animations - rud.is","og_description":"UPDATE: It seems my use of &lt;script async&gt; optimization for Rapha\u00ebl busted the inline slopegraph generation. Will work on tweaking the example posts to wait for Rapha\u00ebl to load when I get some time. So, I had to alter this to start after a user interaction. It loaded fine as a static, local page but [&hellip;]","og_url":"https:\/\/rud.is\/b\/2012\/06\/12\/slopegraphs-in-python-gratuitous-raphael-animations\/","og_site_name":"rud.is","article_published_time":"2012-06-12T18:21:32+00:00","article_modified_time":"2012-06-28T14:51:08+00:00","author":"hrbrmstr","twitter_card":"summary_large_image","twitter_misc":{"Written by":"hrbrmstr"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rud.is\/b\/2012\/06\/12\/slopegraphs-in-python-gratuitous-raphael-animations\/#article","isPartOf":{"@id":"https:\/\/rud.is\/b\/2012\/06\/12\/slopegraphs-in-python-gratuitous-raphael-animations\/"},"author":{"name":"hrbrmstr","@id":"https:\/\/rud.is\/b\/#\/schema\/person\/d7cb7487ab0527447f7fda5c423ff886"},"headline":"Slopegraphs in Python \u2013 Gratuitous Rapha\u00ebl Animations","datePublished":"2012-06-12T18:21:32+00:00","dateModified":"2012-06-28T14:51:08+00:00","mainEntityOfPage":{"@id":"https:\/\/rud.is\/b\/2012\/06\/12\/slopegraphs-in-python-gratuitous-raphael-animations\/"},"wordCount":94,"commentCount":0,"publisher":{"@id":"https:\/\/rud.is\/b\/#\/schema\/person\/d7cb7487ab0527447f7fda5c423ff886"},"keywords":["slopegraph","table-chart","tufte"],"articleSection":["Charts &amp; Graphs","Development","Javascript","Programming","Python"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/rud.is\/b\/2012\/06\/12\/slopegraphs-in-python-gratuitous-raphael-animations\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/rud.is\/b\/2012\/06\/12\/slopegraphs-in-python-gratuitous-raphael-animations\/","url":"https:\/\/rud.is\/b\/2012\/06\/12\/slopegraphs-in-python-gratuitous-raphael-animations\/","name":"Slopegraphs in Python \u2013 Gratuitous Rapha\u00ebl Animations - rud.is","isPartOf":{"@id":"https:\/\/rud.is\/b\/#website"},"datePublished":"2012-06-12T18:21:32+00:00","dateModified":"2012-06-28T14:51:08+00:00","breadcrumb":{"@id":"https:\/\/rud.is\/b\/2012\/06\/12\/slopegraphs-in-python-gratuitous-raphael-animations\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rud.is\/b\/2012\/06\/12\/slopegraphs-in-python-gratuitous-raphael-animations\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/rud.is\/b\/2012\/06\/12\/slopegraphs-in-python-gratuitous-raphael-animations\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/rud.is\/b\/"},{"@type":"ListItem","position":2,"name":"Slopegraphs in Python \u2013 Gratuitous Rapha\u00ebl Animations"}]},{"@type":"WebSite","@id":"https:\/\/rud.is\/b\/#website","url":"https:\/\/rud.is\/b\/","name":"rud.is","description":"&quot;In God we trust. All others must bring data&quot;","publisher":{"@id":"https:\/\/rud.is\/b\/#\/schema\/person\/d7cb7487ab0527447f7fda5c423ff886"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rud.is\/b\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/rud.is\/b\/#\/schema\/person\/d7cb7487ab0527447f7fda5c423ff886","name":"hrbrmstr","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/10\/ukr-shield.png?fit=460%2C460&ssl=1","url":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/10\/ukr-shield.png?fit=460%2C460&ssl=1","contentUrl":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/10\/ukr-shield.png?fit=460%2C460&ssl=1","width":460,"height":460,"caption":"hrbrmstr"},"logo":{"@id":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/10\/ukr-shield.png?fit=460%2C460&ssl=1"},"description":"Don't look at me\u2026I do what he does \u2014 just slower. #rstats avuncular \u2022 ?Resistance Fighter \u2022 Cook \u2022 Christian \u2022 [Master] Chef des Donn\u00e9es de S\u00e9curit\u00e9 @ @rapid7","sameAs":["http:\/\/rud.is"],"url":"https:\/\/rud.is\/b\/author\/hrbrmstr\/"}]}},"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p23idr-kl","jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":4701,"url":"https:\/\/rud.is\/b\/2016\/12\/06\/survey-on-data-science-in-two-year-colleges\/","url_meta":{"origin":1261,"position":0},"title":"Survey on Data Science In Two Year Colleges","author":"hrbrmstr","date":"2016-12-06","format":false,"excerpt":"The ASA (American Statistical Association) has been working in collaboration with the ACM (Association for Computing Machinery) on developing a data science curriculum for Two Year Colleges. Part of this development is the need to understand the private-sector demand for two-year college data science graduates and the prevalence of the\u2026","rel":"","context":"In &quot;data science&quot;","block_context":{"text":"data science","link":"https:\/\/rud.is\/b\/category\/data-science\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1181,"url":"https:\/\/rud.is\/b\/2012\/06\/05\/slopegraphs-in-python-slope-colors\/","url_meta":{"origin":1261,"position":1},"title":"Slopegraphs in Python \u2013 Slope Colors","author":"hrbrmstr","date":"2012-06-05","format":false,"excerpt":"As the codebase gets closer to the 1.0 stretch we now have the addition of slope colors for when values go up\/down or remain constant between points. The code still only handles two columns of data, but the intent is for each segment to also be colored appropriately (up\/down\/same) in\u2026","rel":"","context":"In &quot;Charts &amp; Graphs&quot;","block_context":{"text":"Charts &amp; Graphs","link":"https:\/\/rud.is\/b\/category\/charts-graphs\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1155,"url":"https:\/\/rud.is\/b\/2012\/06\/05\/slopegraphs-the-quintessential-gdp-example-revisited\/","url_meta":{"origin":1261,"position":2},"title":"Slopegraphs \u2013\u00a0The Quintessential Tufte GDP Example Revisited","author":"hrbrmstr","date":"2012-06-05","format":false,"excerpt":"If you're even remotely familiar with slopegraphs, then you'll recognize Tufte's classic 1970-1979 GDP chart example (click for larger version): What you may not notice initially, however, is that Tufte \u2014 well \u2014\u00a0cheated. Yes, I said it. Cheated. I can show it by zooming into the \"Belgium\/Canada\/Finland\" grouping in the\u2026","rel":"","context":"In &quot;Charts &amp; Graphs&quot;","block_context":{"text":"Charts &amp; Graphs","link":"https:\/\/rud.is\/b\/category\/charts-graphs\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1115,"url":"https:\/\/rud.is\/b\/2012\/05\/29\/slopegraphs-in-python-colors-fonts-alignment\/","url_meta":{"origin":1261,"position":3},"title":"Slopegraphs In Python \u2013\u00a0colors, fonts &#038; alignment","author":"hrbrmstr","date":"2012-05-29","format":false,"excerpt":"On the heels of last evening's release of Slopegraphs in Python post comes some minor tweaks: Complete alignment control of labels & and values Colors (for background, lines, labels & values) \u2014 I picked a random pattern from Adobe's Kuler A font change (to prove width calculations work) \u2026and a\u2026","rel":"","context":"In &quot;Charts &amp; Graphs&quot;","block_context":{"text":"Charts &amp; Graphs","link":"https:\/\/rud.is\/b\/category\/charts-graphs\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":2823,"url":"https:\/\/rud.is\/b\/2013\/12\/02\/slopegraph-workbenchworkshop-in-d3\/","url_meta":{"origin":1261,"position":4},"title":"Slopegraph Workbench\/Workshop in D3","author":"hrbrmstr","date":"2013-12-02","format":false,"excerpt":"I've been getting a huge uptick in views of my Slopegraphs in Python post and I think it's due to @edwardtufte's recent slopegraph contest announcement. The original Python code is crufty and a mess mostly due to the intermittent attention to it, wanting to reduce dependencies and hacking vs programming.\u2026","rel":"","context":"In &quot;Charts &amp; Graphs&quot;","block_context":{"text":"Charts &amp; Graphs","link":"https:\/\/rud.is\/b\/category\/charts-graphs\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1229,"url":"https:\/\/rud.is\/b\/2012\/06\/08\/slopegraphs-in-python-experimental-raphael-support\/","url_meta":{"origin":1261,"position":5},"title":"Slopegraphs in Python \u2013 Experimental Rapha\u00ebl Support","author":"hrbrmstr","date":"2012-06-08","format":false,"excerpt":"In preparation for the upcoming 1.0 release and with the hopes of laying a foundation for more interactive slopegraphs, I threw together some rudimentary output support over lunch today for Rapha\u00ebl, which means that all you have to do is generate a new slopegraph with the \"js\" output type and\u2026","rel":"","context":"In &quot;Charts &amp; Graphs&quot;","block_context":{"text":"Charts &amp; Graphs","link":"https:\/\/rud.is\/b\/category\/charts-graphs\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/posts\/1261","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/comments?post=1261"}],"version-history":[{"count":0,"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/posts\/1261\/revisions"}],"wp:attachment":[{"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/media?parent=1261"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/categories?post=1261"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/tags?post=1261"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}