Urban evolution

How rapid is Shanghai evolving? What are its effects from a multi-scalar and time perspective? What is needed for conscious decision making? Who should be deciding? Is this the city that its inhabitants want?

Gociti!

Gociti is a platform developed to enable inclusive data-driven decision-making for Shanghai. The concept behind is based on a circular system that connects urban data, the municipality, private companies and citizens.

The structure of the system

Gocity aims to connect urban stakeholders towards active, conscious and relevant decision-making. Understanding the inherent logics of each actor, Gociti sets the framework for:

  • private companies to launch, visualize and deploy their products/projects
  • the municipality to fund products/projects that they consider appropiate to tackle specific issues of the city
  • citizens to engage projects or use products they believe in
  • other companies to sponsor the platform

The structure of the platform

The website has mainly 3 sections: monitoring, city campaigns and my account.

Monitoring contains a set of different dashboards on static and dynamic data about mobility, built environment, environmental cleanliness, ressource efficiency and daily needs indicators. They showcase maps with filtering options and interactive graphs.

City campaigns is a real-time self-updating newsfeed on available city campaigns developed by both private and public stakeholders. It contains products that help tackle some of the indicators checked in the monitoring section. By joining campaigns, citizens have access to their products (i.e. using Ciclogreen would enable citizens to use these bikes) and agree to be tracked using them so that their performance has a translation into a point-reward system.

My account is a screen displaying citizen’s performance (points saved, campaigns engaged, rewards options, etc). Taking the logics of social networking into account, it also connects you with your friends and offers the possibility to compare your performance with theirs.

2 more sections include “add campaign”, to upload campaigns by using a form where you submit description texts and feature image and “about us”, explaining the goals and structure of the project.

Technical aspects

The app development is described as follows according to each section of the website:

  • General html and css: mostly using Bootstrap, an open-source responsive front-end component library
  • Static data: input datasets in form of json, parsed with PapaParse library. The maps displayed contain Leaflet library (map background and marker styling options) and are filtered with jquery functions. Plotly, a free open source interactive javascript graphing library, has been very useful when it comes to interactive graphs (barcharts, histogramms, etc.)
  • Dynamic data: real-time reading of smart-citizen kids through its api. Values are stored in firebase database and retrieved with javascript.
  • Add campaign: a form for uploading campaigns connected to firebase database (for string storing) and storage (for file storing) sections. Through a common “userId”, both images and text can be retrieved in the “City Campaigns” section
  • City Campaigns: real-time self-updating newsface retrieving data from firebase. To access to a specific campaign we use the cookies to call the clicked campaign

GoCiti! app is a project of IAAC, Institute for Advanced Architecture of Catalonia, developed at MaCT (Master in City & Technology),
2017-18 by:
Students: Irene Rodríguez Vara, Najla Aldah, Alba Alsina Maqueda
Faculty: Andre Resende