final_bw_projection_chart

README.md

Built with blockbuilder.org

d3.slider.js

d3.slider = function module() {
    "use strict";
    var div, min = 0,
        max = 52,
        svg, svgGroup, value, classPrefix, axis, height = 10,
        rect, rectHeight = 5,
        tickSize = 9,
        margin = {
            top: 6,
            right: 10,
            bottom: 4,
            left: 10
        },
        ticks = 0,
        tickValues, scale, tickFormat, dragger, width, range = false,
        callbackFn, stepValues, focus;

    function slider(selection) {
        selection.each(function() {
            div = d3.select(this).classed('d3slider', true);
            width = parseInt(div.style("width"), 11) - (margin.left + margin.right);
            value = value || min;
            scale = d3.scale.linear().domain([min, max]).range([0, width]).clamp(true);
            svg = div.append("svg").attr("class", "d3slider-axis").attr("width", width + margin.left + margin.right).attr("height", height + margin.top + margin.bottom).append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
            svg.append("rect").attr("class", "d3slider-rect-range").attr("width", width).attr("height", rectHeight);
            if (range) {
                svg.append("rect").attr("class", "d3slider-rect-value").attr("width", scale(value)).attr("height", rectHeight);
            }
            var axis = d3.svg.axis().scale(scale).orient("bottom");
            if (ticks != 0) {
                axis.ticks(ticks);
                axis.tickSize(tickSize);
            } else if (tickValues) {
                axis.tickValues(tickValues);
                axis.tickSize(tickSize);
            } else {
                axis.ticks(0);
                axis.tickSize(0);
            }
            if (tickFormat) {
                axis.tickFormat(tickFormat);
            }
            svg.append("g").attr("transform", "translate(0," + rectHeight + ")").call(axis)
            var values = [value];
            dragger = svg.selectAll(".dragger").data(values).enter().append("g").attr("class", "dragger").attr("transform", function(d) {
                return "translate(" + scale(d) + ")";
            })
            var displayValue = null;
            if (tickFormat) {
                displayValue = tickFormat(value);
            } else {
                displayValue = d3.format(",.0f")(value);
            }
            dragger.append("text").attr("x", 0).attr("y", -15).attr("text-anchor", "middle").attr("class", "draggertext").text(displayValue);
            dragger.append("circle").attr("class", "dragger-outer").attr("r", 7).attr("transform", function(d) {
                return "translate(0,2)";
            });
            dragger.append("circle").attr("class", "dragger-inner").attr("r", 5).attr("transform", function(d) {
                return "translate(0,2)";
            });
            var dragBehaviour = d3.behavior.drag();
            dragBehaviour.on("drag", slider.drag);
            dragger.call(dragBehaviour);
            svg.on("click", slider.click);
        });
    }
    slider.draggerTranslateFn = function() {
        return function(d) {
            return "translate(" + scale(d) + ")";
        }
    }
    slider.click = function() {
        var pos = d3.event.offsetX || d3.event.layerX;
        slider.move(pos);
    }
    slider.drag = function() {
        var pos = d3.event.x;
        slider.move(pos + margin.left);
    }
    slider.move = function(pos) {
        var l, u;
        var newValue = scale.invert(pos - margin.left);
        if (stepValues != undefined) {
            l = stepValues.reduce(function(p, c, i, arr) {
                if (c < newValue) {
                    return c;
                } else {
                    return p;
                }
            });
            if (stepValues.indexOf(l) < stepValues.length - 1) {
                u = stepValues[stepValues.indexOf(l) + 1];
            } else {
                u = l;
            }
            var oldValue = value;
            value = ((newValue - l) <= (u - newValue)) ? l : u;
        } else {
            var oldValue = value;
            value = newValue;
        }
        var values = [value];
        svg.selectAll(".dragger").data(values).attr("transform", function(d) {
            return "translate(" + scale(d) + ")";
        });
        var displayValue = null;
        if (tickFormat) {
            displayValue = tickFormat(value);
        } else {
            displayValue = d3.format(",.0f")(value);
        }
        svg.selectAll(".dragger").select("text").text(displayValue);
        if (range) {
            svg.selectAll(".d3slider-rect-value").attr("width", scale(value));
        }
        if (callbackFn) {
            callbackFn(slider);
        }
    }
    slider.min = function(_) {
        if (!arguments.length) return min;
        min = _;
        return slider;
    };
    slider.max = function(_) {
        if (!arguments.length) return max;
        max = _;
        return slider;
    };
    slider.classPrefix = function(_) {
        if (!arguments.length) return classPrefix;
        classPrefix = _;
        return slider;
    }
    slider.tickValues = function(_) {
        if (!arguments.length) return tickValues;
        tickValues = _;
        return slider;
    }
    slider.ticks = function(_) {
        if (!arguments.length) return ticks;
        ticks = _;
        return slider;
    }
    slider.stepValues = function(_) {
        if (!arguments.length) return stepValues;
        stepValues = _;
        return slider;
    }
    slider.tickFormat = function(_) {
        if (!arguments.length) return tickFormat;
        tickFormat = _;
        return slider;
    }
    slider.value = function(_) {
        if (!arguments.length) return value;
        value = _;
        return slider;
    }
    slider.showRange = function(_) {
        if (!arguments.length) return range;
        range = _;
        return slider;
    }
    slider.callback = function(_) {
        if (!arguments.length) return callbackFn;
        callbackFn = _;
        return slider;
    }
    slider.setValue = function(newValue) {
        var pos = scale(newValue) + margin.left;
        slider.move(pos);
    }
    slider.mousemove = function() {
        var pos = d3.mouse(this)[0];
        var val = slider.getNearest(scale.invert(pos), stepValues);
        focus.attr("transform", "translate(" + scale(val) + ",0)");
        focus.selectAll("text").text(val);
    }
    slider.getNearest = function(val, arr) {
        var l = arr.reduce(function(p, c, i, a) {
            if (c < val) {
                return c;
            } else {
                return p;
            }
        });
        var u = arr[arr.indexOf(l) + 1];
        var nearest = ((value - l) <= (u - value)) ? l : u;
        return nearest;
    }
    slider.destroy = function() {
        div.selectAll('svg').remove();
        return slider;
    }
    return slider;
};

dataBW2.csv

dateModel.csv

dateModel
7/19/2015
7/26/2015
8/2/2015
8/9/2015
8/16/2015
8/23/2015
8/30/2015
9/6/2015
9/13/2015
9/20/2015
9/27/2015
10/4/2015
10/11/2015
10/18/2015
10/25/2015
11/1/2015
11/8/2015
11/15/2015
11/22/2015
11/29/2015
12/6/2015
12/13/2015
12/20/2015
12/27/2015
1/3/2016
1/10/2016
1/17/2016
1/24/2016
1/31/2016
2/7/2016
2/14/2016
2/21/2016
2/28/2016
3/6/2016
3/13/2016
3/20/2016
3/27/2016
4/3/2016
4/10/2016
4/17/2016

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css" type="text/css" media="screen"/>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script type="text/javascript" src="http://infographics.economist.com/js_libraries/infographic_mobile.js"></script>
<!--   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> -->
<link rel="stylesheet" href="http://cdn.static-economist.com/sites/all/themes/econfinal/styles/reset.css">
<link type="text/css" rel="stylesheet" media="all" href="http://cdn.static-economist.com/sites/all/themes/econfinal/styles/ec-custom-fonts.css">



  <script src="d3.slider.js"></script>
<!--     <link rel="stylesheet" href="http://cdn.static-economist.com/sites/all/themes/econfinal/styles/reset.css">
    <link type="text/css" rel="stylesheet" media="all" href="http://cdn.static-economist.com/sites/all/themes/econfinal/styles/ec-custom-fonts.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> -->
 <link rel="stylesheet" href="style2.css">



<style>
                  body, h1, h2, h3, p, table, td {
                    margin: 0px;
                    padding: 0px;
                    font-family: Officina, Calibri, Arial;
                    font-size: 13px;
                    line-height: 1.5em;
                    color: #000;
                  }



                  #content {
                    margin: 0px;
                    padding: 0px;
                    width: 595px;
                    text-align: center;
                  }

                  #container {
                    margin: 0px 0px 15px 0px;
                    padding: 0px;
                  }

                  #header h1 {
                    margin: 7px 0px 0px 20px;
                    padding: 0px;
                    font-family: Officina_bold, Calibri, Arial;
                    font-size: 17px;
                    font-weight: normal;
                    color: #000;
                  }

                  #header h2 {
                    margin: -3px 0px 0px 20px;
                    font-family: Officina, Calibri, Arial;
                    font-size: 14px;
                    font-weight: normal;
                  }


                  #footer h1 {
                    margin: 50px 50px 0px 100px;
                    margin-top: 140px;
                    padding: 50px;

                    padding-bottom: 20px;
                    padding-top: 30px;

                    font-family: Officina_bold, Calibri, Arial;
                    font-size: 17px;
                    font-weight: normal;
                    color: #000;
                  }

                  #footer h2 {
                    margin: -3px 0px 0px 60px;
                    font-family: Officina, Calibri, Arial;
                    font-size: 18px;
                    font-weight: normal;
                  }







                  p {
                    margin: 0px 0px 15px 0px;
                    color: #4a4a4a;
                    font-weight: normal;
                    font-family: Arial,sans-serif;
                  }


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

                  .x.axis path {
                    display: none;
                  }

                  .line {
                    fill: none;
                    stroke: steelblue;
                    stroke-width: 1.5px;
                  }

                  #buttons {
                    margin: 10px 5px 0px 0px;
                    padding: 0px;
                    float: right;
                  }

                  .button {
                    display: inline-block;
                    margin: 0px;
                    padding: 2px 5px;
                    line-height: 20px;
                    text-align: center;
                    font-family: Officina, Calibri, Arial;
                    font-size: 14px;
                    display: inline-block;
                    cursor: pointer;
                    border: 1px solid #E30010;
                    margin-right: -5px;
                  }

                  #buttons .selected {
                    background: #ff0000;
                    color: #fff;
                  }

                  .button:hover {
                    background:#ff0000;
                    color: #fff;
                    cursor: pointer;
                  }

                  #header {
                    margin: 0px;
                    padding: 0px;
                    border: 1px solid #E11B17;
                    border-width: 2px 0px 0px 0px;
                  }

                  #block {
                    float: left;
                    margin: 0px;
                    padding: 0px;
                    height: 25px;
                    width: 10px;
                    background: #E11B17;
                  }


                  g.group text {
                    opacity: 0;
                  }

                  .scatter {
                    /*fill: #79d3f6;*/
                    /*stroke: #00a2d9;*/
                    stroke-width: 2;
                    opacity: 1;
                  }

                  .trendline {
                    fill: none;
                    stroke: #7b2713;
                    stroke-width: 2px;
                    opacity: 1;
                  }

                  div.tooltip {
                    position: absolute;
                    pointer-events: none;
                    margin: 0px;
                    padding: 7px;
                    background: #fff;
                    -webkit-border-radius: 5px;
                    -moz-border-radius: 5px;
                    border-radius: 5px;
                    border: 1px solid #ccc;
                    opacity: 0;
                    display: none;
                  }

                  .label {
                    /*display: none;*/
                  }


                  div.tooltip p, div.tooltip h2 {
                    margin: 0px;
                    padding: 0px;
                    font-size: 13px;
                    line-height: 1.2rem;
                    color: #000;
                    text-align: left;

                    font-family: Officina, Calibri, Arial;
                    font-size: 13px;
                  }

                  div.tooltip h2 {
                    margin: 0px;
                    padding: 0px 0px 5px 0px;
                    font-size: 14px;
                  }

                  #chart {
                    margin: 0px;
                    padding: 0px 0px 0px 20px;
                  }

                  #source {
                    margin: 0px 0px 0px 20px;
                    padding: 0px;
                    font-family: Officina, Calibri, Arial;
                    font-size: 14px;
                    color: #000;
                  }

                  .footnote{

                      font-family: Officina, Calibri, Arial;
                    font-size: 12px;
                  }

                  #select {
                    margin: 5px 0px 0px 20px;
                  }

                  @-moz-document url-prefix() {
                  .t-column {
                    margin: 0px -4px 0px 0px;
                  }
                  }



                   div#main-wrapper {
                    width: 200;
                    height: 200;

                  }

                  .baseline line {
                    stroke: #000000;
                    stroke-width: 2px

                  }

  line.annotation{stroke:#999;}

  #line-chart text.annotation,#line-chart .agehighlight text{font-family:'Inconsolata',Monaco,"Lucida Console",Consolas,"Courier New";font-size:14px;fill:#444;text-anchor:left;

  }#line-chart .agehighlight text{fill:#000;font-weight:bold;text-transform:uppercase;}

  #line-chart .agehighlight line{stroke:#000;stroke-width:2px;}




</style>
</head>

<body>

  <div id="header">
  <div id="block"></div>
  <h1>Broadway</h1>
  <h2>The success of Hamilton compared to your own show</h2>

  <!-- <svg id="headerSVG" width="595" height="40"> -->

  </div>
  </div>



  <div id="content">

    <div id="main-wrapper">

        <div id="controls">

            <div class="sentence">Musical? &nbsp;</div>
            <div id="kind" class="dropdown-wrapper", tabindex="0"  style="float:left;z-index:20">
            <span>kind</span>
            <ul class="dropdown"></ul>
            </div>

            <div class="sentence">Starring&nbsp;</div>
            <div id="actor" class="dropdown-wrapper", tabindex="1"  style="float:left;z-index:20">
            <span>Actor type</span>
            <ul class="dropdown"></ul>
            </div>

            <div class="sentence">Genre &nbsp;</div>
            <div id="genre" class="dropdown-wrapper", tabindex="2"  style="float:left;z-index:20">
            <span>Genre</span>
            <ul class="dropdown"></ul>
            </div>


    <!-- 2nd line -->

            <div class="sentence">Sold-out? &nbsp;</div>
            <div id="kind" class="dropdown-wrapper", tabindex="0"  style="float:left;z-index:10">
            <span>Yes</span>
            <ul class="dropdown"></ul>
            </div>

            <div class="sentence">Days-open? &nbsp;</div>
            <div id="actor" class="dropdown-wrapper", tabindex="1"  style="float:left;z-index:10">
            <span>7 days</span>
            <ul class="dropdown"></ul>
            </div>

            <div class="sentence">Original? &nbsp;</div>
            <div id="genre" class="dropdown-wrapper", tabindex="2"  style="float:left;z-index:10">
            <span>Yes</span>
            <ul class="dropdown"></ul>
            </div>

    <!-- 3rd line -->
            <div class="sentence">Disney? &nbsp;</div>
            <div id="kind" class="dropdown-wrapper", tabindex="0"  style="float:left;z-index:10">
            <span>No</span>
            <ul class="dropdown"></ul>
            </div>

            <div class="sentence">Variable? &nbsp;</div>
            <div id="actor" class="dropdown-wrapper", tabindex="1"  style="float:left;z-index:10">
            <span>Fill</span>
            <ul class="dropdown"></ul>
            </div>

            <div class="sentence">Variable? &nbsp;</div>
            <div id="genre" class="dropdown-wrapper", tabindex="2"  style="float:left;z-index:10">
            <span>Fill</span>
            <ul class="dropdown"></ul>
        </div>


<!-- Cast -->

        <div class="sentence"> Cast-size</div>
        <div id="cast">
        <div id="ageslider" class="sliderholder"></div>
        <div id="agevalue"></div>
        </div>
        </div>
        <!-- end Controls -->

      </div><!-- @end #main-wrapper -->

    </div>


    <div id="content">

      <div id="main-wrapper">


        <div id="footer">
        <!-- results -->
        <h1 width="500px" id="resultheading">Revenue prediction (in US$):</h1>
        <h2 width="500px" id="resultVal"></h2>
        </div>



        <div id="container">

          <div id="chart"></div>

      		<!-- <p id="source">Sources: OECD; Economist Intelligence Unit</p> -->

      	</div>

    </div><!-- @end #main-wrapper -->


  </div>









  <script>


var margin = {top: 20, right: 80, bottom: 50, left: 90},
    width = 595 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;


    // var barChartHeight = 130;
        var areaChartHeight = 500;
        var tagColour = "#e11b17";

        var colHighlighted = "#FD9D28";
        var colUnhighlighted = "#dddddd";
        var colourButtonOff = "#ffffff";   // white
        var colourButtonOn = "#00699f"; // blue
        var highlightColour = "#9a404f";
        var colourTint = "#7fc9c7";
        var p99Colour = "#3dbbd1";






var kind = {
  "play": "Play",
  "musical": "Musical",
}

var actor = {    // 1
	"AActor": "A-Actor",
	"bActor": "B-Actor",
  "cActor": "C-Actor",
};

var genre = {   // 2
	"comedy": "Comedy",
	"drama": "Drama",
	"other": "Other",
};



//     currentCastSize  // 3
    var currentKind = "play";
    var currentActor = "AActor";
    var currentGenre = "comedy";
    var currentCastSize = 50;

    var currentKindID = 0,
        currentActorID = 0,
        currentGenreID = 0;


var result;

     // kind dropdown menu
    var dropdown_kind = d3.select("#controls #kind");
	dropdown_kind.select("span").text(kind[currentKind]);

  dropdown_kind.on("click", function() {
        d3.select(this).classed("active", !d3.select(this).classed("active"));
    });
    var dropdown_kind_li = dropdown_kind.select(".dropdown").selectAll("li")
        .data(d3.keys(kind))
      .enter().append("li")
        .attr("id", function(d) { return d; })
        .classed("current", function(d) { return d == currentKind ? true : false; }).text(function(d) { return kind[d]; });

    dropdown_kind_li.on("click", function(d, i) {
        d3.select("#kind span").text(kind[d]);

        d3.select(this).classed("current", true);
        d3.select("#kind #" + currentKind).classed("current", false);

        currentKind = d;
        currentKindID = i;

//             console.log(currentKindID)

// 		resetCounts();
        update();

        return currentKindID;
    });




 // Actor dropdown menu
    var dropdown_actor = d3.select("#controls #actor");
	dropdown_actor.select("span").text(actor[currentActor]);

  dropdown_actor.on("click", function() {
        d3.select(this).classed("active", !d3.select(this).classed("active"));
    });
    var dropdown_actor_li = dropdown_actor.select(".dropdown").selectAll("li")
        .data(d3.keys(actor))
      .enter().append("li")
        .attr("id", function(d) { return d; })
        .classed("current", function(d) { return d == currentActor ? true : false; }).text(function(d) { return actor[d]; });

    dropdown_actor_li.on("click", function(d, i) {
        d3.select("#actor span").text(actor[d]);

        d3.select(this).classed("current", true);
        d3.select("#actor #" + currentActor).classed("current", false);

        currentActor = d;
        currentActorID = i;

//         console.log(currentActorID)


// 		resetCounts();
        update();

        return currentActorID;

    });


    // Genre dropdown menu
    var dropdown_genre = d3.select("#controls #genre");
	dropdown_genre.select("span").text(genre[currentGenre]);

  dropdown_genre.on("click", function() {
        d3.select(this).classed("active", !d3.select(this).classed("active"));
    });
    var dropdown_genre_li = dropdown_genre.select(".dropdown").selectAll("li")
        .data(d3.keys(genre))
      .enter().append("li")
        .attr("id", function(d) { return d; })
        .classed("current", function(d) { return d == currentGenre ? true : false; }).text(function(d) { return genre[d]; });

    dropdown_genre_li.on("click", function(d, i) {
        d3.select("#genre span").text(genre[d]);

        d3.select(this).classed("current", true);
        d3.select("#genre #" + currentGenre).classed("current", false);

        currentGenre = d;
        currentGenreID = i;


//    console.log(currentGenreID)
// 		resetCounts();
        update();

      return currentGenreID;
    });


	var age_slider = d3.slider().min(0).max(100).ticks(0).stepValues(d3.range(0,100)).value(currentCastSize)
		.callback(brushed);
	d3.select("#ageslider").call(age_slider);
	d3.select("#agevalue").text(currentCastSize);





var parseDate = d3.time.format("%m/%d/%Y").parse;

var x = d3.time.scale()
    .range([0, width]);

 var xA = d3.scale.linear()
    .range([0, width]);

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

var yA = d3.scale.linear()
    .domain([0, 1])
    .range([height, 0]);

var color = d3.scale.ordinal().range(["#70C7DB", "#A15F7F"]);


var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
.ticks(6)
    .tickFormat(d3.time.format("%W"))


var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
.tickSize(-width)
.ticks(7);

var line = d3.svg.line()
    .interpolate("step")
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.temperature); });

var svg = d3.select("#chart").append("svg").classed("wrapper2", true)
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


ageAnnotate(1.1,100, "Hamilton's success sticks out");
ageAnnotate(1.3,371, "Average income across 1040 shows is 652,079.9");





d3.csv("dataBW2.csv", function(error, data) {
  if (error) throw error;

  color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));

  data.forEach(function(d) {
    d.date = parseDate(d.date);
  });

  var cities = color.domain().map(function(name) {
    return {
      name: name,
      values: data.map(function(d) {
        return {date: d.date, temperature: +d[name]};
      })
    };
  });

  x.domain(d3.extent(data, function(d) { return d.date; }));

  y.domain([
    d3.min(cities, function(c) { return d3.min(c.values, function(v) { return v.temperature; }); }),
    d3.max(cities, function(c) { return d3.max(c.values, function(v) { return v.temperature; }); })
  ]);

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  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("Cumulative revenue, in $");

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

  city.append("path")
      .attr("class", "line")
      .attr("d", function(d) { return line(d.values); })
      .style("stroke", function(d) { return color(d.name); })
      .style("stroke-opacity", 0.7);

  city.append("text")
      .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
      .attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.temperature) + ")"; })
      .attr("x", 3)
      .attr("dy", ".35em")
      .text(function(d) { return d.name; })
      .style("fill", function(d) { return color(d.name); })

  svg.append("g")
  .attr("class", "baseline")
  .attr("transform", "translate(0, "+ height +")")
  .append("line")
  .attr("x1", -20)
  .attr("x2", width)
  .attr("y2", 0)

  });


var parseDate2 = d3.time.format("%m/%d/%Y").parse;

var dataNew = [];
    var datafinal;



d3.csv("dateModel.csv", function (error, dataWeeks, results) {

  var results = 0;


  dataWeeks.forEach(function(d, i) {
        d.x2 = parseDate2(d.dateModel);
        d.y2 = (results*i);
//         dataNew.push({x2: parseDate2(d.dateModel),
//                       y2: (results*i)})

      }); // end for map function


//   console.log(dataWeeks)


     var line3 = d3.svg.line()
      .interpolate("step")
      .x(function(d) { return x(d.x2); })
      .y(function(d) { return y(d.y2); });


     var linegraph3 =  svg.append("path")
      .attr("class", "line3")
      .attr('d', function(d){return line3(dataWeeks)})
      .style("stroke", "#0C6290")
      .style("fill", "none")
      .style("stroke-width", 4)
      .style("stroke-opacity", 0.7)
      .attr("transform", "translate(0, -5)");


      update(dataWeeks, line3)

    })



function brushed () {
    update();
      currentCastSize = age_slider.value();
    d3.select("#agevalue").text(currentCastSize)
            return currentCastSize;

}


function ageAnnotate(year, Ypos, text) {
svg.append("line")
.attr("class", "annotation")
.attr("x1", 259)
.attr("x2", 259)
.attr("stroke-dasharray", "3,3")
.attr("y1", yA(0))
.attr("y2", yA(1));

svg.append("text")
.attr("class", "annotation")
.attr("transform", "translate("+xA((year-0.8))+","+Ypos+")rotate(-0)")
.text(text);
}


function update () {

var results = ((currentCastSize/5) + (currentGenreID*20) + (currentActorID*20) + (currentKindID*20)) * 100000;

      d3.csv("dateModel.csv", function(error, dataUpdate) {
       	dataUpdate.forEach(function(d, i) {
	    	 d.x2 = parseDate2(d.dateModel);
         d.y2 = (results*i);
	    });


var line3 = d3.svg.line()
    .interpolate("step")
    .x(function(d) { return x(d.x2); })
    .y(function(d) { return y(d.y2); });


    svg.select(".line3")
    .transition()
    .duration(750)
    .attr('d', function(d){return line3(dataUpdate)});

    d3.select('#resultVal')
    .text(results);

    return results;

    });

} // update function end
    
    
    
var weekly_av_2015_16 =  907573.9;
var weeklystde_2015_16 = 479660.8;
    
    
// Original setup    
// 200
// 100
// 1500
// 30
// 1
// 1
// 45
// 0
// 0
// 1
// 4
// 3
// 0
// 0
// 1

var 	A2	=	200	;
var 	B2	=	100	;
var 	C2	=	1500	;
var 	D2	=	30	;
var 	E2	=	1;
var 	F2	=	1	;
var 	G2	=	45	;
var 	H2	=	0	;
var 	I2	=	0	;
var 	J2	=	1	;
var 	K2	=	4	;
var 	L2	=	3	;
var 	M2	=	0	;
var 	N2	=	0	;
var 	O2	=	1	;
    
var finalNum;
    

// predictor function call
predictor(A2,B2	,C2	,D2	,E2	,F2	,G2	,H2	,I2	,J2	,K2	,L2	,M2	,N2	,O2,weekly_av_2015_16,weeklystde_2015_16)

function predictor (A2	,B2	,C2	,D2	,E2	,F2	,G2	,H2	,I2	,J2	,K2	,L2	,M2	,N2	,O2 , weekly_av_2015_16, weeklystde_2015_16) {
  
      ProbSellout = 1/
          (
            1+
            (
              Math.exp(
                -(
                  -(0.0042183*A2)
                  +(0.0039907*B2)
                  +(0.0000626*(Math.pow(A2, 2)))
                  +(0.00000812*(Math.pow(B2, 2)))
                  -(0.0007982*C2)
                  +(0.0419669*((D2==47?1:0)))
                  +(1.041139*(Math.pow(((D2==52?(6/7):(D2==53?3/7:0))), 2)))
                  -(0.1213413*D2)
                  +(0.0129541*(Math.pow(D2, 2)))
                  -(0.0003998*(Math.pow(D2, 3)))
                  +(0.00000373*(Math.pow(D2, 4)))
                  -(0.4756087*E2)
                  -(3.885171*F2)
                  -(0.092289*G2*F2)
                  +(1.883142*H2)
                  -(0.0162975*I2)
                  +(0.0839098*G2)
                  +(0.1854669*J2)
                  -(0.8336684*(1-J2))
                  +(0.2028874*F2*K2)
                  +(0.1258541*J2*F2)
                  +(0.3561441*F2*(1-J2))
                  -(0.470837*(Math.log(G2)))
                  +(1.802581*F2*(Math.log(G2)))
                  +(1.217256*(Math.log(L2)))
                  -(0.5184693*F2*(Math.log(L2+1)))
                  -(0.1466195*M2)
                  -(0.157074*N2)
                  +(0.0150286*(Math.log(O2+1)))
                  -1.9122703
                )
              )
            )
        )
              
    //   console.log(ProbSellout)
  
  var ZIfSellout = ((-0.0016507*A2)
    +(0.0052863*B2)
    +(0.0000186*(Math.pow(A2, 2)))
    -(0.0000205*(Math.pow(B2, 2)))
    +(0.0015585*C2)
    +(0.2960315*E2)
    -(0.5571162*F2)
    -(0.0105103*F2*G2)
    +(0.0739237*H2)
    -(0.100593*I2)
    +(0.0156484*G2)
    +(0.1381832*K2)
    +(0.3338621*F2*(Math.log(G2)))
    +(0.1955426*F2*(Math.log(L2+1)))
    +(0.0734202*M2)
    -(0.1991816*N2)-2.682552)
  
  //   console.log(ZIfSellout)

  
  var ZIfNoSellout = (
          (0.0011112*B2)
          +(0.0000139*(Math.pow(A2, 2)))
          -(0.0007004*A2)
          -(0.000000678*(Math.pow(B2, 2)))
          +(0.2004303*E2)
          -(1.477247*F2)
          -(0.006352*F2*G2)
          +(0.38273282*H2)
          +(0.0155657*G2)
          +(0.1257408*F2*K2)
          +(0.5647975*F2*(Math.log(G2)))
          +(0.1675119*(Math.log(L2+1)))
          +(0.1041002*M2)
          +(0.0932572*N2)
          -1.186324)
  
  var projZ =(ProbSellout*ZIfSellout)+((1-ProbSellout)*ZIfNoSellout)
  
//   console.log(projZ)
  
  var WeekAvRatio = (
        (0.1219971*((D2==47?1:0)))
        +(0.3760431*(Math.pow(((D2==52?(6/7):(D2==53?3/7:0))), 2)))
        -(0.0392583*D2)
        +(0.0030492*(Math.pow(D2, 2)))
        -(0.0000761*(Math.pow(D2, 3)))
        +(0.000000606*(Math.pow(D2, 4)))
        +1.052012
        )
  
//   console.log(WeekAvRatio)
  
  var WeekStdevRatio = (
    (0.040333*((D2==47?1:0)))
    +(0.4126905*(((D2==52?(6/7):(D2==53?3/7:0)))))
    -(0.5734843*(Math.pow(((D2==52?(6/7):(D2==53?3/7:0))), 2)))
    +(0.0358187*D2)
    -(0.0022887*(Math.pow(D2, 2)))
    +(0.0000488*(Math.pow(D2, 3)))
    -(0.000000324*(Math.pow(D2, 4)))
    +0.8853995
    )
  
    console.log("projZ " + projZ + ", " +
                "WeekStdevRatio " + WeekStdevRatio + ", " +
                "weeklystde_2015_16 " + weeklystde_2015_16 + ", " +
                "WeekAvRatio " + WeekAvRatio + ", " +
                "weekly_av_2015_16 " + weekly_av_2015_16 + ", "
                )
  
  var ProjGross =(projZ*WeekStdevRatio*weeklystde_2015_16)+(WeekAvRatio*weekly_av_2015_16)
  
      finalNum =  ProjGross.toFixed(); 

      var Revenue = d3.select("#result").append("text")
      .text(finalNum + "$ USD").style("font-size", 30)
      
      
      return finalNum;

      
} // end of predictor function
    
   console.log(finalNum)
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    




  </script>
</body>

style.css

@font-face {
  font-family: EconSans;
  font-weight: 300;
  src: url('econsanslig-webfont.woff2') format('woff2'), url('econsanslig-webfont.woff') format('woff'); }

@font-face {
  font-family: EconSans;
  font-style: normal;
  src: url('econsanscndreg-webfont.woff2') format('woff2'), url('econsanscndreg-webfont.woff') format('woff'); }

@font-face {
  font-family: EconSansCnd;
  font-weight: 700;
  src: url('econsanscndmed-webfont.woff2') format('woff2'), url('econsanscndmed-webfont.woff') format('woff'); }

@font-face {
  font-family: EconSansCnd;
  font-weight: 300;
  src: url('econsanscndlig-webfont.woff2') format('woff2'), url('econsanscndlig-webfont.woff') format('woff'); }

@font-face {
  font-family: EconSans;
  font-weight: 700;
  src: url('econsansmed-webfont.woff2') format('woff2'), url('econsansmed-webfont.woff') format('woff'); }

@font-face {
  font-family: EconSans;
  font-style: italic;
  src: url('http://www.economist.com/assets/ecosans-ita.woff2') format('woff2'), url('http://www.economist.com/assets/ecosans-ita.woff') format('woff'); }

@font-face {
  font-family: MiloSerifPro;
  font-style: normal;
  src: url('http://www.economist.com/assets/ecoserif-reg.woff2') format('woff2'), url('http://www.economist.com/assets/ecoserif-reg.woff') format('woff'); }

@font-face {
  font-family: MiloSerifPro;
  font-style: italic;
  src: url('http://www.economist.com/assets/ecoserif-ita.woff2') format('woff2'), url('http://www.economist.com/assets/ecoserif-ita.woff') format('woff'); }

@font-face {
  font-family: MiloSerifPro;
  font-weight: 500;
  src: url('http://www.economist.com/assets/ecoserif-med.woff2') format('woff2'), url('http://www.economist.com/assets/ecoserif-med.woff') format('woff'); }



  @font-face {
      font-family: 'econ_sans_cndmedium_italic';
      src: url('econsanscndmedita-webfont.woff2') format('woff2'),
           url('econsanscndmedita-webfont.woff') format('woff'),
           url('econsanscndmedita-webfont.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;

  }



.mnv-ec-Deciles {
  font: 14px EconSans, Officina, Calibri, Arial;
  font-weight: normal; }

.Deciles {
  font: 14px EconSans, Officina, Calibri, Arial; }

.header {
  font-family: EconSans, Calibri, Arial;
  font-size: 18px;
  font-weight: bold; }

.subheader {
  font-size: 16px;
  font-weight: normal; }

.chartHeader {
  font-family: Officina_bold, Calibri, Arial;
  font-size: 14px; }

.overlay {
  fill: none;
  pointer-events: all; }

.path {
  stroke-linejoin: round; }

.land-glow {
  fill-opacity: .5;
  filter: url(#blur); }

.land-fill {
  fill: #fff; }

.state-boundary {
  fill: none;
  stroke: #888;
  stroke-width: .70px; }

.county-boundary {
  fill: none; }

.land-fill, .county-boundary {
  stroke: #999;
  stroke-width: .35px; }

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

.axisBlack line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges; }

.axis text {
  font-size: 13px; }

.bar {
  fill: steelblue; }

.y.axis path {
  display: none; }

.y.axis line {
  fill: #ccc;
  stroke: #ccc;
  opacity: 0.3; }

.y.axis {
  fill: #000; }

.volcano {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 10px red;
  -moz-box-shadow: 0px 0px 10px red;
  box-shadow: 0px 0px 10px red; }

.yearContainer {
  font-size: 22px; }

.land-glow {
  fill-opacity: .7;
  filter: url(#blur); }

.land-fill {
  fill: #fff; }

.vName {
  font-size: 16px;
  font-family: Officina_bold, Calibri, Arial; }

.vCountry {
  font-size: 13px;
  font-style: italic; }

.vInfo {
  font-size: 14px;
  font-style: normal; }

.Rubric {
  font-size: 12px;
  fill: #666; }

.v3 {
  pointer-events: all; }

.clouds, .v1, .v2 {
  pointer-events: none; }

.DLine {
  fill: none; }

.countryText {
  font-size: 12px; }

#canvas {
  position: absolute;
  font: 14px Officina, Calibri, Arial; }

.countryNav, .decileNav {
  opacity: 0.5;
  cursor: pointer; }

.countryNavSel, .decileNavSel {
  opacity: 1;
  cursor: pointer; }

.typeNav, .avNav, .typeNavSel, .avNavSel {
  cursor: pointer; }

.radioBut {
  stroke: #ccc;
  stroke-width: 2;
  fill: #fff; }

.rbDot {
  stroke: none;
  fill: #000;
  opacity: 0; }

.rbDotSel {
  stroke: none;
  fill: #000;
  opacity: 1; }

.selected {
  stroke: none;
  fill: #000;
  opacity: 1; }

.area, .area99 {
  stroke: none;
  pointer-events: none; }

.area {
  fill: #bae9f1; }

.area99 {
  fill: #ddf4f9; }

.noPointer {
  pointer-events: none; }

.dashVertical, .dashHorizontal {
  pointer-events: none; }

style2.css

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 50%;
    font: inherit;
    vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}


/*DOM elements */

#main-wrapper {
    font-family: Officina, Calibri, Arial;
}

.clr {
    clear: both;
}

#controls {
    margin-left: 3px;
    font-size: 15px;
    margin-bottom: 10px;
}

#controls .sentence {
    float: left;
    padding-bottom: 10px, padding-left: 0, padding-right: 0, padding-top: 0,
}

#cast {
    width: 250px;
    float: left;
}

#age #agevalue {
    text-align: center;
    font-weight: bold;
    padding-left: 50px;
}


/*#speed{font-family: Officina, Calibri, Arial;font-size:16px;text-transform:uppercase;margin:0px 0 0px 20px;float:left;}
#speed .togglebutton{padding:3px 3px;text-align:center;border:1px solid #ccc;cursor:pointer;float:left;width:28px;}*/

#result {
    margin: 7px 0px 0px 20px;
    padding: 0px;
    font-family: Officina_bold, Calibri, Arial;
    font-size: 17px;
    font-weight: normal;
    color: #000;
}

.resultheading {
    padding-top: 20px;
}

.dropdown-wrapper {
    position: relative;
    width: 50px;
    padding: 0px 16px 5px 5px;
    float: left;
    margin: 0 14px 18px 0;
    background: #fff;
    border-bottom: 2px solid black;
    cursor: pointer;
    outline: none;
    font-weight: bold;
}

.dropdown-wrapper:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    right: 5px;
    top: 50%;
    margin-top: -0px;
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: red transparent;
}

.dropdown-wrapper .dropdown {
    position: absolute;
    top: 100%;
    left: -5px;
    right: 0px;
    background: white;
    transition: all 0.3s ease-out;
    list-style: none;
    opacity: 0;
    pointer-events: none;
}

.dropdown-wrapper .dropdown li {
    display: block;
    text-decoration: none;
    color: red;
    border-left: 3px solid;
    padding: 5px 8px;
    transition: all 0.2s ease-out;
}

.dropdown-wrapper .dropdown li:hover {
    color: #FFF;
    background: red;
}

.dropdown-wrapper .dropdown li.current {
    display: none;
}

.dropdown-wrapper.active:after {
    border-width: 0 6px 6px 6px;
}

.dropdown-wrapper.active .dropdown {
    opacity: 0.7;
    pointer-events: auto;
}


/*Slider*/

div#ageslider.sliderholder.d3slider {
    height: 20px;
}

.d3slider {
    z-index: 10;
    height: 100%;
    width: 210px;
    background: none;
}

.d3slider-rect-range {
    fill: #000;
    stroke: "none";
}

.d3slider-axis {
    position: relative;
    z-index: 1;
    cursor: col-resize;
}

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

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

.d3slider text {
    font: 10px Officina, Calibri, Arial;
}

.tick.minor text {
    display: none;
}

.tick line {
    stroke-width: 1;
}

.tick.minor line {
    stroke-width: 1;
    stroke: #bbb;
}

.dragger rect {
    fill: #fff;
    stroke: none;
    z-index: 2;
}

.dragger line {
    stroke: #fff;
    fill: none;
}

.dragger-outer {
    fill: red;
    stroke: #000;
    stroke-width: 1;
}

.dragger-inner {
    fill: #fff;
    stroke: none;
}

.min-marker line {
    stroke: #aa0000;
    fill: none;
}

.overlay {
    fill: none;
    pointer-events: all;
    z-index: 1;
}


/*bars and vals*/

#lives {
    width: 560px;
    float: left;
}

#lives .lifecircle {}

#counts {
    float: left;
    width: 390px;
    margin-top: 8px;
}

.count {
    height: 26px;
}

.bar {
    height: 26px;
}

.countlabel {
    position: relative;
    font-size: 14px;
    top: -26px;
    left: 0;
    height: 26px;
    margin: 6px;
    width: 300px;
}

#barchart {
    float: left;
    width: 340px;
}

#barvals {
    float: left;
    width: 30px;
    color: #aaa;
    margin-top: 6px;
}

#barvals .val {
    font-size: 14px;
    height: 26px;
}

#currentage {
    float: left;
    width: 190px;
    margin-right: 16px;
}

#currentpctdead {
    float: left;
    width: 84px;
    margin-right: 16px;
}

#currentpctalive {
    float: left;
    width: 84px;
}

.subtitle {
    text-transform: uppercase;
    font-size: 14px;
    border-bottom: 1px solid #000;
    padding-bottom: 3px;
    margin-bottom: 8px;
}

.valholder {
    font-size: 30px;
    margin-bottom: 20px;
}


/*Economist fonts: */

thumbnail.png