#code playground

Unicode is a jQuery based online code editor & debugger that enables the developers to edit, debug, and preview HTML, CSS, and JavaScript codes on the client side.

Demo

Download

Fusion Tables and Google Code Playground - Easy Steps

We started off by creating a data table with the specifics of the students of MACJ in MCRC in Jamia which includied name, age marks etc.

The table was created in Google docs as a spread sheet by the students and each saved a copy. We imported the table into Google's Fusion Tables and visualised the data in the form of following infographics.

1. Age Groups of Students [Pie Chart / Bar Graph]

In the first visualisation we used the data to calculate and display the percentage of people which belonged to each age group (along with the number corresponding to the percentages), in Fusion Tables.

To do this we aggregated the data by age and counted how many students belonged to each age group. We did this by using 'aggregate' option in fusion tables and selected 'pie' from the various options in the visualise menu. 

We tried different ways of visualising the same data, trying different visualisations. The same data which is visualised in the form of a pie chart above has been done so in the the form of a bar graph below.

While doing this we had a slight problem that became a complication in achieving the result. The first mistake we did was that we had not aggregated the data (clubbed them together.) The second complication that arose was that after we had aggregated the data by age, it hadnt been showing the aggregated data by count. We overcame this issue by selecting 'count' in the drop down list.  

2. Geographic Locations of Students [Map]

We further used the Data to map geographic locations of the students on the map and count how many belong to each state.  

We did this by aggregating the data by state and then showing the aggregated data by count. The data was then displayed as map by selecting intensity map from the visualise menu

The mistake that we were doing in this was that the column in which we had input the data for the state that each student belonged to, had not been selected a location, as a result the software could not recognise the data as a location type. On changing the column type to location the problem got solved.

Another problem that was faced was that the names of the states were not typed properly in some cases (Eg. 'Jammu and Kashmir' was typed as Jammu & Kashmir) which resulted in google not recognising the state. On typing the names correctly, the problem got solved. 

3. Analysing Academic Progress  [Timeline]

We also used Data to compare performance of two students from the group. Initially we tried to use the existing data by applying filters and selecting two students, but on being unable to do so we created a separate table and entered the marks for three years. We then selected timeline from the visualization menu.

The problem we faced was that we had not selected the type of the column in which we entered marks as number, but had kept it as text. the heading of the column was the name of the student and the entries were marks, ignoring the nature of the entries and getting confused by the heading name we kept the type as text before finally realizing it.

4. Age Groups of Students in MACJ [Pie Chart]