valex · November 7, 2017 15:59
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
    <meta charset="utf-8">
 </head>

 <body>
    <script src="http://d3js.org/d3.v4.min.js"></script>
    <script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
 <script>
    var url = "https://gist.githubusercontent.com/d3byex/a85e18c77b31628e9e94/raw/ddb806f1299114952bc5dc7baf6413dafc8bbb13/fert_pop_lac.csv";

    d3.csv(url, function (error, rawData) {
        var data = rawData.map(function (d) {
            return {
                CountryCode: d.CountryCode,
                CountryName: d.CountryName,
                LifeExp: +d.LifeExp,
                FertRate: +d.FertRate,
                Population: +d.Population,
                Region: d.Region
            };
        });

        var width = 950, height = 400;
        var svg = d3.select('body')
            .append('svg')
            .attrs({
                width: width,
                height: height
            });

        var lifeExpectancy = data.map(function (d) { return d.LifeExp });

        // d3.extent(array[, accessor])
        // Returns the minimum and maximum value in the given array using natural order.
        // https://github.com/d3/d3-array#extent
        var lifeExpectancyExtent = d3.extent(lifeExpectancy);

        // d3.range([start, ]stop[, step])
        // Returns an array containing an arithmetic progression, similar to the Python built-in range.
        // https://github.com/d3/d3-array#range
        var xScale = d3.scaleBand()
            .domain(d3.range(data.length))
            .padding(0.05)
            .rangeRound([0, width]);

        var yScale = d3.scaleLinear()
            .domain([lifeExpectancyExtent[0] * 0.8, lifeExpectancyExtent[1] * 1.0])
            .range([0, height]);

        var colorScale = d3.scaleLinear()
            .domain([lifeExpectancyExtent[0], lifeExpectancyExtent[1]])
            .range([50, 250]);

        var barGrowDuration = 1000;
        var returnToColorDuration = 250;
        var minOpacity = 0.3;
        var maxOpacity = 1.0;
        var barWidth = xScale.bandwidth();
        var halfBarWidth = barWidth / 2;
        var verticalTextOffsetX = 4;
        var verticalTextOffsetY = 30;

        svg.selectAll('rect')
            .data(data)
            .enter()
            .append('rect')
            .attrs({
                width: barWidth,
                height: 0,
                y: height
            })
            .on('mouseover', function (d) {
                d3.select('text.vert#' + d.CountryCode).style('opacity', maxOpacity);
                d3.select(this).attr('fill', 'orange');
            })
            .on('mouseout', function (d) {
                d3.select('text.vert#' + d.CountryCode).style('opacity', minOpacity);
                d3.select(this)
                    .transition()
                    .duration(returnToColorDuration)
                    .attr('fill', 'rgb(0, 0, ' + Math.floor(colorScale(d.LifeExp)) + ')');
            })
            .transition()
            .duration(barGrowDuration)
            .attrs({
                height: function (d) { return yScale(d.LifeExp); },
                x: function (d, i) { return xScale(i); },
                y: function (d) {
                    return height - yScale(d.LifeExp);
                },
                fill: function (d) {
                    return 'rgb(0, 0, ' + Math.floor(colorScale(d.LifeExp)) + ')';
                }
            });

        svg.selectAll('text')
            .data(data)
            .enter()
            .append('text')
            .text(function (d) { return d.CountryCode; })
            .attrs({
                x: function (d, i) { return xScale(i) + barWidth / 2; },
                y: height,
                fill: 'white',
                'text-anchor': 'middle',
                'font-family': 'sans-serif',
                'font-size': '11px'
            })
            .transition()
            .duration(barGrowDuration)
            .attr('y', function (d) { return height - yScale(d.LifeExp) + 14; });

        svg.selectAll('text.vert')
            .data(data)
            .enter()
            .append('text')
            .text(function (d) { return d.LifeExp.toFixed(2) + ' ' + d.CountryName; })
            .attrs({
                id: function (d) { return d.CountryCode; },
                opacity: minOpacity,
                transform: function (d, i) {
                    var x = xScale(i) + halfBarWidth - verticalTextOffsetX;
                    var y = height - yScale(d.LifeExp) + verticalTextOffsetY;
                    var t = 'translate(' + x + ',' + y + ') rotate(90)';
                    return t;
                },
                'class': 'vert',
                'font-family': 'sans-serif',
                'font-size': 11,
                'fill': 'white'
            });
    });

 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	</head>

	<body>
	<script src="http://d3js.org/d3.v4.min.js"></script>
	<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
	<script>
	var url = "https://gist.githubusercontent.com/d3byex/a85e18c77b31628e9e94/raw/ddb806f1299114952bc5dc7baf6413dafc8bbb13/fert_pop_lac.csv";

	d3.csv(url, function (error, rawData) {
	var data = rawData.map(function (d) {
	return {
	CountryCode: d.CountryCode,
	CountryName: d.CountryName,
	LifeExp: +d.LifeExp,
	FertRate: +d.FertRate,
	Population: +d.Population,
	Region: d.Region
	};
	});

	var width = 950, height = 400;
	var svg = d3.select('body')
	.append('svg')
	.attrs({
	width: width,
	height: height
	});

	var lifeExpectancy = data.map(function (d) { return d.LifeExp });

	// d3.extent(array[, accessor])
	// Returns the minimum and maximum value in the given array using natural order.
	// https://github.com/d3/d3-array#extent
	var lifeExpectancyExtent = d3.extent(lifeExpectancy);

	// d3.range([start, ]stop[, step])
	// Returns an array containing an arithmetic progression, similar to the Python built-in range.
	// https://github.com/d3/d3-array#range
	var xScale = d3.scaleBand()
	.domain(d3.range(data.length))
	.padding(0.05)
	.rangeRound([0, width]);

	var yScale = d3.scaleLinear()
	.domain([lifeExpectancyExtent[0] * 0.8, lifeExpectancyExtent[1] * 1.0])
	.range([0, height]);

	var colorScale = d3.scaleLinear()
	.domain([lifeExpectancyExtent[0], lifeExpectancyExtent[1]])
	.range([50, 250]);

	var barGrowDuration = 1000;
	var returnToColorDuration = 250;
	var minOpacity = 0.3;
	var maxOpacity = 1.0;
	var barWidth = xScale.bandwidth();
	var halfBarWidth = barWidth / 2;
	var verticalTextOffsetX = 4;
	var verticalTextOffsetY = 30;

	svg.selectAll('rect')
	.data(data)
	.enter()
	.append('rect')
	.attrs({
	width: barWidth,
	height: 0,
	y: height
	})
	.on('mouseover', function (d) {
	d3.select('text.vert#' + d.CountryCode).style('opacity', maxOpacity);
	d3.select(this).attr('fill', 'orange');
	})
	.on('mouseout', function (d) {
	d3.select('text.vert#' + d.CountryCode).style('opacity', minOpacity);
	d3.select(this)
	.transition()
	.duration(returnToColorDuration)
	.attr('fill', 'rgb(0, 0, ' + Math.floor(colorScale(d.LifeExp)) + ')');
	})
	.transition()
	.duration(barGrowDuration)
	.attrs({
	height: function (d) { return yScale(d.LifeExp); },
	x: function (d, i) { return xScale(i); },
	y: function (d) {
	return height - yScale(d.LifeExp);
	},
	fill: function (d) {
	return 'rgb(0, 0, ' + Math.floor(colorScale(d.LifeExp)) + ')';
	}
	});

	svg.selectAll('text')
	.data(data)
	.enter()
	.append('text')
	.text(function (d) { return d.CountryCode; })
	.attrs({
	x: function (d, i) { return xScale(i) + barWidth / 2; },
	y: height,
	fill: 'white',
	'text-anchor': 'middle',
	'font-family': 'sans-serif',
	'font-size': '11px'
	})
	.transition()
	.duration(barGrowDuration)
	.attr('y', function (d) { return height - yScale(d.LifeExp) + 14; });

	svg.selectAll('text.vert')
	.data(data)
	.enter()
	.append('text')
	.text(function (d) { return d.LifeExp.toFixed(2) + ' ' + d.CountryName; })
	.attrs({
	id: function (d) { return d.CountryCode; },
	opacity: minOpacity,
	transform: function (d, i) {
	var x = xScale(i) + halfBarWidth - verticalTextOffsetX;
	var y = height - yScale(d.LifeExp) + verticalTextOffsetY;
	var t = 'translate(' + x + ',' + y + ') rotate(90)';
	return t;
	},
	'class': 'vert',
	'font-family': 'sans-serif',
	'font-size': 11,
	'fill': 'white'
	});
	});

	</script>
	</body>
	</html>
No results found