1-2-3 example

Create a website in Visual Studio (I’ve taken a MVC one here) and right-click on your project, go to the Nuget package manager and search for ‘Processing.js’ in the online section

Click on ‘Install’ and a couple of JS libraries will be added to your Scripts folder.

Either in your aspx/html or in the ‘_layout.cshtml’ file add a reference to the ‘Processing.js’ library. You can simply drag-drop the file from the Solution Browser into the text editor and Visual Studio will automatically create the correct reference. From this point on the possibilities are endless, have a look at the Processing ehibition for instance.

For example, if you wish to add a clock to your page change the ‘Index.cshtml’ to the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

@{
    ViewBag.Title = "Home Page";
}
<h2>
    A simple processing.js clock
</h2>
<p>
    <canvas id="canvas1" width="200" height="200">
    </canvas></p>
<script id="script1" type="text/javascript">
 
    // Simple way to attach js code to the canvas is by using a function
    function sketchProc(processing) {
        // Override draw function, by default it will be called 60 times per second
        processing.draw = function () {
            // determine center and max clock arm length
            var centerX = processing.width / 2, centerY = processing.height / 2;
            var maxArmLength = Math.min(centerX, centerY);
 
            function drawArm(position, lengthScale, weight) {
                processing.strokeWeight(weight);
                processing.line(centerX, centerY,
        centerX + Math.sin(position * 2 * Math.PI) * lengthScale * maxArmLength,
        centerY - Math.cos(position * 2 * Math.PI) * lengthScale * maxArmLength);
            }
 
            // erase background
            processing.background(224);
 
            var now = new Date();
 
            // Moving hours arm by small increments
            var hoursPosition = (now.getHours() % 12 + now.getMinutes() / 60) / 12;
            drawArm(hoursPosition, 0.5, 5);
 
            // Moving minutes arm by small increments
            var minutesPosition = (now.getMinutes() + now.getSeconds() / 60) / 60;
            drawArm(minutesPosition, 0.80, 3);
 
            // Moving hour arm by second increments
            var secondsPosition = now.getSeconds() / 60;
            drawArm(secondsPosition, 0.90, 1);
        };
 
    }
 
    var canvas = document.getElementById("canvas1");
    // attaching the sketchProc function to the canvas
    var p = new Processing(canvas, sketchProc);
    // p.exit(); to detach it
</script>
<div style="height: 0px; width: 0px; overflow: hidden;">
</div>

Run/display this page and you’ll get something like the following:

The Value of Data Visualization from Column Five on Vimeo.

Finding the needle in the haystack is now more pressing than before. The more data we produce and have access to, the more the need for something intelligent to get the information out of the data becomes important. Obviously the ever-increasing amount of data and the shift to global data stores like the cloud have increased the need for better visualizations techniques and innovative thinking.But the amount of noise has also increased and the need to choose through it. How to filter out of the billions of tweets the stuff that matters to you? The only way to do that is by choosing; what matters to you is related to the things that you choose for and which have a direct relevance in your life (personal or professional). Before the filtering comes the criteria and the criteria are dictated by the business or personal context combined with a more-or-less precise definition of what the solution or answer should be like. Usually a question has many answers or complementary answers, much like a mathematical problem has a one or more solutions depending on the target space within which the solution should be found.

Although I find it refreshing to see that data visualization and presentation techniques are now more important than ever before, it’s not for myself the reason why this field is interesting or fertile. Data visualization is useful as a product for the end-user or consumer but is equally well interesting for the producer or creative inventor because it combines various fields. Like nothing else you need to be partly an artist, partly a scientist to come up with something beautiful yet meaningful and interesting. You need to understand sometimes deep technical details and exotic programming concepts while having a good understanding of the business context and what a customer needs. You need to fathom the (business) question and at the same time have a vision, which usually means a mixture of intuition and expertise. You need to understand the language of different people and sub-cultures, read through minor details, yet see through the details and go beyond to deliver a broad concept. Having a bird’s-eye view while knowing the murky details on a low-level demands a mind which can stretch across all levels of thinking. Can you make the simple complex and the complex simple? Can you see color where others see mathematical formula’s? Can you see sound where others see data and shapes? Can you see code where someone sees motion? Can you see patterns where others see noise? Can you see information where others see data?

• Visualizing.org
• Information is beautiful
• Data Visualization Showcase

Recently a customer requested a particle simulation with the intention to investigate correlations and the effect of multiple ‘attractors’. The real, underlying issue in this demand is the fact that certain situations and systems are governed by laws (differential equations) which cannot be solved exactly and require a dynamic system to search for critical coefficients. These coefficients result in (semi) stable configurations or highlight boundary conditions inside which things make sense.

The problem with these kind of systems is the scalability which has two aspects; the visualization which doesn’t scale well with the retained graphics pipeline of WPF/SL/WP7 on the one hand  and the O(N*N) calculation of interactions between particles.

Regarding the visuals there is really a lot to consider:

• if you inherit from a baseclass like FrameworkElement or Control or even UserControl you carry around with each and every particle a whole lot of stuff; data binding, styling, event and other infrastructure. While all these things are really great in an LOB, one doesn’t usually need all this when dealing with (lots of) particles
• typically the underlying surface needs to be a Canvas but this element also brings along many gears; the retained rendering system, the measure/layout mechanics, styling and more. Maybe the bonus you miss when bypassing the Canvas is the ability to easily integrate zoom and pan in an application.
• how much user-interaction is required, are mouse-events necessary or is it a ‘let it run’ system? Here as well, you need to consider carefully the implications (especially related to the scalability of the app).

With respect to the simulation or calculation part things are more straightforward but you also need to think about

• the possibility to use F# for the more mathematically oriented parts. The disadvantage is however the need to constraint your model to make sure things talk to C#, or you have to go the full nine yards in F# (talking to XAML is still a disaster in this case).
• how to optimize the calculations and to make sure that inside loops you break early and branch as much as possible
• dropping unnecessary properties of the particles and make the particle system as lightweight as possible

Within the Silverlight/WP context my experience is that if you use the Canvas/UIElement combination you easily hit a wall around 500 particles due to the way the rendering engine is functioning and the fact that the UIElement (or FrameworkElement) are too ‘heavy’. The inter-particle calculation will still run OK with 500 particles but the end-result is that it’s not a good solution altogether.

One can keep the Canvas as underlying surface and render particles as inherited Shape items but this doesn’t push the boundary much.

A step further is to replace the Canvas with a bitmap and use direct pixel printing. This is easily done with the WriteableBitmapEx project you can find on CodePlex. This boosts your rendering to 5000 particles if you drop interactions. However, if you switch on inter-particle forces you hit a calculational wall around 1500 particles which is still way better than the retained rendering solution but still somewhat underwhelming.

So, as a next step it would be great to use parallel processing for the algorithmic part but unfortunately there is no task parallel processing library (TPL) for Silverlight (though somewhat made an unofficial port). Another possibility would be to use MailboxProcessor of F# but it would entail threading issues and an altogether more difficult system.

Various samples and libraries are available for XNA and Windows Phone which allow one to create particle effects but

• the often use sprites or similar techniques to minimize the particle count. The results are usually very good but the aim in the context of games is usually to create a certain effect rather than to give a physically correct simulation.
• they often do not exhibit inter-particle forces. If they do the particle count is low.
• they focus on effects and not physics

See also the Flint-sharp library which is a port of the Flash/Flex library.

The conclusion is that one can perform simulations and develop particle system in Silverlight if the need is not above, say, a thousand particles. Above this threshold things become more difficult and Silverlight as a medium becomes less suitable for this type of task. Obviously there are high-tech solutions on the basis of C++ and GPU instructions but this was outside my client’s scope (and my technical know-how as well).

Note: on different level you need to note in the attached simulation sample that

• the average speed varies a lot while the amount of interacting particles stays the same
• the ergodic phenomenon if easily shown; that the average velocity over the sample equals the average of one item in time
• it’s quite difficult to create stable configurations; which mimics well how the real world is also constantly influenced by quantum fluctuations

References

• TPL library ported to Silverlight 4
• Particle system for games (XNA & WP)
• Flint for C#
• WriteableBitmapEx on CodePlex

How to picture a 5-dimensional sphere or a see the correlation of  112-dimensional weather data? The answer was found in 1885 when parallel coordinates were invented and later refined in 1959 through  Inselberg. The idea is actually very simple, given some N-dimensional space of data you draw N parallel lines and each line has its own scale. Plot a given data point on these lines by creating a line between the N point of this multi-didmensional point. In this way you get a line per data point and the series of given data points are mapped to a series of lines on the graph. The situation being much like projective geometry where we also find a back-and-forth thinking between lines and points in space. The good thing about such a representation is that if points have some accumulation in a particular dimension you will see it because lines will accumulate on the axis representing this dimension (see adjacent image). This kind of correlation can usually only be detected through statistical analysis, but what do you do if you want to record or supervise data which continuously comes in from real-time systems? This would mean a continuous mathematical analysis of the sampled data and this would entail some very custom algorithm bound to the particular context.

A customer of ours recently challenged us to implement the parallel coordinates visualization in WPF. While quite straightforward at first sight it proved to be more difficult than we initially thought for two reasons:

• non-numeric data: what to do if you have some string data in one of the dimensions? Say, you want to visualize in one of the dimensions a timestamp or telephone numbers or names of patients.
• how to emphasize the accumulation points in the graph? While in the screenshots above you can actually see well the discrete tendence in the second dimension, the screenshot on the right bestows you with a challenge to detect it.

The first problem was tackled through an internal mapping of the data which spreads the non-numeric data across an axis. The drawback of this is that at various levels one has to switch between the actual

data and the internal representation for labels, line hit during hovering, the histogram (see below) and any calculation in general. The second was more difficult and entailed some analysis of the data and various visual alternatives to attract the attention of the user (human interpreter of the data). The end-result is an histogram which like a rotated bar chart on the axis graphs the relative amount of crossings on the axis. The histogram actually shows also the opposite of an accumulation, since (see the second axis in the screenshot below) an equal spreading of the histogram’s rectangles means an equal distribution of the lines across the dimension axis.

Other minor features we added to this data visualization are; the possibility to hover over the graph and see the actual data of the multi-dimensional points, datagrid binding and editing, customization of look & feel through dependency properties, swapping data axes, scaling data vertically on a particular axis.

Probably the most satisfactory moment for myself during the development was at the point when it became clear that just any CSV/spreadsheet data can be bound to the parallel graph visualization. Indeed, due to the internal mapping mechanism one can present any type of tabular data and as a proof of concept I mocked some random spreadsheet in Excel which was subsequently visualized without a hitch.

Stocks & shares anyone? Let me know.