{"id":28,"date":"2015-05-06T13:45:35","date_gmt":"2015-05-06T12:45:35","guid":{"rendered":"http:\/\/www.meiotic.co.uk\/a\/?p=28"},"modified":"2015-05-23T23:03:12","modified_gmt":"2015-05-23T22:03:12","slug":"donuts","status":"publish","type":"post","link":"http:\/\/www.meiotic.co.uk\/my\/research\/doughnuts-and-dots\/","title":{"rendered":"Doughnuts and Dots: Chartin&#8217; &#038; Graphin&#8217;"},"content":{"rendered":"<p><script>document.getElementById('menu-item-102').className += \" current-menu-item current_page_item\";<\/script><br \/>\nOK, I&#8217;m trying to make this topic sound fun.. but there&#8217;s only so many ways you can spin online charting libraries.. but if they make delicious donuts and colourful dots, then I might have a chance (hmm). Here I take a look at <a href=\"http:\/\/www.chartjs.org\/\" target=\"_blank\">chart.js<\/a> and <a href=\"http:\/\/c3js.org\/\" target=\"_blank\">C3.js<\/a>, the latter being based on <a href=\"http:\/\/d3js.org\/\" target=\"_blank\">D3.js<\/a>, which is well worth checking out for some made visualisation libraries.<\/p>\n<div id=\"attachment_531\" style=\"width: 775px\" class=\"wp-caption aligncenter\"><img aria-describedby=\"caption-attachment-531\" decoding=\"async\" loading=\"lazy\" class=\"size-medium wp-image-531\" src=\"http:\/\/www.meiotic.co.uk\/my\/wp-content\/uploads\/2015\/05\/chartjs_d3-765x414.jpg\" alt=\"There are plenty of javascript libraries out there..\" width=\"765\" height=\"414\" \/><p id=\"caption-attachment-531\" class=\"wp-caption-text\">There are plenty of javascript libraries out there..<\/p><\/div>\n<p>Wanting to explore some new(ish) charting libraries, I set upon documenting the recent European elections with donut graphs, for my local and wider area. After a run-through of potential libraries, focusing on aesthitics, compatability and use of HTML5, I set upon using <a href=\"http:\/\/chartjs.org\/docs\/#doughnut-pie-chart\">doughnut pie charts<\/a>.<\/p>\n<p>There are quite a number of chart options and they&#8217;re all pretty simple and intuitive. I didn&#8217;t explore too much, but it seemed like going into the code and altering them might be a bit of a pain, but if they&#8217;ll work for you out the tin, they&#8217;ll give great impact to your data.<\/p>\n<p>There had just been a European election with some interesting changes taking place. The data was out there and a comparison between my constituency, Scotland and the UK could be made, for this election and the one prior. Perfect data for this task, and potentially useful too.<\/p>\n<div id=\"attachment_45\" style=\"width: 775px\" class=\"wp-caption aligncenter\"><img aria-describedby=\"caption-attachment-45\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-45 size-full\" src=\"http:\/\/www.meiotic.co.uk\/my\/wp-content\/uploads\/2015\/05\/eurodonuts1.jpg\" alt=\"eurodonuts1\" width=\"765\" height=\"415\" srcset=\"http:\/\/www.meiotic.co.uk\/my\/wp-content\/uploads\/2015\/05\/eurodonuts1.jpg 765w, http:\/\/www.meiotic.co.uk\/my\/wp-content\/uploads\/2015\/05\/eurodonuts1-300x163.jpg 300w\" sizes=\"(max-width: 765px) 100vw, 765px\" \/><p id=\"caption-attachment-45\" class=\"wp-caption-text\">Simple, colourful, inedible donuts. \ud83d\ude41<\/p><\/div>\n<p>I won&#8217;t go into the ins and outs of linking the data to the javascript library, but it wasn&#8217;t complex &#8211; it&#8217;s best just to click on the demo and see what you think:<\/p>\n<div class=\"demo\" onClick=\"window.open('\/my\/research\/doughnuts-and-dots\/demo');\" onMouseOver=\"this.style.backgroundColor='#E96656';\" onMouseOut=\"this.style.backgroundColor='#56B7E8';\">\n<div style=\"float: left;\"><img decoding=\"async\" style=\"margin-left: 15px; margin-top: 0px; height: 40px;\" src=\"\/my\/wp-content\/uploads\/box_small.png\" alt=\"\" \/><\/div>\n<div style=\"float: left; margin-left: 10px; margin-top: -3px; color: #fff; font-family: 'Open Sans'; font-size: 20px; font-weight: 100;\">View Demo <span style=\"font-size: 24px; color: #fff;\">\u00bb<\/span><\/div>\n<\/div>\n<p>Finally, with the data coming from an open source, and lots of sites seemingly forgetting to tell you where their data came from, I added simple attribution data at the bottom of the page. It&#8217;s amazing how this seems to slip from people&#8217;s minds around election time \ud83d\ude09<\/p>\n<div id=\"attachment_46\" style=\"width: 775px\" class=\"wp-caption aligncenter\"><img aria-describedby=\"caption-attachment-46\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-46 size-full\" src=\"http:\/\/www.meiotic.co.uk\/my\/wp-content\/uploads\/2015\/05\/eurodonuts2.jpg\" alt=\"eurodonuts2\" width=\"765\" height=\"244\" srcset=\"http:\/\/www.meiotic.co.uk\/my\/wp-content\/uploads\/2015\/05\/eurodonuts2.jpg 765w, http:\/\/www.meiotic.co.uk\/my\/wp-content\/uploads\/2015\/05\/eurodonuts2-300x96.jpg 300w\" sizes=\"(max-width: 765px) 100vw, 765px\" \/><p id=\"caption-attachment-46\" class=\"wp-caption-text\">Simple source info at the foot, links to open data.<\/p><\/div>\n<p>Done.<\/p>\n<div class=\"line\"><\/div>\n<h3>Part Two: C3.js for graphin&#8217;<\/h3>\n<p>Now a quick look at what C3 can offer. This is more the graphing side of things and came in handy to help visualise stats from the tastings at the <a href=\"http:\/\/sswc.org.uk\" target=\"_blank\">Southside Whisky Club<\/a>. We individually rate each bottle we taste and after 100+ bottles, it became interesting to see how our scores have varied over time.<\/p>\n<div id=\"attachment_537\" style=\"width: 775px\" class=\"wp-caption aligncenter\"><img aria-describedby=\"caption-attachment-537\" decoding=\"async\" loading=\"lazy\" src=\"http:\/\/www.meiotic.co.uk\/my\/wp-content\/uploads\/2015\/05\/whisky_dots-765x325.jpg\" alt=\"Colourful dots for slightly dry stats..\" width=\"765\" height=\"325\" class=\"size-medium wp-image-537\" \/><p id=\"caption-attachment-537\" class=\"wp-caption-text\">Colourful dots for slightly dry stats..<\/p><\/div>\n<p>Taking these scores and putting them into a scatter plot, you can see how things have varied per bottle, and over time, and by hovering over an individual&#8217;s name at the bottom, you can isolate their scores too.<\/p>\n<div class=\"demo\" onClick=\"window.open('http:\/\/sswc.org.uk\/tools\/vari.pl');\" onMouseOver=\"this.style.backgroundColor='#E96656';\" onMouseOut=\"this.style.backgroundColor='#56B7E8';\">\n<div style=\"float: left;\"><img decoding=\"async\" style=\"margin-left: 15px; margin-top: 0px; height: 40px;\" src=\"\/my\/wp-content\/uploads\/box_small.png\" alt=\"\" \/><\/div>\n<div style=\"float: left; margin-left: 10px; margin-top: -3px; color: #fff; font-family: 'Open Sans'; font-size: 20px; font-weight: 100;\">View Site <span style=\"font-size: 24px; color: #fff;\">\u00bb<\/span><\/div>\n<\/div>\n<p>It works pretty well, and there are lots of handy graphs ready-made for different types of data (it handles time-series particularly easily and well).<\/p>\n<p>Both libraries are easy to plug data into and to get nice effects. To get the most out of both, it helps to be able to fiddle the code behind the scenes, with C3 offering more options in that regard. Hopefully they&#8217;ll bring a bit of brightness to your data!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>OK, I&#8217;m trying to make this topic sound fun.. but there&#8217;s only so many ways you can spin online charting libraries.. but if they make delicious donuts and colourful dots, then I might have a<\/p>\n","protected":false},"author":1,"featured_media":45,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[18],"tags":[27,29,6,28,5],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.7.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Doughnuts and Dots: Chartin&#039; &amp; Graphin&#039; | *meiotic*<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Doughnuts and Dots: Chartin&#039; &amp; Graphin&#039; | *meiotic*\" \/>\n<meta property=\"og:description\" content=\"OK, I&#8217;m trying to make this topic sound fun.. but there&#8217;s only so many ways you can spin online charting libraries.. but if they make delicious donuts and colourful dots, then I might have a\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.meiotic.co.uk\/my\/research\/doughnuts-and-dots\/\" \/>\n<meta property=\"og:site_name\" content=\"*meiotic*\" \/>\n<meta property=\"article:published_time\" content=\"2015-05-06T12:45:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-05-23T22:03:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.meiotic.co.uk\/my\/wp-content\/uploads\/2015\/05\/eurodonuts1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"765\" \/>\n\t<meta property=\"og:image:height\" content=\"415\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"meiotic\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ScienceAndMaps\" \/>\n<meta name=\"twitter:site\" content=\"@ScienceAndMaps\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"meiotic\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.meiotic.co.uk\/my\/research\/doughnuts-and-dots\/\",\"url\":\"https:\/\/www.meiotic.co.uk\/my\/research\/doughnuts-and-dots\/\",\"name\":\"Doughnuts and Dots: Chartin' & Graphin' | *meiotic*\",\"isPartOf\":{\"@id\":\"http:\/\/www.meiotic.co.uk\/my\/#website\"},\"datePublished\":\"2015-05-06T12:45:35+00:00\",\"dateModified\":\"2015-05-23T22:03:12+00:00\",\"author\":{\"@id\":\"http:\/\/www.meiotic.co.uk\/my\/#\/schema\/person\/1995e1cecd67d2ff1e6a638aa331d032\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.meiotic.co.uk\/my\/research\/doughnuts-and-dots\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.meiotic.co.uk\/my\/research\/doughnuts-and-dots\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.meiotic.co.uk\/my\/research\/doughnuts-and-dots\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/www.meiotic.co.uk\/my\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Doughnuts and Dots: Chartin&#8217; &#038; Graphin&#8217;\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/www.meiotic.co.uk\/my\/#website\",\"url\":\"http:\/\/www.meiotic.co.uk\/my\/\",\"name\":\"*meiotic*\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/www.meiotic.co.uk\/my\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"http:\/\/www.meiotic.co.uk\/my\/#\/schema\/person\/1995e1cecd67d2ff1e6a638aa331d032\",\"name\":\"meiotic\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"http:\/\/www.meiotic.co.uk\/my\/#\/schema\/person\/image\/\",\"url\":\"http:\/\/0.gravatar.com\/avatar\/cacd48b532259fb621d7acf4cc462290?s=96&d=retro&r=r\",\"contentUrl\":\"http:\/\/0.gravatar.com\/avatar\/cacd48b532259fb621d7acf4cc462290?s=96&d=retro&r=r\",\"caption\":\"meiotic\"},\"sameAs\":[\"http:\/\/meiotic.co.uk\",\"https:\/\/twitter.com\/ScienceAndMaps\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Doughnuts and Dots: Chartin' & Graphin' | *meiotic*","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_GB","og_type":"article","og_title":"Doughnuts and Dots: Chartin' & Graphin' | *meiotic*","og_description":"OK, I&#8217;m trying to make this topic sound fun.. but there&#8217;s only so many ways you can spin online charting libraries.. but if they make delicious donuts and colourful dots, then I might have a","og_url":"https:\/\/www.meiotic.co.uk\/my\/research\/doughnuts-and-dots\/","og_site_name":"*meiotic*","article_published_time":"2015-05-06T12:45:35+00:00","article_modified_time":"2015-05-23T22:03:12+00:00","og_image":[{"width":765,"height":415,"url":"https:\/\/www.meiotic.co.uk\/my\/wp-content\/uploads\/2015\/05\/eurodonuts1.jpg","type":"image\/jpeg"}],"author":"meiotic","twitter_card":"summary_large_image","twitter_creator":"@ScienceAndMaps","twitter_site":"@ScienceAndMaps","twitter_misc":{"Written by":"meiotic","Estimated reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.meiotic.co.uk\/my\/research\/doughnuts-and-dots\/","url":"https:\/\/www.meiotic.co.uk\/my\/research\/doughnuts-and-dots\/","name":"Doughnuts and Dots: Chartin' & Graphin' | *meiotic*","isPartOf":{"@id":"http:\/\/www.meiotic.co.uk\/my\/#website"},"datePublished":"2015-05-06T12:45:35+00:00","dateModified":"2015-05-23T22:03:12+00:00","author":{"@id":"http:\/\/www.meiotic.co.uk\/my\/#\/schema\/person\/1995e1cecd67d2ff1e6a638aa331d032"},"breadcrumb":{"@id":"https:\/\/www.meiotic.co.uk\/my\/research\/doughnuts-and-dots\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.meiotic.co.uk\/my\/research\/doughnuts-and-dots\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.meiotic.co.uk\/my\/research\/doughnuts-and-dots\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/www.meiotic.co.uk\/my\/"},{"@type":"ListItem","position":2,"name":"Doughnuts and Dots: Chartin&#8217; &#038; Graphin&#8217;"}]},{"@type":"WebSite","@id":"http:\/\/www.meiotic.co.uk\/my\/#website","url":"http:\/\/www.meiotic.co.uk\/my\/","name":"*meiotic*","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/www.meiotic.co.uk\/my\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-GB"},{"@type":"Person","@id":"http:\/\/www.meiotic.co.uk\/my\/#\/schema\/person\/1995e1cecd67d2ff1e6a638aa331d032","name":"meiotic","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"http:\/\/www.meiotic.co.uk\/my\/#\/schema\/person\/image\/","url":"http:\/\/0.gravatar.com\/avatar\/cacd48b532259fb621d7acf4cc462290?s=96&d=retro&r=r","contentUrl":"http:\/\/0.gravatar.com\/avatar\/cacd48b532259fb621d7acf4cc462290?s=96&d=retro&r=r","caption":"meiotic"},"sameAs":["http:\/\/meiotic.co.uk","https:\/\/twitter.com\/ScienceAndMaps"]}]}},"_links":{"self":[{"href":"http:\/\/www.meiotic.co.uk\/my\/wp-json\/wp\/v2\/posts\/28"}],"collection":[{"href":"http:\/\/www.meiotic.co.uk\/my\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.meiotic.co.uk\/my\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.meiotic.co.uk\/my\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.meiotic.co.uk\/my\/wp-json\/wp\/v2\/comments?post=28"}],"version-history":[{"count":26,"href":"http:\/\/www.meiotic.co.uk\/my\/wp-json\/wp\/v2\/posts\/28\/revisions"}],"predecessor-version":[{"id":539,"href":"http:\/\/www.meiotic.co.uk\/my\/wp-json\/wp\/v2\/posts\/28\/revisions\/539"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.meiotic.co.uk\/my\/wp-json\/wp\/v2\/media\/45"}],"wp:attachment":[{"href":"http:\/\/www.meiotic.co.uk\/my\/wp-json\/wp\/v2\/media?parent=28"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.meiotic.co.uk\/my\/wp-json\/wp\/v2\/categories?post=28"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.meiotic.co.uk\/my\/wp-json\/wp\/v2\/tags?post=28"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}