valex · February 4, 2019 20:01
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>

 <head>
    <meta charset='utf-8' />
    <title>Simple Bar chart</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.8.0/d3.min.js" charset="utf-8"></script>
    <style>
        body {
            font-family: "Arial", sans-serif;
        }

        .bar {
            fill: #5f89ad;
        }

        .axis {
            font-size: 13px;
        }

        .axis path,
        .axis line {
            fill: none;
            display: none;
        }

        .label {
            font-size: 13px;
        }
    </style>

 </head>

 <body>

 <div id="graphic"></div>

 <script>
    var appendDelay = 2000;
    var oneYearDelay = 15000;

    var data = [{
            "name": "Apples",
            "value": 20,
            "end_value":27
        },
        {
            "name": "Bananas",
            "value": 12,
            "end_value":20
        },
        {
            "name": "Grapes",
            "value": 19,
            "end_value":12
        },
        {
            "name": "Lemons",
            "value": 5,
            "end_value":9
        },
        {
            "name": "Limes",
            "value": 16,
            "end_value":30
        },
        {
            "name": "Oranges",
            "value": 26,
            "end_value":3
        },
        {
            "name": "Pears",
            "value": 30,
            "end_value":25
        }];

    //sort bars based on value
    data = data.sort(function (a, b) {
        return d3.ascending(a.value, b.value);
    })

    //set up svg using margin conventions - we'll need plenty of room on the left for labels
    var margin = {
        top: 15,
        right: 30,
        bottom: 15,
        left: 60
    };

    var width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;

    var svg = d3.select("#graphic").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 + ")");

    // The initial display.
    update(data);

    function update(data){
        var appendTransition = d3.transition()
            .duration(appendDelay)
            .ease(d3.easeLinear);

        var chartTransition = d3.transition()
            .duration(oneYearDelay)
            .ease(d3.easeLinear);


        var x = d3.scaleLinear()
            .range([0, width])
            .domain([0, d3.max(data, function (d) {
                return d.value;
            })]);

        var y = d3.scaleBand()
            .range([height, 0], .1)
            .domain(data.map(function (d) {
                return d.name;
            }))
            .paddingInner(0.1);

        //make y axis to show bar names
        var yAxis = d3.axisLeft()
            .scale(y)
            //no tick marks
            .tickSize(0)
        //.orient("left");

        var gy = svg.append("g")
            .attr("class", "y axis")
            .call(yAxis)

        var bars = svg.selectAll(".bar")
            .data(data)
            .enter()
            .append("g")

        //append rects
        bars.append("rect")
            .attr("class", "bar")
            .attr("y", function (d) {
                return y(d.name) + y.bandwidth()/2;
            })
            .attr("height", 0)
            .attr("x", 0)
            .attr("width", function (d) {
                return x(d.value);
            })
            .transition()
            .duration(appendDelay)
            .ease(d3.easeLinear)
            .attr("height", y.bandwidth())
            .attr("y", function (d) {
                return y(d.name);
            })
            .transition()
            .duration(oneYearDelay)
            .ease(d3.easeLinear)
            .attrTween("width", function(d,i) {
                return function(t) {
                    return x(d.value) + t * (x(d.end_value) - x(d.value))
                };
            });


        //add a value label to the right of each bar
        bars.append("text")
            .attr("class", "label")
            //y position of the label is halfway down the bar
            .attr("y", function (d) {
                return y(d.name) + y.bandwidth() / 2 + 4;
            })
            //x position is 3 pixels to the right of the bar
            .attr("x", function (d) {
                return x(d.value) + 3;
            })
            .text(function (d) {
                return d.value;
            })
            .transition()
            .delay(appendDelay)
            .duration(oneYearDelay)
            .ease(d3.easeLinear)
            .attrTween("x", function(d,i) {
                return function(t) {
                    return x(d.value) + 3 + t * (x(d.end_value) - x(d.value))
                };
            })
            .tween("text", function(d) {
                var i = d3.interpolate(d.value, d.end_value);
                return function(t) {
                    d3.select(this).text(d3.format(".1f")(i(t)));
                };
            });
    }

    function updateChart(){
        console.log('updateChart');
    }

    d3.interval(function() {

    }, 5000);
 </script>

 </body>

 </html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset='utf-8' />
	<title>Simple Bar chart</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.8.0/d3.min.js" charset="utf-8"></script>
	<style>
	body {
	font-family: "Arial", sans-serif;
	}

	.bar {
	fill: #5f89ad;
	}

	.axis {
	font-size: 13px;
	}

	.axis path,
	.axis line {
	fill: none;
	display: none;
	}

	.label {
	font-size: 13px;
	}
	</style>

	</head>

	<body>

	<div id="graphic"></div>

	<script>
	var appendDelay = 2000;
	var oneYearDelay = 15000;

	var data = [{
	"name": "Apples",
	"value": 20,
	"end_value":27
	},
	{
	"name": "Bananas",
	"value": 12,
	"end_value":20
	},
	{
	"name": "Grapes",
	"value": 19,
	"end_value":12
	},
	{
	"name": "Lemons",
	"value": 5,
	"end_value":9
	},
	{
	"name": "Limes",
	"value": 16,
	"end_value":30
	},
	{
	"name": "Oranges",
	"value": 26,
	"end_value":3
	},
	{
	"name": "Pears",
	"value": 30,
	"end_value":25
	}];

	//sort bars based on value
	data = data.sort(function (a, b) {
	return d3.ascending(a.value, b.value);
	})

	//set up svg using margin conventions - we'll need plenty of room on the left for labels
	var margin = {
	top: 15,
	right: 30,
	bottom: 15,
	left: 60
	};

	var width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var svg = d3.select("#graphic").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 + ")");

	// The initial display.
	update(data);

	function update(data){
	var appendTransition = d3.transition()
	.duration(appendDelay)
	.ease(d3.easeLinear);

	var chartTransition = d3.transition()
	.duration(oneYearDelay)
	.ease(d3.easeLinear);


	var x = d3.scaleLinear()
	.range([0, width])
	.domain([0, d3.max(data, function (d) {
	return d.value;
	})]);

	var y = d3.scaleBand()
	.range([height, 0], .1)
	.domain(data.map(function (d) {
	return d.name;
	}))
	.paddingInner(0.1);

	//make y axis to show bar names
	var yAxis = d3.axisLeft()
	.scale(y)
	//no tick marks
	.tickSize(0)
	//.orient("left");

	var gy = svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)

	var bars = svg.selectAll(".bar")
	.data(data)
	.enter()
	.append("g")

	//append rects
	bars.append("rect")
	.attr("class", "bar")
	.attr("y", function (d) {
	return y(d.name) + y.bandwidth()/2;
	})
	.attr("height", 0)
	.attr("x", 0)
	.attr("width", function (d) {
	return x(d.value);
	})
	.transition()
	.duration(appendDelay)
	.ease(d3.easeLinear)
	.attr("height", y.bandwidth())
	.attr("y", function (d) {
	return y(d.name);
	})
	.transition()
	.duration(oneYearDelay)
	.ease(d3.easeLinear)
	.attrTween("width", function(d,i) {
	return function(t) {
	return x(d.value) + t * (x(d.end_value) - x(d.value))
	};
	});


	//add a value label to the right of each bar
	bars.append("text")
	.attr("class", "label")
	//y position of the label is halfway down the bar
	.attr("y", function (d) {
	return y(d.name) + y.bandwidth() / 2 + 4;
	})
	//x position is 3 pixels to the right of the bar
	.attr("x", function (d) {
	return x(d.value) + 3;
	})
	.text(function (d) {
	return d.value;
	})
	.transition()
	.delay(appendDelay)
	.duration(oneYearDelay)
	.ease(d3.easeLinear)
	.attrTween("x", function(d,i) {
	return function(t) {
	return x(d.value) + 3 + t * (x(d.end_value) - x(d.value))
	};
	})
	.tween("text", function(d) {
	var i = d3.interpolate(d.value, d.end_value);
	return function(t) {
	d3.select(this).text(d3.format(".1f")(i(t)));
	};
	});
	}

	function updateChart(){
	console.log('updateChart');
	}

	d3.interval(function() {

	}, 5000);
	</script>

	</body>

	</html>