Woodgrove Finance Application Source Code Posted
The Woodgrove Finance Application is a great demo of how WPF can be used to create better data visualization, in this case for financial data. I've posted the source code -- there are some good nuggets in here worth exploring.
Using The Finance Application
The application provides a 3D visualization into a hypothetical, static porfolio. It is important to note that this application is not bound to live data. To the left is a 2D list of stocks, grouped by Small Cap, Mid Cap and Large Cap stocks. By clicking on a stock in this list, detailed information about the stock can be seen in the far right column. If you hover over the 2D stock chart, it will expand for an easier reading experience.
Hovering over a stock will group it with other stocks of the same sector within that market size. For example, hovering over ArvinMeritor will also highlight Men's Wearhouse, both part of the consumer segment. This becomes interesting in terms of the 3D chart, in the center of the application. You can see how the labels for the X and Y axis update when different stocks are hovered over. The hover action pinpoints that particular grouping of sector and market cap, aggregating the results. So, one can immediately get a sense of how Mid Cap stocks in the consumer sector are doing -- in this case, not well, as can seen from the long red bar.
The application is two way, in that you can also interact with the 3D bar chart and see the corresponding 2D areas become highlighted. If you leave the mouse over a given bar for 1 second, you will get information about that bar as well, letting you know what aggregate of stocks that bar represents as well as the market cap and sector.
If you click on the the Woodgrove logo, the 2D section will animate away, allowing you to focus on the 3D. Holding the right click button down of the mouse will allow you to trackball the graph. In addition, you can compare stocks against the DJIA if you click that button. (The other comparison buttons aren't wired up.) If you then move the slider, you will see an animation between the current data and a date in the past.
Lastly, by switching in the drop down from Day % Change to Dollar change, the bars turn to columns.
Decomposing The Finance Application
While all of the data is static, the application is designed to support databinding to live data and could be done with a nominal amount of effort. Right now, everything is databound to the static equity.xml file. However, changing the databinding to a webservice would allow for this application to show real data.
You'll notice that the project is factored into multiple components. The WoodgroveFinanceApplication doesn't really do anything but hold the WoodgroveFinanceHost, which sets up the layout and handles the interaction between the 2D and the 3D. The WoodgroveFinanceStockChartFrame then holds the 2D pieces and the WoodgroveFinanceStockChart3D holds the 3D pieces. By doing this componentization, all of the functionality is really contained in controls, such that they can be added to a different project quite easily. If just the 3D section were desired, it is already isolated from the rest of the application.
You can open the project in Expression Blend, which is very cool. One could customize the look and feel from within Blend. It also demonstrates how Expression Blend supports opening .sln files and working with multiple projects.
Lastly, it is worth commenting that the 3D graph is based on work done by Robert Hogue (https://www.therhogue.com/WinFX/). Some of the explanation in his download pack is germaine to the code in the 3D part of the application.
Enjoy!
Comments
Anonymous
December 05, 2006
Una interessante applicazione in wpf con codice sorgente. Vi consiglio di provarla, rende molto beneAnonymous
December 05, 2006
For the WPF fans, via karstenj... the source code -- Click Here To...Anonymous
December 06, 2006
This is an impressive example! I'm curious though, why were PNG files used (see WoodgroveFinanceStockChartFrameLABELS) for the labels on the sides of the chart? Why not just use text instead? Was there a performance consideration? I'm a big fan of the PNG format but the labels look like they were converted from GIFs. Notice the white aliasing around the edges. A true PNG would have the proper alpha-transparent pixels around the edges to simulate anti-aliasing. Other than that minor grip it's an awesome example.Anonymous
December 06, 2006
Not sure why that design decision was made. Much of this demo was written almost a year ago, when WPF was pre-beta, so some of the decisions may have been made to work around instabilities. I think the thing to do would be to rip out the bitmaps and put in vectors and see what happens.Anonymous
December 06, 2006
ASP.NET AJAX Under the Hood Secrets by PageFlakes.com Creator [Via: ScottGu ] Announcing the release...Anonymous
December 14, 2006
I am SO busy with INETA trips and tons to do at work. Here is what I have stored up for the last weekAnonymous
January 05, 2007
The Healthcare and Woodgrove applications are good examples of WPF and 3D value added in business computingAnonymous
January 05, 2007
Les applications Healthcare et Woodgrove sont des bons exemples de de la valeur ajoutée ergonomique deAnonymous
October 20, 2007
I am SO busy with INETA trips and tons to do at work. Here is what I have stored up for the last weekAnonymous
April 21, 2008
If you want to learn what is Silverlight , WPF , Photosynth, Popfly, DeepZoom (SeaDragon) Why to go and