Generated using d3-ez D3 Reusable Chart Library
The Polar Area chart is similar to a usual pie chart, except sectors are equal angles and differ rather in how far each sector extends from the center of the circle. The polar area diagram is used to plot cyclic phenomena (e.g., count of deaths by month).
FUNCTION: Comparison; Trend over time
Credit: Data Viz Project
Credit: Peter Cook for giving permission to use code from his Radial Bar Chart
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>d3-ez : Polar Area Chart 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.polarAreaChart().colors(d3.ez.palette.diverging(2)); | |
| 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> |
Hi @jamesleesaunders thanks for sharing the information.
It was very helpful. Please let me know whenever you get chance to add support for d3-ez.
Hi @swati-kadam28 thanks for your interest. I have not had a chance to refactor d3-ez to support D3v7 yet (I have mainly been focussing on its sister project d3-x3d a 3D charting library.
If I get a chance I will see how quickly I can update d3-ez to support it and get back to you.
Alternatively I would welcome any contributions to the project by way of Pull Request.