nick3499 · March 5, 2017 17:06 · nick3499 · Mar 5, 2017
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
    <meta charset=utf-8>
 <head>
    <meta name="description" content="D3.js v4, bubble plot, world bank,
                                     .axisLeft, .scaleLinear, .axisBottom,
                                     d3.scaleOrdinal(d3.schemeCategory10)" />
 </head>
 <body>
    <!-- .axisLeft, .scaleLinear, .axisBottom,
    d3.scaleOrdinal(d3.schemeCategory10) -->
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <!-- .attrs({}) -->
    <script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
    <script>
        var url = "https://gist.githubusercontent.com/d3byex/30231953acaa9433a46f/raw/6c7eb1c562de92bdf8d0cd99c6912048161c187e/fert_pop_exp.csv";
        d3.csv(url, function (error, rawData) {
            var data = rawData.map(function (d) {
                return {
                    CountryCode: d.CountryCode,
                    CountryName: d.CountryName,
                    LifeExp: +d.LifeExp, // unary operator converts str to int
                    FertRate: +d.FertRate,
                    Population: +d.Population,
                    Region: d.Region
                }
            });
            var minBubbleSize = 5, maxBubbleSize = 50;
            var margin = {
                left: maxBubbleSize, top: maxBubbleSize,
                bottom: maxBubbleSize, right: maxBubbleSize
            };
            var axisPadding = 10;
            var graphWidth = 500, graphHeight = 400;
            var totalWidth = graphWidth + margin.left + margin.right;
            var totalHeight = graphHeight + margin.top + margin.bottom;
            var lifeExpectancy = data.map(function (d) { return d.LifeExp; });
            var fertilityRate = data.map(function (d) { return d.FertRate; });
            var population = data.map(function (d) { return d.Population; });
            var regions = data.map(function (d) { return d.Region; });

            var xScale = d3.scaleLinear() // v4
                      .domain([d3.min(lifeExpectancy), d3.max(lifeExpectancy)])
                      .range([0, graphWidth]);
            var yScale = d3.scaleLinear() // v4
                           .domain([d3.max(fertilityRate), 0])
                           .range([0, graphHeight]);

            var popDomain = [d3.min(population), d3.max(population)];
            var popScale = d3.scaleLinear() // v4
                             .domain(popDomain)
                             .range([minBubbleSize, maxBubbleSize]);

            var uniqueRegions = d3.set(regions)
                                  .values();
            var regionColorMap = d3.scaleOrdinal(d3.schemeCategory10) // v4
                                   .domain(uniqueRegions);

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

            var yAxis = d3.axisLeft().scale(yScale); // v4
            var yAxisNodes = svg.append('g')
 .attr('transform', 'translate(' + (margin.left - axisPadding) + ',' + margin.top + ')')
                                .call(yAxis);
            styleAxisNodes(yAxisNodes);

            var xAxis = d3.axisBottom().scale(xScale); // v4
            var xAxisNodes = svg.append('g')
 .attr('transform', 'translate(' + margin.left + ',' + (totalHeight - margin.bottom + axisPadding) + ')')
                                .call(xAxis);
            styleAxisNodes(xAxisNodes);

            svg.append('g')
        .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
               .selectAll('circle')
               .data(data)
               .enter()
               .append('circle')
               .each(function (d) {
             d3.select(this)
               .attrs({
                   cx: xScale(d.LifeExp), cy: yScale(d.FertRate),
                   r: popScale(d.Population), fill: regionColorMap(d.Region),
                   stroke: regionColorMap(d.Region), 'fill-opacity': 0.5 });});
        }); // d3.csv
        function styleAxisNodes(axisNodes) {
        axisNodes.selectAll('.domain')
                 .attrs({ fill: 'none', 'stroke-width': 1, stroke: 'black' });
        axisNodes.selectAll('.tick line')
                 .attrs({ fill: 'none', 'stroke-width': 1, stroke: 'black' });
        }
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<meta charset=utf-8>
	<head>
	<meta name="description" content="D3.js v4, bubble plot, world bank,
	.axisLeft, .scaleLinear, .axisBottom,
	d3.scaleOrdinal(d3.schemeCategory10)" />
	</head>
	<body>
	<!-- .axisLeft, .scaleLinear, .axisBottom,
	d3.scaleOrdinal(d3.schemeCategory10) -->
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<!-- .attrs({}) -->
	<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
	<script>
	var url = "https://gist.githubusercontent.com/d3byex/30231953acaa9433a46f/raw/6c7eb1c562de92bdf8d0cd99c6912048161c187e/fert_pop_exp.csv";
	d3.csv(url, function (error, rawData) {
	var data = rawData.map(function (d) {
	return {
	CountryCode: d.CountryCode,
	CountryName: d.CountryName,
	LifeExp: +d.LifeExp, // unary operator converts str to int
	FertRate: +d.FertRate,
	Population: +d.Population,
	Region: d.Region
	}
	});
	var minBubbleSize = 5, maxBubbleSize = 50;
	var margin = {
	left: maxBubbleSize, top: maxBubbleSize,
	bottom: maxBubbleSize, right: maxBubbleSize
	};
	var axisPadding = 10;
	var graphWidth = 500, graphHeight = 400;
	var totalWidth = graphWidth + margin.left + margin.right;
	var totalHeight = graphHeight + margin.top + margin.bottom;
	var lifeExpectancy = data.map(function (d) { return d.LifeExp; });
	var fertilityRate = data.map(function (d) { return d.FertRate; });
	var population = data.map(function (d) { return d.Population; });
	var regions = data.map(function (d) { return d.Region; });

	var xScale = d3.scaleLinear() // v4
	.domain([d3.min(lifeExpectancy), d3.max(lifeExpectancy)])
	.range([0, graphWidth]);
	var yScale = d3.scaleLinear() // v4
	.domain([d3.max(fertilityRate), 0])
	.range([0, graphHeight]);

	var popDomain = [d3.min(population), d3.max(population)];
	var popScale = d3.scaleLinear() // v4
	.domain(popDomain)
	.range([minBubbleSize, maxBubbleSize]);

	var uniqueRegions = d3.set(regions)
	.values();
	var regionColorMap = d3.scaleOrdinal(d3.schemeCategory10) // v4
	.domain(uniqueRegions);

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

	var yAxis = d3.axisLeft().scale(yScale); // v4
	var yAxisNodes = svg.append('g')
	.attr('transform', 'translate(' + (margin.left - axisPadding) + ',' + margin.top + ')')
	.call(yAxis);
	styleAxisNodes(yAxisNodes);

	var xAxis = d3.axisBottom().scale(xScale); // v4
	var xAxisNodes = svg.append('g')
	.attr('transform', 'translate(' + margin.left + ',' + (totalHeight - margin.bottom + axisPadding) + ')')
	.call(xAxis);
	styleAxisNodes(xAxisNodes);

	svg.append('g')
	.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
	.selectAll('circle')
	.data(data)
	.enter()
	.append('circle')
	.each(function (d) {
	d3.select(this)
	.attrs({
	cx: xScale(d.LifeExp), cy: yScale(d.FertRate),
	r: popScale(d.Population), fill: regionColorMap(d.Region),
	stroke: regionColorMap(d.Region), 'fill-opacity': 0.5 });});
	}); // d3.csv
	function styleAxisNodes(axisNodes) {
	axisNodes.selectAll('.domain')
	.attrs({ fill: 'none', 'stroke-width': 1, stroke: 'black' });
	axisNodes.selectAll('.tick line')
	.attrs({ fill: 'none', 'stroke-width': 1, stroke: 'black' });
	}
	</script>
	</body>
	</html>