Home Blogs Vsevolod L1433Business Data Visualization, animated map with data

Business Data Visualization, animated map with data

Posted by Vsevolod L1433 on Tuesday, 20 August 2013 in Blogs

I’ve got business data! Where’s a grid?

Very often I’m asked on “grid” for mobile apps with Delphi for iOS and Android (when? see our roadmap). The reason is “this is the only way to represent or visualize business data”. We should distinguish “business data making” and “business data consumption”. For “making” the grid-like structure (visual component) is ok, let’s see the Microsoft Excel Sheet as a most recognizable example:

That’s some typical “business” data. Why “business” in quotes? Because the data are “business-critical”, while describe any domain – sport, medicine, education, industry etc. You may recognize some online game data in your country or epidemic counteractions or school exit exams etc. So everybody:

Has a mobile device

Has data to see, analyze and

Takes decisions.

How can we show business data for everybody?

If one has a grid for mobile...

Is it possible to understand the gridded data above? You can simply start a new FM mobile project, place TImage, assign a picture above – a great way to test GUI for 5 min. Here’s my result:

The data are neither easy to see, nor effective to analyze.

What we have already

At the moment we have some alternatives like special chart components or even scientific-like techniques to use 3D space for data visualization.

A typical pie-chart looks very traditional and nevertheless useless for complex data. It’s just one column of our data grid, while the space is used not very effective.

3D chart is good, but implies some restrictions on the data to be visualized. X-Y-Z values are somehow connected by a function (continuous function). And there is no way to show multi-dimensional (more than 3D) data on a chart.

Decision cube is good, if you have 22 inch monitor. Don’t you believe me? Try to insert this picture into TImage for a FM mobile application.

If you think of using “just-the-same” GUID made for your Desktop application, make a screen-shot and try TImage with static bitmap, full screen aligned in your mobile application.
If you customer rejects to pay for re-modeling of mobile-targeted version of your desktop application, let him/her see this not clicable, but very comprehensive app.

“Infographics”

Infographics is a modern, very attractive and effective way of represending information. It rather differs from traditional ways like charts (pie, line, bar etc) or grids. For mobile form-factor we can’t fully use the main and popular patterns, but the strategy is very good:

Non-standard ways

Very effective graphics

Metaphors

“Effective” in turn means:

Compact (especially for mobile)

Easy to understand

Easy to interpret

Easy to memorize

Of course, in order to invent infographics a developer should be very creative. And the main principle of the design is “try as many variants as you can”. For mobile development it’s easy with true-native RAD tool – Delphi.

Let’s go test if no “infographics”, but “interactive” and non-standard technique with FM Application Platform, as we have vector-based HD and 3D graphics, large set of visual components, animation and bitmap effect. We also need quick-minded developers. I mean you and me.

Territories and maps

We mentioned some “territories” or “regions” in the initial data grid. Elementary and right start is to draw an interactive map for GUI interface. In FM HD we have a component TPath, which consumes SVG-data.

I’ve split a map into some regions. It looks like “Russia” and well recognizable.

I’ve got online service svg-edit.google.com:

… and then easily (10 min) drew some pieces. In process I thought of making my own SVG-editor, but some bugs discovered were quite bearable.

You can make SVG-path in the following way:
M 0,0
L 100,0
L 100,100
L 0,100
L 0,0

(it’s a square)

In the online service I clicked “source” and got what I needed:

We have such a cute text, where one can find “path#1” , “path#2” etc. Now we’re ready to start Delphi, create a new HD FM project for mobile and sit a number of TPath components on a form.

When making an SVG- path, be clockwise! For Delphi this is critical.

Delphi HD interactive map for mobile

Every TPath component has “Data” property. Copy-paste 7 times, and 7 regions work as visual components in our application – an interactive map is ready! TPath can work as a control, while by its shape already meaning something more informative, rather just “a clickable button”.

I’m using “pwStretch” for WrapMode. Please, try all variants of this wonderful property to be sure you’re getting exactly what you’re expecting.

You may say “I don’t see much difference comparing to grid”. We should discuss this more carefully.

Why better

In “grid” manner of information representation we have very simple system: Col/Row + value in a cell. Yes, something from the DB world. But the values are just words and numbers. They looks alike, they give no emotional impression (like "Wow! What a big growth!"). They are boring! Kids can watch cartoons very carefully for hours, while getting sick and tired after 5 min of simple arithmetic exercise.

In map we have:

Shape

Color

Size

Absolute position

Position regarding the other elements

We run the application and see the following picture:

It is a reflector on Win, grabbing the screen of my iPhone. Believe me, the colors on the device are stunning.

Having created the “frame”, not “grid”, we can then proceed with other values. It can be:

Colored numbers

Numbers in regions

Enlarging regions after click and detailed data regarding the specific region

Every TPath component can be filled in a number of ways. Try different options of “Fill” property. The picture above shows “gradient” way of filling the shape, the picture looks not so “plane” and a bit stylish.

In addition, we can add dynamics as FM components allow doing animation fast and easy. Look at an ultra short video below:

Worry, glory, market drop, problems, growth… with, of course, later on numeric specification create a fine picture of pre-analytical representation.

Delphi 3D interactive map for mobile

We can use all the FM Application Platform capabilities: animation of position, animation of glow, more components on the paths (also possible to animate), plain text, and even bitmap effects. In addition, we can combine all these with 3D.

Do you remember, FM 3D has “path” compoment, based on SVG format? It’s named TPath3D. You can simply add another form to your mobile project and start doing interactive 3D map.

You can add FM 3D form, but I’d recommend you start an HD form and addTViewPort3D with align as alClient. It’s a good way then to mix HD and 3D interface, for example when you need more “plain-text” details.

As you can see, all TPath3D components have parent as “Dummy1”, this allows us simple rotating the scene like this:

…by changing “RotationAngle.X “property.

The regions now looks really great, but not the beauty made me do this. This is business data visualization, so let’s find some ways of setting more information to the picture.

The thickness of the pieces is controlled by “depth” property of TPath3D component. Use slightly different values of this property for neighboring parts like 1.01 and 0.99 to avoid artifacts. In picture above my “green” TPath3D due to complicated path needs more clear distinguishing with regard to “blue” one, so it’s 0.99.

Then we’re combining the interactive 3D map with classical “bar” chart elements.

Your customer, I know, prefer animated pictures, so I’ve added some simple effects like TFloatAnimation, applied them to Cylinder’s “Hieght” and “Position.Z” properties, as well as to Dummy1’s “RotationAngle.X” property. “Delay” property of every TFloatAnimation component allow time-lining.

In dynamics the picture will go like:

After we have positioned the scene at proper angle and made the bars visible, let’s get the final animated picture:

You may then add "plain numbers" even in grid to specify the business data. It can be another TabItem (do you remember, we've started with HD form?). "Big" and "essential" values can also be 3D (TText3D):

You can see Win-target-deployment. I recommend to test 3D on Win machine, the results is just one-to-one when moving from Win to mobile with FM application platform.

Johnny-mnemonic

This animated map with business data is easy to keep in visual memory. If we add some “mnemonics” we’ll never forget. Keeping this mentally in front of your eyes, you can do a presentation without mistakes. Little poem (please, see the video above once again):

Are we ready?
Blue is steady
Green gets down very quickly
Gray goes after, dropping weakly
Fuchsia does a lot of worry
Yellow grows and brings us glory
Sky gets fatter every day
Do help green, and then help gray!

In public the words will be a bit different:

Ladies and gentlemen, we are now ready to discuss the tendencies over the last months
Far east region shows small oscillation around the predicted value, while …
Siberia is the biggest problem, as critical indicators show…
Central region is not so dramatic, but the decrease sadly continues some weeks, but …
In the south analytics is very contradictory, no conclusions at the moment, more monitoring will …
North territories is a champion, gaining lots and lots, doubling the revenue, and …
West region increases the number of partners involved and brand awareness, but not with sensible results at the moment, in future we expect …
Our current strategy, first, is to direct all the resources to Siberia, at last, to freeze the movement, if the results are positive, we can then select and propagate the most effective methods to central region.

Now the problem for me is not how to keep this in memory, but how to forget. When making the described exercise use data, which will be useful for your "business".