<html>
<head></head>
<body>
<div id="pieChart"></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.4/d3.min.js"></script>
<script src="https://rawgit.com/benkeen/d3pie/master/d3pie/d3pie.min.js"></script>
<script>
var pie = new d3pie("pieChart", {
\t "header": {
\t \t "title": {
\t \t \t "text": "Lots of Programming Languages",
\t \t \t "fontSize": 24,
\t \t \t "font": "open sans"
\t \t },
\t \t "subtitle": {
\t \t \t "text": "A full pie chart to show off label collision detection and resolution.",
\t \t \t "color": "#999999",
\t \t \t "fontSize": 12,
\t \t \t "font": "open sans"
\t \t },
\t \t "titleSubtitlePadding": 9
\t },
\t "footer": {
\t \t "color": "#999999",
\t \t "fontSize": 10,
\t \t "font": "open sans",
\t \t "location": "bottom-left"
\t },
\t "size": {
\t \t "canvasWidth": 590,
\t \t "pieOuterRadius": "90%"
\t },
\t "data": {
\t \t "sortOrder": "value-desc",
\t \t "content": [
\t \t \t {
\t \t \t \t "label": "JavaScript",
\t \t \t \t "value": 264131,
\t \t \t \t "color": "#2484c1"
\t \t \t },
\t \t \t {
\t \t \t \t "label": "Ruby",
\t \t \t \t "value": 218812,
\t \t \t \t "color": "#0c6197"
\t \t \t },
\t \t \t {
\t \t \t \t "label": "Java",
\t \t \t \t "value": 157618,
\t \t \t \t "color": "#4daa4b"
\t \t \t },
\t \t \t {
\t \t \t \t "label": "PHP",
\t \t \t \t "value": 114384,
\t \t \t \t "color": "#90c469"
\t \t \t },
\t \t \t {
\t \t \t \t "label": "Python",
\t \t \t \t "value": 95002,
\t \t \t \t "color": "#daca61"
\t \t \t },
\t \t \t {
\t \t \t \t "label": "C+",
\t \t \t \t "value": 78327,
\t \t \t \t "color": "#e4a14b"
\t \t \t },
\t \t \t {
\t \t \t \t "label": "C",
\t \t \t \t "value": 67706,
\t \t \t \t "color": "#e98125"
\t \t \t },
\t \t \t {
\t \t \t \t "label": "Objective-C",
\t \t \t \t "value": 36344,
\t \t \t \t "color": "#cb2121"
\t \t \t },
\t \t \t {
\t \t \t \t "label": "Shell",
\t \t \t \t "value": 28561,
\t \t \t \t "color": "#830909"
\t \t \t },
\t \t \t {
\t \t \t \t "label": "Cobol",
\t \t \t \t "value": 24131,
\t \t \t \t "color": "#923e99"
\t \t \t },
\t \t \t {
\t \t \t \t "label": "C#",
\t \t \t \t "value": 100,
\t \t \t \t "color": "#ae83d5"
\t \t \t },
\t \t \t {
\t \t \t \t "label": "Coldfusion",
\t \t \t \t "value": 68,
\t \t \t \t "color": "#bf273e"
\t \t \t },
\t \t \t {
\t \t \t \t "label": "Fortran",
\t \t \t \t "value": 218812,
\t \t \t \t "color": "#ce2aeb"
\t \t \t },
\t \t \t {
\t \t \t \t "label": "Coffeescript",
\t \t \t \t "value": 157618,
\t \t \t \t "color": "#bca44a"
\t \t \t },
\t \t \t {
\t \t \t \t "label": "Node",
\t \t \t \t "value": 114384,
\t \t \t \t "color": "#618d1b"
\t \t \t },
\t \t \t {
\t \t \t \t "label": "Basic",
\t \t \t \t "value": 95002,
\t \t \t \t "color": "#1ee67b"
\t \t \t },
\t \t \t {
\t \t \t \t "label": "Cola",
\t \t \t \t "value": 36344,
\t \t \t \t "color": "#b0ec44"
\t \t \t },
\t \t \t {
\t \t \t \t "label": "Perl",
\t \t \t \t "value": 32170,
\t \t \t \t "color": "#a4a0c9"
\t \t \t },
\t \t \t {
\t \t \t \t "label": "Dart",
\t \t \t \t "value": 28561,
\t \t \t \t "color": "#322849"
\t \t \t },
\t \t \t {
\t \t \t \t "label": "Go",
\t \t \t \t "value": 264131,
\t \t \t \t "color": "#86f71a"
\t \t \t },
\t \t \t {
\t \t \t \t "label": "Groovy",
\t \t \t \t "value": 218812,
\t \t \t \t "color": "#d1c87f"
\t \t \t },
\t \t \t {
\t \t \t \t "label": "Processing",
\t \t \t \t "value": 157618,
\t \t \t \t "color": "#7d9058"
\t \t \t },
\t \t \t {
\t \t \t \t "label": "Smalltalk",
\t \t \t \t "value": 114384,
\t \t \t \t "color": "#44b9b0"
\t \t \t },
\t \t \t {
\t \t \t \t "label": "Scala",
\t \t \t \t "value": 95002,
\t \t \t \t "color": "#7c37c0"
\t \t \t },
\t \t \t {
\t \t \t \t "label": "Visual Basic",
\t \t \t \t "value": 78327,
\t \t \t \t "color": "#cc9fb1"
\t \t \t },
\t \t \t {
\t \t \t \t "label": "Scheme",
\t \t \t \t "value": 67706,
\t \t \t \t "color": "#e65414"
\t \t \t },
\t \t \t {
\t \t \t \t "label": "Rust",
\t \t \t \t "value": 36344,
\t \t \t \t "color": "#8b6834"
\t \t \t },
\t \t \t {
\t \t \t \t "label": "FoxPro",
\t \t \t \t "value": 32170,
\t \t \t \t "color": "#248838"
\t \t \t }
\t \t ]
\t },
\t "labels": {
\t \t "outer": {
\t \t \t "pieDistance": 32
\t \t },
\t \t "inner": {
\t \t \t "hideWhenLessThanPercentage": 3
\t \t },
\t \t "mainLabel": {
\t \t \t "fontSize": 11
\t \t },
\t \t "percentage": {
\t \t \t "color": "#ffffff",
\t \t \t "decimalPlaces": 0
\t \t },
\t \t "value": {
\t \t \t "color": "#adadad",
\t \t \t "fontSize": 11
\t \t },
\t \t "lines": {
\t \t \t "enabled": true
\t \t },
\t \t "truncation": {
\t \t \t "enabled": true
\t \t }
\t },
\t "effects": {
\t \t "pullOutSegmentOnClick": {
\t \t \t "effect": "linear",
\t \t \t "speed": 400,
\t \t \t "size": 8
\t \t }
\t },
\t "misc": {
\t \t "gradient": {
\t \t \t "enabled": true,
\t \t \t "percentage": 100
\t \t }
\t },
\t callbacks: {
\t \t onload: function(){
\t \t console.log('chart is loaded!');
\t \t }
\t }
});
</script>
</body>
</html>