Animated Donut Chart

Developer
AaronChuo (小狂)
Size
4,147 Kb
Views
24,288
  1. Animated Donut Chart Previews
  2. Animated Donut Chart HTML Codes
  3. Animated Donut Chart CSS Codes
  4. Animated Donut Chart JS Codes

How do I make an animated donut chart?

Designed by D3.js. What is a animated donut chart? How do you make a animated donut chart? This script and codes were developed by AaronChuo (小狂) on 11 September 2022, Sunday.

Animated Donut Chart Previews
IQ Test

Animated Donut Chart - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated Donut Chart</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="container"></div>
<!--滑鼠移至各弧形上觀看各地區資料--> <script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Animated Donut Chart - Script Codes CSS Codes

body { font-size: 16px;
}
.group { cursor: pointer;
}
.arc { stroke: #FFF; stroke-width: 3px;
}
.arc.hover { fill: #C66; stroke-width: 0;
}
.name { text-anchor: middle;
}
.name.hover { fill: #C66;
}
.line { stroke: #C70;
}
.line.hover { stroke: #C66; stroke-width: 3px;
}
.heading { fill: #C70; font-size: 2.2em; text-anchor: middle;
}
.count { fill: #FA0; font-size: 1.6em; text-anchor: middle;
}
.heading.hover,
.count.hover { fill: #C66;
}
.arc,
.line,
.name { -webkit-transition: all 250ms ease; transition: all 250ms ease;
}

Animated Donut Chart - Script Codes JS Codes

(function(d3) { 'use strict'; // 資料來源：政府資料開放平臺 var dataset = [ {name: '北部', value: 10648802}, {name: '中部', value: 5232469}, {name: '南部', value: 6305750}, {name: '東部', value: 1015652}, {name: '外島', value: 242861} ]; var WIDTH = window.innerWidth, HEIGHT = window.innerHeight; var vis, // 整個圖表 select('g') pie, // 用來轉換資料給弧形用 d3.layout.pie() arc, // 做弧形用 d3.svg.arc() heading, // 標題 colors = ['#FC0', '#EB0', '#DA0', '#C90', '#B80'], // 弧形用到的顏色 pickColor, // 顏色選擇函式 reqId, // 註冊瀏覽器動畫用 count = 0, // 給動畫跑計數用 radius = Math.min(WIDTH, HEIGHT) / 2, // 甜甜圈圖的半徑 outerRadius = radius / 2, // 甜甜圈圖的外半徑 innerRadius = radius / 2.8, // 甜甜圈圖的內半徑 // 計算所有人口的總和 (singleton) total = (function() { for(var sum = 0, i = 0; i < dataset.length; i++) { sum += dataset[i].value; } return sum; })(); // 初始化圖表 var init = function() { vis = d3.select('#container') .append('svg:svg') .attr('width', WIDTH) .attr('height', HEIGHT) .append('g') .attr('transform', 'translate('+ WIDTH / 2 + ',' + HEIGHT / 2 +')'); pie = d3.layout.pie() .sort(null) .startAngle(0) .endAngle(2 * Math.PI) .value(function(d) { return d.value; }); arc = d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius); pickColor = d3.scale.ordinal().range(colors); vis.selectAll('g') .data(pie(dataset)) .enter() .append('svg:g') .attr('class', 'group') .on('mouseover', mouseOverHandler) .on('mouseout', mouseOutHandler) .append('path') .attr('class', 'arc') .attr('fill', function(d, i) { return pickColor(i); }) .transition() .delay(function(d, i) { return i * 500; }) .duration(500) .attrTween('d', angleTween); vis.selectAll('g') .append('svg:text') .attr('class', 'name') .attr('dy', 6) .attr('fill', '#FFF') .attr('transform', function(d) { return 'translate(' + arc.outerRadius(outerRadius * 2.5).centroid(d)[0] + ',' + arc.outerRadius(outerRadius * 2.5).centroid(d)[1] + ')'; }) .transition() .delay(function(d, i) { return i * 500 + 500; }) .duration(500) .ease('cubic-in-out') .attrTween('fill', fillTween) .text(function(d) { return d.data.name; }) .style('font-size', radius * 0.06 + 'px'); vis.selectAll('g') .append('svg:line') .attr('x1', function(d) { return arc.outerRadius(outerRadius * 1.3).centroid(d)[0]; }) .attr('y1', function(d) { return arc.outerRadius(outerRadius * 1.3).centroid(d)[1]; }) .transition() .delay(function(d, i) { return i * 500 + 500; }) .duration(500) .attrTween('x2', xTween) .attrTween('y2', yTween) .attr('class', 'line'); vis.append('svg:text') .attr('class', 'heading') .style('font-size', 5 + radius * 0.1 + 'px') .text('台灣總人口'); vis.append('svg:text') .attr('class', 'count') .attr('dy', 20 + radius * 0.05) .style('font-size', radius * 0.08 + 'px'); runCounter(); }; // 為數字加上逗點 var numericFormat = function(num) { var reg = /(\d+)(\d{3})/, num = '' + parseInt(num); while(reg.test(num)) { num = num.replace(reg, '$1' + ',' + '$2'); } return num; }; // 計數效果 var runCounter = function() { count += 56789; if(count < total) { d3.select('.count').text(numericFormat(count) + '人'); reqId = requestAnimationFrame(runCounter); } else { d3.select('.count').text(numericFormat(total) + '人'); cancelAnimationFrame(reqId); } }; // 滑鼠移至弧形上的效果 var mouseOverHandler = function(d) { cancelAnimationFrame(reqId); d3.select(this).selectAll('path, text, line').classed({'hover': true});	d3.select(this).select('.name').style('font-size', radius * 0.07 + 'px'); d3.select('.heading').classed({'hover': true}).text(d.data.name); d3.select('.count').classed({'hover': true}).text(numericFormat(d.value) + '人'); }; // 滑鼠離開弧形後的效果 var mouseOutHandler = function() { reqId = requestAnimationFrame(runCounter); d3.select(this).selectAll('path, text, line').classed({'hover': false});	d3.select(this).select('.name').style('font-size', radius * 0.06 + 'px'); d3.select('.heading').classed({'hover': false}).text('台灣總人口'); d3.select('.count').classed({'hover': false}); }; // 弧形角度的動畫 var angleTween = function(d) { var i = d3.interpolate(d.startAngle, d.endAngle); return function(t) { d.endAngle = i(t); arc.innerRadius(innerRadius).outerRadius(outerRadius); return arc(d); } }; // 文字顏色的動畫 var fillTween = function(d) { var i = d3.interpolate('#FFF', '#C70'); return function(t) { return i(t); } }; // 線條的動畫 (x座標) var xTween = function(d) { var i = d3.interpolate(arc.outerRadius(outerRadius * 1.3).centroid(d)[0], arc.outerRadius(outerRadius * 2.2).centroid(d)[0]); return function(t) { return i(t); } }; // 線條的動畫 (y座標) var yTween = function(d) { var i = d3.interpolate(arc.outerRadius(outerRadius * 1.3).centroid(d)[1], arc.outerRadius(outerRadius * 2.2).centroid(d)[1]); return function(t) { return i(t); } }; return init();
})(window.d3);
// Author: Aaron Cho (aka 小狂)
Animated Donut Chart - Script Codes
Animated Donut Chart - Script Codes
Home Page Home
Developer AaronChuo (小狂)
Username aaronchuo
Uploaded September 11, 2022
Rating 3.5
Size 4,147 Kb
Views 24,288
Do you need developer help for Animated Donut Chart?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

AaronChuo (小狂) (aaronchuo) Script Codes
Name
Wave
Scifi-style Interative Form
I drink and I know things
BBQ by pure CSS, no image, no javascript
The Rocket
Fly to Future
Gradient Color Spin
Happy Birthday to Me
Poached Egg by pure CSS
Glitch Image
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!