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
Created
November 10, 2015 18:30
-
-
Save jalapic/dff0993631446d7bb548 to your computer and use it in GitHub Desktop.
D3.EZ : Reusable Circular Heat Chart
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <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="http://rawgit.com/jamesleesaunders/d3.ez/master/d3.ez.js"></script> | |
| <link rel="stylesheet" type="text/css" href="http://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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment