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

The source code for gliesians.com is for sale on Ebay.

I've decided to shut down gliesians.com and sell the source code. If anyone is looking to purchase the related source, you can find it...