{"id":1229,"date":"2012-06-08T14:38:23","date_gmt":"2012-06-08T19:38:23","guid":{"rendered":"http:\/\/rud.is\/b\/?p=1229"},"modified":"2017-03-27T09:40:30","modified_gmt":"2017-03-27T14:40:30","slug":"slopegraphs-in-python-experimental-raphael-support","status":"publish","type":"post","link":"https:\/\/rud.is\/b\/2012\/06\/08\/slopegraphs-in-python-experimental-raphael-support\/","title":{"rendered":"Slopegraphs in Python \u2013 Experimental Rapha\u00ebl Support"},"content":{"rendered":"<p>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 <span class=\"removed_link\" title=\"http:\/\/raphaeljs.com\/\">Rapha\u00ebl<\/span>, which means that all you have to do is generate a new slopegraph with the &#8220;<code>js<\/code>&#8221; output type and include the salient portions of the generated html\/css\/javascript into a web page (along with including the Rapha\u00ebl script code). <\/p>\n<p>The next <a href=\"https:\/\/github.com\/hrbrmstr\/slopegraph\">github<\/a> push will have this update. Here&#8217;s an example of the output, using the classic Tufte example chart:<\/p>\n<style type=\"text\/css\">\n#surface {\n   width: 516;\n}\n<\/style>\n<p><center><\/p>\n<div id=\"surface\"><\/div>\n<p><\/center><br \/>\n<script>\n\t\t\t\tvar surface = new Raphael(document.getElementById('surface'), 516, 758);\n\t\t\t\tvar headers = new Array();\n\t\t\t\tvar lines = new Array();\n\t\t\t\tvar labels = new Array() ;\n\t\t\t\tvar values = new Array() ;\n\t\t\t\tsurface.rect(0,0,516.921875,758.0).attr({fill:'#F2F1EB',stroke:'#F2F1EB'});\n\t\t\t\theaders[0] = surface.text(157, 44, '1970').attr({'font':'14.0px Palatino','font-family':'Palatino','font-size':'14','font-weight':'bold','fill':'#262222','text-anchor':'end'});\n\t\t\t\theaders[1] = surface.text(349, 44, '1979').attr({'font':'14.0px Palatino','font-family':'Palatino','font-size':'14','font-weight':'bold','fill':'#262222','text-anchor':'start'});\n\t\t\t\tsurface.text(157, 728, 'Japan').attr({'font':'12px Palatino','font-family':'Palatino','font-size':'12','fill':'#262222','text-anchor':'end'});\n\t\t\t\tsurface.text(175, 728, '21').attr({'font':'12px Palatino','font-family':'Palatino','font-size':'12','fill':'#BFB9A4','text-anchor':'end'});\n\t\t\t\tsurface.text(157, 692, 'Spain').attr({'font':'12px Palatino','font-family':'Palatino','font-size':'12','fill':'#262222','text-anchor':'end'});\n\t\t\t\tsurface.text(175, 692, '23').attr({'font':'12px Palatino','font-family':'Palatino','font-size':'12','fill':'#BFB9A4','text-anchor':'end'});\n\t\t\t\tsurface.text(157, 620, 'Greece; Switzerland').attr({'font':'12px Palatino','font-family':'Palatino','font-size':'12','fill':'#262222','text-anchor':'end'});\n\t\t\t\tsurface.text(175, 620, '27').attr({'font':'12px Palatino','font-family':'Palatino','font-size':'12','fill':'#BFB9A4','text-anchor':'end'});\n\t\t\t\tsurface.text(157, 566, 'Italy; United States').attr({'font':'12px Palatino','font-family':'Palatino','font-size':'12','fill':'#262222','text-anchor':'end'});\n\t\t\t\tsurface.text(175, 566, '30').attr({'font':'12px Palatino','font-family':'Palatino','font-size':'12','fill':'#BFB9A4','text-anchor':'end'});\n\t\t\t\tsurface.text(157, 476, 'Belgium; Canada; Finland').attr({'font':'12px Palatino','font-family':'Palatino','font-size':'12','fill':'#262222','text-anchor':'end'});\n\t\t\t\tsurface.text(175, 476, '35').attr({'font':'12px Palatino','font-family':'Palatino','font-size':'12','fill':'#BFB9A4','text-anchor':'end'});\n\t\t\t\tsurface.text(157, 422, 'Germany').attr({'font':'12px Palatino','font-family':'Palatino','font-size':'12','fill':'#262222','text-anchor':'end'});\n\t\t\t\tsurface.text(175, 422, '38').attr({'font':'12px Palatino','font-family':'Palatino','font-size':'12','fill':'#BFB9A4','text-anchor':'end'});\n\t\t\t\tsurface.text(157, 404, 'France').attr({'font':'12px Palatino','font-family':'Palatino','font-size':'12','fill':'#262222','text-anchor':'end'});\n\t\t\t\tsurface.text(175, 404, '39').attr({'font':'12px Palatino','font-family':'Palatino','font-size':'12','fill':'#BFB9A4','text-anchor':'end'});\n\t\t\t\tsurface.text(157, 368, 'Britain').attr({'font':'12px Palatino','font-family':'Palatino','font-size':'12','fill':'#262222','text-anchor':'end'});\n\t\t\t\tsurface.text(175, 368, '41').attr({'font':'12px Palatino','font-family':'Palatino','font-size':'12','fill':'#BFB9A4','text-anchor':'end'});\n\t\t\t\tsurface.text(157, 314, 'Netherlands; Norway').attr({'font':'12px Palatino','font-family':'Palatino','font-size':'12','fill':'#262222','text-anchor':'end'});\n\t\t\t\tsurface.text(175, 314, '44').attr({'font':'12px Palatino','font-family':'Palatino','font-size':'12','fill':'#BFB9A4','text-anchor':'end'});\n\t\t\t\tsurface.text(157, 260, 'Sweden').attr({'font':'12px Palatino','font-family':'Palatino','font-size':'12','fill':'#262222','text-anchor':'end'});\n\t\t\t\tsurface.text(175, 260, '47').attr({'font':'12px Palatino','font-family':'Palatino','font-size':'12','fill':'#BFB9A4','text-anchor':'end'});\n\t\t\t\tsurface.text(331, 620, '27').attr({'font':'12px Palatino','font-family':'Palatino','font-size':12.0,'fill':'#BFB9A4','text-anchor':'start'});\n\t\t\t\tsurface.text(349, 620, 'Spain; Japan').attr({'font':'12px Palatino','font-family':'Palatino','font-size':12.0,'fill':'#262222','text-anchor':'start'});\n\t\t\t\tsurface.text(331, 548, '31').attr({'font':'12px Palatino','font-family':'Palatino','font-size':12.0,'fill':'#BFB9A4','text-anchor':'start'});\n\t\t\t\tsurface.text(349, 548, 'Greece').attr({'font':'12px Palatino','font-family':'Palatino','font-size':12.0,'fill':'#262222','text-anchor':'start'});\n\t\t\t\tsurface.text(331, 512, '33').attr({'font':'12px Palatino','font-family':'Palatino','font-size':12.0,'fill':'#BFB9A4','text-anchor':'start'});\n\t\t\t\tsurface.text(349, 512, 'United States; Switzerland').attr({'font':'12px Palatino','font-family':'Palatino','font-size':12.0,'fill':'#262222','text-anchor':'start'});\n\t\t\t\tsurface.text(331, 458, '36').attr({'font':'12px Palatino','font-family':'Palatino','font-size':12.0,'fill':'#BFB9A4','text-anchor':'start'});\n\t\t\t\tsurface.text(349, 458, 'Canada; Italy').attr({'font':'12px Palatino','font-family':'Palatino','font-size':12.0,'fill':'#262222','text-anchor':'start'});\n\t\t\t\tsurface.text(331, 422, '38').attr({'font':'12px Palatino','font-family':'Palatino','font-size':12.0,'fill':'#BFB9A4','text-anchor':'start'});\n\t\t\t\tsurface.text(349, 422, 'Finland').attr({'font':'12px Palatino','font-family':'Palatino','font-size':12.0,'fill':'#262222','text-anchor':'start'});\n\t\t\t\tsurface.text(331, 404, '39').attr({'font':'12px Palatino','font-family':'Palatino','font-size':12.0,'fill':'#BFB9A4','text-anchor':'start'});\n\t\t\t\tsurface.text(349, 404, 'Britain').attr({'font':'12px Palatino','font-family':'Palatino','font-size':12.0,'fill':'#262222','text-anchor':'start'});\n\t\t\t\tsurface.text(331, 332, '43').attr({'font':'12px Palatino','font-family':'Palatino','font-size':12.0,'fill':'#BFB9A4','text-anchor':'start'});\n\t\t\t\tsurface.text(349, 332, 'France; Germany; Belgium').attr({'font':'12px Palatino','font-family':'Palatino','font-size':12.0,'fill':'#262222','text-anchor':'start'});\n\t\t\t\tsurface.text(331, 170, '52').attr({'font':'12px Palatino','font-family':'Palatino','font-size':12.0,'fill':'#BFB9A4','text-anchor':'start'});\n\t\t\t\tsurface.text(349, 170, 'Norway').attr({'font':'12px Palatino','font-family':'Palatino','font-size':12.0,'fill':'#262222','text-anchor':'start'});\n\t\t\t\tsurface.text(331, 98, '56').attr({'font':'12px Palatino','font-family':'Palatino','font-size':12.0,'fill':'#BFB9A4','text-anchor':'start'});\n\t\t\t\tsurface.text(349, 98, 'Netherlands').attr({'font':'12px Palatino','font-family':'Palatino','font-size':12.0,'fill':'#262222','text-anchor':'start'});\n\t\t\t\tsurface.text(331, 80, '57').attr({'font':'12px Palatino','font-family':'Palatino','font-size':12.0,'fill':'#BFB9A4','text-anchor':'start'});\n\t\t\t\tsurface.text(349, 80, 'Sweden').attr({'font':'12px Palatino','font-family':'Palatino','font-size':12.0,'fill':'#262222','text-anchor':'start'});\n\t\t\t\tlines[0] = surface.path('M 184.671875 257.75 L 328.671875 77.75').attr({'stroke-width':1,stroke:'#808730'});\n\t\t\t\tlines[1] = surface.path('M 184.671875 311.75 L 328.671875 95.75').attr({'stroke-width':1,stroke:'#808730'});\n\t\t\t\tlines[2] = surface.path('M 184.671875 311.75 L 328.671875 167.75').attr({'stroke-width':1,stroke:'#808730'});\n\t\t\t\tlines[3] = surface.path('M 184.671875 365.75 L 328.671875 401.75').attr({'stroke-width':1,stroke:'#8C0303'});\n\t\t\t\tlines[4] = surface.path('M 184.671875 401.75 L 328.671875 329.75').attr({'stroke-width':1,stroke:'#808730'});\n\t\t\t\tlines[5] = surface.path('M 184.671875 419.75 L 328.671875 329.75').attr({'stroke-width':1,stroke:'#808730'});\n\t\t\t\tlines[6] = surface.path('M 184.671875 473.75 L 328.671875 329.75').attr({'stroke-width':1,stroke:'#808730'});\n\t\t\t\tlines[7] = surface.path('M 184.671875 473.75 L 328.671875 455.75').attr({'stroke-width':1,stroke:'#808730'});\n\t\t\t\tlines[8] = surface.path('M 184.671875 473.75 L 328.671875 419.75').attr({'stroke-width':1,stroke:'#808730'});\n\t\t\t\tlines[9] = surface.path('M 184.671875 563.75 L 328.671875 455.75').attr({'stroke-width':1,stroke:'#808730'});\n\t\t\t\tlines[10] = surface.path('M 184.671875 563.75 L 328.671875 509.75').attr({'stroke-width':1,stroke:'#808730'});\n\t\t\t\tlines[11] = surface.path('M 184.671875 617.75 L 328.671875 545.75').attr({'stroke-width':1,stroke:'#808730'});\n\t\t\t\tlines[12] = surface.path('M 184.671875 617.75 L 328.671875 509.75').attr({'stroke-width':1,stroke:'#808730'});\n\t\t\t\tlines[13] = surface.path('M 184.671875 689.75 L 328.671875 617.75').attr({'stroke-width':1,stroke:'#808730'});\n\t\t\t\tlines[14] = surface.path('M 184.671875 725.75 L 328.671875 617.75').attr({'stroke-width':1,stroke:'#808730'});\n<\/script><\/p>\n<p>It&#8217;s definitely a bit rough around the edges (my eyes immediately fixate upon spacing discrepancies) and lacking any interactivity, but the basic building blocks are in place. It also does not render on my Android phone (HTC Incredible 2) but it does render in Chrome, Safari &#038; on my iPad. Embedding a Rapha\u00ebl graphic in a web page will definitely have advantages over a PNG or PDF in most situations even if it&#8217;s not interactive, so I&#8217;ll probably keep the support in regardless of whether I continue to improve upon it.<\/p>\n<p>As I was playing with the code, I kept thinking how neat it would be if there was a Rapha\u00ebl <a href=\"https:\/\/www.cairographics.org\/\">Cairo<\/a> &#8220;<code>surface<\/code>&#8221; option. Perhaps that will be a side project if all goes well, since it would not be that much more complicated (in fact, it may be less complicated) than the Cairo SVG surface code.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 &#8220;js&#8221; output type and include the salient portions of [&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":true,"_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":[661,34,660,751,657,658],"class_list":["post-1229","post","type-post","status-publish","format-standard","hentry","category-charts-graphs","category-development","category-javascript","category-programming","category-python-2","tag-cairo","tag-javascript-2","tag-raphael","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 Experimental Rapha\u00ebl Support - 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\/08\/slopegraphs-in-python-experimental-raphael-support\/\" \/>\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 Experimental Rapha\u00ebl Support - rud.is\" \/>\n<meta property=\"og:description\" content=\"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 &#8220;js&#8221; output type and include the salient portions of [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rud.is\/b\/2012\/06\/08\/slopegraphs-in-python-experimental-raphael-support\/\" \/>\n<meta property=\"og:site_name\" content=\"rud.is\" \/>\n<meta property=\"article:published_time\" content=\"2012-06-08T19:38:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-03-27T14:40:30+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\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/rud.is\/b\/2012\/06\/08\/slopegraphs-in-python-experimental-raphael-support\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/rud.is\/b\/2012\/06\/08\/slopegraphs-in-python-experimental-raphael-support\/\"},\"author\":{\"name\":\"hrbrmstr\",\"@id\":\"https:\/\/rud.is\/b\/#\/schema\/person\/d7cb7487ab0527447f7fda5c423ff886\"},\"headline\":\"Slopegraphs in Python \u2013 Experimental Rapha\u00ebl Support\",\"datePublished\":\"2012-06-08T19:38:23+00:00\",\"dateModified\":\"2017-03-27T14:40:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/rud.is\/b\/2012\/06\/08\/slopegraphs-in-python-experimental-raphael-support\/\"},\"wordCount\":248,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/rud.is\/b\/#\/schema\/person\/d7cb7487ab0527447f7fda5c423ff886\"},\"keywords\":[\"cairo\",\"javascript\",\"raphael\",\"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\/08\/slopegraphs-in-python-experimental-raphael-support\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/rud.is\/b\/2012\/06\/08\/slopegraphs-in-python-experimental-raphael-support\/\",\"url\":\"https:\/\/rud.is\/b\/2012\/06\/08\/slopegraphs-in-python-experimental-raphael-support\/\",\"name\":\"Slopegraphs in Python \u2013 Experimental Rapha\u00ebl Support - rud.is\",\"isPartOf\":{\"@id\":\"https:\/\/rud.is\/b\/#website\"},\"datePublished\":\"2012-06-08T19:38:23+00:00\",\"dateModified\":\"2017-03-27T14:40:30+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/rud.is\/b\/2012\/06\/08\/slopegraphs-in-python-experimental-raphael-support\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/rud.is\/b\/2012\/06\/08\/slopegraphs-in-python-experimental-raphael-support\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/rud.is\/b\/2012\/06\/08\/slopegraphs-in-python-experimental-raphael-support\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/rud.is\/b\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Slopegraphs in Python \u2013 Experimental Rapha\u00ebl Support\"}]},{\"@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 Experimental Rapha\u00ebl Support - 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\/08\/slopegraphs-in-python-experimental-raphael-support\/","og_locale":"en_US","og_type":"article","og_title":"Slopegraphs in Python \u2013 Experimental Rapha\u00ebl Support - rud.is","og_description":"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 &#8220;js&#8221; output type and include the salient portions of [&hellip;]","og_url":"https:\/\/rud.is\/b\/2012\/06\/08\/slopegraphs-in-python-experimental-raphael-support\/","og_site_name":"rud.is","article_published_time":"2012-06-08T19:38:23+00:00","article_modified_time":"2017-03-27T14:40:30+00:00","author":"hrbrmstr","twitter_card":"summary_large_image","twitter_misc":{"Written by":"hrbrmstr","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rud.is\/b\/2012\/06\/08\/slopegraphs-in-python-experimental-raphael-support\/#article","isPartOf":{"@id":"https:\/\/rud.is\/b\/2012\/06\/08\/slopegraphs-in-python-experimental-raphael-support\/"},"author":{"name":"hrbrmstr","@id":"https:\/\/rud.is\/b\/#\/schema\/person\/d7cb7487ab0527447f7fda5c423ff886"},"headline":"Slopegraphs in Python \u2013 Experimental Rapha\u00ebl Support","datePublished":"2012-06-08T19:38:23+00:00","dateModified":"2017-03-27T14:40:30+00:00","mainEntityOfPage":{"@id":"https:\/\/rud.is\/b\/2012\/06\/08\/slopegraphs-in-python-experimental-raphael-support\/"},"wordCount":248,"commentCount":0,"publisher":{"@id":"https:\/\/rud.is\/b\/#\/schema\/person\/d7cb7487ab0527447f7fda5c423ff886"},"keywords":["cairo","javascript","raphael","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\/08\/slopegraphs-in-python-experimental-raphael-support\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/rud.is\/b\/2012\/06\/08\/slopegraphs-in-python-experimental-raphael-support\/","url":"https:\/\/rud.is\/b\/2012\/06\/08\/slopegraphs-in-python-experimental-raphael-support\/","name":"Slopegraphs in Python \u2013 Experimental Rapha\u00ebl Support - rud.is","isPartOf":{"@id":"https:\/\/rud.is\/b\/#website"},"datePublished":"2012-06-08T19:38:23+00:00","dateModified":"2017-03-27T14:40:30+00:00","breadcrumb":{"@id":"https:\/\/rud.is\/b\/2012\/06\/08\/slopegraphs-in-python-experimental-raphael-support\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rud.is\/b\/2012\/06\/08\/slopegraphs-in-python-experimental-raphael-support\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/rud.is\/b\/2012\/06\/08\/slopegraphs-in-python-experimental-raphael-support\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/rud.is\/b\/"},{"@type":"ListItem","position":2,"name":"Slopegraphs in Python \u2013 Experimental Rapha\u00ebl Support"}]},{"@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-jP","jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":1155,"url":"https:\/\/rud.is\/b\/2012\/06\/05\/slopegraphs-the-quintessential-gdp-example-revisited\/","url_meta":{"origin":1229,"position":0},"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":1229,"position":1},"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":1243,"url":"https:\/\/rud.is\/b\/2012\/06\/10\/slopegraphs-everywhere\/","url_meta":{"origin":1229,"position":2},"title":"Slopegraphs Everywhere","author":"hrbrmstr","date":"2012-06-10","format":false,"excerpt":"Not much progress over the weekend on my latest obsession (been busy enjoying some non-rainy days here in Maine). So, here are some other slopegraph implementations\/resources I've found through mining the internets: A spiffy editable javascript implementation defensive slopegraphs slopegraphs in tableau an interesting d3 implementation another javascript implementation an\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":1181,"url":"https:\/\/rud.is\/b\/2012\/06\/05\/slopegraphs-in-python-slope-colors\/","url_meta":{"origin":1229,"position":3},"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":1089,"url":"https:\/\/rud.is\/b\/2012\/05\/28\/slopegraphs-in-python\/","url_meta":{"origin":1229,"position":4},"title":"Slopegraphs in Python","author":"hrbrmstr","date":"2012-05-28","format":false,"excerpt":"(NOTE: You can keep up with progress best at github, but can always search on \"slopegraph\" here or just hit the tag page: \"slopegraph\" regularly) I've been a bit obsessed with slopegraphs (a.k.a \"Tufte table-chart\") of late and very dissatisfied with the lack of tools to make this particular visualization\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":1191,"url":"https:\/\/rud.is\/b\/2012\/06\/07\/slopegraphs-in-python-exploring-binningrounding\/","url_meta":{"origin":1229,"position":5},"title":"Slopegraphs in Python \u2013 Exploring Binning\/Rounding","author":"hrbrmstr","date":"2012-06-07","format":false,"excerpt":"One of the last items for the 1.0 release is support for multiple columns of data. That will require some additional refactoring, so I've been procrastinating by exploring the recent \"fudging\" discovery. Despite claims to the contrary on other sites, there are more folks playing with slopegraphs than you might\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\/1229","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=1229"}],"version-history":[{"count":0,"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/posts\/1229\/revisions"}],"wp:attachment":[{"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/media?parent=1229"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/categories?post=1229"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/tags?post=1229"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}