All examples By author By category About

mendozaline

Full window Github gist

Module 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>David's Charts</title>

#containerOne,
        #containerTwo,
        #containerThree,
        #containerFour {
            margin: 1%;
            background-color: white;
            max-width: 475px;
            float: left;
        }

svg {
            background-color: white;
            margin: auto;
        }

h1 {
            font-size: 25px;
            margin: 1%;
            width: 90%;
        }

p {
            font-size: 17.5px;
            margin: 1%;
            width: 90%;
        }

a:link {
            text-decoration: none;
            color: RoyalBlue;
        }

a:hover {
            text-decoration: underline;
        }

a:active {
            color: steelBlue;
        }

g.bar:hover rect {
            opacity: 0.8;
        }

g.bar text {
            font-size: 14px;
            text-anchor: end;
            opacity: 1.0;
        }

g.bar:hover text {
            font-size: 15px;
            font-weight: bold;
            opacity: 1.0;
            fill: black;
        }
			
        .axis path,
        .axis line {
            fill: none;
            stroke: black;
            shape-rendering: crispEdges;
        }
			
        .axis text {
            font-family: sans-serif;
            font-size: 14px;
        }

.y.axis path,
        .y.axis line {
            opacity: 0.0;
        }
        
        .gridlines {
            opacity: 1.0;
            stroke: white;
            stroke-width: 1.5;                        
        }        
		</style>
</head>

<body>
    <div>
        <h1>Population Pyramids: China Edition</h1>

<p><b>How to read this chart:</b> The <b style="color:dodgerBlue">blue bars</b> show the age distribution among <b style="color:dodgerBlue">Chinese men</b> and the <b style="color:crimson">red bars</b> show the age distribution among <b style="color:crimson">Chinese women</b>. For example, in 1990, 1.7% of Chinese women were between the ages of 70-74 compared to 1.4% of men in the same age range.
        </p>

<p><b>Context:</b> Chinese women are more likely than Chinese men to be older. This is probably because women tend to live longer than men, but also because fewer women have been born since the implementation of the one-child policy in 1979.     
        </p>

<p><b>Source:</b> <a href="https://www.census.gov/population/international/data/">U.S. 
Census Bureau</a>
        </p>
    </div>

<div id="containerThree">
        <h1>2030 (projection)</h1>
    </div>
    
    <div id="containerFour">
        <h1>2045 (projection)</h1>
    </div>
    
    <script type="text/javascript">
        var w = 475;
        var h = 550;
        var padding = {top: 20, bottom: 20, left: 50, right: 75};

var widthScale = d3.scale.linear()
            .range([ 0, w - padding.left - padding.right]);

var heightScale = d3.scale.ordinal()
            .rangeRoundBands([ padding.top, h - padding.bottom ], 0.15);
        
        var xAxis = d3.svg.axis()
            .scale(widthScale)
            .tickValues([ 0, 2, 4, 6, 8, 10, 12])
            .tickFormat(function(d) { return d + "%"; })
            .orient("bottom");

var yAxis = d3.svg.axis()
            .scale(heightScale)
            .orient("left");

var svg = d3.select("#containerOne")
            .append("svg")
            .attr({
                width: w,
                height: h,
            });
        
        var svg2 = d3.select("#containerTwo")
            .append("svg")
            .attr({
                width: w,
                height: h,
            });

var svg3 = d3.select("#containerThree")
            .append("svg")
            .attr({
                width: w,
                height: h,
            });
        
        var svg4 = d3.select("#containerFour")
            .append("svg")
            .attr({
                width: w,
                height: h,
            });

d3.csv("chinaPop.csv", function(data) {

widthScale.domain([ 0, 12 ]);
            heightScale.domain(data.map(function(d) { return d.age; } ));

var groups = svg.selectAll("g")
                .data(data)
                .enter()
                .append("g")
                .attr("class", "bar");

var rects = groups.append("rect")
                .attr({
                    x: padding.left,
                    y: function(d) { return heightScale(d.age);},
                    width: 0,
                    height: heightScale.rangeBand(),
                    opacity: 0,
                });

var groups2 = svg2.selectAll("g")
                .data(data)
                .enter()
                .append("g")
                .attr("class", "bar");

var rects3 = groups2.append("rect")
                .attr({
                    x: padding.left,
                    y: function(d) { return heightScale(d.age);},
                    width: 0,
                    height: heightScale.rangeBand(),
                    opacity: 0,
                });

var groups3 = svg3.selectAll("g")
                .data(data)
                .enter()
                .append("g")
                .attr("class", "bar");

var rects5 = groups3.append("rect")
                .attr({
                    x: padding.left,
                    y: function(d) { return heightScale(d.age);},
                    width: 0,
                    height: heightScale.rangeBand(),
                    opacity: 0,
                });

var groups4 = svg4.selectAll("g")
                .data(data)
                .enter()
                .append("g")
                .attr("class", "bar");

var rects7 = groups4.append("rect")
                .attr({
                    x: padding.left,
                    y: function(d) { return heightScale(d.age);},
                    width: 0,
                    height: heightScale.rangeBand(),
                    opacity: 0,
                });

for (var i = 0; i <= 10; i += 2) {
                svg.append("line")
                    .attr({
                        x1: widthScale(i) + padding.left ,
                        y1: 0,
                        x2: widthScale(i) + padding.left ,
                        y2: h - padding.bottom,
                        "class": "gridlines",
                    });
            }

svg.append("text")
                .attr({
                    x: w - padding.left - padding.right + 63,
                    y: 14,
                    fill: "crimson"
                })
                .text("W");

svg.append("text")
                .attr({
                    x: w - padding.left - padding.right + 98,
                    y: 14,
                    fill: "dodgerBlue"
                })
                .text("M");

groups.append("text")
                .attr({
                    x: w - padding.left - padding.right + 75,
                    y: function(d) { return heightScale(d.age) + 14; },
                    fill: "crimson"
                })
                .text(function(d) {
                    return d.female1990;
                });

groups.append("text")
                .attr({
                    x: w - padding.left - padding.right + 110,
                    y: function(d) { return heightScale(d.age) + 14; },
                    fill: "dodgerBlue"
                })
                .text(function(d) {
                    return d.male1990;
                });

rects.transition()
                .delay(function(d, i) { return i * 15; })
                .duration(1000)
                .attr({
                    width: function(d) { return widthScale(d.female1990);},
                    fill: "crimson",
                    opacity: 0.6,
                });

svg.append("g")
                .attr({
                    "class": "x axis",
                    "transform": "translate(" + padding.left + "," + (h - padding.bottom) + ")",
                })
                .call(xAxis);

svg.append("g")
                .attr("class", "y axis")
                .attr("transform", "translate(" + ( padding.left) + ", 0)")
                .call(yAxis);

for (var i = 0; i <= 12; i += 2) {
                svg2.append("line")
                    .attr({
                        x1: widthScale(i) + padding.left ,
                        y1: 0,
                        x2: widthScale(i) + padding.left ,
                        y2: h - padding.bottom,
                        "class": "gridlines",
                    });
            }

svg2.append("text")
                .attr({
                    x: w - padding.left - padding.right + 63,
                    y: 14,
                    fill: "crimson"
                })
                .text("W");

svg2.append("text")
                .attr({
                    x: w - padding.left - padding.right + 98,
                    y: 14,
                    fill: "dodgerBlue"
                })
                .text("M");

groups2.append("text")
                .attr({
                    x: w - padding.left - padding.right + 75,
                    y: function(d) { return heightScale(d.age) + 14; },
                    fill: "crimson"
                })
                .text(function(d) {
                    return d.female2015;
                });

groups2.append("text")
                .attr({
                    x: w - padding.left - padding.right + 110,
                    y: function(d) { return heightScale(d.age) + 14; },
                    fill: "dodgerBlue"
                })
                .text(function(d) {
                    return d.male2015;
                });

rects3.transition()
                .delay(function(d, i) { return i * 15; })
                .duration(1000)
                .attr({
                    width: function(d) { return widthScale(d.female2015);},
                    fill: "crimson",
                    opacity: 0.6,
                });

svg2.append("g")
                .attr({
                    "class": "x axis",
                    "transform": "translate(" + padding.left + "," + (h - padding.bottom) + ")",
                })
                .call(xAxis);

svg2.append("g")
                .attr("class", "y axis")
                .attr("transform", "translate(" + ( padding.left) + ", 0)")
                .call(yAxis);

for (var i = 0; i <= 12; i += 2) {
                svg3.append("line")
                    .attr({
                        x1: widthScale(i) + padding.left ,
                        y1: 0,
                        x2: widthScale(i) + padding.left ,
                        y2: h - padding.bottom,
                        "class": "gridlines",
                    });
            }

svg3.append("text")
                .attr({
                    x: w - padding.left - padding.right + 63,
                    y: 14,
                    fill: "crimson"
                })
                .text("W");

svg3.append("text")
                .attr({
                    x: w - padding.left - padding.right + 98,
                    y: 14,
                    fill: "dodgerBlue"
                })
                .text("M");

groups3.append("text")
                .attr({
                    x: w - padding.left - padding.right + 75,
                    y: function(d) { return heightScale(d.age) + 14; },
                    fill: "crimson"
                })
                .text(function(d) {
                    return d.female2030;
                });

groups3.append("text")
                .attr({
                    x: w - padding.left - padding.right + 110,
                    y: function(d) { return heightScale(d.age) + 14; },
                    fill: "dodgerBlue"
                })
                .text(function(d) {
                    return d.male2030;
                });

rects5.transition()
                .delay(function(d, i) { return i * 15; })
                .duration(1000)
                .attr({
                    width: function(d) { return widthScale(d.female2030);},
                    fill: "crimson",
                    opacity: 0.6,
                });

svg3.append("g")
                .attr({
                    "class": "x axis",
                    "transform": "translate(" + padding.left + "," + (h - padding.bottom) + ")",
                })
                .call(xAxis);

svg3.append("g")
                .attr("class", "y axis")
                .attr("transform", "translate(" + ( padding.left) + ", 0)")
                .call(yAxis);

for (var i = 0; i <= 12; i += 2) {
                svg4.append("line")
                    .attr({
                        x1: widthScale(i) + padding.left ,
                        y1: 0,
                        x2: widthScale(i) + padding.left ,
                        y2: h - padding.bottom,
                        "class": "gridlines",
                    });
            }

svg4.append("text")
                .attr({
                    x: w - padding.left - padding.right + 63,
                    y: 14,
                    fill: "crimson"
                })
                .text("W");

svg4.append("text")
                .attr({
                    x: w - padding.left - padding.right + 98,
                    y: 14,
                    fill: "dodgerBlue"
                })
                .text("M");

groups4.append("text")
                .attr({
                    x: w - padding.left - padding.right + 75,
                    y: function(d) { return heightScale(d.age) + 14; },
                    fill: "crimson"
                })
                .text(function(d) {
                    return d.female2045;
                });

groups4.append("text")
                .attr({
                    x: w - padding.left - padding.right + 110,
                    y: function(d) { return heightScale(d.age) + 14; },
                    fill: "dodgerBlue"
                })
                .text(function(d) {
                    return d.male2045;
                });

rects7.transition()
                .delay(function(d, i) { return i * 15; })
                .duration(1000)
                .attr({
                    width: function(d) { return widthScale(d.female2045);},
                    fill: "crimson",
                    opacity: 0.6,
                });

svg4.append("g")
                .attr({
                    "class": "x axis",
                    "transform": "translate(" + padding.left + "," + (h - padding.bottom) + ")",
                })
                .call(xAxis);

svg4.append("g")
                .attr("class", "y axis")
                .attr("transform", "translate(" + ( padding.left) + ", 0)")
                .call(yAxis);

});

</script>
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js