created by http://livecoding.io

options.json

{
    "libraries": [
        "d3"
    ],
    "mode": "javascript",
    "layout": "sketchpad mode"
}

water.css

body {
	font-family: Georgia, serif;
	font-size: 12pt;
}

.slip {
	width: 600px;
	border: solid 1px whitesmoke;
	margin: 10px auto;
	padding: 0 20px;
}

.note {
	color: darkGray;
}

.bar-outline {
	fill: whitesmoke;
}

water.html

<div id="container">
  Test
</div>

water.js

var input = livecoding.json;
 
var slips = d3.select("#container").selectAll(".slip")
	.data(input.bars)
	.text("Progress Bar");
	
//Enter
slips.enter().append("div")
	.attr("class", "slip")
	.call(drawSlip);
	
function drawSlip(selection) {
	selection.append("h2").text(function(d){ return d.name });
	selection.append("p")
		.attr("class", "note")
		.text(function(d){ return d.note })
	;
	
	var bar = selection.append("svg")
		.attr("class", "bar")
		.attr("width", 500)
		.attr("height", 50)
		.append("g");
	
	bar.append("rect")
		.attr("class", "bar-outline")
		.attr("width", input.barWidth)
		.attr("height", 20)
		.attr("x", 20);
	
	var progress = bar.append("rect")
		.attr("class", "progress")
		.attr("width",	0)
		.attr("height", 20)
		.attr("x", 20);
	
	 progress.transition()
 		.duration(1000)
 		.attr("width", function(d) { 
 			console.log(d);
			var percentage=(d.current-d.start)/(d.end-d.start);
			console.log(percentage);
			return percentage*input.barWidth;
		});
	
}

function update() {
	input = {
		barWidth : 400,
		bars:[
			{
			type: "manual-count",
			name: "First Test",
			note: null,
			start: 0,
			end: 100,
			current: 100
			},	
			{
			type: "manual-count",
			name: null,
			note: "This is a note test",
			start: 0,
			end: 1000,
			current: 900
			},
			{
			type: "manual-count",
			name: "This bar has both a title...",
			note: "...and a note",
			start: 0,
			end: 100,
			current: 8
			},
		]
	
	};
}
 
//Exit
slips.exit().remove();

water.json

{
    "barWidth" : 400,
	"bars":[
		{
		"type": "manual-count",
		"name": "First Test",
		"note": null,
		"start": 0,
		"end": 100,
		"current": 30
		},	
		{
		"type": "manual-count",
		"name": null,
		"note": "This is a note test",
		"start": 0,
		"end": 1000,
		"current": 800
		},
		{
		"type": "manual-count",
		"name": "This bar has both a title...",
		"note": "...and a note",
		"start": 0,
		"end": 100,
		"current": 89
		}
	]
}