tomeustace/index.html

## index.html
<!DOCTYPE html>
<head> <meta charset="utf-8"> </head>
<body>
    <div class="flex-container">
        <h2>D3 Bar Chart Updates</h2>
        <div id="target" class="row"></div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>

    <script>
        var margin, width, height, parseDate, x, y, xAxis, yAxis, svg;
        var data = [ { "user": "Mary", "value": 13 },{ "user": "Bill", "value": 13 },{ "user": "Sue", "value": 13 }, { "user": "Bob", "value": 13 },{ "user": "Tim", "value": 13 } ];

        createBar();
        initialise(data);

        var countUpdates = 0;

        //wrap these in interval
        var interval = setInterval(function() {
          var min = 5;
          var max = 20;

          if(countUpdates > 10) clearInterval(interval);

          data.forEach(function(item) {
            item.value = Math.round(Math.random() * (max - min) + min);
          });

          updateBar(data);
          countUpdates += 1;

        }, 2500);


        function createBar() {
          margin = { top: 40, right: 20, bottom: 70, left: 40 },
          width = 300 - margin.left - margin.right,
          height = 350 + margin.top + margin.bottom;

          y = d3.scale.linear().range([0, (height/2)]);
          x = d3.scale.ordinal().rangeBands([0, width], .10);

          xAxis = d3.svg.axis()
              .scale(x)
              .orient("bottom");

          svg = d3.select("#target").append("svg")
              .attr("width", width + margin.left + margin.right)
              .attr("height", height + margin.top + margin.bottom)
              .append("g")
              .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
        }

        function initialise(data) {

            y.domain([0, d3.max(data, function(d) {
                return d.value;
            })]);

            x.domain(data.map(function(d) {
                return d.user;
            }));

            //append and call xAxis
            svg.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis);
        }

        function updateBar(data) {

            // UPDATE Existing data
            svg.selectAll('rect')
                .style("fill", "green")
                .style("opacity", "0.5")
                .data(data)
                .transition()
                .duration(200)
                .delay(function(d, i)
                {
                    return i / data.length * 1000;
                })
                .duration(500)
                .attr("y", function(d)
                {
                    return height - y(d.value);
                })
                .attr("height", function(d)
                {
                    return y(d.value);
                })
                .style("opacity", "1")
                .style("filter", "url(#drop-shadow)")
                .style("fill", function(d)
                {
                    return "rgb(0, 0, " + (d.value * 10) + ")";
                });

            //Update all labels
            svg.selectAll(".labels")
                .data(data)
                .transition()
                .delay(function(d, i)
                {
                    return i / data.length * 1000;
                })
                .duration(500)
                .text(function(d)
                {
                    return d.value;
                })
                .attr("x", function(d, i)
                {
                    return (i * x.rangeBand()) + (x.rangeBand() / 2) + (i *
                        i);
                })
                .attr("y", function(d)
                {
                    return height - y(d.value) + 30;
                })
                .attr("font-family", "sans-serif")
                .attr("font-size", "12px")
                .attr("fill", "white");

            // ENTER
            // create rect and labels
            svg.selectAll('rect')
                .data(data)
                .enter()
                .append("rect")
                .style("fill", "steelblue")
                .attr("x", function(d)
                {
                    return x(d.user);
                })
                .attr("width", x.rangeBand())
                .attr("height", function(d)
                {
                    return y(d.value);
                })
                .transition()
                .duration(1000)
                .attr("y", function(d)
                {
                    return height - y(d.value);
                })
                .attr("height", function(d)
                {
                    return y(d.value);
                });

            svg.selectAll(".labels")
                .data(data)
                .enter()
                .append('text')
                .text(function(d)
                {
                    return d.value;
                })
                .attr('class', 'labels')
                .attr("x", function(d, i)
                {
                    return (i * x.rangeBand()) + x.rangeBand() / 2;
                })
                .attr("y", function(d)
                {
                    return height;
                })
                .attr("font-family", "sans-serif")
                .attr("font-size", "12px")
                .attr("fill", "green");

            var defs = svg.append("defs");

            var filter = defs.append("filter")
                .attr("id", "drop-shadow")
                .attr("height", "130%");

            filter.append("feGaussianBlur")
                .attr("in", "SourceAlpha")
                .attr("stdDeviation", 5)
                .attr("result", "blur");

            filter.append("feOffset")
                .attr("in", "blur")
                .attr("dx", 5)
                .attr("dy", 5)
                .attr("result", "offsetBlur");

            var feMerge = filter.append("feMerge");

            feMerge.append("feMergeNode")
                .attr("in", "offsetBlur")
            feMerge.append("feMergeNode")
                .attr("in", "SourceGraphic");
        }

    </script>
</body>

</html>
	<!DOCTYPE html>
	<head> <meta charset="utf-8"> </head>
	<body>
	<div class="flex-container">
	<h2>D3 Bar Chart Updates</h2>
	<div id="target" class="row"></div>
	</div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>

	<script>
	var margin, width, height, parseDate, x, y, xAxis, yAxis, svg;
	var data = [ { "user": "Mary", "value": 13 },{ "user": "Bill", "value": 13 },{ "user": "Sue", "value": 13 }, { "user": "Bob", "value": 13 },{ "user": "Tim", "value": 13 } ];

	createBar();
	initialise(data);

	var countUpdates = 0;

	//wrap these in interval
	var interval = setInterval(function() {
	var min = 5;
	var max = 20;

	if(countUpdates > 10) clearInterval(interval);

	data.forEach(function(item) {
	item.value = Math.round(Math.random() * (max - min) + min);
	});

	updateBar(data);
	countUpdates += 1;

	}, 2500);


	function createBar() {
	margin = { top: 40, right: 20, bottom: 70, left: 40 },
	width = 300 - margin.left - margin.right,
	height = 350 + margin.top + margin.bottom;

	y = d3.scale.linear().range([0, (height/2)]);
	x = d3.scale.ordinal().rangeBands([0, width], .10);

	xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom");

	svg = d3.select("#target").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
	}

	function initialise(data) {

	y.domain([0, d3.max(data, function(d) {
	return d.value;
	})]);

	x.domain(data.map(function(d) {
	return d.user;
	}));

	//append and call xAxis
	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);
	}

	function updateBar(data) {

	// UPDATE Existing data
	svg.selectAll('rect')
	.style("fill", "green")
	.style("opacity", "0.5")
	.data(data)
	.transition()
	.duration(200)
	.delay(function(d, i)
	{
	return i / data.length * 1000;
	})
	.duration(500)
	.attr("y", function(d)
	{
	return height - y(d.value);
	})
	.attr("height", function(d)
	{
	return y(d.value);
	})
	.style("opacity", "1")
	.style("filter", "url(#drop-shadow)")
	.style("fill", function(d)
	{
	return "rgb(0, 0, " + (d.value * 10) + ")";
	});

	//Update all labels
	svg.selectAll(".labels")
	.data(data)
	.transition()
	.delay(function(d, i)
	{
	return i / data.length * 1000;
	})
	.duration(500)
	.text(function(d)
	{
	return d.value;
	})
	.attr("x", function(d, i)
	{
	return (i * x.rangeBand()) + (x.rangeBand() / 2) + (i *
	i);
	})
	.attr("y", function(d)
	{
	return height - y(d.value) + 30;
	})
	.attr("font-family", "sans-serif")
	.attr("font-size", "12px")
	.attr("fill", "white");

	// ENTER
	// create rect and labels
	svg.selectAll('rect')
	.data(data)
	.enter()
	.append("rect")
	.style("fill", "steelblue")
	.attr("x", function(d)
	{
	return x(d.user);
	})
	.attr("width", x.rangeBand())
	.attr("height", function(d)
	{
	return y(d.value);
	})
	.transition()
	.duration(1000)
	.attr("y", function(d)
	{
	return height - y(d.value);
	})
	.attr("height", function(d)
	{
	return y(d.value);
	});

	svg.selectAll(".labels")
	.data(data)
	.enter()
	.append('text')
	.text(function(d)
	{
	return d.value;
	})
	.attr('class', 'labels')
	.attr("x", function(d, i)
	{
	return (i * x.rangeBand()) + x.rangeBand() / 2;
	})
	.attr("y", function(d)
	{
	return height;
	})
	.attr("font-family", "sans-serif")
	.attr("font-size", "12px")
	.attr("fill", "green");

	var defs = svg.append("defs");

	var filter = defs.append("filter")
	.attr("id", "drop-shadow")
	.attr("height", "130%");

	filter.append("feGaussianBlur")
	.attr("in", "SourceAlpha")
	.attr("stdDeviation", 5)
	.attr("result", "blur");

	filter.append("feOffset")
	.attr("in", "blur")
	.attr("dx", 5)
	.attr("dy", 5)
	.attr("result", "offsetBlur");

	var feMerge = filter.append("feMerge");

	feMerge.append("feMergeNode")
	.attr("in", "offsetBlur")
	feMerge.append("feMergeNode")
	.attr("in", "SourceGraphic");
	}

	</script>
	</body>

	</html>