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> |
Hello,
I tried this example in latest version v7 of d3.js. But using this version it shows an error.
Could you please confirm does the Polar plot works with the latest version v7 of d3.js. If yes could you please share the sample code of the same because this sample code is only works for version v5 of d3.js and for above versions it shows an error.
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.
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.
How to use this implementation in Angular ?