Credit goes to Peter Cook for giving permission to use code from his Circular Heat Chart in D3.EZ.
Uses D3.EZ Reusable Chart Library
forked from jamesleesaunders's block: D3.EZ : Reusable Circular Heat Chart
xxxxxxxxxx<html><head> <title>D3.EZ : Reusable Circular Heat Chart</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/jamesleesaunders/d3.ez/d3.ez.js"></script> <link rel="stylesheet" type="text/css" href="https://rawgit.com/jamesleesaunders/d3.ez/master/d3.ez.css" /></head><body> <div id="chartholder"></div> <script type="text/javascript"> // Create Circular Heat Chart object var myChart = d3.ez.circularHeatChart() .width(600) .height(450) .innerRadius(80); // Add to page d3.select('#chartholder') .datum(randomDataset()) .call(myChart); function randomDataset() { var j=1; var _randomNum = function() { return Math.floor(Math.random() * 10); }; var data = [ { "key": "Monday", "values": [ { "key": "Midnight", "value": _randomNum() }, { "key": "1am", "value": _randomNum() }, { "key": "2am", "value": _randomNum() }, { "key": "3am", "value": _randomNum() }, { "key": "4am", "value": _randomNum() }, { "key": "5am", "value": _randomNum() }, { "key": "6am", "value": _randomNum() }, { "key": "7am", "value": _randomNum() }, { "key": "8am", "value": _randomNum() }, { "key": "9am", "value": _randomNum() }, { "key": "10am", "value": _randomNum() }, { "key": "11am", "value": _randomNum() }, { "key": "Midday", "value": _randomNum() }, { "key": "1pm", "value": _randomNum() }, { "key": "2pm", "value": _randomNum() }, { "key": "3pm", "value": _randomNum() }, { "key": "4pm", "value": _randomNum() }, { "key": "5pm", "value": _randomNum() }, { "key": "6pm", "value": _randomNum() }, { "key": "7pm", "value": _randomNum() }, { "key": "8pm", "value": _randomNum() }, { "key": "9pm", "value": _randomNum() }, { "key": "10pm", "value": _randomNum() }, { "key": "11pm", "value": _randomNum() } ] }, { "key": "Tuesday", "values": [ { "key": "Midnight", "value": _randomNum() }, { "key": "1am", "value": _randomNum() }, { "key": "2am", "value": _randomNum() }, { "key": "3am", "value": _randomNum() }, { "key": "4am", "value": _randomNum() }, { "key": "5am", "value": _randomNum() }, { "key": "6am", "value": _randomNum() }, { "key": "7am", "value": _randomNum() }, { "key": "8am", "value": _randomNum() }, { "key": "9am", "value": _randomNum() }, { "key": "10am", "value": _randomNum() }, { "key": "11am", "value": _randomNum() }, { "key": "Midday", "value": _randomNum() }, { "key": "1pm", "value": _randomNum() }, { "key": "2pm", "value": _randomNum() }, { "key": "3pm", "value": _randomNum() }, { "key": "4pm", "value": _randomNum() }, { "key": "5pm", "value": _randomNum() }, { "key": "6pm", "value": _randomNum() }, { "key": "7pm", "value": _randomNum() }, { "key": "8pm", "value": _randomNum() }, { "key": "9pm", "value": _randomNum() }, { "key": "10pm", "value": _randomNum() }, { "key": "11pm", "value": _randomNum() } ] }, { "key": "Wednesday", "values": [ { "key": "Midnight", "value": _randomNum() }, { "key": "1am", "value": _randomNum() }, { "key": "2am", "value": _randomNum() }, { "key": "3am", "value": _randomNum() }, { "key": "4am", "value": _randomNum() }, { "key": "5am", "value": _randomNum() }, { "key": "6am", "value": _randomNum() }, { "key": "7am", "value": _randomNum() }, { "key": "8am", "value": _randomNum() }, { "key": "9am", "value": _randomNum() }, { "key": "10am", "value": _randomNum() }, { "key": "11am", "value": _randomNum() }, { "key": "Midday", "value": _randomNum() }, { "key": "1pm", "value": _randomNum() }, { "key": "2pm", "value": _randomNum() }, { "key": "3pm", "value": _randomNum() }, { "key": "4pm", "value": _randomNum() }, { "key": "5pm", "value": _randomNum() }, { "key": "6pm", "value": _randomNum() }, { "key": "7pm", "value": _randomNum() }, { "key": "8pm", "value": _randomNum() }, { "key": "9pm", "value": _randomNum() }, { "key": "10pm", "value": _randomNum() }, { "key": "11pm", "value": _randomNum() } ] }, { "key": "Thursday", "values": [ { "key": "Midnight", "value": _randomNum() }, { "key": "1am", "value": _randomNum() }, { "key": "2am", "value": _randomNum() }, { "key": "3am", "value": _randomNum() }, { "key": "4am", "value": _randomNum() }, { "key": "5am", "value": _randomNum() }, { "key": "6am", "value": _randomNum() }, { "key": "7am", "value": _randomNum() }, { "key": "8am", "value": _randomNum() }, { "key": "9am", "value": _randomNum() }, { "key": "10am", "value": _randomNum() }, { "key": "11am", "value": _randomNum() }, { "key": "Midday", "value": _randomNum() }, { "key": "1pm", "value": _randomNum() }, { "key": "2pm", "value": _randomNum() }, { "key": "3pm", "value": _randomNum() }, { "key": "4pm", "value": _randomNum() }, { "key": "5pm", "value": _randomNum() }, { "key": "6pm", "value": _randomNum() }, { "key": "7pm", "value": _randomNum() }, { "key": "8pm", "value": _randomNum() }, { "key": "9pm", "value": _randomNum() }, { "key": "10pm", "value": _randomNum() }, { "key": "11pm", "value": _randomNum() } ] }, { "key": "Friday", "values": [ { "key": "Midnight", "value": _randomNum() }, { "key": "1am", "value": _randomNum() }, { "key": "2am", "value": _randomNum() }, { "key": "3am", "value": _randomNum() }, { "key": "4am", "value": _randomNum() }, { "key": "5am", "value": _randomNum() }, { "key": "6am", "value": _randomNum() }, { "key": "7am", "value": _randomNum() }, { "key": "8am", "value": _randomNum() }, { "key": "9am", "value": _randomNum() }, { "key": "10am", "value": _randomNum() }, { "key": "11am", "value": _randomNum() }, { "key": "Midday", "value": _randomNum() }, { "key": "1pm", "value": _randomNum() }, { "key": "2pm", "value": _randomNum() }, { "key": "3pm", "value": _randomNum() }, { "key": "4pm", "value": _randomNum() }, { "key": "5pm", "value": _randomNum() }, { "key": "6pm", "value": _randomNum() }, { "key": "7pm", "value": _randomNum() }, { "key": "8pm", "value": _randomNum() }, { "key": "9pm", "value": _randomNum() }, { "key": "10pm", "value": _randomNum() }, { "key": "11pm", "value": _randomNum() } ] }, { "key": "Saturday", "values": [ { "key": "Midnight", "value": _randomNum() }, { "key": "1am", "value": _randomNum() }, { "key": "2am", "value": _randomNum() }, { "key": "3am", "value": _randomNum() }, { "key": "4am", "value": _randomNum() }, { "key": "5am", "value": _randomNum() }, { "key": "6am", "value": _randomNum() }, { "key": "7am", "value": _randomNum() }, { "key": "8am", "value": _randomNum() }, { "key": "9am", "value": _randomNum() }, { "key": "10am", "value": _randomNum() }, { "key": "11am", "value": _randomNum() }, { "key": "Midday", "value": _randomNum() }, { "key": "1pm", "value": _randomNum() }, { "key": "2pm", "value": _randomNum() }, { "key": "3pm", "value": _randomNum() }, { "key": "4pm", "value": _randomNum() }, { "key": "5pm", "value": _randomNum() }, { "key": "6pm", "value": _randomNum() }, { "key": "7pm", "value": _randomNum() }, { "key": "8pm", "value": _randomNum() }, { "key": "9pm", "value": _randomNum() }, { "key": "10pm", "value": _randomNum() }, { "key": "11pm", "value": _randomNum() } ] }, { "key": "Sunday", "values": [ { "key": "Midnight", "value": _randomNum() }, { "key": "1am", "value": _randomNum() }, { "key": "2am", "value": _randomNum() }, { "key": "3am", "value": _randomNum() }, { "key": "4am", "value": _randomNum() }, { "key": "5am", "value": _randomNum() }, { "key": "6am", "value": _randomNum() }, { "key": "7am", "value": _randomNum() }, { "key": "8am", "value": _randomNum() }, { "key": "9am", "value": _randomNum() }, { "key": "10am", "value": _randomNum() }, { "key": "11am", "value": _randomNum() }, { "key": "Midday", "value": _randomNum() }, { "key": "1pm", "value": _randomNum() }, { "key": "2pm", "value": _randomNum() }, { "key": "3pm", "value": _randomNum() }, { "key": "4pm", "value": _randomNum() }, { "key": "5pm", "value": _randomNum() }, { "key": "6pm", "value": _randomNum() }, { "key": "7pm", "value": _randomNum() }, { "key": "8pm", "value": _randomNum() }, { "key": "9pm", "value": _randomNum() }, { "key": "10pm", "value": _randomNum() }, { "key": "11pm", "value": _randomNum() } ] } ]; return data; } </script></body></html> Modified http://rawgit.com/jamesleesaunders/d3.ez/master/d3.ez.js to a secure url
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js
https://rawgit.com/jamesleesaunders/d3.ez/master/d3.ez.js