Step Progress Bar based on data with animated transitions. setInterval is just for demonstration, use updateProgressBar(element) instead.
Last active
January 29, 2018 12:05
-
-
Save vkuchinov/c43323186765cb14ddd292e71790f0ec to your computer and use it in GitHub Desktop.
D3.JS Step Progress Bar
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset='utf-8'> | |
| <body> | |
| <script src='http://d3js.org/d3.v4.min.js'></script> | |
| <script> | |
| var colors = { green: '#4DC87F', lightGreen: '#D9F0E3' }; | |
| var width = 960, height = 480, offset = 48; | |
| width += offset * 2; | |
| height += offset * 2; | |
| var dimensions = '' + 0 + ' ' + 0 + ' ' + width + ' ' + height; | |
| var svg = d3.select('body').append('svg') | |
| .attr('id', 'scene', true) | |
| .attr('preserveAspectRatio', 'xMinYMin meet') | |
| .attr('viewBox', dimensions) | |
| .classed('svg-content', true); | |
| var steps = ['0', '1', '2', '3', '4', '5']; | |
| stepWidth = (width - offset * 2) / (steps.length - 1), | |
| currentStep = '0'; | |
| var progressBar = svg.append('g') | |
| .attr('transform', 'translate(' + offset + ',' + offset + ')') | |
| .style('pointer-events', 'none'); | |
| var progressBackground = progressBar.append('rect') | |
| .attr('fill', colors.lightGreen) | |
| .attr('height', 8) | |
| .attr('width', width - offset * 2) | |
| .attr('rx', 4) | |
| .attr('ry', 4); | |
| var progress = progressBar.append('rect') | |
| .attr('fill', colors.green) | |
| .attr('height', 8) | |
| .attr('width', 0) | |
| .attr('rx', 4) | |
| .attr('ry', 4); | |
| progress.transition() | |
| .duration(1000) | |
| .attr('width', function(){ | |
| var index = steps.indexOf(currentStep); | |
| return (index + 1) * stepWidth; | |
| }); | |
| progressBar.selectAll('circle') | |
| .data(steps) | |
| .enter() | |
| .append('circle') | |
| .attr('id', function(d, i){ return 'step_' + i; }) | |
| .attr('cx', function(d, i){ return i * stepWidth; }) | |
| .attr('cy', 4) | |
| .attr('r', 20) | |
| .attr('fill', '#FFFFFF') | |
| .attr('stroke', colors.lightGreen) | |
| .attr('stroke-width', 6) | |
| progressBar.selectAll('text') | |
| .data(steps) | |
| .enter() | |
| .append('text') | |
| .attr('id', function(d, i){ return 'label_' + i; }) | |
| .attr('dx', function(d, i){ return i * stepWidth; }) | |
| .attr('dy', 10) | |
| .attr('text-anchor', 'middle') | |
| .text(function(d, i) { return i + 1; }) | |
| updateProgressBar("0"); | |
| //self-running demo | |
| setInterval(function() { updateProgressBar(Math.floor(Math.random() * (steps.length - 1)).toString()); } , 2500) | |
| function setupProgressBar(data_){ | |
| var output = []; | |
| for(var i = 0; i < data_.length; i++){ output.push(data_[i].id.toString()); } | |
| return output; | |
| } | |
| function updateProgressBar(step_){ | |
| progress.transition() | |
| .duration(1000) | |
| .attr('fill', colors.green) | |
| .attr('width', function(){ | |
| var index = steps.indexOf(step_); | |
| return (index) * stepWidth; | |
| }); | |
| for(var i = 0; i < steps.length; i++){ | |
| if(i <= steps.indexOf(step_)) { | |
| d3.select('#step_' + i).attr('fill', colors.green).attr('stroke', colors.green); | |
| d3.select('#label_' + i).attr('fill', '#FFFFFF'); | |
| } else { | |
| d3.select('#step_' + i).attr('fill', '#FFFFFF').attr('stroke', colors.lightGreen); | |
| d3.select('#label_' + i).attr('fill', '#000000'); | |
| } | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment