I used the following code to visualize the Zurich bus stop locations information in the stop.json file (geojson format) as shared via:
https://github.com/swissnexSF/Urban-Data-Challenge/tree/master/public-transportation/zurich/geo/geojson
However, I found the proportion of the geo positions as visualized is skewed as compared to that visualized by Raymon Sutedjo & Sandra Lee ( http://ray-mon.com/urbandatachallenge/zurich.html).
May I ask how to correctly visualize the latitude and longitude data so that the map is shown with proper overall proportion?
Thanks!
my viz:
Raymon Sutedjo & Sandra Lee's viz ( http://ray-mon.com/urbandatachallenge/zurich.html):
my code:
https://github.com/swissnexSF/Urban-Data-Challenge/tree/master/public-transportation/zurich/geo/geojson
However, I found the proportion of the geo positions as visualized is skewed as compared to that visualized by Raymon Sutedjo & Sandra Lee ( http://ray-mon.com/urbandatachallenge/zurich.html).
May I ask how to correctly visualize the latitude and longitude data so that the map is shown with proper overall proportion?
Thanks!
my viz:
Raymon Sutedjo & Sandra Lee's viz ( http://ray-mon.com/urbandatachallenge/zurich.html):
my code:
- // coded by Ji Zhang (hope.zh@gmail.com)
- // Sep-2013
- JSONObject stopsJSON;
- JSONArray stops;
- Stop[] stations;
- float latitude_min = 90;
- float latitude_max = 0;
- float longitude_min = 180;
- float longitude_max = 0;
- float canvas_width;
- float canvas_height;
- ///////////////////////////////////////////////////////////////////////////
- void setup() {
- size(1000, 1000);
- stopsJSON = loadJSONObject("stops.json");
- stops = stopsJSON.getJSONArray("features");
- //println(stops.size());
- stations = new Stop[stops.size()];
- for (int i = 0; i < stops.size(); i++) {
- JSONObject stop_i = stops.getJSONObject(i);
- JSONObject stop_i_properties = stop_i.getJSONObject("properties");
- int stopId = stop_i_properties.getInt("stopId");
- int stopNumber = stop_i_properties.getInt("stopNumber");
- String stopName = stop_i_properties.getString("stopName");
- String stopName_short = stop_i_properties.getString("stopNameShort");
- JSONObject stop_i_geometry = stop_i.getJSONObject("geometry");
- double stop_longitude = stop_i_geometry.getJSONArray("coordinates").getDouble(0);
- double stop_latitude = stop_i_geometry.getJSONArray("coordinates").getDouble(1);
- if ( (float)stop_longitude < longitude_min ) {
- longitude_min = (float)stop_longitude ;
- } else if ( (float)stop_longitude > longitude_max ) {
- longitude_max = (float)stop_longitude ;
- }
- if ( (float)stop_latitude < latitude_min ) {
- latitude_min = (float)stop_latitude ;
- } else if ( (float)stop_latitude > latitude_max ) {
- latitude_max = (float)stop_latitude ;
- }
- println("_________________________");
- println("stop sequence: " + i);
- println("stopId: " + stopId);
- println("stopNumber: " + stopNumber);
- println("stopName: " + stopName);
- println("stopName_short: " + stopName_short);
- println("stop_longitude: " + stop_longitude);
- println("stop_latitude: " + stop_latitude);
- stations[i] = new Stop();
- stations[i].stopId = stopId;
- stations[i].stopNumber = stopNumber;
- stations[i].stopName = stopName;
- stations[i].stopName_short = stopName_short;
- stations[i].stop_longitude = stop_longitude;
- stations[i].stop_latitude = stop_latitude;
- }
- println("longitude_min: " + longitude_min);
- println("longitude_max: " + longitude_max);
- println("latitude_min: " + latitude_min);
- println("latitude_max: " + latitude_max);
- float canvas_proportion = ((float)latitude_max - (float)latitude_min) / ((float)longitude_max - (float)longitude_min);
- println("canvas_proportion: " + canvas_proportion);
- if ( (height/width) >= canvas_proportion ) {
- canvas_width = width;
- canvas_height = canvas_proportion * width;
- } else if ( (height/width) < canvas_proportion ) {
- canvas_width = height / canvas_proportion;
- canvas_height = height;
- }
- }
- ///////////////////////////////////////////////////////////////////////////
- void draw() {
- background(0);
- fill(30);
- noStroke();
- rect( (width - (width-canvas_width)/2 - canvas_width),
- (height - (height - canvas_height)/2 - canvas_height),
- canvas_width, canvas_height);
- strokeWeight(2);
- stroke(255);
- for (Stop stop : stations) {
- stop.drawStop();
- }
- }
- class Stop {
- int stopId;
- int stopNumber;
- String stopName;
- String stopName_short;
- double stop_longitude;
- double stop_latitude;
- void Stop () {}
- void drawStop () {
- float ptX = map((float)stop_longitude, longitude_min,longitude_max,
- width - (width-canvas_width)/2 - canvas_width,
- width - (width-canvas_width)/2);
- float ptY = map((float)stop_latitude, latitude_max,latitude_min,
- height - (height - canvas_height)/2 - canvas_height,
- height - (height - canvas_height)/2);
- point(ptX, ptY);
- }
- }
1