{"id":80,"date":"2020-05-13T17:00:31","date_gmt":"2020-05-13T17:00:31","guid":{"rendered":"https:\/\/csee.bangor.ac.uk\/?p=80"},"modified":"2024-06-25T14:51:56","modified_gmt":"2024-06-25T14:51:56","slug":"sing-a-rainbow-with-d3-js","status":"publish","type":"post","link":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/13\/sing-a-rainbow-with-d3-js\/","title":{"rendered":"Sing A Rainbow with D3.js"},"content":{"rendered":"\n<figure class=\"wp-block-pullquote\"><blockquote><p>Red and yellow and pink and green<br>Purple and orange and blue<br>I can sing a rainbow<br>Sing a rainbow<br>Sing a rainbow too.<\/p><cite>&#8220;I Can Sing a Rainbow&#8221; &#8211; Arthur Hamilton 1955<\/cite><\/blockquote><\/figure>\n\n\n\n<div class=\"rainbow\"><\/div>\n\n\n\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/d3\/4.13.0\/d3.min.js\" integrity=\"sha512-RJJ1NNC88QhN7dwpCY8rm\/6OxI+YdQP48DrLGe\/eSAd+n+s1PXwQkkpzzAgoJe4cZFW2GALQoxox61gSY2yQfg==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\"><\/script>\n\n<script>  \n\n        var colours = [\"Red\", \"Orange\", \"Yellow\", \"Green\", \"Blue\", \"Indigo\", \"Violet\"];\n        var order = [0, 2, 6, 3, 5, 1, 4];\n        var delay = [100, 1000, 1000, 1000, 750, 1000, 1000];\n\n        \/\/************************************************************\n        \/\/ Configuration\n        \/\/************************************************************\n        var margin = { top: 0, right: 0, bottom: 50, left: 30, pad: 10 };\n        var width = 580 - margin.left - margin.right;\n        var height = 350 - margin.top - margin.bottom;\n\n        function draw() {\n        d3.select(\".rainbow\").selectAll(\"*\").remove();\n\n        var svgContainer = d3\n            .select(\".rainbow\")\n            .append(\"svg\")\n            .attr(\"width\", width + margin.left + margin.right)\n            .attr(\"height\", height + margin.top)\n            .append(\"g\")\n            .attr(\"transform\", \"translate(290, 290)\");\n\n        \/\/Define Arc for rainbow\n        var arc = d3\n            .arc()\n            .innerRadius(function (d) {\n            return 290 - 20 * d;\n            })\n            .outerRadius(function (d) {\n            return 290 - 20 * d - 20;\n            })\n            .startAngle(function (d) {\n            return (-Math.PI \/ 2) * 0.7;\n            })\n            .endAngle(function (d) {\n            return (Math.PI \/ 2) * 0.7;\n            });\n\n        \/\/Adding all colors arc\n        var path = svgContainer\n            .selectAll(\"g.arc\")\n            .data(order)\n            .enter()\n            .append(\"g\")\n            .attr(\"class\", \"arc\");\n        \/\/Adding with animation\n        path\n            .append(\"path\")\n            .transition()\n            .delay(function (d, i) {\n            thisDelay = 0;\n            for (let index = 0; index < i + 1; index++) {\n                thisDelay += delay[index];\n            }\n            return thisDelay;\n            })\n            .duration(150)\n            .attr(\"fill\", function (d, i) {\n            return colours[d];\n            })\n            .attr(\"d\", arc);\n        }\n\n        draw();\n<\/script>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"javascript:draw();\" data-type=\"link\" data-id=\"javascript:draw();\">Play Again!<\/a><\/p>\n\n\n\n<p>This animation uses <a href=\"https:\/\/www.d3js.org\">d3.js<\/a> and a small amount of data. The idea is to mirror the lines of the song.<\/p>\n\n\n\n<p>First a set of data is defined in Javascript arrays:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted prettyprint linenums\">var colours = [\"Red\", \"Orange\", \"Yellow\", \"Green\", \n               \"Blue\", \"Indigo\", \"Violet\"];\nvar order   = [0, 2, 6, 3, 5, 1, 4];\nvar delay   = [100, 1000, 1000, 1000, 750, 1000, 1000]<\/pre>\n\n\n\n<p>These control the colours of the parts of the rainbow (<code>colours<\/code>), the order in which they will appear (<code>order<\/code>), and the delays between each one appearing (<code>delay<\/code>).<\/p>\n\n\n\n<p>Next, we define some configuration variables to control how large the rainbow is, and how much space is left around it:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted prettyprint linenums\">var margin = { top: 30, right: 200, \n               bottom: 50, left: 30, pad: 10 };\nvar width  = 800 - margin.left - margin.right;\nvar height = 350 - margin.top - margin.bottom;<\/pre>\n\n\n\n<p>In order to draw the rainbow, we need to use SVG or Structured Vector Graphics. That means we need to add some elements to the HTML page. We do that with the following code:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted prettyprint linenums\">var svgContainer = d3\n       .select(\".rainbow\")\n       .append(\"svg\")\n       .attr(\"width\", width)\n       .attr(\"height\", height)\n       .append(\"g\")\n       .attr(\"transform\", \"translate(300,300)\");<\/pre>\n\n\n\n<p>It asks D3 to select the <code>&lt;div&gt;<\/code> element which has the CSS class <code>rainbow<\/code>, and add a new <code>&lt;svg&gt;<\/code> element to it. Next, it sets the width and height so that our graphic is big enough. Inside that it add a new <code>&lt;g&gt;<\/code> element, which denotes graphics. It then moves in 300 pixels from the top and from the left before starting to draw. (Translate is the technical term for move.)<\/p>\n\n\n\n<p>After that, we have to define an <em>arc<\/em>, which is the maths name for part of a circle. Arcs are defined by a starting angle, an ending angle and a radius. It easy to think of drawing a circle, but only putting the pen on the paper between the start and end angles.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted prettyprint linenums\">var arc = d3\n    .arc()\n    .innerRadius(function (d) {\n        return 300 - 20 * d;\n    })\n    .outerRadius(function (d) {\n        return 300 - 20 * d - 20;\n    })\n    .startAngle(function (d) {\n        return (-Math.PI \/ 2) * 0.7;\n    })\n    .endAngle(function (d) {\n        return (Math.PI \/ 2) * 0.7;\n    });<\/pre>\n\n\n\n<p>Computers do trigonometry slightly different to us, they don't use degrees for angles as the distance between each degree changes depending on how big the circle is. Instead they use something called <em>radians<\/em>. One radian is the same no matter how big the circle is, and is roughly equal to 57 degrees. A full circle goes from 0 to 2 x <em>pi<\/em>. We want to have a length the 70% of our circumference of our circle (so the length is 0.7 x <em>pi<\/em>) but centred on the line that points straight up and down. That's why the angles go from <code>Math.PI \/ 2<\/code> to <code>- Math.PI \/ 2<\/code>.<\/p>\n\n\n\n<p>The <code>innerRadius<\/code> is the length of the bottom (or in our case smaller) side of the rainbow lines, and the <code>outerRadius<\/code> is the larger side. The values are calculated from their place in the order of the rainbow. The value, or place is the value <code>d<\/code> in the functions.<\/p>\n\n\n\n<p>Now we come to the graphics bit, actually drawing the lines. In SVG lines are called paths. We use D3's <code>.data()<\/code> function to draw one for each item in our array:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted prettyprint linenums\">var path = svgContainer\n      .selectAll(\"g.arc\")\n      .data(order)\n      .enter()\n      .append(\"g\")\n      .attr(\"class\", \"arc\");<\/pre>\n\n\n\n<p>This creates a new <code>&lt;g&gt;<\/code> element for each item to hold our path. Lastly we actually draw the animation:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted prettyprint linenums\">path\n    .append(\"path\")\n    .transition()\n    .delay(function (d, i) {\n        thisDelay = 0;\n        for (let index = 0; index &lt; i + 1; index++) {\n            thisDelay += delay[index];\n        }\n        return thisDelay;\n    })\n    .duration(150)\n    .attr(\"fill\", function (d, i) {\n        return colours[d];\n    })\n    .attr(\"d\", arc);<\/pre>\n\n\n\n<p>There's lots going on here, so we'll go from the top. First a <code>path<\/code> is added, and we need to use a <code>transition()<\/code> as it needs to be animated rather than all at once. The <code>delay()<\/code> function is used to draw the lines at different times. The <code>delay<\/code> array doesn't contain absolute values, so the loop adds up everything that happens before this line. The <code>duration()<\/code> instructs D3 to draw the line over 150 milliseconds. The <code>attr(\"fill\")<\/code> call sets which colour will be used to draw the line itself, before using the arc generator from before to set the <code>attr(\"d\")<\/code> or data for the path.<\/p>\n\n\n\n<p class=\"has-accent-color has-background-background-color has-text-color has-background has-large-font-size\"><em>Now you can all Sing a Rainbow with D3 at home!<\/em><\/p>\n\n\n\n<p>Download the completed project by clicking <a href=\"https:\/\/csee.bangor.ac.uk\/wp-content\/uploads\/2020\/05\/rainbow.html\">here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Red and yellow and pink and greenPurple and orange and blueI can sing a rainbowSing a rainbowSing a rainbow too. &#8220;I Can Sing a Rainbow&#8221; &#8211; Arthur Hamilton 1955 Play Again! This animation uses d3.js and a small amount of data. The idea is to mirror the lines of the song. First a set of [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":108,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,5,9,10,14,17],"tags":[52,53,62,74,107],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Sing A Rainbow with D3.js - Project Rainbow<\/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:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/13\/sing-a-rainbow-with-d3-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Sing A Rainbow with D3.js - Project Rainbow\" \/>\n<meta property=\"og:description\" content=\"Red and yellow and pink and greenPurple and orange and blueI can sing a rainbowSing a rainbowSing a rainbow too. &#8220;I Can Sing a Rainbow&#8221; &#8211; Arthur Hamilton 1955 Play Again! This animation uses d3.js and a small amount of data. The idea is to mirror the lines of the song. First a set of [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/13\/sing-a-rainbow-with-d3-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Project Rainbow\" \/>\n<meta property=\"article:published_time\" content=\"2020-05-13T17:00:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-25T14:51:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/0_Vjm76SQ2fAxafnkE.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"599\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"cgray\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"cgray\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/13\/sing-a-rainbow-with-d3-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/13\/sing-a-rainbow-with-d3-js\/\"},\"author\":{\"name\":\"cgray\",\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#\/schema\/person\/1afe679eeb95425cd4630b275ba5dd77\"},\"headline\":\"Sing A Rainbow with D3.js\",\"datePublished\":\"2020-05-13T17:00:31+00:00\",\"dateModified\":\"2024-06-25T14:51:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/13\/sing-a-rainbow-with-d3-js\/\"},\"wordCount\":576,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#organization\"},\"image\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/13\/sing-a-rainbow-with-d3-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/0_Vjm76SQ2fAxafnkE.png\",\"keywords\":[\"d3\",\"d3.js\",\"hamilton\",\"javascript\",\"rainbow\"],\"articleSection\":[\"Advanced\",\"Animation\",\"D3.js\",\"Data\",\"JavaScript\",\"Project Rainbow\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/13\/sing-a-rainbow-with-d3-js\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/13\/sing-a-rainbow-with-d3-js\/\",\"url\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/13\/sing-a-rainbow-with-d3-js\/\",\"name\":\"Sing A Rainbow with D3.js - Project Rainbow\",\"isPartOf\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/13\/sing-a-rainbow-with-d3-js\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/13\/sing-a-rainbow-with-d3-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/0_Vjm76SQ2fAxafnkE.png\",\"datePublished\":\"2020-05-13T17:00:31+00:00\",\"dateModified\":\"2024-06-25T14:51:56+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/13\/sing-a-rainbow-with-d3-js\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/13\/sing-a-rainbow-with-d3-js\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/13\/sing-a-rainbow-with-d3-js\/#primaryimage\",\"url\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/0_Vjm76SQ2fAxafnkE.png\",\"contentUrl\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/0_Vjm76SQ2fAxafnkE.png\",\"width\":1600,\"height\":599,\"caption\":\"Picture of D3 Data-driven documents\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/13\/sing-a-rainbow-with-d3-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Sing A Rainbow with D3.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#website\",\"url\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/\",\"name\":\"Project Rainbow\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#organization\",\"name\":\"Project Rainbow\",\"url\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/bangor_logo_c1_flush.png\",\"contentUrl\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/bangor_logo_c1_flush.png\",\"width\":3356,\"height\":958,\"caption\":\"Project Rainbow\"},\"image\":{\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#\/schema\/person\/1afe679eeb95425cd4630b275ba5dd77\",\"name\":\"cgray\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g\",\"caption\":\"cgray\"},\"url\":\"https:\/\/csee.bangor.ac.uk\/projectrainbow\/author\/cgray\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Sing A Rainbow with D3.js - Project Rainbow","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:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/13\/sing-a-rainbow-with-d3-js\/","og_locale":"en_US","og_type":"article","og_title":"Sing A Rainbow with D3.js - Project Rainbow","og_description":"Red and yellow and pink and greenPurple and orange and blueI can sing a rainbowSing a rainbowSing a rainbow too. &#8220;I Can Sing a Rainbow&#8221; &#8211; Arthur Hamilton 1955 Play Again! This animation uses d3.js and a small amount of data. The idea is to mirror the lines of the song. First a set of [&hellip;]","og_url":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/13\/sing-a-rainbow-with-d3-js\/","og_site_name":"Project Rainbow","article_published_time":"2020-05-13T17:00:31+00:00","article_modified_time":"2024-06-25T14:51:56+00:00","og_image":[{"width":1600,"height":599,"url":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/0_Vjm76SQ2fAxafnkE.png","type":"image\/png"}],"author":"cgray","twitter_card":"summary_large_image","twitter_misc":{"Written by":"cgray","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/13\/sing-a-rainbow-with-d3-js\/#article","isPartOf":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/13\/sing-a-rainbow-with-d3-js\/"},"author":{"name":"cgray","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#\/schema\/person\/1afe679eeb95425cd4630b275ba5dd77"},"headline":"Sing A Rainbow with D3.js","datePublished":"2020-05-13T17:00:31+00:00","dateModified":"2024-06-25T14:51:56+00:00","mainEntityOfPage":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/13\/sing-a-rainbow-with-d3-js\/"},"wordCount":576,"commentCount":0,"publisher":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#organization"},"image":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/13\/sing-a-rainbow-with-d3-js\/#primaryimage"},"thumbnailUrl":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/0_Vjm76SQ2fAxafnkE.png","keywords":["d3","d3.js","hamilton","javascript","rainbow"],"articleSection":["Advanced","Animation","D3.js","Data","JavaScript","Project Rainbow"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/13\/sing-a-rainbow-with-d3-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/13\/sing-a-rainbow-with-d3-js\/","url":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/13\/sing-a-rainbow-with-d3-js\/","name":"Sing A Rainbow with D3.js - Project Rainbow","isPartOf":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#website"},"primaryImageOfPage":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/13\/sing-a-rainbow-with-d3-js\/#primaryimage"},"image":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/13\/sing-a-rainbow-with-d3-js\/#primaryimage"},"thumbnailUrl":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/0_Vjm76SQ2fAxafnkE.png","datePublished":"2020-05-13T17:00:31+00:00","dateModified":"2024-06-25T14:51:56+00:00","breadcrumb":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/13\/sing-a-rainbow-with-d3-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/13\/sing-a-rainbow-with-d3-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/13\/sing-a-rainbow-with-d3-js\/#primaryimage","url":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/0_Vjm76SQ2fAxafnkE.png","contentUrl":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/0_Vjm76SQ2fAxafnkE.png","width":1600,"height":599,"caption":"Picture of D3 Data-driven documents"},{"@type":"BreadcrumbList","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2020\/05\/13\/sing-a-rainbow-with-d3-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/"},{"@type":"ListItem","position":2,"name":"Sing A Rainbow with D3.js"}]},{"@type":"WebSite","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#website","url":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/","name":"Project Rainbow","description":"","publisher":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#organization","name":"Project Rainbow","url":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#\/schema\/logo\/image\/","url":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/bangor_logo_c1_flush.png","contentUrl":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-content\/uploads\/sites\/2\/2020\/05\/bangor_logo_c1_flush.png","width":3356,"height":958,"caption":"Project Rainbow"},"image":{"@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#\/schema\/person\/1afe679eeb95425cd4630b275ba5dd77","name":"cgray","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g","caption":"cgray"},"url":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/author\/cgray\/"}]}},"_links":{"self":[{"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/posts\/80"}],"collection":[{"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/comments?post=80"}],"version-history":[{"count":7,"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/posts\/80\/revisions"}],"predecessor-version":[{"id":1387,"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/posts\/80\/revisions\/1387"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/media\/108"}],"wp:attachment":[{"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/media?parent=80"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/categories?post=80"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/wp-json\/wp\/v2\/tags?post=80"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}