D3 Examples - D3 test final

xxxxxxxxxx
 
<!DOCTYPE html>
<!-- Modification of an example by Scott Murray from Knight D3 course -->
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Line Chart with Multiple Lines</title>
        <style type="text/css">
            body {
                background-color: white;
                font-family: Helvetica, Arial, sans-serif;
            }
            h1 {
                font-size: 24px;
                margin: 0;
            }
            p {
                font-size: 14px;
                margin: 10px 0 0 0;
                width: 700px;
            }
            svg {
                background-color: white;
            }
            path.line {
                fill: none;
                stroke: gray;
            }
            .unfocused {
                opacity: .5;
                stroke-width: 1px;
            }
            .focused {
                opacity: 1;
                stroke-width: 2px;
            }
            .axis path,
            .axis line {
                fill: none;
                stroke: black;
                stroke-width: 1px;
            }
            .axis text {
                font-family: sans-serif;
                font-size: 11px;
            }
            text.linelabel {
                font-size: 9pt;
                color: gray;
            }
            circle {
                fill: gray;
            }
            .tooltip {
                position: absolute;
                z-index: 10;
            }
            .tooltip p {
                background-color: white;
                border: gray 1px solid;
                padding: 2px;
                max-width: 180px;
            }
        </style>
    </head>
    <body>
​
        <h1>EMV by Brand</h1>
        <p>Mouse over the lines to see data points and highlight a line.</p>
​
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
        <script type="text/javascript">
            //Dimensions and padding
            var fullwidth = 700;
            var fullheight = 600;
            var margin = {top: 20, right: 100, bottom: 40, left:100};
            var width = fullwidth - margin.left - margin.right;
            var height = fullheight - margin.top - margin.bottom;
            //Set up date formatting and years
            var dateFormat = d3.time.format("%Y");
            //Set up scales
            var xScale = d3.time.scale()
                                .range([ 0, width ]);
            var yScale = d3.scale.linear()
                                .range([ 0, height ]);
            //Configure axis generators
            var xAxis = d3.svg.axis()
                            .scale(xScale)
                            .orient("bottom")
                            .ticks(15)
                            .tickFormat(function(d) {
                                return dateFormat(d);
                            })
                            .outerTickSize([0])
                            .innerTickSize([0]);
            var yAxis = d3.svg.axis()
                            .scale(yScale)
                            .orient("left")
                            .outerTickSize([0]);
            //Configure line generator
            // each line dataset must have a d.year and a d.amount for this to work.
            var line = d3.svg.line()
                .x(function(d) {
                    return xScale(dateFormat.parse(d.year));
                })
                .y(function(d) {
                    return yScale(+d.amount);
                });
            //Create the empty SVG image
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", fullwidth)
                        .attr("height", fullheight)
                        .append("g")
                        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
            var tooltip = d3.select("body")
        .append("div")
        .attr("class", "tooltip");
            //Load data
            d3.csv("co2_emissions.csv", function(data) {
                //New array with all the years, for referencing later
                var years = ["1961", "1962", "1963", "1964", "1965", "1966", "1967", "1968", "1969", "1970", "1971", "1972", "1973", "1974", "1975", "1976", "1977", "1978", "1979", "1980", "1981", "1982", "1983", "1984", "1985", "1986", "1987", "1988", "1989", "1990", "1991", "1992", "1993", "1994", "1995", "1996", "1997", "1998", "1999", "2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010"];
                // or you could get this by doing:
                // var years = d3.keys(data[0]).slice(0, 54-4); //
                //Create a new, empty array to hold our restructured dataset
                var dataset = [];
                //Loop once for each row in data
                data.forEach(function (d, i) {
                    var myEmissions = [];
                    //Loop through all the years - and get the emissions for this data element
                    years.forEach(function (y) {
                        // If value is not empty
                        if (d[y]) {
                            //Add a new object to the new emissions data array - for year, amount
                            myEmissions.push({
                                country: d.countryName, // we can put the country in here too. It won't hurt.
                                year: y,
                                amount: d[y]  // this is the value for, for example, d["2004"]
                            });
                        }
                    });
                    //Create new object with this country's name and empty array
                    // d is the current data row... from data.forEach above.
                    dataset.push( {
                        country: d.countryName,
                        emissions: myEmissions  // we just built this!
                        } );
                });
                //Uncomment to log the original data to the console
                // console.log(data);
                //Uncomment to log the newly restructured dataset to the console
                console.log(dataset);
                //Set scale domains - max and mine of the years
                xScale.domain(
                    d3.extent(years, function(d) {
                        return dateFormat.parse(d);
                    }));
                // max of emissions to 0 (reversed, remember)
                yScale.domain([
                    d3.max(dataset, function(d) {
                        return d3.max(d.emissions, function(d) {
                            return +d.amount;
                        });
                    }),
                    0
                ]);
                //Make a group for each country
                var groups = svg.selectAll("g")
                    .data(dataset)
                    .enter()
                    .append("g");
                //Within each group, create a new line/path,
                //binding just the emissions data to each one
                groups.selectAll("path")
                    .data(function(d) { // because there's a group with data already...
                        return [ d.emissions ]; // it has to be an array for the line function
                    })
                    .enter()
                    .append("path")
                    .attr("class", "line")
                    .classed("unfocused", true) // they are not focused till mouseover
                    .attr("id", function(d) {
                        // we are attaching an id to the line using the countryname, replacing
                        // the spaces with underscores so it's a valid id.
                        // this will be useful when we do the mouseover and want to highlight a line too.
                        if (d[0] && d[0].length != 0) {
                            // this if-test makes sure there is an array and it's not empty.
                            return d[0].country.replace(/ |,|\./g, '_');
                        }
                    })
                    .attr("d", line);
            // Tooltip dots
            var circles = groups.selectAll("circle")
                                .data(function(d) { // because there's a group with data already...
                                            return d.emissions; // NOT an array here.
                                })
                                .enter()
                                .append("circle");
                circles.attr("cx", function(d) {
                        return xScale(dateFormat.parse(d.year));
                    })
                    .attr("cy", function(d) {
                        return yScale(d.amount);
                    })
                    .attr("r", 3)
                    .attr("id", function(d) {
                        return d.country.replace(/ |,|\./g, '_');
                    })
                    .style("opacity", 0); // this is optional - if you want visible dots or not!
                // Adding a subtle animation to increase the dot size when over it!
                circles
                    .on("mouseover", mouseoverFunc)
                    .on("mousemove", mousemoveFunc)
                    .on("mouseout", mouseoutFunc);
            // We're putting the text label at the group level, where the country name was originally.
            //We can access data here, because it's already attached!
            // We use the scales to position labels at end of line.
            groups.append("text")
          .attr("x", function(d) {
            if (d.emissions.length != 0) {
                var lastYear = d.emissions[d.emissions.length-1].year;
                return xScale(dateFormat.parse(lastYear));
              }
          })
          .attr("y", function(d) {
            if (d.emissions.length != 0) {
                var lastAmount = d.emissions[d.emissions.length-1].amount;
                return yScale(+lastAmount);
            }
          })
          .attr("dx", "3px")
          .attr("dy", "3px")
          .text(function(d) {
            if (d.emissions.length != 0) {
                var lastAmount = d.emissions[d.emissions.length-1].amount;
                if (+lastAmount > 700000) {
                    return d.country;
                }
            }
          })
          .attr("class", "linelabel");
                //Axes
                svg.append("g")
                    .attr("class", "x axis")
                    .attr("transform", "translate(0," + height + ")")
                    .call(xAxis);
                svg.append("g")
                    .attr("class", "y axis")
                    .call(yAxis);
                function mouseoverFunc(d) {
                    // this will highlight both a dot and its line.
                    var lineid = d3.select(this).attr("id");
                    d3.select(this)
                        .transition()
                        .style("opacity", 1)
                        .attr("r", 4);
                    d3.select("path#" + lineid).classed("focused", true).classed("unfocused", false);
                    tooltip
                        .style("display", null) // this removes the display none setting from it
                        .html("<p>" + d.year +
                                  "<br>$" + d.amount + "</p>");
                    }
                function mousemoveFunc(d) {
                    tooltip
                        .style("top", (d3.event.pageY - 10) + "px" )
                        .style("left", (d3.event.pageX + 10) + "px");
                    }
                function mouseoutFunc(d) {
                    d3.select(this)
                        .transition()
                        .style("opacity", 0)
                        .attr("r", 3);
                    d3.selectAll("path.line").classed("unfocused", true).classed("focused", false);
                tooltip.style("display", "none");  // this sets it to invisible!
              }
            }); // end of data csv
        </script>
​
    </body>
</html>
    