score:1

Hopefully I'm understanding your question correctly!

Also note, if your data is in % (rather than radians), you'll have to add a d3.scale to convert [0,100] domain to [0, 2pi].

The below code mimics a single progress arc with two separate arcs. One for the 0-75% range and a second for above 75%. Both arcs draw based on the same data but the key is using min and max functions to clamp the data as it passes the 75% threshold.

For the first bar, the end angle is stopped when the progress passes 75%...

``````.attr('d', function(d){
progressArc.startAngle(0)
return progressArc.endAngle( Math.min(d,(3/2)*Math.PI) )();
})
``````

`Math.min(d,(3/2)*Math.PI)`

while for the second bar, the end angle only begins to change after the data passes 75%...

``````.attr('d', function(d){
progressArc.startAngle((3/2)*Math.PI)
return progressArc.endAngle( Math.max(d,(3/2)*Math.PI ))();
})
``````

`Math.max(d,(3/2)*Math.PI`

The end result looks like one bar changing color as it passes a threshold.

``````var height = 20,
width = 70,
progress = 3;

d3.select('div').append('svg')
.attr('width','100%')
.attr('viewBox','0 0 ' + width + ' ' + height)

d3.select('svg').append('g')
.attr('transform','translate('+width/2+','+height/2+')')
.attr('id','main')

var progressArc = d3.svg.arc()
.startAngle(0)
.endAngle(2*Math.PI)

var progressBar1 = d3.select('#main').append('g').attr('class','progressBar1'),
progressBar2 = d3.select('#main').append('g').attr('class','progressBar2');

progressBar1.selectAll('path')
.data([progress])
.enter()
.append('path')
.attr('d', function(d){
progressArc.startAngle(0)
return progressArc.endAngle( Math.min(d,(3/2)*Math.PI) )();
})

progressBar2.selectAll('path')
.data([progress])
.enter()
.append('path')
.attr('fill','red')
.attr('d', function(d){
progressArc.startAngle((3/2)*Math.PI)
return progressArc.endAngle( Math.max(d,(3/2)*Math.PI ))();
})

var update = function(){

progress = progress >= 2*Math.PI ? 0 : progress + Math.random()*(1/200)*Math.PI;

console.log(progress)
progressBar1.selectAll('path')
.data([progress])
.attr('d', function(d){
progressArc.startAngle(0)
return progressArc.endAngle( Math.min(d,(3/2)*Math.PI) )();
})

progressBar2.selectAll('path')
.data([progress])
.attr('d', function(d){
progressArc.startAngle((3/2)*Math.PI)
return progressArc.endAngle( Math.max(d,(3/2)*Math.PI ))();
})

}

setInterval( update, 12);``````
``````svg{
border: solid green 1px;
}``````
``````<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<div></div>``````