Generated using d3-ez D3 Reusable Chart Library
A Radial/Circular Bar Chart simply refers to a typical Bar Chart displayed on a polar coordinate system, instead of a cartesian system.It is used to show comparisons among categories by using a circular shape.
FUNCTION: Comparison
Credit: Data Viz Project
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>d3-ez : Bar Chart (Circular) Example</title> | |
| <script src="https://d3js.org/d3.v5.min.js"></script> | |
| <script src="https://raw.githack.com/jamesleesaunders/d3-ez/master/dist/d3-ez.js"></script> | |
| <link rel="stylesheet" type="text/css" href="http://rawgit.com/jamesleesaunders/d3.ez/master/dist/d3-ez.css" /> | |
| </head> | |
| <body> | |
| <div id="chartholder"></div> | |
| <br/> | |
| <div>Value: <span id="message"></span></div> | |
| <script type="text/javascript"> | |
| // Generate some data | |
| function randomDataset() { | |
| var _randomNum = function() { | |
| return Math.floor(Math.random() * 10); | |
| }; | |
| var data = { | |
| "key": "Languages", | |
| "values": [{ | |
| "key": "JavaScript", | |
| "value": _randomNum() | |
| }, { | |
| "key": "C++", | |
| "value": _randomNum() | |
| }, { | |
| "key": "Java", | |
| "value": _randomNum() | |
| }, { | |
| "key": "Ruby", | |
| "value": _randomNum() | |
| }, { | |
| "key": "Python", | |
| "value": _randomNum() | |
| }, { | |
| "key": "PHP", | |
| "value": _randomNum() | |
| }, { | |
| "key": "Perl", | |
| "value": _randomNum() | |
| }, { | |
| "key": "Basic", | |
| "value": _randomNum() | |
| }, { | |
| "key": "Assembly", | |
| "value": _randomNum() | |
| }] | |
| }; | |
| return data; | |
| } | |
| var chart = d3.ez.chart.barChartCircular().colors(d3.ez.palette.categorical(1)); | |
| var legend = d3.ez.component.legend().title("Top 10"); | |
| var title = d3.ez.component.title().mainText("Programming Languages").subText("Top 10 Languages Used By Developers"); | |
| // Create chart base | |
| var myChart = d3.ez.base() | |
| .width(750) | |
| .height(400) | |
| .chart(chart) | |
| .legend(legend) | |
| .title(title) | |
| .on("customValueMouseOver", function(d, i) { | |
| d3.select("#message").text(d.value); | |
| }); | |
| // Add to page | |
| function update() { | |
| var data = randomDataset(); | |
| d3.select("#chartholder") | |
| .datum(data) | |
| .call(myChart); | |
| } | |
| update(); | |
| setInterval(update, 2000); | |
| </script> | |
| </body> | |
| </html> |