Kendo UI Map Visualizations with Bar Charts

Bar map
I have been having some fun with Kendo UI map visualizations recently by combining CSS3 styling with custom marker elements. Applying custom data-based HTML elements to the map opens up endless possibilities for mapping, and the Kendo UI map makes it really straightforward. If your data has a geographic component, then viewing it on a map is a powerful visualization.
The key to these bar “charts” is the use of a box-shadow to give the 3D effect. For any color, I found that a base color for the forward-facing rectangle, and then a shade of the same color but 25% darker on the box shadow makes a nice shadow side. I used a simple color picker to help.
Then I did a little fine-tuning on my visualization before trying to apply it to the map markers, since we have to manually construct the html element string to do the actual mapping. It’s also a good idea to keep the visualization simple, both to decrease the possibility of errors when adding it to the markers, and to keep the map drawing nice and fast. The more points you map, the more effect it will have.

Here’s what I came up with:

The next piece here is the extension of the map point to include the metadata that will be used to generate the bars. We don’t just want to hard-code these values, we want to be able to generate the marker’s bar height according to any data set. You can see here that a three-element array contains the count data, and I am manually adding two points to the markers collection. This data could just as easily be fetched from a remote service, then added to the markers collection  after the map is already initialized. I also found that a maximum height of about 200 pixels looks nice on the map, so it is a good idea to normalize the data if you have very large or very small values to plot.
Bar map
And that’s all there is to it. The bars are plotted as the content of the marker elements, and so we get a nice bar chart effect on the map just through the magic of CSS and the Kendo UI Map.

Here is the full example:

The following two tabs change content below.