Week 9: Grouped Bars

Contraceptive-Types-select-sub-saharan-countries-2013-2014.csv

grouped-bars.js

var margin = {
        top: 20,
        right: 150,
        bottom: 100,
        left: 40
    },
    width = 1150 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x0 = d3.scale.ordinal()
    .rangeRoundBands([0, width], .2);

var x1 = d3.scale.ordinal(); // the actual bars inside each group

var y = d3.scale.linear()
    .range([height, 0]);

var color = d3.scale.category20c();

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

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(d3.format(".2s"));

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

var myTooltip = d3.select("body")
    .append("div")
    .attr("class", "myTooltip");

d3.csv("Contraceptive-Types-select-sub-saharan-countries-2013-2014.csv", function (error, data) {

    if (error) {
        console.log(error);
    }

    var methodNames = d3.keys(data[0]).filter(function (d) {
        return (d !== "Country" && d !== "Year" && d !== "Age" && d !== "Any method" && d !== "Any modern method" && d !== "Any traditional method");
    });

    data.sort(function (a, b) {
        return b["Any method"] - a["Any method"];
    });

    data.forEach(function (d) {
        d.methods = methodNames.map(function (name) {
            return {
                name: name,
                value: +d[name],
            };
        });
    });

    x0.domain(data.map(function (d) {
        return d.Country;
    }));
    x1.domain(methodNames).rangeRoundBands([0, x0.rangeBand()]);
    y.domain([0, d3.max(data, function (d) {
        return d3.max(d.methods, function (d) {
            return d.value;
        });
    })]);

    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis)
        .selectAll("text")
        .attr("dy", ".5em")
        .attr("transform", "rotate(-30)")
        .style("text-anchor", "end");

    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
        .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text("% Used");

    var state = svg.selectAll(".country")
        .data(data)
        .enter().append("g")
        .attr("class", "g")
        .attr("transform", function (d) {
            return "translate(" + x0(d.Country) + ",0)";
        });

    var rectangles = state.selectAll("rect")
        .data(function (d) {
            return d.methods;
        })
        .enter().append("rect")
        .attr("width", x1.rangeBand())
        .attr("x", function (d) {
            return x1(d.name);
        })
        .attr("y", function (d) {
            return y(d.value);
        })
        .attr("height", function (d) {
            return height - y(d.value);
        })
        .style("fill", function (d) {
            return color(d.name);
        });

    var legend = svg.selectAll(".legend")
        .data(methodNames.slice().reverse())
        .enter().append("g")
        .attr("class", "legend")
        .attr("transform", function (d, i) {
            return "translate(0," + i * 20 + ")";
        });

    legend.append("rect")
        .attr("x", width - 18)
        .attr("width", 18)
        .attr("height", 18)
        .style("fill", color);

    legend.append("text")
        .attr("x", width - 24)
        .attr("y", 9)
        .attr("dy", ".35em")
        .style("text-anchor", "end")
        .text(function (d) {
            return d;
        });


    /*======================================================================
      Mouse Events
    ======================================================================*/

    rectangles
        .on("mouseover", mouseoverFunc)
        .on("mousemove", mousemoveFunc)
        .on("mouseout", mouseoutFunc);


    function mouseoverFunc(d) {
        console.log(d);
        console.log("moused over", d.x);
            console.log("method", d.method, "percent", d.y);
            myTooltip
                .style("display", null)
                .html("<p>" + d.name + ": " + d.value + "%</p>");
        
    }

    function mousemoveFunc(d) {
        myTooltip
            .style("top", (d3.event.pageY - 5) + "px")
            .style("left", (d3.event.pageX + 10) + "px");
    }

    function mouseoutFunc(d) {
        return myTooltip.style("display", "none"); // this sets it to invisible!
    }

    /*======================================================================
    ======================================================================*/


});

index.html

<!DOCTYPE html>
<!-- Modification of an example by Scott Murray from Knight D3 course -->
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Grouped Bars</title>
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic|Lora:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="main.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

    <body>

        <h1 class="header">Types of Contraception Used in Sub Saharan Africa</h1>

        <h2 class="header"></h2>
        <p id="sources" class="header">Source: <a href="http://www.un.org/en/development/desa/population/publications/dataset/contraception/wcu2015.shtml">United Nations, Department of Economic and Social Affairs</a>. Only countries with complete data from the years 2013-2014 are represented.</p>
         <div id="chart"></div>

        <script type="text/javascript" src="grouped-bars.js"></script>
    </body>

</html>

main.css

body {
    box-sizing: border-box;
}

svg {
    /*    padding: 1em;*/
    background-color: rgb(255, 255, 255);
}

svg rect:hover {
    opacity: .3;
}

svg circle:hover {
    opacity: .3;
}

svg g {
    fill: #ACACAC;
}

svg g text.label,
svg g text.ylabel {
    fill: #2A2A2A;
}

svg {
    background-color: white;
}

.axis path,
.axis line {
    fill: none;
    stroke: #D3D3D3;
    stroke-width: 1px;
}

.line {
    stroke: #FF9900;
    fill: none;
    stroke-opacity: 25%;
    stroke-width: 1px;
}

.unfocused {
    stroke-opacity: 25%;
}

.focused {
    stroke-width: 2px;
    stroke-opacity: 100%;
}

.MDG {
    stroke: #2A2A2A;
    fill: none;
    stroke-opacity: 100%;
    stroke-width: 1px;
}

.axis text, .legend text,
.aside {
    font-family: sans-serif;
    font-size: 11px;
}

.header {
    width: 70%;
    margin-left: 16px;
}

h1 {
    font-family: 'Roboto', sans-serif;
    font-size: 1.75em;
    margin-top: 1em;
    font-weight: 700;
    color: #0099FF;
    text-transform: uppercase;
}

h2 {
    font-family: 'Roboto', sans-serif;
    text-align: justify;
    line-height: 1.25em;
    font-weight: 700;
    font-size: 1em;
}

p {
    font-family: 'Lora', serif;
    font-size: 15px;
    line-height: 1.25em;
    text-align: justify;
}

#sources {
    font-size: 12px;
    font-style: italic;
    color: rgb(0, 0, 0);
    font-style: italic;
}

a {
    color: #0099FF;
    text-decoration: none;
}

a:hover {
    color: rgb(255, 0, 153);
}

.sans {
    font-family: sans-serif;
}

.orange {
    color: #FF9900;
}

.blue {
    color: #0099FF;
}

.red {
    color: red;
}

.myTooltip {
    position: absolute;
    z-index: 10;
}

.myTooltip p {
    font-family: 'Roboto', sans-serif;
    background-color: rgba(255, 255, 255, .8);
    padding: .5em 1em;
    font-size: 12px;
    line-height: 17px;
    color: black;
}

.tooltipHeader {
    font-weight: 700;
    font-size: 12.5px;
}