From CS294-10 Visualization Sp11
Data Domain and Storyboards
I'm still pretty enthusiastic about the Electricity Strategy Game as a topic. I was a bit frustrated by some of Tableau's limitations in A2, and I think there's a lot of potential for an interactive supply and demand visualization to make the auction mechanics more transparent to students and also, perhaps, to help my team make better bids. To recap: the supply data consist of information about power plants, including which portfolio they belong to and their costs of operation (variable and fixed). The demand data consist of uncertain demand forecasts for each game hour, with a standard error of 3%.
I intend to create an interactive visualization that will let students experiment with different bidding strategies for their own and opponents' portfolios, and see the financial results under different possible demand levels. There will be three main ways that the user can interact with the visualization:
- Raising or lowering a plant's bid price
- Adjusting the uncertainty band around the demand forecast
- Choosing a different hour (which will change the demand forecast)
Changing a bid
In the initial display seen below, the bottom of each colored box represent's a plant's cost of operation and the thicker top line represents its current bid price (both in $/MWh). The width of the box represents the plant's capacity in MW. Thus, the area of the box represents the plant's potential profits for the hour: the difference between the amount it will make if the bid clears and the amount it must pay to generate that power. The shaded area of the box indicates the profit that will actually be made if demand is as forecast -- in other words, the amount of the plant's capacity that is beneath the demand line. (In case of a tie on bid price, the marginal generation is split among the tied plants, as indicated by the partially shaded plants.)
The summary bars at the top show the expected hourly profit for each portfolio under low, forecast, and high demand conditions, corresponding to the dark, medium, and lighter portions of each bar. The "forecast" bar in the top panel shows what the portfolio will make if demand falls on the dark gray slanted line in the lower panel, and therefore the clearing price is as shown on the chart. The "low" bar corresponds to demand falling along the left light gray line, and the "high" bar corresponds to the right light gray line. The storyboards are simplified to show only 3 portfolios and 10 plants; in reality there are 7 portfolios containing 42 plants.
Bids for each plant will initially be set to a reasonable, conservative default (basically, slightly above the plant's marginal cost of operation). Users can adjust a plant's bid by dragging the bid line up or down, as indicated by the yellow arrow in storyboard 1.
When the mouse is released, the software will adjust the size of the box and rearrange the boxes if necessary to maintain bid-price ordering, as shown in storyboard 2 where the first two plants have switched places. It will also recalculate the clearing price if necessary (in this case it's not necessary because the plants switching places were not at the margin).
Adjusting the uncertainty band
The user can drag either the upper or lower demand forecast left or right as shown in storyboard 3. The counterpart will move inward or outward by the same amount to keep the bounding area symmetrical.
This will not change the forecast clearing price or quantity, but will change the expected profit under the high and low demand scenarios. This is reflected by the changes in the bars in the top panel, as shown in storyboard 4.
Choosing a different hour
The user can choose a different hour to examine by adjusting the drop-down boxes at the bottom, or by clicking the triangular buttons on either side of the drop-downs to move sequentially backwards and forwards through the hours. This will shift the forecast demand, while keeping the same size area of uncertainty around it. The clearing price/quantity and profit forecast bars will adjust accordingly. Additionally, some days are uniform price auctions rather than the pay-as-bid auctions shown so far. In a uniform price auction, the shaded profit areas will extend above each plant's bid all the way to the clearing price line, since everyone is paid the clearing price in this type of auction. The software will know which days are pay-as-bid and which are uniform price and will update the curves and profit predictions accordingly.
Here is the final product: ESG Explorer. The text in the introductory panel describes the visualization from a user perspective, so to avoid redundancy I won't repeat it here. Here's a zip with all the necessary files in case there's something wrong with the live version.
Changes from storyboard to implementation
Overall, the final design was very similar to my initial sketches; I think already having some familiarity with the data and the way it's commonly visualized helped with that. However, there were two significant changes:
- I originally sketched the profit indicators in the top panel as a stacked bar chart. I realized during implementation that a line marking the median prediction with an uncertainty band around it was more appropriate. To some extent, I just think it makes sense to follow convention and use the format people are used to seeing for quantile plots. More critically, though, the stacked bar chart could get confusing when some of the profit estimates for a given portfolio are negative while others are positive. The "stacking" would be hard to interpret in that case.
- I added a "bid editor" for fine-tuning bids after dragging them. On pencil and paper, I hadn't forseen the need for this, but users might reasonably want to tune their bids to the penny, and there isn't enough vertical resolution on the screen to make this feasible with the dragging mechanic alone. I tried to make the editor unobtrusive enough that it could be ignored by users who aren't interested in the extra precision
Overall, I spent about 30 hours on this project, 3 on storyboarding, 25 on coding, and 2 on writing the explanatory text. The major challenges were:
- Interactivity. I wrote what I thought was some fairly straightforward event-handling code to enable dragging the bid lines and quickly got it "sort of" working, but the movement was jerky and inconsistent. Eventually I realized that the dragging only worked when I had my mouse over a "painted" part of the visualization (e.g., a grid line). Poring over some examples on the protovis web site eventually led me to stumble across the secret sauce of
.events("all")and suddenly the interaction was fluid and beautiful (at least on my fairly new machine!).
- Calculating the clearing price and sold quantity. It's a bit tricky to calculate the clearing quantity and price accurately. There was a bug in my code right up until the end that caused it to return wild (e.g. negative) prices when the demand line intersected the vertical part of the supply curve between two bids. Interestingly, it was adding the interactivity to the demand confidence interval that led me to find the bug, because it allowed me to quickly "scrub" over many different demand scenarios. Because intersections with a vertical part of the supply curve are rare, I had missed the problem in my initial, more static versions of the visualization.
- Adding the low and high profit estimates. I saved for last the task of adding the low and high profit estimates to the visualization. This required adding new demand data, as well as keeping track of three separate clearing prices and clearing quantities, and three separate quantities of power sold for each plant (one each for the low, medium and high demand estimates). I knew it was coming and I had somewhat planned for it, but even still there were many lines of code that needed to be changed together, and it took me several hours to iron out all the kinks. Now that I've had Jeff Heer's lecture on protovis, I think there might have been ways that I could use its built-in data manipulation methods to make this easier (or at least more succinct).