Exercise 6 (API)

I used a crime data api in my web page

the original source is here https://market.mashape.com/jgentes/crime-data

When you click on the map, the’s an alert popping out, displaying the crime data of the location.

However, it only works for several cities in US.

Exercise 6: API _by Ruixuan Pu (Sunny)

This time we were asked to request our own API key and make a website for the visualized data that we get from the API. So I use the data from Amap’s API and make a reversed geocoding map. If I change the longitude and latitude, the map will tell me the actual text address of the location.

Here is the link to the website that I create for the API:

There are two limits on this website. First, the location that we are allowed to set is limited in China. Second, so far, if I want to change location, I must go to my source code and change the longitude and latitude there, instead of clicking the map and getting the new location directly. I tried to fix the problem, however, even though I get the location data by clicking the map, and I defined my data step by step, the Chrome tells me that some value of my data is undefined:



I think it is because I call the data in a wrong way, but I just couldn’t figure it out. So that it results in I fail to call location data directly by clicking.

Project 3: Movies App

This project was the hardest of all of them to visualize. I had a hard time connecting the the MAMP server on my computer and seeing i through so in the end, I decided to use an old method I had learnt a while ago to create a web app.

I wanted a Movies App that calls on the Rotten Tomatoes json API to show the movies currently showing in theatres in the US. And I’d make it with Flask for python.

The app is meant to call a list of the 5 latest movies, get their synopsis, runtime, cast names, the Critics Score and the PG Rating, and display all this information with a thumbnail image of the poster.

Here is the link to the documents of the app. My hugest problem is that it sometimes shows a server error even when hosted on my localhost.

Weather Data: Visualisation

This weather data is interesting.

You may find the page here.

Basically it is a page that retrieves weather data of Shanghai and prints it on the page. The colour of the text varies with the current temperature in the way that if the temperature is below 10, then it is blue and if the the temperature is over 30, then it is red. Otherwise it stays black.

The background, however, does not suggest anything concerning air quality. It is just a photo of the Bund 🙂

Project 2: Mobile Game

This project required making a javascript mainly-mobile game. At first I wanted to make a snake game like that old game that was on Nokia mobile phones but it proved too hard to make to work on a touchscreen. I also thought to use CraftyJS like most of my classmates but in the end, when I decided to make a bubble-popping game. It was less complicated to use Crafty. SO i just used mostly javascript.

In the game, you have white bubbles of random sizes popping up on the screen and floating up to the top. The task is to tap on these bubbles before they exit the screen. If any escapes, they are counted in your escaped bubbles’ counter. Also when you tap the screen and manage to catch a bubble, there is a small animation as the bubble bursts into pieces.

The hardest part about coding the game was scaling it to fit the iPhone screen and getting rid of the scroll bars on the screen. The kept appearing each time I tried to get rid of them.

You can play the game at:

However it’s a touch screen only game. I think I can further modify it to recognise mouse clicks as well.

IMG_1449 IMG_1451