Skip to content

Instantly share code, notes, and snippets.

@alex-rind

alex-rind/.block

Last active September 25, 2020 21:52
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save alex-rind/27cc9713559c6070e7ccd7a183c6743f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save alex-rind/27cc9713559c6070e7ccd7a183c6743f to your computer and use it in GitHub Desktop.
Download ZIP
d3-ez : Polar Area Chart Example
Raw
.block
license: mit
Raw
README.md

d3-ez : Polar Area Chart Example

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

forked from jamesleesaunders's block: d3-ez : Polar Area Chart Example

Raw
index.html
<!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('blue');
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, 20000);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment