sbrreed · February 6, 2019 21:42
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/allMountains_annualMax.csv b/allMountains_annualMax.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <head>
  <meta charset="utf-8">
      <script
    src="https://code.jquery.com/jquery-3.3.1.js"
    integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous"></script>
      <script src="https://d3js.org/d3.v5.js"></script>


  <style>
    .line {
    stroke-width: 2;
    fill: none;
 }

 .legend:hover {
    cursor: pointer;
 }
 .SnowPackbutton{
    cursor: pointer;
 }
 .axis path,
 .axis line {
    fill: none;
    stroke: grey;
    shape-rendering: crispEdges;
 }

 .SnowLinesLegend {
    font-size: 16px;
    font-family: 'Open Sans Condensed', sans-serif;
    font-weight: bold;
    text-anchor: middle;
    padding: 10px;
 }
 .legendBox{
    display: flex;
    flex-direction: row;
 }
 .SnowPackaxis-x .SnowPackaxis-y text {
    font-size: 1.5em;
 }
 .title{
    font-size: 1.5em;
 }
 .subtitle{
    font-size: .8em;
 }
 .hidden{
    display: none;
 }
 #tooltip {
    /* this gets the tooltip to position in the right place */
 position: absolute; 
 width: 100px;
 height: auto;
 padding: 10px;
 background-color: white;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 border-radius: 10px;
 -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
 -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
 box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
 pointer-events: none;
 }

 #tooltip.hidden {
 display: none;
 }

 #tooltip p {
 margin: 0;
 font-family: Futura;
 font-size: 16px;
 line-height: 20px;
 }

 #maxSnowlineChart{
 width:70%;
 min-height: 650px;
 background-color: #f1f1f1;
 margin: 150px 120px 40px 80px;
 }
  </style>
 </head>

 <body>
  <div id="maxSnowlineChart">
  </div>
  <div id="tooltip" class="hidden">
    <p><span id="value"></span></p>
  </div>
  <script>
        
        //this line allows the margins to be set in CSS. This helps with making the charts responsive. 
        //parseInt converts a string into an integer. This is needed because the margin value comes in 
        // as a string. The .replace() part removes the "px". CSS needs the "px" but D3 can't take it. 
        // The 10 at the end is part of parseInt and tells it what base to convert the number in. 
        // these could be done directly in the margin declarations below but this seems cleaner?
        var leftMargin = parseInt($("#maxSnowlineChart").css("margin-left").replace("px",""), 10),
            rightMargin = parseInt($("#maxSnowlineChart").css("margin-right").replace("px",""), 10),
            topMargin = parseInt($("#maxSnowlineChart").css("margin-top").replace("px",""), 10),
            bottomMargin = parseInt($("#maxSnowlineChart").css("margin-bottom").replace("px",""), 10)

         // Set the dimensions of the canvas / graph
         //THis section gets the div that will contain the SVG and it's width and height. That way, 
         //when the screen is smaller the graphic will react
         var Snowcontainer = d3.select("#maxSnowlineChart");
        var Windowwidth = Snowcontainer.node().getBoundingClientRect().width,
        Windowheight = Snowcontainer.node().getBoundingClientRect().height;
        
        console.log(Windowheight, "windowHeight");
        
        var margin = {
                top: topMargin,
                right: rightMargin,
                bottom: bottomMargin,
                left: leftMargin
            },
            Snowwidth = Windowwidth - margin.left - margin.right,
            Snowheight = Windowheight - margin.top - margin.bottom;

                    
        // Parse the date / time
        var parseDate = d3.timeParse("%Y");


        // Set the ranges
        var x = d3.scaleTime().range([0, Snowwidth]);
        var y = d3.scaleLinear().range([Snowheight, 0]);

        // Define the line. This chooses the pairs of data to be a date and a value. It will
        //be called later when the lines are drawn. 
        var valueline = d3.line()
            .x(function (d) {
                return x(d.date);
            })
            .y(function (d) {
                return y(d.value);
            });


        // Adds the svg canvas
        var SnowPacksvg = d3.select("#maxSnowlineChart").append("svg")
            .attr("id","snowPacklineChart")
            .attr("width", Snowwidth + margin.left + margin.right)
            .attr("height", Snowheight + margin.top + margin.bottom)
            .append("g")
            .attr("transform",
                "translate(" + (margin.left +5) + "," + margin.top + ")");
            
        
        // Get the files
        // Promise.all allows for two data files to be loaded. This is because I 
        // wanted the trendline to be a separate line from (not connected to) the 
        // mountain lines
        Promise.all([
            d3.csv("allMountains_annualMax.csv"),
            d3.csv("trendlines.csv"),
        ]).then(function (files) {
            // files[0] will contain file1.csv
            // files[1] will contain file2.csv
            
            // this sets up the variables to be the right type (date and numeric)
            files[0].forEach(function (d) {
                d.date = parseDate(d.date);
                d.value = +d.value;
            });
            files[1].forEach(function (d) {
                d.date = parseDate(d.date);
                d.value = +d.value;
            });

            // Scale the range of the files[0]
            // pull the full extent of the dates
            x.domain(d3.extent(files[0], function (d) {
                return d.date;
            }));
            // set the max y value on the y axis to be the max y value of the data
            y.domain([0, d3.max(files[0], function (d) {
                return d.value;
            })]);

            // Nest the entries by mountain. Before this nesting the files[0] is not organized in any 
            //specific way except line by line as it's written. This nesting groups the files[0] by mountain. 

            //IMPORTANT: the sorting of the raw csv file makes a difference. The CSV must be sorted by date and then
            // mountain for this to work. D3 will draw the values as they are listed in the csv file.
            //There is probably a way to sort the data within D3 but it's not done here.
            var dataNest = d3.nest()
                .key(function (d) {
                    return d.mountain;
                })
                .entries(files[0]);


                console.log(dataNest);
                
            

            var trendlinesNest = d3.nest()
                .key(function (d) {
                    return d.mountain;
                })
                .entries(files[1]);

            // set the colour scale
            var color = d3.scaleOrdinal([
                "#bfd3e6",
                "#9ebcda",
                "#8c96c6",
                "#8c6bb1",
                "#88419d",
                "#6e016b"
            ]);

            // Loop through each mountain / key
            dataNest.forEach(function (d, i) {

                //this draws the individual mountain lines
                SnowPacksvg.append("path")
                    .attr("class", "line toHide")
                    .style("stroke", function () { // Add the colours dynamically
                        return d.color = color(d.key);
                    })
                    // assign an ID. The /\.. part removes and spaces from the name.
                    .attr("id", 'tag' + d.key.replace(/\s+/g, ''))
                    //this calls back to the valueline definition at the end. The attribute "d" refers
                    // to the fact that this is an SVG path. https://www.dashingd3js.com/svg-paths-and-d3js
                    .attr("d", valueline(d.values))
                    //tooltip
                    .on("mouseover", function(){
                        var xPos = d3.event.pageX,
                            yPos = d3.event.pageY
                        
                        d3.select("#tooltip")
                        .style("left", xPos +"px")
                        .style("top", yPos +"px")
                        .select("#value")
                        .text(d.key);

                        d3.select("#tooltip").classed("hidden",false);
                    })
                    .on("mouseout", function(){
                        d3.select("#tooltip").classed("hidden", true);
                    })
                    ;
            });

            trendlinesNest.forEach(function (d, i) {
                //draw the trendlines
                SnowPacksvg.append("path")
                    .attr("class", "trendline toHide")
                    .style("stroke", function () { // Add the colours dynamically
                        return d.color = color(d.key);
                    })
                    .style("stroke-dasharray", ("3,3"))
                    // assign an ID- we'll use the same ID here as the mountains lines so that 
                    // they both disappear at the same time when the legend is clicked. 
                    .attr("id", 'tag' + d.key.replace(/\s+/g, ''))
                    .attr("d", valueline(d.values));
            });

            legendSpace = Snowheight / dataNest.length; // spacing for the legend
               
            // Add the Legend
            dataNest.forEach(function (d, i) {
                SnowPacksvg.append("text")
                    .attr("x", Snowwidth + (margin.right / 2) + 5) // place legend on the right
                    .attr("y", legendSpace * i + ((Snowheight - (legendSpace * dataNest.length)) / 2)) //space and vertically center legend
                    .attr("class", "SnowLinesLegend") // style the legend
                    .attr("id", d.key.replace(/\s+/g, ''))
                    .style("fill", function () { // Add the colours dynamically
                        return d.color = color(d.key);
                    })
                    .on("click", function () {
                        
                        // Determine if current line is visible 
                        // assign a value of true or false to active if the element is active
                        var active = d.active ? false : true,
                            //assign a value of 0 or 1 to newOpacity depending on the outcome of active
                            newclass = active ? true : false;
                        // Hide or show the elements based on the ID
                        d3.selectAll("#tag" + d.key.replace(/\s+/g, ''))
                            .classed("hidden", newclass);
                        // Update whether or not the elements are active
                        d.active = active;
                    })
                    .text(d.key); // the key was assigned back in the nesting section
            });

            // Add the X Axis
            SnowPacksvg.append("g")
                .attr("class", "SnowPackaxis-x")
                .attr("transform", "translate(0," + Snowheight + ")")
                .call(d3.axisBottom(x));

            // Add the Y Axis
            SnowPacksvg.append("g")
                .attr("class", "SnowPackaxis-y")
                .call(d3.axisLeft(y));

            // Add a title
            SnowPacksvg.append("text")
                .attr("x", Snowwidth / 2)
                .attr("y", -100)
                .attr("class", "title")
                .attr("text-anchor", "middle")
                .text("Max Snowpack per Year")

            // Add subtitle
            SnowPacksvg.append("text")
                .attr("x", Snowwidth / 2)
                .attr("y", -80)
                //this dy is used for the wrapping function and pushes the wrapped text down 
                .attr("dy", 1)
                .attr("class", "subtitle")
                .attr("text-anchor", "middle")
                .text(
                    "Double click on a mountain name in the legend to hide or show it."
                )
                .call(wrap, 500)
                
                //create the Hide All Button
            SnowPacksvg.append("text")
                .attr("x", (Snowwidth / 2)-margin.left)
                .attr("y", 0)
                .attr("class","SnowPackbutton")
                .attr("text-anchor","end")
                .text("Hide All")
                .on("click", function(){
                    d3.selectAll(".toHide")
                    .classed("hidden", true)
                })

                    //create the Show All button
                SnowPacksvg.append("text")
                .attr("x", (Snowwidth / 2)+margin.left)
                .attr("y", 0)
                .attr("class","SnowPackbutton")
                .attr("text-anchor","start")
                .text("Show All")
                .on("click", function(){
                    d3.selectAll(".toHide")
                    .classed("hidden", false)
                })

            //function used to wrap the title text
            function wrap(text, width) {
                text.each(function () {
                    var text = d3.select(this),
                        words = text.text().split(/\s+/).reverse(),
                        word,
                        line = [],
                        lineNumber = 0,
                        lineHeight = 1.1, // ems
                        x= text.attr("x") // I added this to Bostock's original wrapping function to set the x location
                        y = text.attr("y"),
                        dy = parseFloat(text.attr("dy")),
                        tspan = text.text(null).append("tspan").attr("x", x).attr("y", y).attr("dy", dy +
                            "em")
                    while (word = words.pop()) {
                        line.push(word)
                        tspan.text(line.join(" "))
                        if (tspan.node().getComputedTextLength() > Snowwidth) {
                            line.pop()
                            tspan.text(line.join(" "))
                            line = [word]
                            tspan = text.append("tspan").attr("x", x).attr("y", y).attr("dy",
                                `${++lineNumber * lineHeight + dy}em`).text(word)
                        }
                    }
                })
            }




        }).catch(function (err) {
            // handle error here
        });

  </script>
 </body>
diff --git a/thumbnail.png b/thumbnail.png
diff --git a/trendlines.csv b/trendlines.csv
date	mountain	value
1981	Aspen	12.6
1982	Aspen	20.8
1983	Aspen	19.1
1984	Aspen	26.7
1985	Aspen	17.8
1986	Aspen	19.5
1987	Aspen	17.8
1988	Aspen	13.8
1989	Aspen	16.6
1990	Aspen	14.1
1991	Aspen	17.4
1992	Aspen	14.2
1993	Aspen	24.8
1994	Aspen	18.6
1995	Aspen	27.7
1996	Aspen	22.1
1997	Aspen	23.6
1998	Aspen	17.6
1999	Aspen	20.6
2000	Aspen	14.7
2001	Aspen	15.1
2002	Aspen	12.9
2003	Aspen	17.5
2004	Aspen	14.2
2005	Aspen	16.3
2006	Aspen	17
2007	Aspen	16.3
2008	Aspen	26.8
2009	Aspen	21.9
2010	Aspen	16.5
2011	Aspen	25
2012	Aspen	10.7
2013	Aspen	15.3
2014	Aspen	22.2
2015	Aspen	15.3
2016	Aspen	17.1
2017	Aspen	17.7
2018	Aspen	13.6
1978	Berthoud Pass	7
1979	Berthoud Pass	23.3
1980	Berthoud Pass	27.1
1981	Berthoud Pass	13.8
1982	Berthoud Pass	23.6
1983	Berthoud Pass	32.6
1984	Berthoud Pass	33.4
1985	Berthoud Pass	20.8
1986	Berthoud Pass	24.8
1987	Berthoud Pass	17.5
1988	Berthoud Pass	22.6
1989	Berthoud Pass	21.5
1990	Berthoud Pass	15.9
1991	Berthoud Pass	23.8
1992	Berthoud Pass	23.3
1993	Berthoud Pass	30.8
1994	Berthoud Pass	20.2
1995	Berthoud Pass	23.1
1996	Berthoud Pass	30.5
1997	Berthoud Pass	31.4
1998	Berthoud Pass	23.8
1999	Berthoud Pass	23.1
2000	Berthoud Pass	19.3
2001	Berthoud Pass	22.3
2002	Berthoud Pass	11.1
2003	Berthoud Pass	26
2004	Berthoud Pass	14.9
2005	Berthoud Pass	19.8
2006	Berthoud Pass	24
2007	Berthoud Pass	22.2
2008	Berthoud Pass	24.4
2009	Berthoud Pass	24.7
2010	Berthoud Pass	24.5
2011	Berthoud Pass	34.8
2012	Berthoud Pass	13
2013	Berthoud Pass	22.9
2014	Berthoud Pass	26.7
2015	Berthoud Pass	19.4
2016	Berthoud Pass	23.6
2017	Berthoud Pass	18.6
1992	Big Sky	16.5
1993	Big Sky	21.4
1994	Big Sky	13.8
1995	Big Sky	28.6
1996	Big Sky	30.7
1997	Big Sky	32.4
1998	Big Sky	20.8
1999	Big Sky	24.5
2000	Big Sky	18.1
2001	Big Sky	16.4
2002	Big Sky	19.6
2003	Big Sky	22.8
2004	Big Sky	15.9
2005	Big Sky	15.6
2006	Big Sky	25.8
2007	Big Sky	17.8
2008	Big Sky	26.5
2009	Big Sky	25.8
2010	Big Sky	18
2011	Big Sky	33.4
2012	Big Sky	19.1
2013	Big Sky	19.7
2014	Big Sky	30
2015	Big Sky	15.7
2016	Big Sky	18.8
2017	Big Sky	22.2
2018	Big Sky	29.8
1981	Breckenridge	14.4
1982	Breckenridge	22.6
1983	Breckenridge	24.8
1984	Breckenridge	29.1
1985	Breckenridge	18.3
1986	Breckenridge	20.5
1987	Breckenridge	18.5
1988	Breckenridge	18.6
1989	Breckenridge	19.3
1990	Breckenridge	19.5
1991	Breckenridge	21.2
1992	Breckenridge	17.3
1993	Breckenridge	24.2
1994	Breckenridge	16.7
1995	Breckenridge	27.9
1996	Breckenridge	27.1
1997	Breckenridge	25.7
1998	Breckenridge	16.8
1999	Breckenridge	21.6
2000	Breckenridge	18.8
2001	Breckenridge	19.5
2002	Breckenridge	12.2
2003	Breckenridge	22.6
2004	Breckenridge	16.3
2005	Breckenridge	18.1
2006	Breckenridge	23.7
2007	Breckenridge	19.4
2008	Breckenridge	26.1
2009	Breckenridge	23
2010	Breckenridge	18.3
2011	Breckenridge	27.5
2012	Breckenridge	12.4
2013	Breckenridge	19.1
2014	Breckenridge	25.6
2015	Breckenridge	22.5
2016	Breckenridge	19.9
2017	Breckenridge	21.1
2018	Breckenridge	20.4
1981	Crested Butte	9
1982	Crested Butte	20.1
1983	Crested Butte	17.1
1984	Crested Butte	25.1
1985	Crested Butte	19.5
1986	Crested Butte	24.1
1987	Crested Butte	16.3
1988	Crested Butte	11.5
1989	Crested Butte	14.7
1990	Crested Butte	7.7
1991	Crested Butte	12.9
1992	Crested Butte	11.7
1993	Crested Butte	26.5
1994	Crested Butte	13.6
1995	Crested Butte	24.1
1996	Crested Butte	21
1997	Crested Butte	21.3
1998	Crested Butte	14.8
1999	Crested Butte	14.6
2000	Crested Butte	13.3
2001	Crested Butte	12
2002	Crested Butte	10.1
2003	Crested Butte	13.8
2004	Crested Butte	12
2005	Crested Butte	18.3
2006	Crested Butte	16.4
2007	Crested Butte	11.1
2008	Crested Butte	23.7
2009	Crested Butte	18.5
2010	Crested Butte	13.3
2011	Crested Butte	18.4
2012	Crested Butte	8.2
2013	Crested Butte	11.8
2014	Crested Butte	16.4
2015	Crested Butte	11.5
2016	Crested Butte	13.3
2017	Crested Butte	21.3
2018	Crested Butte	10.1
1980	Eldora	18.8
1981	Eldora	5.7
1982	Eldora	10.5
1983	Eldora	14
1984	Eldora	18.9
1985	Eldora	11
1986	Eldora	11.1
1987	Eldora	11.4
1988	Eldora	12.7
1989	Eldora	12.9
1990	Eldora	16.2
1991	Eldora	10.1
1992	Eldora	13.9
1993	Eldora	15.2
1994	Eldora	15.3
1995	Eldora	14.2
1996	Eldora	24
1997	Eldora	20.3
1998	Eldora	15.4
1999	Eldora	11.9
2000	Eldora	14.1
2001	Eldora	9.9
2002	Eldora	7.1
2003	Eldora	17.5
2004	Eldora	7.5
2005	Eldora	10.7
2006	Eldora	14.2
2007	Eldora	13.1
2008	Eldora	14.5
2009	Eldora	17.2
2010	Eldora	11.6
2011	Eldora	17.8
2012	Eldora	11.1
2013	Eldora	10.8
2014	Eldora	19.1
2015	Eldora	11.9
2016	Eldora	14.5
2017	Eldora	13.4
2018	Eldora	11.8
1987	Jackson Hole	17.3
1988	Jackson Hole	23.8
1989	Jackson Hole	38.7
1990	Jackson Hole	23.1
1991	Jackson Hole	29
1992	Jackson Hole	19
1993	Jackson Hole	34.6
1994	Jackson Hole	21.5
1995	Jackson Hole	33.9
1996	Jackson Hole	38.5
1997	Jackson Hole	44.3
1998	Jackson Hole	28
1999	Jackson Hole	36.2
2000	Jackson Hole	23.9
2001	Jackson Hole	18.8
2002	Jackson Hole	24.2
2003	Jackson Hole	25.4
2004	Jackson Hole	24
2005	Jackson Hole	23.1
2006	Jackson Hole	36.4
2007	Jackson Hole	18.8
2008	Jackson Hole	36.9
2009	Jackson Hole	31.4
2010	Jackson Hole	19.1
2011	Jackson Hole	44
2012	Jackson Hole	24.3
2013	Jackson Hole	25.5
2014	Jackson Hole	36.8
2015	Jackson Hole	21.8
2016	Jackson Hole	22.3
2017	Jackson Hole	42
2018	Jackson Hole	33.2
1981	Loveland	9.8
1982	Loveland	22
1983	Loveland	26.5
1984	Loveland	28.9
1985	Loveland	17.8
1986	Loveland	23.1
1987	Loveland	13.3
1988	Loveland	16.8
1989	Loveland	14.4
1990	Loveland	16.7
1991	Loveland	13
1992	Loveland	13
1993	Loveland	24.3
1994	Loveland	18.4
1995	Loveland	24
1996	Loveland	29.5
1997	Loveland	23.9
1998	Loveland	18.8
1999	Loveland	19.5
2000	Loveland	17
2001	Loveland	16.5
2002	Loveland	9.8
2003	Loveland	23.4
2004	Loveland	12.7
2005	Loveland	13
2006	Loveland	21.6
2007	Loveland	20.6
2008	Loveland	23
2009	Loveland	21.6
2010	Loveland	12.8
2011	Loveland	31.8
2012	Loveland	11.9
2013	Loveland	18.4
2014	Loveland	25.8
2015	Loveland	16.6
2016	Loveland	19.8
2017	Loveland	22.1
2018	Loveland	18.7
1978	Monarch	6.4
1979	Monarch	20.1
1980	Monarch	21
1981	Monarch	10.2
1982	Monarch	21.6
1983	Monarch	23.3
1984	Monarch	27.4
1985	Monarch	17.3
1986	Monarch	16.3
1987	Monarch	17.3
1988	Monarch	15.1
1989	Monarch	13.1
1990	Monarch	13.5
1991	Monarch	12.6
1992	Monarch	15.1
1993	Monarch	22.5
1994	Monarch	16
1995	Monarch	24
1996	Monarch	21.6
1997	Monarch	23.7
1998	Monarch	18.9
1999	Monarch	14.7
2000	Monarch	17.4
2001	Monarch	14.6
2002	Monarch	8.5
2003	Monarch	17.2
2004	Monarch	14.2
2005	Monarch	18.5
2006	Monarch	16.2
2007	Monarch	15.6
2008	Monarch	23.8
2009	Monarch	19.2
2010	Monarch	16.7
2011	Monarch	19.7
2012	Monarch	10.6
2013	Monarch	10.9
2014	Monarch	20.6
2015	Monarch	13.6
2016	Monarch	16.8
2017	Monarch	22.1
2018	Monarch	11.7
2003	Mt Baker	61.7
2004	Mt Baker	67.5
2005	Mt Baker	32.1
2006	Mt Baker	68.7
2007	Mt Baker	72.4
2008	Mt Baker	73.3
2009	Mt Baker	72.3
2010	Mt Baker	57.7
2011	Mt Baker	89.1
2012	Mt Baker	97.4
2013	Mt Baker	81.4
2014	Mt Baker	85
2015	Mt Baker	22.6
2016	Mt Baker	56.7
2017	Mt Baker	79.6
1978	Powderhorn	13.6
1980	Powderhorn	41.2
1981	Powderhorn	17.9
1982	Powderhorn	41
1983	Powderhorn	50.2
1984	Powderhorn	39.5
1985	Powderhorn	38
1986	Powderhorn	39.3
1987	Powderhorn	34.5
1988	Powderhorn	28.5
1989	Powderhorn	29.8
1990	Powderhorn	23.1
1991	Powderhorn	28.8
1992	Powderhorn	24.4
1993	Powderhorn	49.5
1994	Powderhorn	27.3
1995	Powderhorn	45.8
1996	Powderhorn	26.6
1997	Powderhorn	40.8
1998	Powderhorn	36.2
1999	Powderhorn	31.9
2000	Powderhorn	22.1
2001	Powderhorn	23.5
2002	Powderhorn	16
2003	Powderhorn	25.4
2004	Powderhorn	27.7
2005	Powderhorn	48.9
2006	Powderhorn	26.8
2007	Powderhorn	18.3
2008	Powderhorn	35.7
2009	Powderhorn	28.3
2010	Powderhorn	27.6
2011	Powderhorn	41.3
2012	Powderhorn	20.1
2013	Powderhorn	20.7
2014	Powderhorn	26.5
2015	Powderhorn	17.3
2016	Powderhorn	28.5
2017	Powderhorn	30.6
2018	Powderhorn	13.7
1978	Purgatory	13.7
1979	Purgatory	32.2
1980	Purgatory	31.6
1981	Purgatory	4.5
1982	Purgatory	17.1
1983	Purgatory	18.5
1984	Purgatory	14.3
1985	Purgatory	17.9
1986	Purgatory	16.6
1987	Purgatory	19
1988	Purgatory	7.3
1989	Purgatory	17.5
1990	Purgatory	5
1991	Purgatory	15.6
1992	Purgatory	10.9
1993	Purgatory	25.3
1994	Purgatory	12.9
1995	Purgatory	13.3
1996	Purgatory	15.4
1997	Purgatory	21.4
1998	Purgatory	11.5
1999	Purgatory	10.2
2000	Purgatory	12.4
2001	Purgatory	16.2
2002	Purgatory	5.7
2003	Purgatory	9.6
2004	Purgatory	15.6
2005	Purgatory	20.3
2006	Purgatory	9.8
2007	Purgatory	9.8
2008	Purgatory	23.5
2009	Purgatory	15.1
2010	Purgatory	17.4
2011	Purgatory	15.3
2012	Purgatory	12.5
2013	Purgatory	11.5
2014	Purgatory	10.4
2015	Purgatory	7.5
2016	Purgatory	12.1
2017	Purgatory	19.4
2018	Purgatory	4.5
1992	Revelstoke	15.1
1993	Revelstoke	34.8
1994	Revelstoke	52.7
1995	Revelstoke	45.1
1996	Revelstoke	65.4
1997	Revelstoke	56.2
1998	Revelstoke	67.2
1999	Revelstoke	83.2
2000	Revelstoke	66.5
2001	Revelstoke	40.1
2002	Revelstoke	68.4
2003	Revelstoke	46.1
2004	Revelstoke	42.6
2005	Revelstoke	43.6
2006	Revelstoke	49.2
2007	Revelstoke	63.6
2008	Revelstoke	53.3
2009	Revelstoke	42.8
2010	Revelstoke	41.6
2011	Revelstoke	31.5
2012	Revelstoke	38.5
2013	Revelstoke	56.8
2014	Revelstoke	53.3
2015	Revelstoke	42.4
2016	Revelstoke	52.2
2017	Revelstoke	55.6
2018	Revelstoke	57
2019	Revelstoke	28.7
1990	Snowbird	34
1991	Snowbird	40
1992	Snowbird	23
1993	Snowbird	66.9
1994	Snowbird	31.9
1995	Snowbird	58.9
1996	Snowbird	52.9
1997	Snowbird	58.3
1998	Snowbird	44.7
1999	Snowbird	50.5
2000	Snowbird	37.5
2001	Snowbird	36.6
2002	Snowbird	50.2
2003	Snowbird	36.2
2004	Snowbird	42.9
2005	Snowbird	74.6
2006	Snowbird	68.9
2007	Snowbird	30.1
2008	Snowbird	57.8
2009	Snowbird	54.1
2010	Snowbird	40.4
2011	Snowbird	75.1
2012	Snowbird	32.8
2013	Snowbird	35
2014	Snowbird	32.5
2015	Snowbird	21.6
2017	Snowbird	59.3
2018	Snowbird	30
1986	Snowmass	21.6
1987	Snowmass	15.9
1988	Snowmass	15.6
1989	Snowmass	19.6
1990	Snowmass	10.5
1991	Snowmass	17.5
1992	Snowmass	14.9
1993	Snowmass	28.6
1994	Snowmass	15.4
1995	Snowmass	25.4
1996	Snowmass	20
1997	Snowmass	22.8
1998	Snowmass	20.8
1999	Snowmass	12.9
2000	Snowmass	16.9
2001	Snowmass	12.1
2002	Snowmass	12
2003	Snowmass	14.3
2004	Snowmass	15.8
2005	Snowmass	24.2
2006	Snowmass	17.4
2007	Snowmass	15.4
2008	Snowmass	30.8
2009	Snowmass	23.6
2010	Snowmass	17.4
2011	Snowmass	25.1
2012	Snowmass	13
2013	Snowmass	16
2014	Snowmass	19.5
2015	Snowmass	11.7
2016	Snowmass	13.4
2017	Snowmass	21.8
1981	Squaw	38.4
1982	Squaw	92.1
1983	Squaw	110.2
1984	Squaw	49.6
1985	Squaw	33.1
1986	Squaw	70.5
1987	Squaw	33.3
1988	Squaw	29.7
1989	Squaw	54.5
1990	Squaw	27.9
1991	Squaw	33.2
1992	Squaw	33.7
1993	Squaw	99.9
1994	Squaw	31.9
1995	Squaw	116.5
1996	Squaw	65.1
1997	Squaw	90
1998	Squaw	87
1999	Squaw	74.3
2000	Squaw	56.7
2001	Squaw	36
2002	Squaw	62.3
2003	Squaw	68.4
2004	Squaw	49.9
2005	Squaw	75.7
2006	Squaw	88.5
2007	Squaw	32.2
2008	Squaw	40
2009	Squaw	46.7
2010	Squaw	51.7
2011	Squaw	73.4
2012	Squaw	35.4
2013	Squaw	35.1
2014	Squaw	22
2015	Squaw	18.4
2016	Squaw	42.5
2017	Squaw	82.8
2018	Squaw	36.2
1980	Steamboat	59.8
1981	Steamboat	32.2
1982	Steamboat	59.9
1983	Steamboat	63.9
1984	Steamboat	61.8
1985	Steamboat	54.8
1986	Steamboat	70.4
1987	Steamboat	38
1988	Steamboat	55.6
1989	Steamboat	52.6
1990	Steamboat	49.5
1991	Steamboat	52
1992	Steamboat	44.2
1993	Steamboat	68
1994	Steamboat	47.9
1995	Steamboat	69.7
1996	Steamboat	60.4
1997	Steamboat	62.4
1998	Steamboat	54
1999	Steamboat	58
2000	Steamboat	47
2001	Steamboat	39.8
2002	Steamboat	30.6
2003	Steamboat	54.4
2004	Steamboat	40.6
2005	Steamboat	43.9
2006	Steamboat	56.5
2007	Steamboat	32.9
2008	Steamboat	51.5
2009	Steamboat	52.1
2010	Steamboat	45.1
2011	Steamboat	79.7
2012	Steamboat	27.7
2013	Steamboat	39
2014	Steamboat	56.1
2015	Steamboat	32.8
2016	Steamboat	48.9
2017	Steamboat	44.5
2018	Steamboat	45.4
1981	Telluride	17.9
1982	Telluride	33.1
1983	Telluride	37
1984	Telluride	44.5
1985	Telluride	35.5
1986	Telluride	27.3
1987	Telluride	34.1
1988	Telluride	22.8
1989	Telluride	24.6
1990	Telluride	21
1991	Telluride	25.7
1992	Telluride	26.5
1993	Telluride	36.5
1994	Telluride	23.1
1995	Telluride	36.8
1996	Telluride	27.6
1997	Telluride	34.9
1998	Telluride	25.3
1999	Telluride	30.4
2000	Telluride	23
2001	Telluride	24.6
2002	Telluride	14.9
2003	Telluride	19.5
2004	Telluride	25.4
2005	Telluride	30.9
2006	Telluride	24.4
2007	Telluride	23.7
2008	Telluride	34.4
2009	Telluride	27.5
2010	Telluride	24.2
2011	Telluride	33.7
2012	Telluride	17.8
2013	Telluride	19.6
2014	Telluride	24.5
2015	Telluride	20.2
2016	Telluride	23.3
2017	Telluride	27.4
2018	Telluride	16.4
1978	Vail	10.4
1979	Vail	34.3
1980	Vail	31.4
1981	Vail	15.7
1982	Vail	31.6
1983	Vail	37.3
1984	Vail	39.1
1985	Vail	27.8
1986	Vail	25.5
1987	Vail	17.8
1988	Vail	22
1989	Vail	21.3
1990	Vail	19.9
1991	Vail	27.4
1992	Vail	23.1
1993	Vail	34
1994	Vail	20
1995	Vail	31.3
1996	Vail	35
1997	Vail	33.6
1998	Vail	20.7
1999	Vail	17.7
2000	Vail	22.7
2001	Vail	19.8
2002	Vail	14.6
2003	Vail	28
2004	Vail	16.8
2005	Vail	20
2006	Vail	29.2
2007	Vail	19.1
2008	Vail	29.4
2009	Vail	28.1
2010	Vail	20.8
2011	Vail	32.1
2012	Vail	12.4
2013	Vail	17.8
2014	Vail	23.1
2015	Vail	14.6
2016	Vail	21.3
2017	Vail	20.3
2018	Vail	14.7
2000	Whistler	11.61417323
2001	Whistler	31.88976378
2002	Whistler	52.28346457
2003	Whistler	49.33070866
2004	Whistler	33.66141732
2005	Whistler	34.09448819
2006	Whistler	46.06299213
2007	Whistler	68.34645669
2008	Whistler	42.08661417
2009	Whistler	27.91338583
2010	Whistler	54.84251969
2011	Whistler	59.80314961
2012	Whistler	61.8503937
2013	Whistler	39.60629921
2014	Whistler	38.66141732
2015	Whistler	35.94488189
2016	Whistler	47.91338583
2017	Whistler	55.31496063
2018	Whistler	48.85826772
2019	Whistler	26.8503937
1987	Wolf Creek	41.3
1988	Wolf Creek	25.7
1989	Wolf Creek	38.7
1990	Wolf Creek	30.6
1991	Wolf Creek	40.6
1992	Wolf Creek	29.1
1993	Wolf Creek	47.4
1994	Wolf Creek	35.1
1995	Wolf Creek	50.7
1996	Wolf Creek	23.9
1997	Wolf Creek	43.8
1998	Wolf Creek	35.9
1999	Wolf Creek	39.6
2000	Wolf Creek	18.2
2001	Wolf Creek	41.2
2002	Wolf Creek	10.3
2003	Wolf Creek	24.6
2004	Wolf Creek	36.6
2005	Wolf Creek	53.6
2006	Wolf Creek	25.7
2007	Wolf Creek	32.3
2008	Wolf Creek	47.5
2009	Wolf Creek	35.9
2010	Wolf Creek	37.1
2011	Wolf Creek	38.9
2012	Wolf Creek	27.2
2013	Wolf Creek	23.1
2014	Wolf Creek	25.5
2015	Wolf Creek	18.8
2016	Wolf Creek	30.1
2017	Wolf Creek	42
2018	Wolf Creek	22.5
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script
	src="https://code.jquery.com/jquery-3.3.1.js"
	integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
	crossorigin="anonymous"></script>
	<script src="https://d3js.org/d3.v5.js"></script>


	<style>
	.line {
	stroke-width: 2;
	fill: none;
	}

	.legend:hover {
	cursor: pointer;
	}
	.SnowPackbutton{
	cursor: pointer;
	}
	.axis path,
	.axis line {
	fill: none;
	stroke: grey;
	shape-rendering: crispEdges;
	}

	.SnowLinesLegend {
	font-size: 16px;
	font-family: 'Open Sans Condensed', sans-serif;
	font-weight: bold;
	text-anchor: middle;
	padding: 10px;
	}
	.legendBox{
	display: flex;
	flex-direction: row;
	}
	.SnowPackaxis-x .SnowPackaxis-y text {
	font-size: 1.5em;
	}
	.title{
	font-size: 1.5em;
	}
	.subtitle{
	font-size: .8em;
	}
	.hidden{
	display: none;
	}
	#tooltip {
	/* this gets the tooltip to position in the right place */
	position: absolute;
	width: 100px;
	height: auto;
	padding: 10px;
	background-color: white;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
	pointer-events: none;
	}

	#tooltip.hidden {
	display: none;
	}

	#tooltip p {
	margin: 0;
	font-family: Futura;
	font-size: 16px;
	line-height: 20px;
	}

	#maxSnowlineChart{
	width:70%;
	min-height: 650px;
	background-color: #f1f1f1;
	margin: 150px 120px 40px 80px;
	}
	</style>
	</head>

	<body>
	<div id="maxSnowlineChart">
	</div>
	<div id="tooltip" class="hidden">
	<p><span id="value"></span></p>
	</div>
	<script>

	//this line allows the margins to be set in CSS. This helps with making the charts responsive.
	//parseInt converts a string into an integer. This is needed because the margin value comes in
	// as a string. The .replace() part removes the "px". CSS needs the "px" but D3 can't take it.
	// The 10 at the end is part of parseInt and tells it what base to convert the number in.
	// these could be done directly in the margin declarations below but this seems cleaner?
	var leftMargin = parseInt($("#maxSnowlineChart").css("margin-left").replace("px",""), 10),
	rightMargin = parseInt($("#maxSnowlineChart").css("margin-right").replace("px",""), 10),
	topMargin = parseInt($("#maxSnowlineChart").css("margin-top").replace("px",""), 10),
	bottomMargin = parseInt($("#maxSnowlineChart").css("margin-bottom").replace("px",""), 10)

	// Set the dimensions of the canvas / graph
	//THis section gets the div that will contain the SVG and it's width and height. That way,
	//when the screen is smaller the graphic will react
	var Snowcontainer = d3.select("#maxSnowlineChart");
	var Windowwidth = Snowcontainer.node().getBoundingClientRect().width,
	Windowheight = Snowcontainer.node().getBoundingClientRect().height;

	console.log(Windowheight, "windowHeight");

	var margin = {
	top: topMargin,
	right: rightMargin,
	bottom: bottomMargin,
	left: leftMargin
	},
	Snowwidth = Windowwidth - margin.left - margin.right,
	Snowheight = Windowheight - margin.top - margin.bottom;


	// Parse the date / time
	var parseDate = d3.timeParse("%Y");


	// Set the ranges
	var x = d3.scaleTime().range([0, Snowwidth]);
	var y = d3.scaleLinear().range([Snowheight, 0]);

	// Define the line. This chooses the pairs of data to be a date and a value. It will
	//be called later when the lines are drawn.
	var valueline = d3.line()
	.x(function (d) {
	return x(d.date);
	})
	.y(function (d) {
	return y(d.value);
	});


	// Adds the svg canvas
	var SnowPacksvg = d3.select("#maxSnowlineChart").append("svg")
	.attr("id","snowPacklineChart")
	.attr("width", Snowwidth + margin.left + margin.right)
	.attr("height", Snowheight + margin.top + margin.bottom)
	.append("g")
	.attr("transform",
	"translate(" + (margin.left +5) + "," + margin.top + ")");


	// Get the files
	// Promise.all allows for two data files to be loaded. This is because I
	// wanted the trendline to be a separate line from (not connected to) the
	// mountain lines
	Promise.all([
	d3.csv("allMountains_annualMax.csv"),
	d3.csv("trendlines.csv"),
	]).then(function (files) {
	// files[0] will contain file1.csv
	// files[1] will contain file2.csv

	// this sets up the variables to be the right type (date and numeric)
	files[0].forEach(function (d) {
	d.date = parseDate(d.date);
	d.value = +d.value;
	});
	files[1].forEach(function (d) {
	d.date = parseDate(d.date);
	d.value = +d.value;
	});

	// Scale the range of the files[0]
	// pull the full extent of the dates
	x.domain(d3.extent(files[0], function (d) {
	return d.date;
	}));
	// set the max y value on the y axis to be the max y value of the data
	y.domain([0, d3.max(files[0], function (d) {
	return d.value;
	})]);

	// Nest the entries by mountain. Before this nesting the files[0] is not organized in any
	//specific way except line by line as it's written. This nesting groups the files[0] by mountain.

	//IMPORTANT: the sorting of the raw csv file makes a difference. The CSV must be sorted by date and then
	// mountain for this to work. D3 will draw the values as they are listed in the csv file.
	//There is probably a way to sort the data within D3 but it's not done here.
	var dataNest = d3.nest()
	.key(function (d) {
	return d.mountain;
	})
	.entries(files[0]);


	console.log(dataNest);



	var trendlinesNest = d3.nest()
	.key(function (d) {
	return d.mountain;
	})
	.entries(files[1]);

	// set the colour scale
	var color = d3.scaleOrdinal([
	"#bfd3e6",
	"#9ebcda",
	"#8c96c6",
	"#8c6bb1",
	"#88419d",
	"#6e016b"
	]);

	// Loop through each mountain / key
	dataNest.forEach(function (d, i) {

	//this draws the individual mountain lines
	SnowPacksvg.append("path")
	.attr("class", "line toHide")
	.style("stroke", function () { // Add the colours dynamically
	return d.color = color(d.key);
	})
	// assign an ID. The /\.. part removes and spaces from the name.
	.attr("id", 'tag' + d.key.replace(/\s+/g, ''))
	//this calls back to the valueline definition at the end. The attribute "d" refers
	// to the fact that this is an SVG path. https://www.dashingd3js.com/svg-paths-and-d3js
	.attr("d", valueline(d.values))
	//tooltip
	.on("mouseover", function(){
	var xPos = d3.event.pageX,
	yPos = d3.event.pageY

	d3.select("#tooltip")
	.style("left", xPos +"px")
	.style("top", yPos +"px")
	.select("#value")
	.text(d.key);

	d3.select("#tooltip").classed("hidden",false);
	})
	.on("mouseout", function(){
	d3.select("#tooltip").classed("hidden", true);
	})
	;
	});

	trendlinesNest.forEach(function (d, i) {
	//draw the trendlines
	SnowPacksvg.append("path")
	.attr("class", "trendline toHide")
	.style("stroke", function () { // Add the colours dynamically
	return d.color = color(d.key);
	})
	.style("stroke-dasharray", ("3,3"))
	// assign an ID- we'll use the same ID here as the mountains lines so that
	// they both disappear at the same time when the legend is clicked.
	.attr("id", 'tag' + d.key.replace(/\s+/g, ''))
	.attr("d", valueline(d.values));
	});

	legendSpace = Snowheight / dataNest.length; // spacing for the legend

	// Add the Legend
	dataNest.forEach(function (d, i) {
	SnowPacksvg.append("text")
	.attr("x", Snowwidth + (margin.right / 2) + 5) // place legend on the right
	.attr("y", legendSpace * i + ((Snowheight - (legendSpace * dataNest.length)) / 2)) //space and vertically center legend
	.attr("class", "SnowLinesLegend") // style the legend
	.attr("id", d.key.replace(/\s+/g, ''))
	.style("fill", function () { // Add the colours dynamically
	return d.color = color(d.key);
	})
	.on("click", function () {

	// Determine if current line is visible
	// assign a value of true or false to active if the element is active
	var active = d.active ? false : true,
	//assign a value of 0 or 1 to newOpacity depending on the outcome of active
	newclass = active ? true : false;
	// Hide or show the elements based on the ID
	d3.selectAll("#tag" + d.key.replace(/\s+/g, ''))
	.classed("hidden", newclass);
	// Update whether or not the elements are active
	d.active = active;
	})
	.text(d.key); // the key was assigned back in the nesting section
	});

	// Add the X Axis
	SnowPacksvg.append("g")
	.attr("class", "SnowPackaxis-x")
	.attr("transform", "translate(0," + Snowheight + ")")
	.call(d3.axisBottom(x));

	// Add the Y Axis
	SnowPacksvg.append("g")
	.attr("class", "SnowPackaxis-y")
	.call(d3.axisLeft(y));

	// Add a title
	SnowPacksvg.append("text")
	.attr("x", Snowwidth / 2)
	.attr("y", -100)
	.attr("class", "title")
	.attr("text-anchor", "middle")
	.text("Max Snowpack per Year")

	// Add subtitle
	SnowPacksvg.append("text")
	.attr("x", Snowwidth / 2)
	.attr("y", -80)
	//this dy is used for the wrapping function and pushes the wrapped text down
	.attr("dy", 1)
	.attr("class", "subtitle")
	.attr("text-anchor", "middle")
	.text(
	"Double click on a mountain name in the legend to hide or show it."
	)
	.call(wrap, 500)

	//create the Hide All Button
	SnowPacksvg.append("text")
	.attr("x", (Snowwidth / 2)-margin.left)
	.attr("y", 0)
	.attr("class","SnowPackbutton")
	.attr("text-anchor","end")
	.text("Hide All")
	.on("click", function(){
	d3.selectAll(".toHide")
	.classed("hidden", true)
	})

	//create the Show All button
	SnowPacksvg.append("text")
	.attr("x", (Snowwidth / 2)+margin.left)
	.attr("y", 0)
	.attr("class","SnowPackbutton")
	.attr("text-anchor","start")
	.text("Show All")
	.on("click", function(){
	d3.selectAll(".toHide")
	.classed("hidden", false)
	})

	//function used to wrap the title text
	function wrap(text, width) {
	text.each(function () {
	var text = d3.select(this),
	words = text.text().split(/\s+/).reverse(),
	word,
	line = [],
	lineNumber = 0,
	lineHeight = 1.1, // ems
	x= text.attr("x") // I added this to Bostock's original wrapping function to set the x location
	y = text.attr("y"),
	dy = parseFloat(text.attr("dy")),
	tspan = text.text(null).append("tspan").attr("x", x).attr("y", y).attr("dy", dy +
	"em")
	while (word = words.pop()) {
	line.push(word)
	tspan.text(line.join(" "))
	if (tspan.node().getComputedTextLength() > Snowwidth) {
	line.pop()
	tspan.text(line.join(" "))
	line = [word]
	tspan = text.append("tspan").attr("x", x).attr("y", y).attr("dy",
	`${++lineNumber * lineHeight + dy}em`).text(word)
	}
	}
	})
	}




	}).catch(function (err) {
	// handle error here
	});

	</script>
	</body>