Ring in 2014 with ZingChart by checking out our New Year’s Eve interactive infographic!
You can access the infographic at https://www.zingchart.com/newyear
We’re also sharing some details about how it was made.
Using Maps for Data Visualization
The primary visual element of this infographic is the map. Maps are a great choice for charting data about different locations.
You can render maps in your ZingCharts by including the map module. Beyond the world and country maps seen on the infographic, we offer state and county options for certain locations, as well as continents, too. We customized the map colors and outlines to suit the theme of our infographic.
We customized the markers by using images that were semi-transparent .png files. That gives the nice shadow effect on the markers.
We added the city name tooltip and made the markers clickable by placing transparent shapes over the images. To make this functionality work, we relied on the Shape Click API Event.
Once we had set up the infographic so that you could click on the markers, we used the Setdata API Method to change the JSON packet being used to render the chart.
You may have noticed that there was a bit of movement on the infographic when you selected a new city. That’s ZingChart’s animation object at work.
Here’s a peek behind the curtain: the thermometer is actually a cleverly stylized horizontal bar graph. [Hat tip to our awesome assistant Nick for that.] He animated it to expand on entry and ease up on speed as it finished expanding.
The pie chart showing gender demographics for each city is also animated in a similar fashion.
Give ZingChart a Try
Our goal for this infographic is to inspire graphic designers to make a resolution: no more scrolling infographics made in Illustrator! Hopefully this got you inspired to get charting with ZingChart. This particular project is rendered in Canvas, but ZingChart works in HTML5, Flash, and SVG as well.