atul-github · August 29, 2015 14:23
diff --git a/index.html b/index.html
 <!--
 Author : Atul Pandit
 Email : [email protected] / [email protected]
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
    <title>Rotating Pie - Rainbow / Newton Disc in D3.js</title>
    <script src="http://d3js.org/d3.v3.min.js"></script>
 </head>
 <body>
    <script>
        function colors(i) {
            var rainbowcolors = ['#9400D3', '#4B0082', '#0000FF', '#00FF00', '#FFFF00', '#FF7F00', '#FF0000', '#FF0000', '#FF0000'];
            return rainbowcolors[i];
        }
        // Drawing Pie without using pie layout.
        function DrawPie(svg, data, cx, cy, r, startAngle) {
            var arcs = svg.selectAll('.arc')
                .data(data);

            arcs.enter()
                .append('path')
                .attr('id', function (d, i) {
                    return 'arc' + (i).toString();
                })
                .attr('class', 'arc')
                .style('stroke', function (d, i) {
                    return colors(i);
                })
                .style('fill', function (d, i) {
                    return colors(i);
                })
            ;
            //RotatePie(svg, startAngle);
            arcs.attr('d', function (d, i) {
                var rad = ((d.angle1 + startAngle) * Math.PI) / 180.0;
                var x1 = d.cx + d.r * Math.cos(rad);
                var y1 = d.cy + d.r * Math.sin(rad);

                var rad = ((d.angle2 + startAngle) * Math.PI) / 180.0;
                var x2 = d.cx + d.r * Math.cos(rad);
                var y2 = d.cy + d.r * Math.sin(rad);

                pathString = 'M' + x1 + ',' + y1 + ' ' + 'A' + d.r + ',' + d.r + ' 0 0,1 ' + x2 + ',' + y2 + ' L ' + d.cx + ',' + d.cy + ' Z ';
                return pathString;
            });

        }

        function RotatePie(svg, startAngle) {
            var arcs = svg.selectAll('.arc');
            var arcs = svg.selectAll('.arc');
            arcs.attr('transform', function (d, i) {
                var rotate = 'rotate(' + startAngle + ', ' + d.cx + ', ' + d.cy + ')';
                return rotate;
            });
        }
        var gContainerId, gCanvasId, gTopGroupId;
        var svg;

        function Initialize(containerId, cx, cy, r, piedata) {
            var height = document.getElementById(containerId).clientHeight;
            var width = document.getElementById(containerId).clientWidth;
            gContainerId = containerId;
            gCanvasId = containerId + '_canvas';
            gTopGroupId = containerId + '_topGroup';
            svg = d3.select("#" + containerId).append("svg")
                .attr({ "id": gCanvasId, "width": width, "height": height })
                .append("g")
                .attr({ "id": gTopGroupId, 'x': 0, 'y': 0, "width": width, "height": height })
            ;

            var startAngle = 0;
            svg.append('circle')
                .attr({ 'cx': cx, 'cy': cy, 'r': 2 })
                .style('fill', 'red');

            startAngle = 0;
            var svg = svg;
            var total = d3.sum(piedata);

            var data = [];
            var startAngle = 0;
            for (var i = 0; i < piedata.length; ++i) {
                var percent = (100 * piedata[i]) / total;
                var a1 = startAngle;
                var a2 = startAngle + (percent * 360) / 100
                data.push({ cx: cx, cy: cy, r: r, percent: percent, angle1: a1, angle2: a2 });
                startAngle += (percent * 360) / 100;
            }
            svg = d3.select('#' + gCanvasId);
            DrawPie(svg, data, cx, cy, r, 0);
        }

        var startStopFlag = null;
        var startAngle = 1;
        var speed = 1;

        function StartStopGame() {
            if (startStopFlag == null) {
                d3.timer(function () {
                    svg = d3.select('#' + gCanvasId);
                    RotatePie(svg, startAngle);
                    startAngle += parseInt(speed);
                    if (startStopFlag == null)
                        return true;
                    else
                        return false;
                }, 500);
                startStopFlag = 1;
                document.getElementById('startStop').innerHTML = 'Stop';
            }
            else {
                startStopFlag = null;
                document.getElementById('startStop').innerHTML = 'Start';
            }
        }

        function OnSpeedChange() {
            var o = document.getElementById('speed');
            speed = o.options[o.selectedIndex].value;
        }
    </script>
    <div id="mainDiv" style="width:960px; height:470px">
        <div id="drawAreaOuter" style="width:100%; height:100%; float:left; ">
            <div id="menuTop">
                <a id="startStop" href="javascript:StartStopGame()">Start</a> |
                Speed :
                <select id='speed' onchange="OnSpeedChange()">
                    <option value="1" selected="selected">Normal</option>
                    <option value="5">Fast</option>
                    <option value="10">Faster</option>
                    <option value="30">Fastest</option>
                </select>
            </div>
            <div id="drawArea" style="width:100%; height:100%;">
            </div>
        </div>
    </div>

    <script>
        var piedata = [100, 100, 100, 100, 100, 100, 100];
        var svg = Initialize('drawArea', 450, 250, 200, piedata);
        StartStopGame();
    </script>
 </body>
 </html>
diff --git a/thumbnail.png b/thumbnail.png
 data:image/png;base64,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
	<!--
	Author : Atul Pandit
	Email : [email protected] / [email protected]
	-->
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<title>Rotating Pie - Rainbow / Newton Disc in D3.js</title>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	</head>
	<body>
	<script>
	function colors(i) {
	var rainbowcolors = ['#9400D3', '#4B0082', '#0000FF', '#00FF00', '#FFFF00', '#FF7F00', '#FF0000', '#FF0000', '#FF0000'];
	return rainbowcolors[i];
	}
	// Drawing Pie without using pie layout.
	function DrawPie(svg, data, cx, cy, r, startAngle) {
	var arcs = svg.selectAll('.arc')
	.data(data);

	arcs.enter()
	.append('path')
	.attr('id', function (d, i) {
	return 'arc' + (i).toString();
	})
	.attr('class', 'arc')
	.style('stroke', function (d, i) {
	return colors(i);
	})
	.style('fill', function (d, i) {
	return colors(i);
	})
	;
	//RotatePie(svg, startAngle);
	arcs.attr('d', function (d, i) {
	var rad = ((d.angle1 + startAngle) * Math.PI) / 180.0;
	var x1 = d.cx + d.r * Math.cos(rad);
	var y1 = d.cy + d.r * Math.sin(rad);

	var rad = ((d.angle2 + startAngle) * Math.PI) / 180.0;
	var x2 = d.cx + d.r * Math.cos(rad);
	var y2 = d.cy + d.r * Math.sin(rad);

	pathString = 'M' + x1 + ',' + y1 + ' ' + 'A' + d.r + ',' + d.r + ' 0 0,1 ' + x2 + ',' + y2 + ' L ' + d.cx + ',' + d.cy + ' Z ';
	return pathString;
	});

	}

	function RotatePie(svg, startAngle) {
	var arcs = svg.selectAll('.arc');
	var arcs = svg.selectAll('.arc');
	arcs.attr('transform', function (d, i) {
	var rotate = 'rotate(' + startAngle + ', ' + d.cx + ', ' + d.cy + ')';
	return rotate;
	});
	}
	var gContainerId, gCanvasId, gTopGroupId;
	var svg;

	function Initialize(containerId, cx, cy, r, piedata) {
	var height = document.getElementById(containerId).clientHeight;
	var width = document.getElementById(containerId).clientWidth;
	gContainerId = containerId;
	gCanvasId = containerId + '_canvas';
	gTopGroupId = containerId + '_topGroup';
	svg = d3.select("#" + containerId).append("svg")
	.attr({ "id": gCanvasId, "width": width, "height": height })
	.append("g")
	.attr({ "id": gTopGroupId, 'x': 0, 'y': 0, "width": width, "height": height })
	;

	var startAngle = 0;
	svg.append('circle')
	.attr({ 'cx': cx, 'cy': cy, 'r': 2 })
	.style('fill', 'red');

	startAngle = 0;
	var svg = svg;
	var total = d3.sum(piedata);

	var data = [];
	var startAngle = 0;
	for (var i = 0; i < piedata.length; ++i) {
	var percent = (100 * piedata[i]) / total;
	var a1 = startAngle;
	var a2 = startAngle + (percent * 360) / 100
	data.push({ cx: cx, cy: cy, r: r, percent: percent, angle1: a1, angle2: a2 });
	startAngle += (percent * 360) / 100;
	}
	svg = d3.select('#' + gCanvasId);
	DrawPie(svg, data, cx, cy, r, 0);
	}

	var startStopFlag = null;
	var startAngle = 1;
	var speed = 1;

	function StartStopGame() {
	if (startStopFlag == null) {
	d3.timer(function () {
	svg = d3.select('#' + gCanvasId);
	RotatePie(svg, startAngle);
	startAngle += parseInt(speed);
	if (startStopFlag == null)
	return true;
	else
	return false;
	}, 500);
	startStopFlag = 1;
	document.getElementById('startStop').innerHTML = 'Stop';
	}
	else {
	startStopFlag = null;
	document.getElementById('startStop').innerHTML = 'Start';
	}
	}

	function OnSpeedChange() {
	var o = document.getElementById('speed');
	speed = o.options[o.selectedIndex].value;
	}
	</script>
	<div id="mainDiv" style="width:960px; height:470px">
	<div id="drawAreaOuter" style="width:100%; height:100%; float:left; ">
	<div id="menuTop">
	<a id="startStop" href="javascript:StartStopGame()">Start</a> \|
	Speed :
	<select id='speed' onchange="OnSpeedChange()">
	<option value="1" selected="selected">Normal</option>
	<option value="5">Fast</option>
	<option value="10">Faster</option>
	<option value="30">Fastest</option>
	</select>
	</div>
	<div id="drawArea" style="width:100%; height:100%;">
	</div>
	</div>
	</div>

	<script>
	var piedata = [100, 100, 100, 100, 100, 100, 100];
	var svg = Initialize('drawArea', 450, 250, 200, piedata);
	StartStopGame();
	</script>
	</body>
	</html>