D3 - Radial Progress Chart: A Start
I had heard enough stories and rumors about the challenges of the glorious D3 to pique my interest. It was time I greeted the beast first-hand.
I started a group project with a few friends from Hackbright to develop a simple task and goal-managing web app. Each team member took on a new challenge they were interested in, mine being d3.js. The radial progress chart was the most fitting (image above) so I got started by downloading the free code from Vizuly.
The code comes with a test JS and test HTML file. Each are thoroughly commented, making it easy to start playing with the code. With the HTML rendered in the browser (right-click the HTML file and click 'Open in Browser'), I quickly found that dynamically manipulating the data would be the most trying part. Here, I share my solutions. This is not the only solution, nor may it be the most efficient. It is simply my approach. Without further ado:
Unless you like to see the same chart repeated three times, start by changing the hard-coded data to 0 in the forEach function (see line 107). This function is meant for setting general properties for all three charts.
The code directly below allows for setting unique properties for every chart. Set a .data(var) property for each component (lines 126, 135 and 144). Here, I hard-coded a, b and c respectively to change the chart progress. Eventually, I will write a function that updates the variables. I've changed all the hard-coded labels from '80, $80, 80%' to percentage format (lines 131, 140 and 149) as my team's app will measure task completion. The arcThickness (lines 129, 138 and 147) to '.12' match for all charts. Of course, feel free to change the visuals to suit your needs.
The browser now displays:
Still not quite identical visually, I update the .startAngle() and .endAngle() to 180 (lines 126, 127, 135, 136, 144 and 145) so that the chart is completely circular.
Ahh, congruency:
Overarching advice for those attempting to D3:
Proceed with caution. For every tiny change you make, refresh the browser and make sure nothing has gone awry.
Don't forget about the Javascript Console.