Animated Donut Chart
How do I make an animated donut chart?
Using d3.js and yep.. What is a animated donut chart? How do you make a animated donut chart? This script and codes were developed by Joshua P. Larson on 23 July 2022, Saturday.
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> <script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.2/d3.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Animated Donut Chart - Script Codes CSS Codes
.progress-meter .background { fill: #ccc;
}
.progress-meter .foreground { fill: #000; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;
}
.progress-meter text { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 2em; font-weight: bold;
}
Animated Donut Chart - Script Codes JS Codes
var width = 960, height = 500, num = 0, τ = 2 * Math.PI, // http://tauday.com/tau-manifesto formatPercent = d3.format(".0%");
// An arc function with all values bound except the endAngle. So, to compute an
// SVG path string for a given angle, we pass an object with an endAngle
// property to the `arc` function, and it will return the corresponding string.
var arc = d3.svg.arc() .innerRadius(230) .outerRadius(240) .startAngle(0);
// Create the SVG container, and apply a transform such that the origin is the
// center of the canvas. This way, we don't need to position arcs individually.
var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("class", "progress-meter") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
// Add the background arc, from 0 to 100% (τ).
var background = svg.append("path") .datum({endAngle: τ}) .attr("class", "background") .attr("d", arc);
// Add the foreground arc in orange, currently showing 12.7%.
var foreground = svg.append("path") .datum({endAngle: 0 * τ}) .attr("class", "foreground") .attr("d", arc);
var text = svg.append("text") .attr("text-anchor", "middle") .attr("dy", ".35em");
// Every so often, start a transition to a new random angle. Use transition.call
// (identical to selection.call) so that we can encapsulate the logic for
// tweening the arc in a separate function below.
/*setInterval(function() { foreground.transition() .duration(750) .call(arcTween, Math.random() * τ);
}, 1500);*/
foreground.transition() .duration(750) .call(arcTween, .9 * τ);
// Creates a tween on the specified transition's "d" attribute, transitioning
// any selected arcs from their current angle to the specified new angle.
function arcTween(transition, newAngle) { // The function passed to attrTween is invoked for each selected element when // the transition starts, and for each element returns the interpolator to use // over the course of transition. This function is thus responsible for // determining the starting angle of the transition (which is pulled from the // element's bound datum, d.endAngle), and the ending angle (simply the // newAngle argument to the enclosing function). transition.attrTween("d", function(d) { // To interpolate between the two angles, we use the default d3.interpolate. // (Internally, this maps to d3.interpolateNumber, since both of the // arguments to d3.interpolate are numbers.) The returned function takes a // single argument t and returns a number between the starting angle and the // ending angle. When t = 0, it returns d.endAngle; when t = 1, it returns // newAngle; and for 0 < t < 1 it returns an angle in-between. var interpolate = d3.interpolate(d.endAngle, newAngle); // The return value of the attrTween is also a function: the function that // we want to run for each tick of the transition. Because we used // attrTween("d"), the return value of this last function will be set to the // "d" attribute at every tick. (It's also possible to use transition.tween // to run arbitrary code for every tick, say if you want to set multiple // attributes from a single function.) The argument t ranges from 0, at the // start of the transition, to 1, at the end. return function(t) { // Calculate the current arc angle based on the transition time, t. Since // the t for the transition and the t for the interpolate both range from // 0 to 1, we can pass t directly to the interpolator. // // Note that the interpolated angle is written into the element's bound // data object! This is important: it means that if the transition were // interrupted, the data bound to the element would still be consistent // with its appearance. Whenever we start a new arc transition, the // correct starting angle can be inferred from the data. d.endAngle = interpolate(t); num = interpolate(t) / τ; text.text(formatPercent(num)); // Lastly, compute the arc path given the updated data! In effect, this // transition uses data-space interpolation: the data is interpolated // (that is, the end angle) rather than the path string itself. // Interpolating the angles in polar coordinates, rather than the raw path // string, produces valid intermediate arcs during the transition. return arc(d); }; });
}
Developer | Joshua P. Larson |
Username | jplhomer |
Uploaded | July 23, 2022 |
Rating | 3 |
Size | 3,808 Kb |
Views | 46,552 |
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!
Name | Size |
Fixed Nav HoverIntent Example | 4,444 Kb |
Displaying a Google Street View of your current location | 2,275 Kb |
Verge-Style Homepage Tiles | 5,147 Kb |
JS Geolocator | 2,653 Kb |
CSS-Only Art Direction | 4,086 Kb |
Hey React | 3,959 Kb |
Seamless Scrolling Background | 2,535 Kb |
Lightweight Quiz Widget | 4,596 Kb |
Webkit Text Masking | 1,975 Kb |
Populate Native HTML Datalist with AJAX | 2,763 Kb |
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!
Name | Username | Size |
Material design - button rainbow circle | Kunukn | 3,652 Kb |
Popup Modal | Aldlevine | 3,696 Kb |
Simple Flat Menu | Jeplaa | 2,467 Kb |
Wikipedia Viewer | Thalpha | 4,426 Kb |
A Pen by Jess | Jessamyne | 5,100 Kb |
Collapsing Widget | Er40 | 4,279 Kb |
Pagepilling.js | Blossk | 6,554 Kb |
A Pen by Kenny Mark | Kennymark | 5,574 Kb |
Android Logo with HTML and CSS | Wifi | 2,000 Kb |
Perspective Origin Demo | Agelber | 3,614 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!