Saturday, November 19, 2016

Pie Chart Examples with Javascript Charting Libraries built off of D3

SOURCE CODE: D3ChartExamples

The  pie chart examples here are modifications of the examples given by each library; dimple, c3, epoch, plottable, nvd3, plotly and dc.js.

dimple pie chart example

example_data_dimple.csv
-----------------------
Region,Amount
Italy/Greece,63
Europe West,13
Great Britain,7
Ireland,4
Iberian Peninsula,2
Caucasus,6
Middle East,4
Africa North,1


<!DOCTYPE html>
<head>
    <title>Dimple Pie Chart| Gliesians</title>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://dimplejs.org/dist/dimple.v2.1.6.min.js"></script>
</head>
<body>
    <script type="text/javascript">
        var svg = dimple.newSvg("body", 800, 600);
        d3.csv("/data/example_data_dimple.csv", function (data) {
            var myChart = new dimple.chart(svg, data);
            myChart.setBounds(20, 20, 460, 360);
            myChart.addMeasureAxis("p", "Amount");
            myChart.addSeries("Region", dimple.plot.pie);
            myChart.addLegend(500, 20, 90, 300, "left");
            myChart.draw();
        });
    </script>
</body>



c3 pie chart example

example_data_c3.csv
-------------------
Italy/Greece, Europe West, Great Britian, Ireland, Iberian Peninsula, Caucasus, Middle East, Africa North
63,13,7,4,2,6,4,1



<!DOCTYPE html>
<head>
    <title>C3 Pie Chart | Gliesians</title>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="/lib/c3.min.js"></script>
    <link href="/css/c3.min.css" rel="stylesheet" type="text/css">
</head>
<body>

    <div id="chart"></div>
    <script type="text/javascript">
        var chart = c3.generate({
            data: {
                url: '/data/example_data_c3.csv',
                type: 'pie'
            }
        });
    </script>
</body>



epoch pie chart example

<!DOCTYPE html>
<head>
    <title>Epoch Pie Chart| Gliesians</title>
    <script src="http://code.jquery.com/jquery-2.1.3.min.js" charset="utf-8"></script>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="/lib/epoch.min.js"></script>
    <link href="/css/epoch.min.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div id="pie" class="epoch category10"  style="width: 400px; height: 400px"></div>
    <script>
        var pieData = [
            {label: 'Italy/Greece', value: 63},
            {label: 'Europe West', value: 13},
            {label: 'Great Britain', value: 7},
            {label: 'Ireland', value: 4},
            {label: 'Iberian Peninsula', value: 2},
            {label: 'Caucasus', value: 6},
            {label: 'Middle East', value: 4},
            {label: 'Africa North', value: 1}
        ];
        $('#pie').epoch({
            type: 'pie',
            data: pieData
        });
    </script>
</body>


 

plottable pie chart example

<!DOCTYPE html>
<head>
    <title>Plottable Pie Chart | Gliesians</title>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="/lib/plottable.min.js"></script>
    <link href="/css/plottable.css" rel="stylesheet" type="text/css">
</head>
<body>
    <svg id="example"></svg>
    <script type="text/javascript">
        var scale = new Plottable.Scales.Linear();
        var colorScale = new Plottable.Scales.InterpolatedColor();
        colorScale.range(["#BDCEF0", "#5279C7"]);
        var data = [{val: 63}, {val: 13}, {val: 7},
            {val: 4}, {val: 2}, {val: 6}, {val: 4}, {val: 1}];
        var plot = new Plottable.Plots.Pie()
                .addDataset(new Plottable.Dataset(data))
                .sectorValue(function (d) {
                    return d.val;
                }, scale)
                .attr("fill", function (d) {
                    return d.val;
                }, colorScale)
                .renderTo("svg#example");
        window.addEventListener("resize", function () {
            plot.redraw();
        });
    </script>
</body>





nvd3 pie chart example

<!DOCTYPE html>
<head>
    <title>NVD3 Pie Chart | Gliesians</title>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="https://cdn.rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.min.js"></script>
    <link href="https://cdn.rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.css" rel="stylesheet" type="text/css">
    <style>
        text {
            font: 12px sans-serif;
        }
        .testBlock {
            display: block;
            float: left;
            height: 300px;
            width: 300px;
        }
        html, body {
            margin: 0px;
            padding: 0px;
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="testBlock"><svg id="test1"></svg></div>
    <div class="testBlock"><svg id="test2"></svg></div>
    <script>
        var testdata = [
            {key: 'Italy/Greece', y: 63},
            {key: 'Europe West', y: 13},
            {key: 'Great Britain', y: 7},
            {key: 'Ireland', y: 4},
            {key: 'Iberian Peninsula', y: 2},
            {key: 'Caucasus', y: 6},
            {key: 'Middle East', y: 4},
            {key: 'Africa North', y: 1}
        ];
        var width = 300;
        var height = 300;
        nv.addGraph(function () {
            var chart = nv.models.pie()
                    .x(function (d) {
                        return d.key;
                    })
                    .y(function (d) {
                        return d.y;
                    })
                    .width(width)
                    .height(height)
                    .labelType(function (d, i, values) {
                        return values.key + ':' + values.value;
                    })
                    ;
            d3.select("#test1")
                    .datum([testdata])
                    .transition().duration(1200)
                    .attr('width', width)
                    .attr('height', height)
                    .call(chart);
            return chart;
        });
        nv.addGraph(function () {
            var chart = nv.models.pie()
                    .x(function (d) {
                        return d.key;
                    })
                    .y(function (d) {
                        return d.y;
                    })
                    .width(width)
                    .height(height)
                    .labelType('percent')
                    .valueFormat(d3.format('%'))
                    .donut(true);
            d3.select("#test2")
                    .datum([testdata])
                    .transition().duration(1200)
                    .attr('width', width)
                    .attr('height', height)
                    .call(chart);
            return chart;
        });
    </script>
</body>
</html>


plotly pie chart example

<!DOCTYPE html>
<head>
    <title>Plotly Pie Chart | Gliesians</title>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/numeric/1.2.6/numeric.min.js"></script>
</head>
<body>
    <div id="myDiv" style="width: 480px; height: 380px;"><!-- Plotly chart will be drawn inside this DIV --></div>
    <script type="text/javascript">
        var data = [{
                values: [63, 13, 7, 4, 2, 6, 4, 1],
                labels: ['Italy/Greece', 'Europe West', 'Great Britian', 'Ireland', 'Iberian Peninsula', 'Caucasus', 'Middle East', 'Africa North'],
                type: 'pie'
            }];

        var layout = {
            height: 400,
            width: 500
        };
        Plotly.newPlot('myDiv', data, layout);
    </script>
</body>
 

dc.j pie chart example

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="http://dc-js.github.io/dc.js/css/dc.css" />
    <script src="http://dc-js.github.io/dc.js/js/d3.js"></script>
    <script src="http://dc-js.github.io/dc.js/js/crossfilter.js"></script>
    <script src="http://dc-js.github.io/dc.js/js/dc.js"></script>
    <style>
    </style>
</head>

<body>
    <div class="container">
        <script type="text/javascript" src="header.js"></script>
        <div id="test"></div>

        <script type="text/javascript" src="../js/d3.js"></script>
        <script type="text/javascript" src="../js/crossfilter.js"></script>
        <script type="text/javascript" src="../js/dc.js"></script>
        <script type="text/javascript">
            var chart = dc.pieChart("#test");
            d3.csv("/data/example_data_dc.csv", function (error, experiments) {
                var ndx = crossfilter(experiments),
                        runDimension = ndx.dimension(function (d) {
                            return d.Region;
                        })
                speedSumGroup = runDimension.group().reduceSum(function (d) {
                    return d.Amount;
                });
                chart
                        .width(768)
                        .height(480)
                        .dimension(runDimension)
                        .group(speedSumGroup)
                        .legend(dc.legend())
                        // workaround for #703: not enough data is accessible through .label() to display percentages
                        .on('pretransition', function (chart) {
                            chart.selectAll('text.pie-slice').text(function (d) {
                                return d.data.key + ' ' + dc.utils.printSingleValue((d.endAngle - d.startAngle) / (2 * Math.PI) * 100) + '%';
                            })
                        });
                chart.render();
            });
        </script>

    </div>
</body>

No comments:

Post a Comment

Landing Spicoli in the Wind

Many know by now that I have three Blade 200 S RC helicopters in my fleet: Speck - for training Spot - for maintenance exercises Spicol...