index.html

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
<script>
  MathJax.Hub.Config({
                      tex2jax: {inlineMath: [['$', '$'], ['\\(','\\)']]},
                      TeX: { equationNumbers: {autoNumber: "AMS"} },
                      "HTML-CSS": { showMathMenu: false,
                                    scale: 90 }
                     });
</script>
<link rel="stylesheet" href="base.css">
<style>
#nav {
	position: static;
}

a:hover.screenshot {
  opacity: .7;
}

.site {
  fill: white;
  stroke: black;
  stroke-width: 1;
}

.client {
  fill: black;
  opacity: .5;
}

.repclass{
}
.voterclass{
}

.place,
.place-label {
  fill: black;
  opacity: 1;
  stroke: none;
}

</style>
<script>
	// "lightblue","lightgreen","tomato","yellow","orange"
	var color_fill = ["#add8e6","#90ee90","#ff6347","#ffff00","#ffa500","#65C1A5","#8D9EC9","#E68AC2","#D4BDDC","#DDCFAF","#6EA0C8","#D90015","#DE9B13","#6EA0C8","#A4D959","#198E64","#DD0076","#936219","#525252","#615AA2"];
	var color_stroke = ["#000099","#006600","#990000","#999900","#994400","black","black","black","black","black","black","black","black","black","black","black","black","black","black","black"];
</script>

<body>
<ul id="nav">
    <li class="current"><a href="#intro">Intro</a></li>
    <li><a href="#problem">Problem</a></li>
    <li><a href="#model">Model</a></li>
    <li><a href="#implementation">Implementation</a></li>
    <li><a href="#demo">Live Demo</a></li>
  </ul>
  <div id="example_container">
    <div class="example_section" id="intro">
      <h1>Searching for Parliament</h1>
        <subtitle>(the computer science kind of search)</subtitle>
    </div>
    <p>
      Selecting a group of people to represent a nation is an example of what computer science calls a search problem, an assignment problem, and a load balancing problem.  Distributing goods in an economy is a problem of supply and demand.  These problems have something in common.  We would like to sell to the highest bidder.  Representatives should be the candidates who got the most votes.
	</p>
	<p>
	  Also, there is a moral problem.  There is demand for representation that is not being met.  Because we have single winner districts, the winner doesn't even need 50% of the vote to win the right to represent all the voters. Some voters are able to get a great deal on their politicians, while other voters could have pooled their votes across districts and elected a more valuable representative.
    </p>

    <p>
      Let's get started on the computer science.  We'll construct a mathematical model of the load balancing problem, implement this model in the Python programming language with an optimization package called Gurobi, and compute and visualize an optimal solution.
    </p>

    <p>
      The implementation of the model and the structure of this explanation is forked from the work of Emilien Dupont (on <a href="https://github.com/EmilienDupont/facilityLocation">github</a> and hosted as <a href="http://examples.gurobi.com/facility-location/"> a featured example on Gurobi's website</a>).  The code for <a href="https://github.com/paretoman/searchingforparliament">this website is on github</a>.
    </p>

    <h3>
      Click the screenshot to skip directly to the Live Demo!
	</h3>
    <p>
	  Note: The live demo is only partly-functional because I have to work out the Gurobi license.
	</p>
    <p>
      <a href="#demo" class="screenshot">
        <img src="screenshot.png" alt="Live Demo" style="vertical-align: middle;">
      </a>
    </p>


    <div class="example_section" id="problem">
      <h2><a href="#problem" name="problem">Problem Description</a></h2>

    <div style="float:right;">
      <a href="https://en.wikipedia.org">
        <img src="Sir_Gerald_Kaufman.jpg" alt="Sir_Gerald_Kaufman" style="width:200px;">
      </a>
    </div>

    <p>Northern England gets rid of district boundaries because there was too much debate about where the boundaries should go.  It wants to pick 5 reps (representatives).  And it wants to space them out instead of having them all from the middle.  It wants regional interests to be represented and it doesn't want all the seats to be taken by people from the same neighborhood in the middle of Northern England.</p>

    <p>Several good candidates have decided to run, but it remains to decide which should win.</p>

        <aside> A typical rep.<span style="font-size: 10px"></span>
    </aside>

    <p>Selecting reps from the middle of Northern England would be advantageous as they would have the most votes overall.  However, voters from the middle of Northern England would be overrepresented and voters from the coast would be very far from their from their reps.</p>

    <p>We will find the optimal tradeoff between reps being near all the voters and voters having reps nearby.</p>

    <h3> Search Trees </h3>
      <p>
        Our problem is related to a very famous problem in computer science called the knapsack problem.  It differs in many ways.  It is similar in how it can be solved.  Both are kinds of binary search.  A search problem tries to find a combination of variables that is in some way the best combination.  One way to approach such a problem is the branch and bound method.  Here is a video on the <a href="https://www.coursera.org/learn/discrete-optimization/lecture/66OlO/knapsack-5-relaxation-branch-and-bound">branch and bound method</a> from a fantastic Coursera course in the field of <a href="https://www.coursera.org/learn/discrete-optimization/">discrete optimization</a>.  From this video, just understand that <b>there is a large number of possible choices to make and that they can all be organized in a tree structure</b>.  (The actual algorithm for searching through the tree will be taken care of by Gurobi, and we don't talk about it below.)  We still haven't said what the score is for each choice (or path) in the tree, so let's do that.  Most of the writing below is about that.  Each choice in the tree represents whether a candidate wins.  The first split is for the first candidate, the second split is for the second candidate, etc.
      </p>
        <p> 
        <div style="text-align: center">
		<p>
		<img src = "./tree.png"/>
		</p>
		</div>
        </p>
      <p>
          This tree is not for the problem at hand, but our problem is similar because it has the same binary variables $x_i$.
	  </p>
    </div>

    <div class="example_section" id="model">
      <h2><a href="#model" name="model">Mathematical Model</a></h2>
      <p>
        Let us now formulate a mathematical model for our problem.
      </p>
	    
      <p>
        We need to say when a candidate wins.  Let's list all the candidates as can #1, can #2, can #3, etc, and let's make variables for each one.  If can #1 wins, then $x_1=1$ and if can #2 loses, then $x_2=0$.  Basically, $x_j$ is binary.
        \[
        x_j = \left\{\begin{array}{ll}
               1 & \text{if we choose can #j, }\\
               0 & \mathrm{otherwise.}
              \end{array}\right.
        \]
		We set a constraint on the $x_j$ variables because there are only a limited number of seats in the legislature.  We set the sum of all $x_j$ to this number of seats.
        \[
        \sum_{j \in Reps} x_j = \text{number of seats}
        \]
      </p>
	  <h3> Map Data </h3>
      <p>
        We need to say how close a voter is to a candidate.  Let's list all the voters as voter #1, voter #2, etc, and let's make measurements for each voter and candidate combination.  If the distance between voter #1 and can #3 is 100 km, then $d_{13}=100$.
        \[
        d_{ij} = \text{distance between voter i and rep j}
        \]
      </p>

      <p>
        What does a ballot look like? We want to make this problem easy to show on a map so we're going to make a simplification of the problem.  We're going to let the voters give scores.  This is actually nicer for the voters because they get to say what they think of every candidate.  Also, voters will base their score entirely on how far away the candidate is.  Basically, the score will be the inverse of distance.
        \[
		\begin{array}{ll}
        a_{ij} & = {\displaystyle \frac{1}{d_{ij}/10 + 1} } & \text{Inverting distance}\nonumber \\
		b_{ij} & = {\displaystyle a_{ij} * \frac{1}{\max_{m \in Voters}{a_{mj}}}} &\text{Ballot normalized}  \nonumber
		\end{array}
        \]
      </p>
      <p>
        The 10 is here for scaling distance.  The extra 1 is here to avoid dividing by 0.  Really, there are many choices for this function. One more modification we make is to allow voters who don't have a candidate nearby to vote with their full vote for their closest candidate.  This is normalization.
      </p>
        <div style="text-align: center">
		<p><img src="./tally.png" style="text-align: center" /></p>
		</div>
      <p>
        We need a way to count the ballots.  The easiest way is to add them together to get the tallies for each candidate.
        \[
        tally_j = \sum_{i \in Voters} b_{ij} 
        \]
      </p>
	  <h3> Motivation </h3>
	  <div class="spacer" id="triggerjefftop"></div>
      <p>
        If we stop here then we just end up picking the candidates in the middle because they have the highest tallies.
      </p>
      <p>
        We want to avoid overrepresenting the middle voters because they would be getting representation for cheap.  <b>Think of the price of a seat in parliament as the number of voters represented by it.</b>  We want as much representation as possible.  We also want to avoid overrepresentation.  Think of the value of a vote as a fraction of a seat in parliament.  We want to spread vote value evenly so that each voter has fair representation.
		
		</p>
      <p>
		
		Our solution is to let the reps keep a fraction of their voters' ballots.  Voters have reps, so it makes sense that the reps get to keep the voters, too.  Each rep must keep the same amount of votes. The idea of the rep keeping some votes is not new.  The election method called Single Transferable Vote (STV) does the same thing.  It is different because it doesn't use scores.  It uses ranking.  Still, it is very similar.  When a candidate is declared a winner, he keeps a "quota" of votes and the rest of the votes go to the voters' second choices.
        \[
        \text{STV quota} = \frac{\text{voters}}{\text{seats} + 1}
        \]
        The quota is set as the number of voters divided by the number of seats to fill with reps.  An additional 1 is added to the number of seats because of the iterative nature of STV (a longer explanation is needed).  Basically, this quota is the price of a seat in parliament, and only those candidates with enough cash (votes) can pay this price.
      </p>
	  <h3> Jefferson's method, Phragmen's method, and Load Balancing</h3>
      <p>
        Something similar also happens when deciding how many seats each state gets in the US House of Representatives.  Think of it like an auction.  The price starts off low and there are too many bidders and not enough seats.  In an auction the price goes up until there are exactly the number of bidders left to buy all the items.  It's basically the same with seats except the seats are "paid" for by population numbers.
		</p>
		<p style="text-align:center">
		<span id="bid3"></span>
		</p>
		
		<p>		

		We can flip that around so that the auction house gets a higher price.  We can start at a high price and then lower it until we have enough buyers.  Likewise, for the House, we can start at a high number of voters required for a seat.  As we lower the requirement, we assign seats to the states that can pay until all the seats are filled.  It's easy to grasp because we are filling the seats one by one.  Note that this method assings the seats proportionally, so a state with twice the population will have twice as many seats:
		</p>
		<p style="text-align:center">
		<span id="bid"></span>
		</p>
		
		<p>		
		Also, instead of price or voters-per-seat, <b>think of the amount of representation a voter gets, the vote value</b>.  Vote value starts low and is increased until one representative can be bought.  The process goes one representative at a time until we fill all 435 seats.
		</p>
		<p style="text-align:center">
		<span id="jeff"></span>
		</p>
		<p>
		This is Jefferson's method, and it was the first method used by the US House of Representatives.  It lasted for 50 years until being replaced by Webster's method, a slight variation.  Jefferson's method ensured that no state got a special deal on representation when another state would have deserved it more.  In this way, the states each had representation in proportion to their population.  
		</p>
		
	  <div class="spacer" id="triggerliquidtop"></div>
      <p>
		This method can be represented as an election.  In this election, the ballots are pretty simple since every voter approves all the candidates from their state.  
		\[
		b_{ij} =1 \ \ \ \ \ \forall \ j \in Reps \ , \  i\in Voters  \ \ \text{in the same state.} \\
		\]
		Also, the candidates (or seats) are all identical and a state just gets a number of seats instead of individual representatives.
		</p>
      <p>
		Now we have a different way to look at Jefferson's method of apportionment.
		
		We can make a graphical representation of vote value.  Let's call it y.  Each vote will be represented with a box of height y and width 1.  We combine many boxes together into a block, a bigger box.  The block's width is the number of voters:
		
		</p>
		<p style="text-align:center">
		<span id="splitrectangle"></span>
		</p>
		<p>
		The area is what you get when you multiply the vote value (seats per vote) by the number of voters.  So the area is 1 seat.  Every candidate's block has an area of 1.  We can write this mathematically, with v for voters, as
		\[
		v_j * y_j=1 \ \forall \ j \in Reps
		\]
		We can also restate this for every individual voter with the constraint that votes are by state.
		\[
		\begin{array}{rl}
		b_{ij} &=1 \ \ &\forall \ j \in Reps \ , \  i\in Voters  \ \ \text{in the same state.} \\
		\sum_{i \in Voters} b_{ij} * y_{ij}&=1 \ &\forall \ j \in Reps \\
		y_{ij} &= 1/v_j \ \ &\forall \ j \in Reps\ \text{who win} \\
		\end{array}
		\]
		
		
		</p>
      <p>
		The constraint above means each representative has the same amount of representation to give to his voters.  So a thinner block (less voters) will need to be taller (give more value to each vote).  Let's apply this to the apportionment example from above.
		
		</p>
		<p style="text-align:center">
		<span id="liquidjeff"></span> &nbsp; &nbsp; &nbsp; $ \approx $ &nbsp; &nbsp; &nbsp; <span id="liquidjeffagain"></span>
		</p>
		<p>
		It is clear in this graph that the reason there are less green representatives is that there are less green voters.  The vote value of green voters is the total height of the green blocks (since they each get 2 reps).  
		</p>
		<p>
		<b>Is this proportional? Yes. Approximately. </b>  Because we have to have whole numbers of representatives, we can't represent each kind of voter exactly equally.  Blue voters get a higher vote value.  The best we can do is to make sure that nobody is getting a special deal on representation.  There is nobody who has the votes needed for a seat that doesn't already have a seat.  Every representative deserves his seat.  There is no better way to stack the blocks.
		</p>
      <p>
		What was our method of getting to this solution?  Well, we stacked the blocks evenly so that no stack would be too tall.  This is the shortest we can stack this number of blocks. In doing so, we kept the value of each vote nearly the same.  We can state this stacking principle in math terms:
		\[
		\text{Minimize} \max_{i \in Voters} \sum_{j \in Reps} y_{ij}
		\]
	  This is a load balancing problem.  The idea of elections as a load balancing problem was developed by Lars Edvard Phragmén, a Swedish professor of mathematics and editor of Acta Mathematica feared for his ability to point out flaws in other people's work.  This particular method is called max-Phragmen.  There is another method called var-Phragmen, and he advocated for a sequential method able to be calculated by hand, seq-Phragmen.  My point, and Phragmen's point, is that Jefferson's method is a specific example of a general problem of load balancing.
		</p>
		
	  <h3> Pooled Votes </h3>
      <p>
		How can we adopt Jefferson's method with individual voters' ballots?  Using parties to replace states is not a good idea because voters don't exactly fall into parties and not all party candidates are equal.  Also, this gives too much power to political parties.  We have a set of ballots with important information about who a voter would feel represented by.  So let's try to use it. 
		</p>
		<p style="text-align:center">
		<span id="liquid12"></span>
		</p>
		<p>
		How do we deal with this situation?  The two candidates above are very similar and share some supporters.  The voters who like both have a high vote value while the voters on one side or the other don't have as much vote value.  Actually, the voters who like both could solve this by each deciding to pick one or the other.  And that is an interesting idea.  What would happen?
		
		</p>
		<p style="text-align:center">
		<span id="liquid13"></span>
		</p>
		<p>
		
		So the problem is solved.  We just need to split this middle group of voters.  We can also split them a different and equivalent way that makes more geometric sense.  It just looks like the two blocks are being smushed together:
		
		</p>
		<p style="text-align:center">
		<span id="liquid14"></span>
		</p>
		<p>
		(This looks like Phragmen Tetris.)
		</p>
		<p>
		Mathematically, we allow the blocks to smush together by removing some constraints on this vote value.
		\[
		y_{ij} \stackrel{?}{=} 1/v_j
		\]
		We let this vote value be a variable.  Not every vote value should be the same.  Some voters will vote for two representatives.  We need to allow a voter's value to add up from all the candidates his vote helped elect.  We still want this total vote value to be the same for all voters.  The optimizing force ensures that will happen and that there will be an "even build" of these liquid blocks.
		</p>
		<p>
		Since we are relaxing some constraints on y, we want to make sure it still is constrained in some ways that make sense.  Let's restate everything about our new liquid block model:
		\[
		\begin{array}{rll}
		0 \leq  y_{ij} \leq 1 & \text{Vote value. Voter i bought this fraction of a seat for rep j.} \\
		 \\
		 y_{ij} \leq x_j & \text{Candidate j cannot represent anyone if he is not elected.} \\ \\
		{\displaystyle \sum_{i \in Voters}y_{ij}*b_{ij}=1} \  & \text{The price of each seat is the same.} \ \ \ \forall j \in \text{Reps who win.} \\
		\\
		{\displaystyle \text{Minimize} \max_{i \in Voters} \sum_{j \in Reps} y_{ij}} & \text{The representation of each voter is fair.}
		\end{array}
		\]
		</p>
      <p>
		Basically, what this tries to do is to find groups of voters who can pool their votes to support a representative.  This pool is liquid.  It can move to get the best representation. The action of minimization is animated here as a smushing force:
		</p>
		<p style="text-align:center">
		<span id="liquid2"></span>
		</p>
		<p>
		In addition to adjusting the distribution of the "representation liquid", we can also change which candidates are selected.  Broader candidates will have an easier time smushing into other candidates.
		</p>
		<p style="text-align:center">
		<span id="liquid8" ></span> &nbsp;  &nbsp;  &nbsp;  $ \rightarrow  $  &nbsp;  &nbsp;  &nbsp; <span id="liquid11"></span>  &nbsp;  &nbsp;  &nbsp; $ \approx $  &nbsp;  &nbsp;  &nbsp; <span id="liquid7"></span>
		</p>
		<p>
		They don't have to be too broad, though.  The red example above has 2 candidates and they split the vote evenly.  The red-blue combination achieves the same objective score as the yellow-blue combination, which means red doesn't have to be as broad as yellow.  And still red is a better option than green because red is broader than green.  
		</p>
		<p>
		So a best-combination of candidates could include a set of candidates that are very local, but each have very high ratings among a community of a size at least as big as the number of voters divided by the number of seats.  This is the same basic rule that was found in STV.
		</p>
      <p>
		Another big topic is proportionality.  Proportionality is important because if a party decides to split, then its voters should still get represented just the same.  Actually, we have already seen a party split in an animation above.  There need to still be enough members to support a candidate if there is a party split.  
		</p>
      <p>
		The big point is this: by enforcing Jefferson's method's principle of "no special deals", the representation is spread out in proportion to population.  In the same way, by enforcing the same "no special deals" principle to our pool approach, we can reach a proportional outcome.
      </p>
		<h3> Scores </h3>
      <p>
		Now consider scores.  Voters will want to rate some candidates in between others.  One might be a 10 out of 10 while another is a 6 / 10 and another a 0. 
		</p>
		<p style="text-align:center">
		<span id="liquid1b"></span>
		</p>
		<p>
		This is the ballot.  To represent score, we use shading.  These are 2 voters, left and right.  They both like the green and blue candidates.  The left voter gave green a 10/10 and blue a 6/10.  Vice versa for the right voter.  Now imagine the box is 3-D and there is a colored fluid in it.  A thicker box will look darker.  Thickness is the score, the b term, how much a voter liked a candidate.  Another way you could think about drawing this is to spin the containers by 90 degrees so that you can see the thickness, and we will show that for just one drawing.
		</p>
		<p style="text-align:center">
		<span id="liquid1c"></span>
		</p>
		<p>
		Width is not a good representation of score because we are already using this dimension to represent a number of voters.  Also, a voter is indivisible, so we can't do the kind of flows we showed above.  There is a different kind of smushing going on for a single voter.
		</p>
		<p>
		How do we smush these two candidates together?  We can squeeze on the less dense parts to move the representation to the more dense parts. That lets the candidates fit better together. 
		</p>
		<p style="text-align:center">
		<span id="liquid1a"></span>
		</p>
		<p>
		A liquid flows between the boxes, which are kind of like balloons because they can stretch and have different pressures.  The flow makes sense because voters are being assigned to candidates they rated more highly.
		</p>
		<p>
		Let's look at 3 candidates just for fun:
		</p>
		<p style="text-align:center">
		<span id="liquid3"></span>		
		</p>
		<p>
		We can also change which candidates are selected.  In the context of scores, a better choice of representatives might have thicker containers. 
		</p>
		<p style="text-align:center">
		<span id="liquid5"></span> &nbsp;  &nbsp;  &nbsp; $ \rightarrow $  &nbsp;  &nbsp;  &nbsp; <span id="liquid6"></span>
		</p>
		<p>
		This is good for everyone.  These are the candidates with the highest ratings.
        </p>
	  <div class="spacer" id="triggerjeffbottom"></div>
	  	  <h3>Formal Model</h3>
      <p>
        Stated in formal math terms, the model minimizes the maximum of a sum of linear terms involving continuous variables $y_{ij}$ and a table of measurements $b_{ij}$.  There is a binary variable $x_j$ that indicates wins, and it has a constraint that there are a specified number of winners.  Gurobi takes care of the search algorithm to find the maximum among a really large number of combinations (think factorial!).
      </p>
      <p>
        The problem is defined by the following model in the variables $x_j$ and $y_{ij}$ :

        \[
        \begin{array}{lll}
        \text{Minimize}   & {\displaystyle \max_{i \in Voters} \sum_{j \in Reps} y_{ij}} &  \text{The representation of each voter is fair.} \\
		\\
        \text{Subject to} & {\displaystyle \sum_{i \in Voters} y_{ij} * b_{ij} =x_j } & \text{The price of each winning seat is the same.} \ \ \ \forall \  j \in Reps \\ \\
                          & 0 \leq y_{ij} \leq 1  & \text{Vote value. Voter i bought this fraction of a seat for rep j.} \\ \\
						  & y_{ij} \leq x_j & \text{Candidate j cannot represent anyone if he is not elected.} \\ \\
						  & x_j \in \{ 0, 1 \} & \text{Candidates either win or lose.} \\ \\
						  & {\displaystyle \sum_j x_j = N} & \text{Only N candidates win.} \\
						  \\
        \\
        \text{Constants } & b_{ij} = {\displaystyle \frac{a_{ij}}{\max_{m \in Voters}{a_{mj}}}} &\text{Voters score the closest candidate a 1.} \\ \\
						  & a_{ij} = {\displaystyle \frac{1}{d_{ij}/10 + 1} } & \text{The further away, the lower the score.}\\ \\
                          & d_{ij}  & \text{Distance between voter i and candidate j on the map.}
        \end{array}
        \]

      </p>

    </div>
    <div class="example_section" id="implementation">
      <h2><a href="#implementation" name="implementation">Implementation</a></h2>
      <p>Below is an example implementation of the model with example data in
        Gurobi's Python interface:
      </p>
        <p>
            For the full implementation, see <a href="https://github.com/paretoman/searchingforparliament">https://github.com/paretoman/searchingforparliament</a>.
        </p>
      <p> Here is a link to Gurobi.  I kept it here because I forked this project from Emilien Dupont (on <a href="https://github.com/EmilienDupont/facilityLocation">github</a> and hosted as <a href="http://examples.gurobi.com/facility-location/"> a featured example on Gurobi's website</a>)
      </p>
      <div class="col_5 column">
        <a href="http://www.gurobi.com/downloads/evaluation-request">
          <button class="red stack-button">
            <i class="fa fa-lg fa-line-chart"></i>
            Commercial Users: Free Evaluation Version
          </button>
        </a>
      </div>
      <div class="col_5 column">
        <a href="http://www.gurobi.com/downloads/download-center">
          <button class="red stack-button">
            <i class="fa fa-lg fa-line-chart"></i>
            Academic Users: Free Academic Version
          </button>
        </a>
	  </div>
	  <p>
      I suggest using conda to install it.  And then there is a license to download, so you have to make an account on the gurobi website.  I used Python 2.
      </p>
	  <div class="spacer" id="triggerliquidbottom"></div>
      
<examplecode>
from gurobipy import *
import math
import numpy

# Problem data
voters = [[c1,c2] for c1 in range(10) for c2 in range(10)]
reps = [[f1*3+1.5,f2*3+1.7] for f1 in range(3) for f2 in range(3)]
numReps = len(reps)
numVoters = len(voters)
nWinners = 5

# Calculate constants
d = numpy.zeros((numVoters,numReps))
a = numpy.zeros((numVoters,numReps))
b = numpy.zeros((numVoters,numReps))

def distance(a,b):
    dx = a[0] - b[0]
    dy = a[1] - b[1]
    return math.sqrt(dx*dx + dy*dy)

for i in range(numVoters):
    for j in range(numReps):
        d[i,j] = distance(voters[i], reps[j])

a = 1 /( d/10 + 1 )

for i in range(numVoters):
	b[i,:] = a[i,:] / max(a[i,:])

# Add variables
m = Model()
x = {}
for j in range(numReps):
    x[j] = m.addVar(vtype=GRB.BINARY, name="x%d" % j)
y = {}
for i in range(numVoters):
	for j in range(numReps):
		y[(i,j)] = m.addVar(lb=0, ub=1, vtype=GRB.CONTINUOUS, name="t%d,%d" % (i,j))
Z = m.addVar(lb=0, vtype=GRB.CONTINUOUS, name="z")
m.update()

# Add constraints
m.addConstr(quicksum(x[j] for j in range(numReps)) == nWinners)
for j in range(numReps):
	m.addConstr( x[j] == quicksum(b[i,j]*y[(i,j)] for i in range(numVoters)) ) 
for i in range(numVoters):
	m.addConstr( Z >= quicksum( y[(i,j)] for j in range(numReps) ) ) 

# Set objective and optimize
m.setObjective(Z,GRB.MINIMIZE)
m.optimize()

# Output
print(["%d" % x[j1].X for j1 in range(numReps)])

</examplecode>
    </div>
    <div class="example_section" id="demo">
      <h2><a href="#demo" name="demo">Live Demo</a></h2>

      <p>
        Below is a visualization of our example. We are using the
        location data from <a href="#geolytix">GeoLytix</a> for a large
        supermarket chain in the UK, and visualizing its outlets in
        Northern England. (This is an approximation to population distribution.)
      </p>

      <p>
        The voters are represented by:
        <svg height="20" width="20">
      <circle cx="10" cy="15" r="3" fill="black" opacity=".5" />
    </svg>
      </p>

      <p>
        By clicking the map you can add candidate locations.
        These are drawn as:
        <svg height="20" width="20">
      <circle cx="10" cy="10" r="8" stroke="black" stroke-width="1" fill="white" />
    </svg>
      </p>
      <p>
        Click "Compute Winners" to find the winners. These will be drawn as:
        <svg height="20" width="100">
		  <circle class="circlelist" cx="10" cy="10" r="8" stroke="#000099" stroke-width="3" fill="lightblue" />
          <circle class="circlelist" cx="30" cy="10" r="8" stroke="#006600" stroke-width="3" fill="lightgreen" />
          <circle class="circlelist" cx="50" cy="10" r="8" stroke="#990000" stroke-width="3" fill="tomato" />
          <circle class="circlelist" cx="70" cy="10" r="8" stroke="#999900" stroke-width="3" fill="yellow" />
          <circle class="circlelist" cx="90" cy="10" r="8" stroke="#404040" stroke-width="3" fill="orange" />
		</svg>
		<script>
		  d_circles = document.getElementsByClassName("circlelist")
		  for (var i=0; i < 5; i+=1) {
			  d_circles[i].fill = color_fill[i]
			  d_circles[i].stroke = color_stroke[i];
		  }
		  </script>
      </p>

      <p>
        A few candidate locations have already been set up, but
        you can add more by clicking the screen.
	  </p>
	  
	  <p>
		Note: The live demo is only partly-functional because I have to work out the Gurobi license.  You can still use beast-mode to run openSTV elections and more. Just not the Phragmen method.. which is the one I described in detail on this page.
	  </p>
	  
	  
	  		<aside style="width:150px">
		<div id="options" style="display:none">
		<form>
		<fieldset>
		<legend>Map:</legend>
		<input type="range" min = .1 max = 1 step = .1 id="zoom_id" value="1" oninput="updateZoom(value)" class="slider-width" style="width:60px">Zoom<br />
		<input type="range" min = -1 max = 1 step = .1 id="xshift_id" value="0" oninput="updateXshift(value)" class="slider-width" style="width:60px">X<br />
		<input type="range" min = -1 max = 1 step = .1 id="yshift_id" value="0" oninput="updateYshift(value)" class="slider-width" style="width:60px">Y<br />
		</fieldset>
		<fieldset>
		<legend>Ballot:</legend>
		<input class="op"  checked="true"  type="checkbox">	Normalize <br />
		<input class="op" checked="true"  type="radio" name="ballots"> 	1 / Distance<br />
		<input class="op" type="radio" name="ballots">  Linear <br />
		<input class="op" type="radio" name="ballots">  Exponential <br />
		<input class="op" type="radio" name="ballots"> 	Threshold (todo) <br />
		</fieldset>
		<fieldset>
		<legend>Computation:</legend>
		<input class="op" type="radio" name="compute" checked="true"> Phragmen<br />
		<input class="op" type="radio" name="compute"> Phragmen bid <br />
		<input class="op" type="radio" name="compute"> RRV max <br />
		<input class="op" type="radio" name="compute"> RRV rep<br />
		<input class="op" type="radio" name="compute"> Binary Quadratic Problem <br />
		<input class="op" type="radio" name="compute"> STV <br />
		<input class="op" type="radio" name="compute"> Meeks STV <br />
		<input class="op" type="radio" name="compute"> RRV  <br />
		<input class="op" type="radio" name="compute"> RRV-TDON  <br />
		<input class="op" type="radio" name="compute" id="openstv"> OpenSTV
		<select id="stvtype" name="stvtype" onclick="selectOpenstv()">
			<option value="Approval">Approval (bug?)</option>
			<option value="Borda">Borda</option>
			<option value="Bucklin">Bucklin</option>
			<option value="CambridgeSTV">CambridgeSTV</option>
			<option value="Condorcet">Condorcet</option>
			<option value="Coombs">Coombs</option>
			<option value="ERS97STV">ERS97STV</option>
			<option value="FTSTV">FTSTV</option>
			<option value="GPCA2000STV">GPCA2000STV</option>
			<option value="IRV">IRV</option>
			<option value="MeekQXSTV">MeekQXSTV</option>
			<option value="MeekSTV">MeekSTV</option>
			<option value="NIrelandSTV">NIrelandSTV</option>
			<option value="QPQ">QPQ</option>
			<option value="RTSTV">RTSTV</option>
			<option value="SNTV">SNTV</option>
			<option selected="selected" value="ScottishSTV">ScottishSTV</option>
			<option value="SuppVote">SuppVote</option>
			<option value="WarrenQXSTV">WarrenQXSTV</option>
			<option value="WarrenSTV">WarrenSTV</option>
		</select> <br />
		<input class="op" type="radio" name="compute"> Plurality Multiwinner <br />
		<input class="op" id="schulzestv" type="radio" name="compute"> Schulze STV (bug)<br />
		<input class="op" id="cluster" type="radio" name="compute"> Load Balancing<br />
		<select id="loadType" onclick="selectCluster()">
			<option value="min total distance">min total dist</option>
			<option value="max total ballot">max total ballot</option>
			<option value="max min-total-ballot (jefferson)">jefferson</option>
			<option value="min diff-total-ballot (webster)">webster</option>
		</select> <br />
		<input class="op" type="radio" name="compute"> A new formulation (working on it) <br />
		<input class="op" type="radio" name="compute"> RRV Load Balance Fast way?<br />
		<input class="op" type="radio" name="compute"> RRV Load Balance Easy way<br />
		<input class="op" type="radio" name="compute"> RRV bid <br />
		<input class="op" type="radio" name="compute"> RRV max easy<br />
		<input class="op" type="radio" name="compute"> var-Phragmen<br />
	    </fieldset>
		<fieldset>
		<legend>Output:</legend>
		<input id="calcVoterCom" type="checkbox" checked="true"> Calculate Voter Communities <br />
		</fieldset>
		<fieldset>
		<legend>Keeps:</legend>
		<input type="range" min = 500000 max = 3000000 step = 500000 id="cost" value="1000000" oninput="outputUpdate(value)" class="slider-width" style="width:100px"> <br />
		<output for=cost id=costDisplay>1.0</output> Multiplier <br />
		<input class="op" type="radio" name="keeps" checked="true">	Seats Plus Zero <br />
		<input class="op" type="radio" name="keeps">	Seats Plus Half <br />
		<input class="op" type="radio" name="keeps">	Seats Plus One <br />
		</fieldset>
		<fieldset>
		<legend>Similarity Measure:</legend>
		<input class="op" type="radio" name="similarity" checked="true"> Jaccard<br />
		<input class="op" type="radio" name="similarity"> Both Out Of One<br />
		<input class="op" type="radio" name="similarity"> One From Either<br />
		<input class="op" type="radio" name="similarity"> Simultaneous<br />
		<input class="op" type="radio" name="similarity"> integrateKeeps<br />
		<input class="op" type="radio" name="similarity"> Cosine<br />
		<input class="op" type="radio" name="similarity"> L1<br />
		<input class="op" type="radio" name="similarity"> multiplySupport<br />
		</fieldset>
		<input class="op" id="doballotfile" type="checkbox"> Ballot File Input? <br />
		<input class="op" id="doballotfile" type="checkbox">  multiply vote factors by score<br />
		<input class="op" type="checkbox">  more winners (x5)<br />
		<input class="op" id="dohist" type="checkbox"> show proportionality output<br />
		<textarea id="ballotfile" rows="4" cols="15">20 3 1 1 0&#13;&#10;20 1 3 1 0&#13;&#10;20 1 1 3 0&#13;&#10;20 0 0 0 3&#13;&#10;color 1 2 3 4&#13;&#10;times 10 10 10 10</textarea>
		
		</form>
		</div>
	    </aside>
	  
      <div id="demoarea">
      </div>
	  
      <div id="spinnerdiv">
      </div>
	  
	  <div style="float:left;width:800px;">
	  
	  
	  <div style="float: left; width: 100%;">
	  <p>
      <button class="pure-button" onclick="compute()">Compute Winners</button>
      <button onclick="restart()">Restart</button>
	  <button class="pure-button" onclick="toggle_options()">Beast Mode</button>
	  <button class="pure-button" onclick="toggle_div()">Gurobi Log</button>
	  &nbsp; &nbsp; &nbsp; &nbsp;
	  <input type="range" min = 1 max = 20 step = 1 id="numberOfWinners" value="5" oninput="numberOfWinnersUpdate(value)" class="slider-width" style="width:200px">
	  <output for=numberOfWinners id=numberOfWinnersDisplay>5</output> Winners <br />

      </p>
	  </div>
	  
	  <div id="divvotertableshow" style="width: 49%; float: left;">
	  <p>
	  Voter Communities:
	  </p>
	  <canvas id="votertableshow" width="350" height="350"></canvas>
	  </div>

	  <div id="divbtable" style="width: 24%; float: left;">
	  <p>
	  Ballots:
	  </p>
	  <canvas id="btable" width="155" height="350"></canvas>
	  </div>
	  <div id="divytable" style="width: 24%; float: left;">
	  <p>
	  Voter Assignment (y):
	  </p>
	  <canvas id="ytable" width="155" height="350"></canvas>
	  </div>
	  
	  <div id="divtableshow" style="width: 50%; float: left; ">
	  <p>
	  Election Results (tally and similarity):
	  </p>
	  <canvas id="tableshow" width="350" height="300"></canvas>
	  </div>
	  
	  <div id="divybtable" style="width: 24%; float: left;">
	  <p>
	  Support (y*b):
	  </p>
	  <canvas id="ybtable" width="155" height="350"></canvas>
	  </div>
	  
	  
	  <div id="divsybtable" style="width: 12%; float: left;">
	  <p>
	  Sum y*b:
	  </p>
	  <canvas id="sybtable" width="100" height="350"></canvas>
	  </div>
	  
	  <div id="divsytable" style="width: 12%; float: left;">
	  <p>
	  Sum y:
	  </p>
	  <canvas id="sytable" width="100" height="350"></canvas>
	  </div>
	  
	  
	  <div style="width: 49%; float: left;">
		Vote Value (y):
		<p>
		<span id="liquid16"></span>
		</p>
	  </div>
	  
	  <div style="width: 49%; float: left;">
		Support for Winners (y*b):
		<p>
		<span id="liquid17"></span>
		</p>
	  </div>
	  
	  <div style="width: 49%; float: left;">
		Vote Value again (y):
		<p>
		<span id="liquid15"></span>
		</p>
	  </div>
          
          
	  <div>
		<p style="text-align:center">
		<span id="download"></span>
		</p>
	  </div>
	  
	  <div>
		<p style="text-align:center">
		<span id="texthist"></span>
		</p>
	  </div>
	  
	  </div>
	  
          <script>
			var cost;
			var numberOfWinners;
			function outputUpdate(value) {
			  document.querySelector('#costDisplay').value = value/1000000;
			}
			function numberOfWinnersUpdate(value) {
			  document.querySelector('#numberOfWinnersDisplay').value = value;
			}
			function updateZoom(value) {
			  zoomit = value;
			  draw_map();
			}
			function updateXshift(value) {
			  xshift = value;
			  draw_map();
			}
			function updateYshift(value) {
			  yshift = value;
			  draw_map();
			}
			function selectOpenstv() {
			document.querySelector('#openstv').checked = true;
			}
			function selectCluster() {
			document.querySelector('#cluster').checked = true;
			}
		  </script>  
		  
      <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
      <script>
        function toggle_div() {
          var logfile = d3.select('#logfile');
          if (logfile.style("display") === "none") {
            logfile.style("display", "block");
          } else {
            logfile.style("display", "none");
          }

        }
		function toggle_options() {
          var optionsdiv = d3.select('#options');
		  var tableshowdiv = d3.select('#divtableshow');
		  var votertableshowdiv = d3.select('#divvotertableshow');
		  optionsdiv.style("display", "block");
		  tableshowdiv.style("display", "block");
		  votertableshowdiv.style("display", "block");
		  //actually we don't want to cause confusion.  If you activate beast mode, you can't go back.
          // if (optionsdiv.style("display") === "none") {
          //   optionsdiv.style("display", "block");
          // } else {
          //   optionsdiv.style("display", "none"); 
          // }

        }
      </script>
	  
      <examplecode id=logfile  style="float:left; width: 100%;">
      </examplecode>

      
    </div>
	<div style="float:left">
	<p>
        <button id="morebutton" class="pure-button" onclick="toggle_readmore()">Read More</button>
      </p>


      <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
      <script>
		function toggle_readmore() {
          var readmorediv = d3.select('#readmore');
          if (readmorediv.style("display") === "none") {
            readmorediv.style("display", "block");
          } else {
            readmorediv.style("display", "none");
          }
        }
      </script>
	</div>
	<div id="readmore" style="display:none; float:left">
	<p>
		The output is worth explaining.  Similarity measures between voters can be put into a table so that more similar pairs are indicated by light grey and distant pairs are represented by dark grey.  This is the "voter communities" table.  Similarity measures are used for the canidates as well.  This is the "election results" table. Also, to the left of the election results table is a bar chart showing the vote totals for each rep.  The scale at the bottom has tick marks that indicate a votes/seats.  The great thing about this kind of table of election results is that it shows communities of similar people.  Each community looks like a big bright square along the diagonal. You can see how big each community of voters is and which reps (colors) are serving each community.
	</p>
     <p>
		Also, the raw ballots are shown (b).  Next, Phramgen's method calculates the y data, which indicates vote value.  Below these are y*b.  This is the amount of representation each representative is giving.  Each gives an equal amount (the column sum is the same for all the winners).  To the right is voters' total representation and voters' vote value.  At the bottom is an animated chart showing how the blocks of candidate votes are spread across the voters by smushing.  These are the same blocks we've been talking about, and they are more detailed because we are dealing with a real election.
	</p>
     <p>
		There is also a beast mode where you can see different computations.  STV is included.  <a href="https://www.opavote.com/methods/single-transferable-vote">OpenSTV's implementations</a> of several voting methods are there.  There are other load balancing methods where the weight of each part of a ballot is optimized to give the most support to the winners.  In other words, the total distance between voters and reps is minimized.  This is similar to the project that this project was forked from.  There is a reweighted range voting (RRV) as an option as well.  In addition to computations, there are also different ballot types, an option for disabling normalization, an option for adding a +1 to the seats, different similarity measures for the binary quadratic problem, etc. . 
	</p>
     <p> 
		In beast mode, there is also a text entry area where you can input  values separated by whitespace or commas.  Each row is for voters.   The first number in the row is the number of voters who voted the same way.  A special row called "times" says how many candidates are running as clones.  A special row called "color" allows assignment of color to the candidates. Integers represent colors. 
      </p>
	  <p style="font-size:8px">
        <a name="geolytix">Location data:</a>
        <a href="http://geolytix.co.uk/downloads/OpenSupermarkets.zip">Supermarket
        locations &copy; GeoLytix</a> copyright and database right 2014.
      </p>

      
      <div class="example_section" id="thoughts">
	  <h3> Thoughts </h3>
	  <p>
	  The first incarnation of this page is <a href="./bqpr.html">here</a>.  It is an approximation to proportionality, and it explains more of what the output charts mean.  It has a drawback because it overcounts in the case of a 3-way party split where the split is not complete.
	  </p>
	  <h3> Re-weighted Range Voting </h3>
	  <p>
	  By the way, we can still think about another way to state this problem that better corresponds to a picture of price:
	  </p>
		<p style="text-align:center">
		<span id="price"></span>
		</p>
		<p>
		Compare that to the picture of representation we had used instead:
		</p>
		<p style="text-align:center">
		<span id="rep"></span>
		</p>
		<p>
		Now look at the math form of fair price:
		\[
		\begin{array}{lll}
		\text{Maximize} & \min_{j \in Reps} \sum_{i \in Voters} y_{ij}*b_{ij} & \text{The price of each seat is fair.} \\
		\text{Subject to} & \forall \ i \in Voters  \ \  \sum_{j \in Reps} y_{ij}=1 & \text{The representation of each voter is the same.} \\
		\end{array}
		\]

		Versus the math form of fair representation:
		\[
        \begin{array}{lll}
        \text{Minimize}   & { \max_{i \in Voters} \sum_{j \in Reps} y_{ij}} &  \text{The representation of each voter is fair.} \\
        \text{Subject to} & {\forall \  j \in Reps} \ \  \sum_{i \in Voters} y_{ij} * b_{ij} =x_j \ \ \  & \text{The value of each winning seat is the same.} 
        \end{array}
        \]
		
		These are actually equivalent statements in some cases.  For instance, if voters are partisan, then the statements are the same. Otherwise, I imagine these statements can be different. 
		</p>
		<p>
		"Phragmen Bid" in Beast Mode is the price-based formulation.  As far as I can tell, it gives the same results as Phragmen.  
		</p>
		<h3> Motivation for RRV</h3>
		<p>
		The smushing rules might not seem fair.  Most voters end up just getting all their vote assigned to one representative when really they like a couple different ones.  So it seems like we could add a rule that says your vote gets divided in proportion to how much you like each winning candidate.
		
		</p>
		<p style="text-align:center">
		<span id="liquid14again"></span>
		</p>
		<p>
		
		In math terms,
		\[
		\frac{y_{ij}}{b_{ij}}=f_i \quad \text{Vote value is proportional to score. (for all winning candidates)}
		\]
		"RRV max" is what I call this method in beast mode.  RRV stands for "re-weighted range voting".  I think this method has the same goal as RRV.  It wants to divide each voter proportional to his scores and pick the candidates with the highest total scores. 
		</p>
		<p>
		Right now, this method, as implemented, is kinda slow.  Maybe there is a way to speed it up.  Try the regular RRV method, which is an approximation to this optimization.
		</p>
		<p>
		For a little more math, maybe we can understand a little more.  Using this f term in the price of each seat, we get
		\[
		\sum_{i \in Voters} y_{ij}*b_{ij} = \sum_{i} 
		f_i*b_{ij}^2
		\]
		What is f?
		\[
		\begin{align}
		y_{ij} &=f_i * b_{ij} * x_j  \nonumber \\
		\sum_j y_{ij} &= 1 \nonumber \\
		\text{so} \ \sum_j f_i * b_{ij} * x_j &= 1 \nonumber \\
		f_i &= { \displaystyle \frac{1}{\sum_j b_{ij} * x_j }} \nonumber \\
		\end{align}
		\]
		Well, I guess that gives us an expression for f but I need to think a little more about what that expression means.  And we could write the problem as
		\[
		\text{Maximize}   \quad { \min_j \sum_i \frac{b_{ij}^2}{\sum_j x_j*b_{ij}}}
		\]
		This is just what you get when you try to eliminate as many variables as you can, though I have to think about it more to get some insight.  What's nice about this is there is no y term.
		</p>
		<p>
		The purpose of writing this was to show how STV and RRV are related.  We related STV to Phragmen to RRV.  The main difference is the idea of whether individual votes should be divided proportionally among the winning candidates.  In STV, you whole vote goes to one candidate while in RRV it gets divided proportional to how much you supported the candidate.
		</p>
		<p>
		Oh yeah, and we can do an RRV method that is similar to phragmen.  Call this "RRV rep" becase it does fair representation instead of fair price.  
		\[
        \begin{array}{lll}
        \text{Minimize}   & { \max_{i \in Voters} \sum_{j \in Reps} f_i * b_{ij} * x_j} &  \text{The representation of each voter is fair.} \\
        \text{Subject to} & {\forall \  j \in Reps} \ \  \sum_{i \in Voters} f_i * b_{ij}^2 *x_j =x_j \ \ \  & \text{The value of each winning seat is the same.} 
        \end{array}
        \]
	  </p>
	  <h3> More thoughts </h3>
	  <p>
		Also, another great topic of consideration is what scores a voter would actually want to give a candidate?  How is a 9 different than a 6 or a 2?  Well, to answer that, I've been thinking that a really good scoring system would basically have 2 major levels and ranks at each one.  So basically, there would be a 10.0, 9.9, 9.8 and then a 0.2 0.1 0.0.  Because voters really either like you or they don't. And they might have a preference for someone else but it won't mean they'll not support whoever wins just as much.  Voters still want to give the same opportunity to every candidate that they like.  They also would rather be represented by a particular person.  If that person doesn't find enough support with other people, then they'd like to be represented by a second choice.  So really there are 2 lists.  The approved list and the bad list.  And there are rankings in each list.  This is actually something I've seen at rankechoicevote.com but I haven't seen it anywhere else.
		</p>
		<p>
		Also having all the ratings right near 10, like 10.0, 9.9 etc would mean that a vote gets transferred basically in full.  This would be like STV.  This is how you would make a ranking system out of Phragmen's method.  
		</p>
		<p>
		</div>
	  
	  
    </div>
    </div>

    <div style="min-height:100px"></div>

<!--[if gt IE 8]><!--><script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><!--<![endif]-->
<script src="jquery.nav.js"></script>
<script>
  $(document).ready(function() {
  console.log('calling onePageNav');
  $('#nav').onePageNav({scrollOffset:120});
  });
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/1.2.7/spin.min.js"></script>
<script>

// Hide Log File intially
d3.select('#logfile').style("display", "none");

//Width and height
var width = 800;
var height = 500;
var padding = 30;
var miles_per_px = 0.19;
var price_per_px = 3*miles_per_px;
var alpha = 5*365*price_per_px; // Consider the cost over 5 years
alpha = alpha * 1754385.964912 * 0.000548 // let's change alpha for "keep"
alpha = 1000100
alpha = 1000000
var spinner;

var svg = d3.select("#demoarea")
              .append("svg")
              .attr("width", width)
              .attr("height", height);

// Potential sites for facilities
var sites = [[.3*width, .8*height], [.4*width, .3*height], [516.40625, 380.34375],
             [486.40625, 55.34375], [766.40625, 179.34375], [728.40625, 439.34375]];

var cost = parseFloat(document.getElementById("cost").value)/alpha;

var charge = d3.range(sites.length).map(function(d) { return cost; });


// G object for background
var backgroundG;

// G object for map
var mapG;

// G object for animations
var animationG;

// G object for sites
var sitesG;

// G object for points
var circleG;

// G object for voronoi
var pathG;

// G object for facilities
var facilitiesG;

// G object for location names
var locationG;

// G object for clickable areas
var clickableG;

// G object for spinner
var spinnerG;

var zoomit = 1;
var xshift = 0;
var yshift = 0;
var projection;
var path;
var vertices;

var places;
var counties;

var stateVoterCom = "initial";
var voterCom;
var vorder;
var stateInitialMap = 1;
var orb;
var ord_can;

function draw_map() {

if (stateVoterCom == "old still good" | stateVoterCom == "new map") {
	stateVoterCom = "new map";
	stateInitialMap = 0;
} else if (stateVoterCom == "initial") {
	stateVoterCom = "new map";
}
    
// G object for background
backgroundG = svg.append("g");

// G object for map
mapG = svg.append("g");

// G object for animations
animationG = svg.append("g");

// G object for sites
sitesG = svg.append("g");

// G object for points
circleG = svg.append("g");

// G object for voronoi
pathG = svg.append("g");

// G object for facilities
facilitiesG = svg.append("g");

// G object for location names
locationG = svg.append("g");

// G object for clickable areas
clickableG = svg.append("g");

// G object for spinner
spinnerG = svg.append("g").attr("id", "spinid");


backgroundG.append("rect")
           .attr("x", 0).attr("y", 0)
           .attr("width", width).attr("height", height)
           .attr("fill", "#A3CCFF"); // "#66B2FF"
		   

sitesG.selectAll("circle")
       .data(sites)
       .enter()
       .append("circle")
       .attr("cx", function(d) { return d[0]; })
       .attr("cy", function(d) { return d[1]; })
       .attr("class", "site")
       .attr("r", 5);

var mapColors = [];
var maxRed = 247, minRed = 116;
var maxGreen = 252, minGreen = 196;
var maxBlue = 245, minBlue = 118;
var maxRed = 247, minRed = 116+100;
var maxGreen = 252, minGreen = 196+50;
var maxBlue = 245, minBlue = 118+100;
var maxRed = 247, minRed = 203;
var maxGreen = 252, minGreen = 230;
var maxBlue = 245, minBlue = 163;
var numColors = 40;
for (var i = 0; i < numColors; i++) {
  var red = String( Math.round( minRed + (maxRed - minRed)*i/numColors ) );
  var green = String( Math.round( minGreen + (maxGreen - minGreen)*i/numColors) );
  var blue = String( Math.round( minBlue + (maxBlue - minBlue)*i/numColors ) );
  mapColors.push( "rgb(" + red + "," + green + "," + blue + ")");
}


	projection = d3.geo.albers()
		.center([.2, 53.6 + yshift*3])
		.rotate([2.4 + xshift* -3, 0])
		.parallels([50, 60])
		.scale(1200 * 20 * zoomit)
		.translate([width / 2 , height / 2]);
	path = d3.geo.path()
		.projection(projection);

	d3.json("UKwithCounties.json", function(error, uk) {
	  d3.json("supermarket.json", function(supermarket) {
		vertices = [];
		// Set up map of UK
		places = topojson.feature(uk, uk.objects.placesUK);
		counties = topojson.feature(uk, uk.objects.ukcounties).features;

		mapG.selectAll("path")
			.data(counties)
			.enter()
			.append("path")
			.attr("d", path)
			.attr("fill", function(d,i) { return mapColors[i % 10 + 10]; })
			//.attr("fill", function(d,i) { return mapColors[i % 9]; })
			//.attr("fill", function(d,i) { return mapColors[i%3+7]; })
			//.attr("fill","#CBE6A3")
			//.attr("stroke", "rgb(150,150,150)")
			;

		clickableG.selectAll("path")
			.data(counties)
			.enter()
			.append("path")
			.attr("d", path)
			.attr("opacity", 0)
			.on("mousedown", addPoint);

		locationG.append("path")
				 //.datum(places)
				 .attr("d", path)
				 .attr("class", "place");

		locationG.selectAll(".place-label")
				.data(places.features)
				.enter().append("text")
				.attr("class", "place-label")
				.attr("transform", function(d) { return "translate(" + projection(d.geometry.coordinates) + ")"; })
				.attr("x", function(d) { return d.geometry.coordinates[0] > -1 ? 6 : -6; })
				.attr("dy", ".35em")
				.style("text-anchor", function(d) { return d.geometry.coordinates[0] > -1 ? "start" : "end"; })
				.text(function(d) { return d.properties.name; })
				.attr("font-family", "Helvetica Neue")
				.attr("font-size", 15)
				.attr("font-weight", 400);

		// Set up supermarket locations
		// Add locations to vertices array
		circleG.selectAll("circle")
			   .data(supermarket)
			   .enter()
			   .append("circle")
			   .filter(function(d) {
				  var loc = projection([d.LongWGS84, d.LatWGS84]);
				  return ( loc[0] >= 0 && loc[0] <= width && loc[1] >= 0 && loc[1] <= height);})
			   .attr("cx", function (d) { var loc = projection([d.LongWGS84, d.LatWGS84]);
										  vertices.push([parseFloat(loc[0]), parseFloat(loc[1])]);
										  return loc[0]; })
			   .attr("cy", function (d) { var loc = projection([d.LongWGS84, d.LatWGS84]);
										  return loc[1]; })
			   .attr("r", 2)
			   .attr("class", "client");

		console.log('number of vertices', vertices.length);
	  });
	});
	
	if (zoomit != 1 || xshift !=0 || yshift !=0) restart(); // really I'd like to keep some initial points but it wasn't working.
}

draw_map();

function addPoint() {
  facilitiesG.selectAll("circle").remove("circle");
  animationG.selectAll("circle").remove("circle");
  pathG.selectAll("line").remove("line");

  var point = d3.mouse(this);
  console.log('point', point);
  sites.push(point);
  sitesG.append("circle")
         .attr("cx", point[0])
         .attr("cy", point[1])
         .attr("class", "site")
         .attr("r", 5);
  charge.push(cost);

  // Add animation
  animationG.selectAll("circle").remove("circle");
  var anim = animationG.append("circle")
                        .attr("cx", point[0])
                        .attr("cy", point[1])
                        .attr("r", 0)
                        .attr("fill", "black");

  anim.style("opacity", .5)
      .transition()
      .style("opacity", 0)
      .attr("r", 20)
      .duration(200)
      .ease("out");
}

function compute() {

  if (sites.length < 1 && ! document.getElementById("doballotfile").checked) {
    alert("Add reps!");
    return;
  }

  facilitiesG.selectAll("circle").remove("circle");
  animationG.selectAll("circle").remove("circle");
  pathG.selectAll("line").remove("line");

  // Show loading screen
  spinnerG.append("rect")
          .attr("x", 0).attr("y", 0)
          .attr("width", width).attr("height", height)
          .attr("fill", "white")
          .attr("opacity", .5);

  spinnerG.append("text")
          .attr("x", width/2)
          .attr("y", .4*height)
          .attr("font-size", 25)
          .attr("font-family", "Helvetica Neue")
          .attr("font-weight", 400)
          .attr("text-anchor", "middle")
          .text("Computing...");

  var target = document.getElementById('demoarea');
  spinner = new Spinner({left: '375%'}).spin(target);

  // options
  cost = parseFloat(document.getElementById("cost").value)/alpha;
  numberOfWinners = parseFloat(document.getElementById("numberOfWinners").value);
  stvtype = document.getElementById("stvtype").value;
  loadType = document.getElementById("loadType").value;
  calcVoterCom = document.getElementById("calcVoterCom").checked;
  schulzestv = document.getElementById("schulzestv").checked
  ballotfile = document.getElementById("ballotfile").value;
  charge = [];
  
  if (schulzestv) { // need a faster implementation of schulze stv
	charge.push(Math.min(2,numberOfWinners));
  } else {
	charge.push(numberOfWinners);
  }
  charge.push(cost);
  charge.push(stvtype);
  charge.push(loadType);
  
  var doballotfile = document.getElementById("doballotfile").checked
  if (doballotfile) {
	stateVoterCom = "new map"
  }
  
  // option "calculate voter community"
  if (calcVoterCom+0 == 1) {
	if (stateVoterCom == "old still good"){
		charge.push(0);  // don't recalculate
		charge.push(vorder);  // use old vorder
		charge.push(1) // use nearest neighbors to find rorder from vorder
	} else { // e.g. "new map" or "option not selected"
		charge.push(1); // recalculate vorder
		charge.push([0,0]);
		charge.push(1);
		stateVoterCom = "getting new";
	}
  } else {
	charge.push(0); // don't recalculate
	charge.push([0,0]); // don't use any vorder
	charge.push(0);
	if (stateVoterCom == "new map"){
		stateVoterCom = "option not selected"
	}
  }
  charge.push(stateInitialMap)
  
  var ops = document.getElementsByClassName('op');
  for(var i = 0; i < ops.length; i++){
	charge.push( 0 + ops[i].checked);
  }
  charge.push(ballotfile);
  d3.json('facility.py')
    .header('Content-Type', 'application/json')
    .post(JSON.stringify({'clients': vertices,
                          'facilities': sites,
                          'charge': charge}), serverResponse);
}


//Function to convert hex format to a rgb color.
function hexToRgb(hex) {
	var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
	return result ? {
		r: parseInt(result[1], 16),
		g: parseInt(result[2], 16),
		b: parseInt(result[3], 16)
	} : null;
}

function serverResponse(error, data) {
  console.log('serverResponse');
  console.log('data', data);

  // Remove loading screen
  spinnerG.selectAll("rect").remove("rect");
  spinnerG.selectAll("text").remove("text");
  spinner.stop();

  if (!error) {
      if ('solution' in data) {
          // Import solution and put it into correct format
          var solution = data['solution'];
          if (solution[0] === "error") {
            alert("100 second solve time limit exceeded. Reduce the number of reps. Or maybe the problem is unfeasible.  There was some kind of error, so check the log.");			
			var logMsg = solution[1]; // Log message to display
			d3.select('#logfile').html(logMsg);
            return;
          }
          var solution1 = solution[0]; // Facilities to open
          var solution2 = solution[1]; // Edges to draw
          var logMsg = solution[2]; // Log message to display
		  var wasfromballotfile = solution[27]
		  
          d3.select('#logfile').html(logMsg);

		  if (!wasfromballotfile) {
			  var facilities = [];

			  for (var i = 0; i < solution1.length; i++) {
				facilities.push(sites[solution1[i]]);
			  }

			  facilitiesG.selectAll("circle").remove("circle");
			  animationG.selectAll("circle").remove("circle");

			  var faci = facilitiesG.selectAll("circle")
						 .data(facilities)
						 .enter()
						 .append("circle")
						 .attr("cx", function(d) { return d[0]; })
						 .attr("cy", function(d) { return d[1]; })
						 .attr("class","repclass")
						 .attr("fill", function(d, i) { return color_fill[i % color_fill.length]; })
						 .attr("stroke", function(d, i) { return color_stroke[i % color_stroke.length]; })
						 .attr("r",60)
						 .attr("stroke-width", 2);

			  var anim = animationG.selectAll("circle")
						 .data(facilities)
						 .enter()
						 .append("circle")
						 .attr("cx", function(d) { return d[0]; })
						 .attr("cy", function(d) { return d[1]; })
						 .attr("class","repclass")
						 .attr("fill", function(d, i) { return color_fill[i % color_fill.length]; })
						 .attr("stroke", function(d, i) { return color_stroke[i % color_stroke.length]; })
						 .attr("r",0)
						 .attr("stroke-width", 0);

			  faci.style("opacity", 0)
				  .style("stroke-opacity", 0)
				  .transition()
				  .style("opacity", 1)
				  .style("stroke-opacity", 1)
				  .attr("r", 6)
				  .duration(500)
				  .delay(function(d, i) { return i*100 });

			  anim.style("opacity", .5)
				  .style("stroke-opacity", .5)
				  .transition()
				  .style("opacity", 0)
				  .style("stroke-opacity", 0)
				  .attr("r", 30)
				  .duration(500)
				  .ease("out")
				  .delay(function(d, i) { return i*100 + 300});

			  pathG.selectAll("circle").remove("circle");

			  var connections = pathG.selectAll("circle")
									 .data(solution2)
									 .enter()
									 .append("circle")
									 .attr("r", 2)
									 .attr("cx", function(d) { var loc = vertices[d[0]]; return loc[0]; })
									 .attr("cy", function(d) { var loc = vertices[d[0]]; return loc[1]; })
									 .attr("class","voterclass")
									 .attr("fill", function(d, i) { return color_fill[solution1.indexOf(d[1]) % color_fill.length]; })
									 .attr("stroke", function(d, i) { return color_stroke[solution1.indexOf(d[1]) % color_stroke.length]; })
									 .attr("opacity", 0);

			  connections.transition()
						 .attr("opacity", .6)
						 .duration(500)
						 .delay(0);
			  circleG.transition()
						 .attr("opacity", 0)
						 .duration(500)
						 .delay(0);
		  }
		  var c=document.getElementById("tableshow");
		  var ctx=c.getContext("2d");
		  ctx.clearRect(0, 0, c.width, c.height);
		  
		  var c3=document.getElementById("votertableshow");
		  var ctx3=c3.getContext("2d");
		  ctx3.clearRect(0, 0, c3.width, c3.height);
		  
		  var c4=document.getElementById("btable");
		  var ctx4=c4.getContext("2d");
		  ctx4.clearRect(0, 0, c4.width, c4.height);
		  
		  var c5=document.getElementById("ytable");
		  var ctx5=c5.getContext("2d");
		  ctx5.clearRect(0, 0, c5.width, c5.height);
		  
		  var c6=document.getElementById("ybtable");
		  var ctx6=c6.getContext("2d");
		  ctx6.clearRect(0, 0, c6.width, c6.height);
		  
		  var c7=document.getElementById("sybtable");
		  var ctx7=c7.getContext("2d");
		  ctx7.clearRect(0, 0, c7.width, c7.height);
		  
		  var c8=document.getElementById("sytable");
		  var ctx8=c8.getContext("2d");
		  ctx8.clearRect(0, 0, c8.width, c8.height);
		  
		  // clear old canvas
		  clearit = function(name) {
			  var myNode = document.getElementById(name);
			  while (myNode.firstChild) {
				  myNode.removeChild(myNode.firstChild);
			  }
		  }
		  clearit("liquid15")
		  clearit("liquid16")
		  clearit("liquid17")
				
		  if (solution.length > 3) { // this used to mean we are in beast mode
		  
			  // Show adjacency matrix
			  
			  if (1) {
				var s_table = solution[3];
			  } else {
				var s_table = solution[6];
			  }
			  var w_winnersb = solution[4];
			  var ld = w_winnersb.length;
				var imgData=ctx.createImageData(ld,ld);
				for (var i=0;i<ld;i+=1) {
					for (var j=0;j<ld;j+=1) {
					  ind = (i*ld+j)*4
					  val = s_table[i][j];
					  if (0) val = 1-val;
					  w_won = i==j && w_winnersb[i] == 1 && w_winnersb[j] == 1 ;
					  if (w_won) val = 1;
					  imgData.data[ind+0]=255*val;
					  imgData.data[ind+1]=255*val;
					  imgData.data[ind+2]=255*val;
					  imgData.data[ind+3]=255;
					  if (w_won) imgData.data[ind+1] *= .6;
					}
				}
				
				
				function scaleImageData(imageData, scale) {
				  var scaled = ctx.createImageData(imageData.width * scale, imageData.height * scale);
				  for(var row = 0; row < imageData.height; row++) {
					for(var col = 0; col < imageData.width; col++) {
					  var sourcePixel = [
						imageData.data[(row * imageData.width + col) * 4 + 0],
						imageData.data[(row * imageData.width + col) * 4 + 1],
						imageData.data[(row * imageData.width + col) * 4 + 2],
						imageData.data[(row * imageData.width + col) * 4 + 3]
					  ];
					  for(var y = 0; y < scale; y++) {
						var destRow = row * scale + y;
						for(var x = 0; x < scale; x++) {
						  var destCol = col * scale + x;
						  for(var i = 0; i < 4; i++) {
							scaled.data[(destRow * scaled.width + destCol) * 4 + i] =
							  sourcePixel[i];
						  }
						}
					  }
					}
				  }
				  return scaled;
				}
				
				
				a_border=10;
				a_width = c.width-50-10-2*a_border;
				a_height = c.height-7;
				//a_scale = Math.min(10,Math.floor(a_width/ld))
				a_scale = Math.floor(Math.min(a_width,a_height)/ld)
				//a_scale = Math.round(a_width/(ld));
				ctx.putImageData(scaleImageData(imgData,a_scale),a_border+50+10,a_border);
				
				// Highlight the winners
				
				var a_id = solution[8];
				var a_order = solution[7];
							
				for (var i=0;i<ld;i+=1) {
					for (var j=0;j<ld;j+=1) {
					  w_won = w_winnersb[i] == 1 && w_winnersb[j] == 1 ;
					  if (w_won) {
						i_color = color_fill[a_id[i] % color_fill.length]
						j_color = color_fill[a_id[j] % color_fill.length]
						if (i==j) {
							x = a_border+50+10 + (i)*a_scale
							y = a_border+ (j)*a_scale
							ctx.fillStyle = i_color;
							ctx.fillRect( x, y, a_scale,a_scale );
							ctx.fillRect( 10-a_scale+1, y+1, a_scale-2,a_scale-2 );
						} else {
							x = a_border+50+10 + (i+1/2)*a_scale
							y = a_border+ (j+1/2)*a_scale
							if (0) {
								ctx.fillStyle = "rgb(255,153,255)";
								ctx.fillRect( x-1, y-1, 3, 3 );
							} else {
								ctx.fillStyle = (i<j) ? i_color : j_color;
								ctx.fillRect( x-3, y-1, 3, 3 );
								ctx.fillStyle = (i>j) ? i_color : j_color;
								ctx.fillRect( x, y-1, 3, 3 );
							}
						}
					  }
					}
				}
				
				// Bar Graph
				
				var t_tallys = solution[5];
				var t_max = Math.max(...t_tallys);
				var t_max_inv = 1/t_max;
				
				var imgData2=ctx.createImageData(50,ld*a_scale);
				for (var i=0;i<ld;i+=1) {
					for (var r=0;r<a_scale;r+=1) {
						for (var y=0;y<50;y+=1) {
							ind = 4*(y + 50*(r + a_scale*i));
							if (y<50*t_tallys[i]*t_max_inv) {
								var f = .6
								if (w_winnersb[i]) f = .7;
								imgData2.data[ind+0]=255*f;
								imgData2.data[ind+1]=255*f;
								imgData2.data[ind+2]=255*f;
								imgData2.data[ind+3]=255;
							} else {
								imgData2.data[ind+0]=255;
								imgData2.data[ind+1]=255;
								imgData2.data[ind+2]=255;
								imgData2.data[ind+3]=255;
							}
						}
					}
				}
				ctx.putImageData(imgData2,a_border,a_border);
				
				// Scale
				var keep = solution[9];
				var tick = 50*keep/t_max
				ctx.fillStyle = "gray";
				y_axis = a_border + a_scale*ld + 3;
				ctx.fillRect( a_border, y_axis, 50, 1 );
				for (var i = 0; i < 50; i += tick) ctx.fillRect( a_border+i, y_axis+1, 1, 3 );
				
				
				// Show adjacency matrix for voters only
				if (stateVoterCom == "option not selected") {
					dummy=1;// don't need to do anything
				} else {
					if (stateVoterCom == "old still good") {
						// voterCom from last time
						votercolor = solution[13];  // new colors
						votercomcolor = vorder.map(function (i) { return votercolor[i] }); // vorder from last time
						var v_id = votercomcolor;
						
						orb = solution[15]; // b, in order for display
						ord_can = solution[16]; // color_fill[ord_can] gives the color of the candidate
					} else { // if (stateVoterCom == "getting new"){ //never going to be "need new" since we pressed calculate
					    // if (solution[10]) { // double check
						stateVoterCom = "old still good";
						// voterCom from last time
						voterCom = solution[11];
						votercomcolor = solution[12];
						var v_id = votercomcolor;
						vorder = solution[14];
						
						orb = solution[15]; // b, in order for display
						ord_can = solution[16]; // color_fill[ord_can] gives the color of the candidate
						//c_id = ord_can.map(function (i) { return votercolor[i] });  // delete this
					} 
					showy = solution[17];
					noryo = solution[18];
					solutionfid = solution[19];
					xo = solution[20];
					norbyo = solution[21];
					sorbyo = solution[22];
					soryo = solution[23];
					oryo = solution[24];
					orbyo = solution[25];
					dord = solution[26];
                    ballotinput = solution[27];
                    hist1 = solution[28];
					var ld3 = voterCom.length;
					var imgData3=ctx3.createImageData(ld3+10,ld3+10);
					
					for (var j=10;j<ld3+10;j+=1) {
						g_color = hexToRgb(color_fill[v_id[j-10] % color_fill.length])
						for (var i=0;i<10;i+=1) {
							ind = (i*(ld3+10)+j)*4
							imgData3.data[ind+0]=g_color.r;
							imgData3.data[ind+1]=g_color.g;
							imgData3.data[ind+2]=g_color.b;
							imgData3.data[ind+3]=255;
						}
					}
					
					for (var i=10;i<ld3+10;i+=1) {
						g_color = hexToRgb(color_fill[v_id[i-10] % color_fill.length])
						for (var j=0;j<10;j+=1) {
							ind = (i*(ld3+10)+j)*4
							imgData3.data[ind+0]=g_color.r;
							imgData3.data[ind+1]=g_color.g;
							imgData3.data[ind+2]=g_color.b;
							imgData3.data[ind+3]=255;
						}
						for (var j=10;j<ld3+10;j+=1) {
							ind = (i*(ld3+10)+j)*4
							if (i==j) {
								h_color = hexToRgb(color_fill[v_id[i-10] % color_fill.length])
								imgData3.data[ind+0]=h_color.r;
								imgData3.data[ind+1]=h_color.g;
								imgData3.data[ind+2]=h_color.b;
								imgData3.data[ind+3]=255;
							} else {
							val = voterCom[i-10][j-10];
							if (0) val = 1-val;
								imgData3.data[ind+0]=255*val;
								imgData3.data[ind+1]=255*val;
								imgData3.data[ind+2]=255*val;
								imgData3.data[ind+3]=255;
							}
						}
					}
					b_width = Math.min(c3.width,c3.height) - 10;
					b_scale = Math.max(1,Math.floor(b_width/ld3));
					ctx3.putImageData(scaleImageData(imgData3,b_scale),0,0);
					
					
					// heat map
					
					// orb =  b, in order for display
					// ord_can = color_fill[ord_can] gives the color of the candidate
					
					
					drawby = function(ctx4,orb) {
					
						
						var ynum = orb.length;
						var xnum = orb[0].length;
						var x_scale = Math.floor((Math.min(xnum*10+10,150/2)-10)/xnum)
						var imgData4=ctx4.createImageData(xnum*x_scale+10,ynum+10);
						for ( var i = 10; i<ynum+10;i++) {
							g_color = hexToRgb(color_fill[v_id[i-10] % color_fill.length])//ord_can[i-10] % color_fill.length
							for (var j=0;j<10;j+=1) {
								ind = (i*(xnum*x_scale+10)+j)*4
								imgData4.data[ind+0]=g_color.r;
								imgData4.data[ind+1]=g_color.g;
								imgData4.data[ind+2]=g_color.b;
								imgData4.data[ind+3]=255;
							}
							for (var j=0; j<xnum;j++) {
								for(var k=0;k<x_scale;k++) {
									ind = (i*(xnum*x_scale+10)+j*x_scale+10+k)*4
									val = orb[i-10][j];
									imgData4.data[ind+0]=255*val;
									imgData4.data[ind+1]=255*val;
									imgData4.data[ind+2]=255*val;
									imgData4.data[ind+3]=255;
								}
							}
						}
						
						ctx4.putImageData(scaleImageData(imgData4,2),0,0);
						for (var i=0;i<xnum;i+=1) {
							w_won = xo[ord_can[i]] == 1 ;
							if (w_won) {
								i_color = color_fill[solutionfid[ord_can[i]] % color_fill.length]
								x = a_border+10 + i*x_scale*2
								y = 0
								ctx4.fillStyle = i_color;
								ctx4.fillRect( x, y+1, x_scale*2,20-2 );
							}
						}
					}
					drawby(ctx4,orb)
					if (showy) drawby(ctx5,noryo)
					if (showy) drawby(ctx6,norbyo)
					
					drawby2 = function(ctx4,orb) {
					
						var ynum = orb.length;
						var xnum = 0;
						var x_scale = 1
						var imgData4=ctx4.createImageData(xnum*x_scale+10,ynum+10);
						for ( var i = 10; i<ynum+10;i++) {
							for (var j=0;j<10;j+=1) {
								ind = (i*(xnum*x_scale+10)+j)*4
								val = orb[i-10];
								imgData4.data[ind+0]=255*val;
								imgData4.data[ind+1]=255*val;
								imgData4.data[ind+2]=255*val;
								imgData4.data[ind+3]=255;
							}
						}
						ctx4.putImageData(scaleImageData(imgData4,2),0,0);
						ctx4.rect(0,20,20,2*ynum);
						ctx4.stroke();
					}
					
					if (showy) drawby2(ctx7,sorbyo)
					if (showy) drawby2(ctx8,soryo)
					if (showy) {											
						dn15 = {}
						dn15.t=15
						dn15.b = orb
						
						// for the first state, to find y, we know sum_i b*y is the same.  The price is equal or fair.
						// to get y and ymax, sum orbyo over voters
						colsumorb = orb.reduce(function (r, a) {
							a.forEach(function (b, i) {
								r[i] = (r[i] || 0) + b;
							});
							return r;
						}, []);
						invcolsumorb = colsumorb.map( function(x) { return 1/x } );
						dn15.y = Array.apply(null, Array(orb.length)).map(function(){return invcolsumorb.slice()})
						sinvcolsumorb = invcolsumorb.reduce(function(pv, cv) { return pv + cv; }, 0);
						dn15.ymax = 1.2*sinvcolsumorb
						
						
						dn15.slow = 2
						dn15.y1 =oryo
						dn15.colkey = Array.apply(null,Array(orb[0].length)).map(function(d,i){return (xo[ord_can[i]] == 1)?solutionfid[ord_can[i]] % color_fill.length:-1})
						
						// also do another calculation of ymax
						rowsumy1 = dn15.y1.map(function(d) {
							return d.reduce(function(sum, value) {
								return sum + value;
							}, 0);
						});
						function getMaxOfArray(numArray) {
						  return Math.max.apply(null, numArray);
						}
						mrowsumy1 = getMaxOfArray(rowsumy1)
						dn15.ymax = Math.max(dn15.ymax,1.2*mrowsumy1);
						
						
						dn15.show=0
						
						
						startdraw(drawliquid,"#liquid15",dn15,dn15)
						
						
						// make a graph of just the winners using this filter
						ff = function(d,i) { return (xo[ord_can[i]] == 1) }
						
						dn16 = jQuery.extend(true, {}, dn15);
						dn16.b = []
						dn16.y = []
						dn16.y1 = []
						for (var i=0; i<orb.length; i++) {
							dn16.b.push(dn15.b[i].filter(ff ) )
							dn16.y.push(dn15.y[i].filter(ff ) )
							dn16.y1.push(dn15.y1[i].filter(ff) )
						}
						dn16.colkey = dn15.colkey.filter(ff )
						sinvcolsumorb = invcolsumorb.filter(ff ).reduce(function(pv, cv) { return pv + cv; }, 0);
						dn16.ymax = 1.2*sinvcolsumorb
						
						// also do another calculation of ymax
						rowsumy1 = dn16.y1.map(function(d) {
							return d.reduce(function(sum, value) {
								return sum + value;
							}, 0);
						});
						function getMaxOfArray(numArray) {
						  return Math.max.apply(null, numArray);
						}
						mrowsumy1 = getMaxOfArray(rowsumy1)
						dn16.ymax = Math.max(dn16.ymax,1.2*mrowsumy1);
						
						startdraw(drawliquid,"#liquid16",dn16,dn16)
						
						
						dn17 = jQuery.extend(true, {}, dn16);
						
						
						//dn17.y1 = orbyo with filter
						dn17.y1 = []
						for (var i=0; i<orb.length; i++) {
							dn17.y1.push(orbyo[i].filter(ff) )
						}
						
						
						// also do another calculation of ymax
						rowsumy1 = dn17.y1.map(function(d) {
							return d.reduce(function(sum, value) {
								return sum + value;
							}, 0);
						});
						function getMaxOfArray(numArray) {
						  return Math.max.apply(null, numArray);
						}
						mrowsumy1 = getMaxOfArray(rowsumy1)
						dn17.ymax = Math.max(dn17.ymax,1.2*mrowsumy1);
						
						startdraw(drawliquid,"#liquid17",dn17,dn17)
					}
					// vorder
					alldata = {"voters":vorder.map(function(d) {return vertices[d]}),
					"candidates":ord_can.map(function(d) {return sites[d]}),
					"b":orb,
					"y":oryo,
					"yb":orbyo,
					"votercolor":v_id,
					"x":ord_can.map(function(d) {return xo[d]}),
					"xcolor":ord_can.map(function(d) {return solutionfid[d]}),
					"y uniform with all ballots":dn15.y1,
					"y uniform with the winning ballots":dn16.y1,
					"d":dord
					}
					
					makedlink(alldata,"download","downloadJSON")
					if (0) {
						makedlink(vorder,"liquid15")
						makedlink(orbo,"liquid15")
						makedlink(oryo,"liquid15")
						makedlink(v_id,"liquid15")
						makedlink(ord_can.map(function(d) {solutionfid[d]}),"liquid15")
						makedlink(ord_can.map(function(d) {xo[d]}),"liquid15")
						makedlink(dn15.y1,"liquid15")
						makedlink(dn15.y,"liquid15")
						makedlink(dn15.b,"liquid15")
						makedlink(dn16.y1,"liquid15")
						makedlink(dn16.y,"liquid15")
						makedlink(dn16.b,"liquid15")
					}
                    
                    if (document.getElementById("dohist").checked) {
                        document.getElementById("texthist").innerHTML = hist1.join(" ")
                    }
				}
			}
        }
      }
}

function makedlink(obj,containername,text) {
	var data = "text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(obj));

	var a = document.createElement('a');
	a.href = 'data:' + data;
	a.download = 'data.json';
	a.innerHTML = text;

	var container = document.getElementById(containername);
	container.appendChild(a);
}

function restart() {
  sitesG.selectAll("circle").remove("circle");
  facilitiesG.selectAll("circle").remove("circle");
  animationG.selectAll("circle").remove("circle");
  pathG.selectAll("circle").attr("class", "client").attr("r",2);
  sites = [];
}

</script>


  <!-- scroll triggers -->
  
<script type="text/javascript" src="https://scrollmagic.io/scrollmagic/uncompressed/ScrollMagic.js"></script>
<script>
console.log("ScrollMagic v%s loaded", ScrollMagic.version);

// init
var ctrl = new ScrollMagic.Controller();

function dos (divname,f) {
	// create scene
	var scene = new ScrollMagic.Scene({
		triggerElement: divname
	  })
	  .on('start', f)
	  .addTo(ctrl);
}
    
var showjeff = {"show":0};
var showliquid = {"show":0};
dos("#triggerjefftop",function() {showjeff.show = 1-showjeff.show;})
dos("#triggerjeffbottom",function() {showjeff.show = 1-showjeff.show; })
dos("#triggerliquidtop",function() {showliquid.show = 1-showliquid.show;})
dos("#triggerliquidbottom",function() {showliquid.show = 1-showliquid.show; })
// Open console to see output!
</script>


<!-- Animations -->


<style type="text/css">
	
	line{
  stroke:#000;
}
</style>
<script>
function drawjeff(svg,dn) {
	
	
	if (dn==4) {
		var w = 300/2;
		var h = 480/2;
	} else {
		var w = 480;
		var h = 300;
	}
	svg
	.attr("width", w)
	.attr("height", h)
	.attr("id", "visualization")
	.attr("xmlns", "http://www.w3.org/2000/svg");
	
	if (dn==4) {
		svg = svg.append("g").attr("transform" , "translate(0,240) rotate(-90) scale(.5)")
		dn = 1
		var w = 480;
		var h = 300;
	}

	//animation options
	
	var votes = [40,30,20];
	var votes = [12,19,15];
	//var votes = [12,19,15,13,22,11,14,28,31,23,32];
	var border = 10;
	var x_graph = 100
	var representation = .5;
	var slow = 6;
	
	function tx(x) { return ((dn==1)?1:.1)*x*(w-(2*border+x_graph))+border+x_graph;}
	function ty(y) { return h-(y*(h-2*border)+border);}
	
	
	// put axes
	
	svg.append("line")
	.attr("x1",tx(0))
	.attr("x2",tx(0))
	.attr("y1",ty(0))
	.attr("y2",ty(1))
	
	xlab = svg.append("text")
	.attr("y", h-border-6)
	.attr("dy","10px")
	
	if (dn==1) {xlab.text("vote value (seats/vote) --- >").attr("x", tx(.1))
	} else xlab.text("seat price (votes/seat) --- >").attr("x", tx(1))
	
	svg.append("text")
	.attr("y", h-border-6)
	.attr("dy","10px")
	.text("votes")
	.attr("x", 2)
	
	var r = svg.append("line")
	.attr("y1",ty(-.1))
	.attr("y2",ty(1.1))
	.style("stroke-dasharray","3,3")
	
	b = [10/12,10/19,10/15] // state sizes
	for (var id=0;id<b.length;id++) {
		svg.append("rect")
		.attr("x",2)
		.attr("width",b[id]*90)
		.attr("y",ty((id+1-.5)/(votes.length))-90/b[0]/4)
		.attr("height",90/b[0]/2)
		.attr("fill", function(d) { return color_fill[id % color_fill.length]; })
		.attr("stroke", function(d) { return color_stroke[id % color_stroke.length]; })
		.attr("stroke-width", 2)
	}
	
	
	if (dn==1) {
		r
		.attr("x1",tx(0))
		.attr("x2",tx(0))
		.transition()
		.ease("linear")
		.delay(50*slow)
		.duration(1000*representation*slow)
		.attr("x1",tx(representation))
		.attr("x2",tx(representation))
	} else if (dn==2) {
		r
		.attr("x1",tx(10))
		.attr("x2",tx(10))
		.transition()
		.ease("linear")
		.delay(50*slow)
		.duration(1000*representation*slow)
		.attr("x1",tx(1/representation))
		.attr("x2",tx(1/representation))
	} else if (dn==3) {
		r
		.attr("x1",tx(0))
		.attr("x2",tx(0))
		.transition()
		.ease("linear")
		.delay(50*slow)
		.duration(1000*representation*slow)
		.attr("x1",tx(representation*4*.94))
		.attr("x2",tx(representation*4*.94))
	}
	
	var dots = []
	var dashes = []
	var undots = []
	if (dn == 1) {
		for (var id=0;id<votes.length;id++) {
			for (var i=1;i*votes[id]<100;i++) {
				var d1 = [ty((id+1-.5)/(votes.length)),tx(i*votes[id]/100),id,i*votes[id]/100]
				dashes.push(d1)
				if (representation >= i*votes[id]/100) dots.push(d1)
				
			}
		}
	} else if (dn==2) {
		var last_mark = []
		for (var id=0;id<votes.length;id++) {
			for (var i=1;i*votes[id]<300;i++) {
				var d1 = [ty((id+1-.5)/(votes.length)),tx(1/(i*votes[id]/100)),id,1/(i*votes[id]/100)]
				dashes.push(d1)
				if (1/representation <= 1/(i*votes[id]/100)) dots.push(d1)
			}
			last_mark.push(d1[3])
		}
	} else if (dn==3) {
		var last_mark = []
		for (var id=0;id<votes.length;id++) {
			for (var i=1;i*votes[id]<300;i++) {
				var d1 = [ty((id+1-.5)/(votes.length)),tx(1/(i*votes[id]/100)),id,1/(i*votes[id]/100)]
				dashes.push(d1)
				if (1/representation > 1/(i*votes[id]/100)) {
					undots.push(d1)
				} else {
					dots.push(d1)
				}
			}
			last_mark.push(d1[3])
		}
	}
	
	if (!(dn==1)) {
		for (var id=0;id<votes.length;id++) {
			svg.append("rect")
				.attr("x", tx(0))
				.attr("width", tx(last_mark[id])-tx(0))
				.attr("height", 8)
				.attr("y", ty((id+1-.5)/(votes.length)) -4)
		}
	}	
	var sdashes = svg
	.selectAll('rect.spacer')
	.data(dashes)
	.enter()
	.append("rect")
	.attr("x", function(d) { return d[1]; })
	.attr("y", function(d) { return d[0]-4; })
	.attr("width", 1)
	.attr("height", 8)

	if (dn==1 || dn==2) {
		var sdots = svg
		.selectAll('circle')
		.data(dots)
		.enter()
		.append("circle")
		.attr("cx", function(d) { return d[1]; })
		.attr("cy", function(d) { return d[0]; })
		.attr("class","repclass")
		.attr("fill", function(d) { return color_fill[d[2] % color_fill.length]; })
		.attr("stroke", function(d) { return color_stroke[d[2] % color_stroke.length]; })
		.attr("r",5)
		.attr("stroke-width", 2)
		
		sdots
		.style("opacity", 0)
		.style("stroke-opacity", 0)
		.attr("r",60)
		.transition()
		.style("opacity", 1)
		.style("stroke-opacity", 1)
		.attr("r", 6)
		.duration(500)
		.delay(function(d, i) { return ((dn==1)?d[3]*1000:(10-d[3])*70)*slow })
	}
	
	if (dn==3) {
		var dots = svg
		.selectAll('circle.pos')
		.data(dots)
		.enter()
		.append("circle")
		.attr("cx", function(d) { return d[1]; })
		.attr("cy", function(d) { return d[0]; })
		.attr("class","repclass")
		.attr("fill", function(d) { return color_fill[d[2] % color_fill.length]; })
		.attr("stroke", function(d) { return color_stroke[d[2] % color_stroke.length]; })
		.attr("r",5)
		.attr("stroke-width", 2)
		.style("opacity", 1)
		.style("stroke-opacity", 1)
		.attr("r", 6)
		
		var sundots = svg
		.selectAll('circle.neg')
		.data(undots)
		.enter()
		.append("circle")
		.attr("cx", function(d) { return d[1]; })
		.attr("cy", function(d) { return d[0]; })
		.attr("class","repclass")
		.attr("fill", function(d) { return color_fill[d[2] % color_fill.length]; })
		.attr("stroke", function(d) { return color_stroke[d[2] % color_stroke.length]; })
		.attr("r",5)
		.attr("stroke-width", 2)
		.style("opacity", 1)
		.style("stroke-opacity", 1)
		.attr("r", 6)
		.transition()
		.style("opacity", 0)
		.style("stroke-opacity", 0)
		.attr("r",6)
		.duration(100)
		.delay(function(d, i) { return d[3]*300*slow })
	}
}

var countplays15 = 0
	

function drawliquid(svg,dn) {


	var colkey = Array.apply(null, Array(100)).map(function(d,i){return i})
	var w = 480/2;
    var h = 300/2;
	
	var slow = 1;
	
	if (dn==1) {
		var y = [[1/1.2,1,1/1.2],[1/1.2,1,1/1.2]]
		var y1 = [[0,1,1],[1,1,0]]
		var b = [[.2,.5,1],[1,.5,.2]]
		var y = [[1/1.2,1/1.2],[1/1.2,1/1.2]]
		var y1 = [[0,1],[1,0]]
		var b = [[.2,1],[1,.2]]
		var y = [[1/1.6,1/1.6],[1/1.6,1/1.6]]
		var y1 = [[0,1],[1,0]]
		var b = [[.6,1],[1,.6]]
		var ymax = 1.5
	} else if (dn=="1a") {
		var y = [[1/1.6,1/1.6],[1/1.6,1/1.6]]
		var y1 = [[0,1],[1,0]]
		var b = [[.6,1],[1,.6]]
		var ymax = 1.5
	} else if (dn=="1b") {
		var y = [[1/1.6,1/1.6],[1/1.6,1/1.6]]
		var y1 = y
		var b = [[.6,1],[1,.6]]
		var ymax = 1.5
	} else if (dn=="1c") {
		var y = [[1/1.6,1/1.6],[1/1.6,1/1.6]]
		var y1 = y
		var b = [[.6,1],[1,.6]]
		var ymax = 1.5
	} else if (dn==2) {
		var y = [[.1],[.1],[.6],[.1],[.1]]
		var y1 = [[.2],[.2],[.2],[.2],[.2]]
		var b = [[1],[1],[1],[1],[1]]
		var ymax = .8
	} else if (dn==3) {
		fillit = function(n,w) { return Array.apply(null, Array(n)).map(function(){return w}) }
		var y = fillit(9,[1/3/1.6,1/3/1.6,1/3/1.6])
		var y1 = fillit(3,[1/3/.8,0,0]).concat( fillit(3,[0,1/3/.8,0])).concat( fillit(3,[0,0,1/3/.8]))
		var b = fillit(3,[.8,.4,.4]).concat( fillit(3,[.4,.8,.4])).concat( fillit(3,[.4,.4,.8]))
		ymax = 1
		
	} else if (dn==4) {
		fillit = function(n,w) { return Array.apply(null, Array(n)).map(function(){return w}) }
		var votes = [15/10,19/10,12/10];
		//var b = fillit(3,[fillit(12,0)]) // reference passing problem
		var newb = []
		var y = []
		var numwin = [3,2,4]
		for (var i=0;i<3;i++) {
			var rowb = []
			var rowy = []
			for (var ja=0;ja<3;ja++) {
				for (var jb=0;jb<4;jb++) {
					var j = jb+4*ja;
					rowb.push((ja==i) ? 1/votes[i] : 0)
					rowy.push((ja==i && jb<numwin[i]) ? votes[i] : 0)
				}
			}
			newb.push(rowb)
			y.push(rowy)
		} 
		var b=newb
		var colkey = [2,2,2,2,1,1,1,1,0,0,0,0]
		var y1 = y
		ymax=6
		var w = 480;
		var h = 300;
	} else if (dn==5) {
		var b = [[1,.5]]
		var y = [[1,2]]
		var y1 = y
		ymax=3.3
	} else if (dn==6) {
		var b = [[1,1,1,.8]]
		var y = [[1,0,0,1/.8]]
		var y1 = y
		ymax=3.3
	} else if (dn==7) {
		var y1 = [[12/4,0],[3/4,9/4],[3/4,9/4],[3/4,9/4],[3/4,9/4],[12/4,0]]
		var b = [[1,1],[1,1],[1,1],[1,1],[1,1],[1,1]]
		var y = [[9/6,0],[9/6,9/4],[9/6,9/4],[9/6,9/4],[9/6,9/4],[9/6,0]]
		ymax=6.2
		colkey = [0,3]
		var w = 300/2;
		var h = 300/2;
	} else if (dn==8) {
		var y1 = [[9/4,0],[9/4,0],[0,9/2],[0,9/2],[9/4,0],[9/4,0]]
		var b = [[1,1],[1,1],[1,1],[1,1],[1,1],[1,1]]
		var y = [[9/6,0],[9/6,0],[9/6,9/2],[9/6,9/2],[9/6,0],[9/6,0]]
		ymax=6.2
		colkey = [0,1]
		var w = 300/2;
		var h = 300/2;
	} else if (dn==9) {
		var y1 = [[18/5,0],[3/5,3],[3/5,3],[3/5,3],[18/5,0]]
		var b = [[1,1],[1,1],[1,1],[1,1],[1,1]]
		var y = [[9/5,0],[9/5,3],[9/5,3],[9/5,3],[9/5,0]]
		ymax=10.3
	} else if (dn==10) {
		var y1 = [[9/4,0],[9/4,0],[0,9],[9/4,0],[9/4,0]]
		var b = [[1,1],[1,1],[1,1],[1,1],[1,1]]
		var y = [[9/5,0],[9/5,0],[9/5,9],[9/5,0],[9/5,0]]
		ymax=10.3
	} else if (dn==11) {
		var y1 = [[9/3,0],[9/3,0],[9/3,0],[0,9/3],[0,9/3],[0,9/3]]
		var b = [[1,1],[1,1],[1,1],[1,1],[1,1],[1,1]]
		var y = [[9/6,0],[9/6,0],[9/6,0],[9/6,9/3],[9/6,9/3],[9/6,9/3]]
		ymax=6.2
		colkey = [0,2]
		var w = 300/2;
		var h = 300/2;
	} else if (dn==12) { // overlap stacked boxes. no movement
		var b = [[2,0],[0,2]]
		var y = [[1,1],[1,1]]
		var y1 = y
		var b = [[1,0,0],[1,0,1],[1,0,1],[0,0,1]]
		var y = [[.67,0,0],[.67,0,.67],[.67,0,.67],[0,.67,.67]]
		var y1 = y
		ymax=.67*2.1
		colkey = [0,-1,3]
		var w = 300;
		var h = 300/1.6;
	} else if (dn==13) { // non-overlapped boxes
		var b = [[1,0],[0,1]]
		var y = [[1,1],[1,1]]
		var y1 = [[1,0],[0,1]]
		var b = [[1,0],[1,1],[0,1]]
		var y = [[1,1],[1,1],[1,1]]
		var y1 =[[1,0],[.5,.5],[0,1]]
		var b = [[1,0],[1,0],[0,1],[0,1]]
		var y = [[1,1],[1,1],[1,1],[1,1]]
		var y1 =[[1,0],[1,0],[0,1],[0,1]]
		var b = [[1,0],[1,1],[1,1],[0,1]]
		var y = [[.67,0],[.67,.67],[.67,.67],[0,.67]]
		var y1 =[[1,0],[1,0],[0,1],[0,1]]
		colkey = [0,3]
		var b = [[1,0,0],[1,0,1],[1,0,1],[0,0,1]]
		var y = [[.67,0,0],[.67,0,.67],[.67,0,.67],[0,.67,.67]]
		var y1 =[[1,0,0],[1,0,0],[0,0,1],[0,0,1]]
		ymax=.67*2.1
		colkey = [0,-1,3] // the middle layer is a spacer
		var w = 300;
		var h = 300/1.6;
	} else if (dn==14) { // overlap stacked boxes. move
		var b = [[1,0,0],[1,0,1],[1,0,1],[0,0,1]]
		var y = [[.67,0,0],[.67,0,.67],[.67,0,.67],[0,.67,.67]]
		var y1 =[[1,0,0],[.5,0,.5],[.5,0,.5],[0,0,1]]
		ymax=.67*2.1
		colkey = [0,-1,3]
		var w = 300;
		var h = 300/1.6;
	} else if (dn.t == 15) { // passing b y and y1
		var b = dn.b
		var y = dn.y
		var y1 = dn.y1
		var colkey = dn.colkey
		ymax = dn.ymax
		slow = dn.slow
		var w = 300;
		var h = 300;
	}

	svg
	.attr("width", w)
	.attr("height", h)
	.attr("id", "visualization")
	.attr("xmlns", "http://www.w3.org/2000/svg");
	
	var border = 10;
	var xmax = y.length + 1
	
	function tx(x) { return x/xmax*(w-2*border)+border;}
	function ty(y) { return h-(y/ymax*(h-2*border)+border);}
	
	var rectlist = []
	for (var i=0; i<y.length;i++) {
		rectlist.push([])
		for (var j=0; j<y[0].length;j++) {
			rectlist[i].push(svg.append("rect"))
		}
	}
	
	var pathlist = []
	for (var i=0; i<y[0].length;i++) {
		pathlist.push(svg.append("path"))
	}
	
	
	r = svg.append("line")
	.attr("x1",tx(0-.1))
	.attr("x2",tx(xmax+.1))
	.style("stroke-dasharray","3,3")
	
	var r0 = svg.append("line")
	.attr("x1",tx(0-.1))
	.attr("x2",tx(xmax+.1))
	.style("stroke-dasharray","3,3")
	
	svg.append("line")
	.attr("x1",tx(0-.1))
	.attr("x2",tx(xmax+.1))
	.attr("y1",ty(0))
	.attr("y2",ty(0))
	
	
	function draw1(y,del,dur,setr0) {
		var ym = 0;
		
		
		if (0) { //(dn.t==15) {
			var a = y.slice()
			for (var i=1; i<a[0].length; i++) {
			  for (var z=0; z<a.length; z++) {
			   a[z][i] = a[z][i-1] + a[z][i]
			  }
			}
			var ystack = a
			var ys = []
			for (var i=0; i<y.length;i++) {
				var ystack2 = 0;
				var ysi = []
				for (var j=0; j<y[0].length;j++) {
					ystack2 += y[i][j]
					ysi.push(ystack2)
				}
				ys.push(ysi)
			}
			var yd = []
			for (var i=0;i<y.length;i++) {
				var yd1 = []
				for (var j=0;j<y[0].length;j++) {
					var cfill = (colkey[j] == -1)?"lightgrey":color_fill[colkey[j] % color_fill.length]
					var cstroke = (colkey[j] == -1)?"lightgrey":color_stroke[colkey[j] % color_stroke.length]
					yd1.push([
					ty(0)-ty(y[i][j]),
					ty(ys[i][j]),
					tx(i+.5),
					tx(1)-tx(0),
					b[i][j],
					b[i][j],
					cfill,
					])
				}
				yd.push(yd1)
			}
			svg.selectAll("g.a")
			.data(yd)
			.enter()
			.append("g")
			.selectAll("rect.a")
			.data(function(d) { return d;})
			.enter()
			.append("rect")
			.attr("x", function(d) {return d[2]})
			.attr("width",  function(d) {return d[3]})
			.attr("opacity",  function(d) {return d[4]})
			.attr("stroke-opacity",  function(d) {return d[5]})
			.attr("stroke",  function(d) {return d[6]})
			.attr("fill",  function(d) {return d[6]})
			.transition()
			.delay(del)
			.duration(dur)
			.attr("height",  function(d) {return d[0]})
			.attr("y",  function(d) {return d[1]})
			return
		}
		
		if (dn.t==15) {  
			var xb = 10
			var yb = 10
			var button = svg.append("g")
			.attr("transform", "translate("+ xb +","+ yb +") scale(.4)");

			button
			.append("rect")
			.attr("class","button")
			.attr("width", 50)
			.attr("height", 50)
			.attr("rx", 4)
			.style("fill", "steelblue");

			drawpauseplay = function() {
			
				if (dn.show == 1) {
					button.selectAll("path").remove();
					bpath = button.append("path")
					.attr("d", "M15 10 L15 40 L22 40 L22 10 Z M28 10 L28 40 L35 40 L35 10 Z ")
					.style("fill", "white")
				} else {
					button.selectAll("path").remove();
					bpath = button.append("path")
					.attr("d", "M15 10 L15 40 L35 25 Z")
					.style("fill", "white");
				}
			}
			
			drawpauseplay()
			
			svg.selectAll("text").remove()
					
			toggleplay = function() {
				dn.show = 1 - dn.show
				drawpauseplay()
				if (dn.show == 0) {
					svg.selectAll("rect").transition()
					svg.selectAll("line").transition()
					svg.selectAll("path").transition()
				} else {
					svg.append("text")
					.attr("x",40)
					.attr("y",5)
					.attr("dy",20)
					.text("just a moment")
				}
			}
			
			button
			.on("mousedown", toggleplay);
			
			countplays15++
			if (0) { //(countplays15 >= 2*2) { // doesn't work yet
				dn.show = 1
				toggleplay()
				countplays = 0
			}
		}
		
		var lined = []
		for (var i=0; i<y.length;i++) {
			var ystack = 0;
			for (var j=0; j<y[0].length;j++) {
				if (i==0) lined.push([])
				var cfill = (colkey[j] == -1)?"lightgrey":color_fill[colkey[j] % color_fill.length]
				var cstroke = (colkey[j] == -1)?"lightgrey":color_stroke[colkey[j] % color_stroke.length]
				ystack += y[i][j]
				var rect1 = rectlist[i][j]
				var t = rect1.transition()
				.delay(del)
				.duration(dur)
				.attr("height", ty(0)-ty(y[i][j]))
				.attr("fill", cfill)
				if (0) {
					t
					.transition()
					.delay(del+dur+100)
					.duration(dur)
					.attr("y", ty(ystack))
				} else {
					var the_y = ty(ystack)
					t
					.attr("y", ty(ystack))
				}
				if (dn==3 || dn=="1a" || dn=="1b" || dn==2 || dn==5 || dn==6 || dn.t==15 || dn==12 || dn==13 || dn==14) {
					var the_x = tx(i+.5)
					var the_w = tx(1)-tx(0)
					rect1
					.attr("x", the_x)
					.attr("width", the_w)
					.attr("opacity", b[i][j])
					.attr("stroke-opacity", b[i][j])
					.attr("stroke", cfill)
				} else if (dn==7 || dn==8 || dn==11) {
					var xa = tx(i+1)
					var wa = tx(b[i][j])-tx(0)
					var the_x = xa-wa/2
					var the_w = wa
					rect1
					.attr("x", the_x)
					.attr("width", the_w)
					.attr("stroke", cfill)
				} else {
					var xa = tx(i+1)
					var wa = tx(b[i][j]*.9)-tx(0)
					var the_x = xa-wa/2
					var the_w = wa
					rect1
					.attr("x", the_x)
					.attr("width", the_w)
					.attr("stroke", cstroke)
				}
				lined[j].push({"x":the_x , "y":the_y});
				lined[j].push({"x":the_x +the_w , "y":the_y});
				
			}
			ym = Math.max(ystack,ym);
		}
		
		if (dn==3 || dn=="1a" || dn=="1b" || dn==2 || dn==5 || dn==6 || dn.t==15 || dn==7 || dn==8 || dn==11 || dn==12 || dn==13 || dn==14) {
					
					
			var linef = d3.svg.line()
							.x(function(d) {return d.x; })
							.y(function(d) {return d.y;})
							.interpolate("linear")
			for (i=0;i<lined.length;i++) {
				var path1 = pathlist[i]
				path1
				.transition()
				.delay(del)
				.duration(dur)
				.attr("d",linef(lined[i]))
				.attr("stroke","black")
				.attr("stroke-width",1)
				.attr("fill","none")
				if (dn.t==15) path1.attr("stroke-opacity",.2)
			}
		}
		
		r
		.transition()
		.delay(del)
		.duration(dur)
		.attr("y1",ty(ym))
		.attr("y2",ty(ym))
		if (setr0) {
			r0
			.attr("y1",ty(ym))
			.attr("y2",ty(ym))
		}
	}
	draw1(y,0,0,1)
	draw1(y1,2000*slow,2000*slow,0)
	
}

function splitrectangle(svg,dn) {
	var w = 480/2;
    var h = 300/2;
	var ymax = 1;
	var xmax = 1;
	svg
	.attr("width", w)
	.attr("height", h)
	.attr("id", "visualization")
	.attr("xmlns", "http://www.w3.org/2000/svg");
	
	var border = 18;
	var slow = 3;
	
	function tx(x) { return x/xmax*(w-2*border)+border;}
	function ty(y) { return h-(y/ymax*(h-2*border)+border);}
	
	var n = 12;
	var rectlist = []
	for (var j=0; j<n;j++) {
		rectlist.push(svg.append("rect"))
	}
	var rect0 = svg.append("rect")
	svg.append("text")
	.attr("x", 0)
	.attr("y", h/2-10)
	.attr("dy",".75em")
	.text("y")
	svg.append("text")
	.attr("x", w/2-border)
	.attr("y", h-border+6)
	.attr("dy","10px")
	.text("voters")
	var colid = 0
	function draw1(del,dur,op) {
		for (var j=0; j<n;j++) {
			var rect1 = rectlist[j]
			var t = rect1.transition()
			t
			.delay(del)
			.duration(dur)
			.attr("height", ty(0)-ty(1))
			.attr("fill", color_fill[colid % color_fill.length])
			.attr("stroke", color_stroke[colid % color_stroke.length])
			.attr("y", ty(1))
			.attr("opacity", op)
			.attr("stroke-width", op)
			.attr("stroke-opacity", op)
			rect1
			.attr("x", tx(j/n))
			.attr("width", tx(1/n)-tx(0))
		}
		rect0
		.attr("x", tx(0))
		.attr("width", tx(1)-tx(0))
		rect0.transition()
		.delay(del)
		.duration(dur)
		.attr("height", ty(0)-ty(1))
		.attr("fill", color_fill[colid % color_fill.length])
		.attr("stroke", color_stroke[colid % color_stroke.length])
		.attr("y", ty(1))
		.attr("opacity", 1-op)
		.attr("stroke-width", 1-op)
		.attr("stroke-opacity", 1-op)
		
	}
	draw1(0,0,1)
	draw1(2000,5000,0)
}

function startdraw(f,idtoget,dn,showit) {
	var firstdraw = 1
	var svg = d3.select(idtoget)
		.append("svg")
	draw_a = function() {
		if (showit.show || firstdraw ) {
			svg.selectAll("*").remove(); 
			f(svg,dn);
		}
		firstdraw = 0
	}
	draw_a();
	i_draw = setInterval( draw_a, 10000);
}

startdraw(drawjeff,"#jeff",1,showjeff)
startdraw(drawjeff,"#bid",2,showjeff)
startdraw(drawjeff,"#bid3",3,showjeff)
startdraw(drawliquid,"#liquid1c","1c",showliquid)
startdraw(drawliquid,"#liquid2",2,showliquid)
startdraw(drawliquid,"#liquid3",3,showliquid)
startdraw(drawliquid,"#liquidjeff",4,{"show":0})
startdraw(drawliquid,"#liquid5",5,{"show":0})
startdraw(drawliquid,"#liquid6",6,{"show":0})
startdraw(drawliquid,"#liquid7",7,showliquid)
startdraw(drawliquid,"#liquid8",8,showliquid)
startdraw(drawliquid,"#liquid11",11,showliquid)
startdraw(drawliquid,"#liquid1a","1a",showliquid)
startdraw(drawliquid,"#liquid1b","1b",showliquid)
startdraw(drawliquid,"#liquid12",12,showliquid)
startdraw(drawliquid,"#liquid13",13,showliquid)
startdraw(drawliquid,"#liquid14",14,showliquid)
startdraw(drawjeff,"#liquidjeffagain",4,{"show":0})
startdraw(drawjeff,"#rep",1,{"show":0})
startdraw(drawjeff,"#price",2,{"show":0})
startdraw(drawliquid,"#liquid14again",14,showliquid)
startdraw(splitrectangle,"#splitrectangle",1,{"show":1})


</script>
  
</html>