Knight D3 Module 6

<!DOCTYPE html>
<html>
    <head>
        <title>Knight D3 Module 6</title>
        <style>
            body {
                margin: 0;
            }

.axis path, .axis line {
              fill: none;
              stroke: #000;
              shape-rendering: crispEdges;
            }

.line {
                stroke: black;
                stroke-width: 1px;
                opacity: 0.5;
                fill: none;
            }

.line:hover {
                stroke: red;
                stroke-width: 2px;
                opacity: 1;
            }

.axis text, text.axis {
                font-size: 12px;
            }

text.centered {
                text-anchor: middle;
            }

h1, p, text {
                font-family: avenir, sans-serif;
            }

h1 {
                font-weight: initial;
                margin: 4px 50px;
            }

p {
                margin: 4px 50px;
            }

text.label {
                fill: red;
                opacity: 0.7;
                font-size: 12px;
            }
        </style>
    </head>
    <body>
        <h1>Women Living with HIV</h1>
        <p>Shows total infant mortality rate in about 100 countries. <a href=https://noceilings.org/data>NoCeilings</a> series HIVNFEIN.</p>
        <svg></svg>
        <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
        <script>
            var html_height = 125,
                margin = {top: 20, right: 100, bottom: 35, left: 50},
                width = 1000 - margin.left - margin.right,
                height = 800 - margin.top - margin.bottom - html_height;

var dateFormat = d3.time.format("%Y");
            var years = d3.range(1995, 2012+1)

var x = d3.time.scale()
                .domain([years[0], years[years.length-1]].map(function(d){return dateFormat.parse(""+d)}))
                .range([0, width]);

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

var xAxis = d3.svg.axis()
                .scale(x)
                .orient("bottom")
                .tickFormat(dateFormat)

var yAxis = d3.svg.axis()
                .scale(y)
                .orient("left")
                .tickFormat(function(d){ return d/1e6 });

var line = d3.svg.line()
                .x(function(d){return x(d.year)})
                .y(function(d){return y(d.value)})

d3.csv("countries.csv", function(err, countries_raw){
                if (err) return console.error(err);
                var countries = d3.map(countries_raw, function(d){return d.iso;})
            d3.csv("HIVNFEIN.csv", function(row){
                row.years = years.map(function(year){
                    return {year: dateFormat.parse(""+year),
                            value: +row[year]};
                })
                return row
            }, function(err, data){
                if (err) return console.error(err);

y.domain([0, d3.max(data, function(d){ return d3.max(d.years, function(d2){return d2.value}) })])

var svg = d3.select("svg")
                    .attr("width", margin.left + width + margin.right)
                    .attr("height", margin.top + height + margin.bottom)
                  .append("g")
                    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")

svg.append("g")
                    .attr("class", "x axis")
                    .attr("transform", "translate(0," + height + ")")
                    .call(xAxis);
                svg.append("g")
                    .attr("transform", "rotate(270)")
                  .append("text")
                    .attr("x", -height/2)
                    .attr("y", -30)
                    .attr("class", "centered axis")
                    .text("Millions of women living with HIV")

svg.append("g")
                    .attr("class", "y axis")
                    .call(yAxis)
                svg.append("text")
                    .attr("x", width/2)
                    .attr("y", height+30)
                    .attr("class", "centered axis")
                    .text("Year")

var text = svg.append("text")
                    .attr("class", "label")
                    .attr("x", width)

svg.selectAll(".line")
                   .data(data)
                   .enter()
                   .append("path")
                   .attr("d", function(d){return line(d.years)})
                   .attr("class", "line")
                   .on("mouseover", function(d){
                       text.text(countries.get(d.ISO).name);
                       text.attr("y", y(d["2012"]))
                   })
                   .on("mouseout", function(d){ text.text(""); })
                 .append("title")
                 .text(function(d){
                     return d.ISO
                 })
            })
            })

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

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js