Video Tutorial: Create Dynamic Pie Chart Map

Mostly, we are used to present/analysis data using heat map or choropleth map, but there are other ways to visualize data (e.g. bubble chart, dynamic bar chart, pie chart map). Here we have prepared a new video about creating pie chart to analysis data and visualize the result on the map. In the video, you will know how to:

Related article:
Pie Chart Showcases Obesity in the United States
Show Case: Pie Chart about Browser Usage

US Map: The Racial Dot Map


A Racial Dot Map was developed by Weldon Cooper Center for Public Service from University of Virginia that showcases delineation between racial groups.According to the map, Milwaukee’s place is the most segregated metropolitan are in the United States. The new ranking comes from a recent articles in Business Insider that based on the work of professors John Logan and Brian Stults. You can now check out the map by clicking following image.

In the Racial Dot Map, one dot represents one person that dot colors are indicated in the map legend. Users can enable the map labels for states by clicking the “Add Map Labels” button, and disable the color dots overlay by clicking the “Remove Color-Coding” button on the left hand side of the map.


Map Reviews: 4/5 Stars

Simple, informative, and user-friendly data map that users can determine whether looking result of population distribution by racial or not, and select/deselect the labels regarding to their preferences. Popup boxes are not necessary in this kind of maps as too much content will make the map complex and confuse the map users.

Apart from pinning dots on the map, there are other ways for presenting population distribution in this issue that pie chart can be applied on the map by region. Sample maps can be seen by clicking the following map image:


Reasons to Create Maps in HTML5

Many people are asking, “Why we have to create maps in HTML5 rather than in flash?”, and here we are going to list out the reasons and advantages about HTML5 maps.

Many of our users and readers are familiar with flash and have created thousands editable flash maps. However, the trend is now moving to HTML5 as we are more likely to spend time using mobile devices, tablets, and iPad during our commuting time than sitting in front of a desktop, and we all know that, “Flash does not support cross-platform”. Won’t you feel badly when you cannot read the website content that is in flash using your mobile or tablets? Yes, I will, and I will give up accessing those websites. For not loosing your potential visitors, let’s create website content using HTML5, which supports cross-platform (include iPhone, iPad, Android devices, and others).

Since the maps support HTML, you can now create/edit the maps with greater variations, which can be mostly seen in the popup information box. By adding various HTML code, you can insert multi-media (e.g. images, videos, tables, external links) into the popup box. Furthermore, you can customized the font style, colors, and size of the text according to your preferences, and the style can be different from line to line.

Data can be imported to create maps (e.g. heat map, bubble chart, pie chart) for visualizing your data and presentation use. It is not complicated to create the data file, and simple file can be founded in the software. Heat maps and bubble charts are very common in reports (e.g. Internet Population in Each CountryGun Violence in America, China Global Investment) that you can quickly create yours using HTML5 editor.

For non-programmers, it may be quite complicated for uploading map files to hosting server, and maybe scared by setting up FTP. Now, you can instantly publish, upload, and share the interactive maps using HTML5 Map Builder even you do not own a hosting server account.

Check out the video below and subscribe our Youtube channel for catching the updated video tutorials:

Pie Chart: Obesity in the United States

Yesterday we have just shared a heat map about Americans health index in the past 30 years, and here we find a detailed pie chart about obesity situation in various states.

Size of each pie chart indicates total population size rather than obesity situation, and the detailed obesity status can refer to the percentage break down. Mouseover the pie charts, and you can get detailed population information. This map is interactive enough that you can see the changes from 1995 to 2011 by clicking the Play button in the bottom.

Check the above map and see if you are agree with the study.

Video Tutorial: Create an Interactive HTML5 Pie Chart Map

Pie chart is used for demonstrating percentage of individual contribution in a whole set while each category is divided into sectors. Pie chart is widely used in the business world and the mass media that pie charts can be replaced in most cases by other plots such as the bar chart. Now, you can put the pie chart in the HTML5 maps for presentation different statistic results according to regions.

Here is a video tutorial about creating Bubble Chart in a few steps: