In this project, I want to find the relationship between art&design, economy and technology. During my undergraduate study, since my major was industrial design, I knew there was a website called Behance.net, which is like a instagram for designers to post their new projects on. Many designers use this website as their online portfolios. Since now I am major in media arts and technology, I am interested in getting an idea of the current situation of art and design. I want to visualize the relationship among culture, economy, technology and design using their API.

Before I working on the data from Behance, I found some lists from Wikipedia. And eventually, I decided to use the List of cities by GDP made by Brookings Institution from this link:https://en.wikipedia.org/wiki/List_of_cities_by_GDP I wanted to set the data of the cities on the actual location of those cities, so I used this website:http://www.latlong.net and copied the value of latitude and longitude into the list.

In addition, I want to add another column which containing the data of the population of the city respectively. My solution is searching those cities on Wikipedia, finding the pages of those cities and copying the value of population into the new column.

My plan was searching in the "creative field" provided by JSON from Bechance. "Creative field" is a JSON object containing strings describing the field the user is working in, like "Graphic Design", "Interaction Design" and "Digital Art". I wanted to find which city is more interested in new media by counting the times that words like "Digital Art","User Interface Design" have shown up. But after I getting a better understanding of their API, I realized that it is not possible to regard this API as a MySQL database like SPL which I used in my former two projects. Because the API of Behance.net is not well developed, if I want to get the data, I have to download thousands of the JSON files and calculate the data manually. Bechance.net has limitations about user accessing their data, I can only download 150 JSON files in one hour using one API key. Therefore, I applied 10 API keys and used them to download JSON files.
Here is one of the processing code I used to download JSON files:

---

  void setup() {

    size(1200, 800);

    JSONObject[] Behance_user = new JSONObject[10000];

    for (int i = 2701; i < 3000; i+=2) {

        int userID = i+12500000; 

        try{

          Behance_user[i]= loadJSONObject("https://api.behance.net/v2/users/"+userID

           +"?client_id=4qjo7tQtTzQtrIEDhAZKlDodWldXyCgR");

          saveJSONObject(Behance_user[i], "data/Behance_user"+userID+".json");

        } catch (NullPointerException e){

          println("Null");

        } 

      }

    }

---

There are also other parameters I want to use, like the number of following, followers and appreciates, to support my main idea and enrich the detail of the project. So after I downloaded about 20 thousand files, I used 10 processing file to calculate those ten portions of data, and save the data as ten csv files.
Here is one of the processing code:

---

Table table;

Table tablec;

void setup() {

  size(1200, 800);

  JSONObject[] Behance_user = new JSONObject[2500];

  table = new Table();

  tablec= loadTable("GDP_city.csv", "header");

  

  int num = 0;

  int following = 0;

  int follower = 0;

  int app = 0;

  int views = 0;

  float new_media = 0;

  table.addColumn("City");

  table.addColumn("num");

  table.addColumn("following");

  table.addColumn("follower");

  table.addColumn("app");

  table.addColumn("views");

  table.addColumn("nA");

  table.addColumn("tA");

  

  int k = 0;

  int [] f = {50750, 101350,102850,301350, 401350, 502700, 702700, 902700, 1202700, 1502700, 1802700, 12102700, 12502700};

  for (int j = 0; j
    for (int i = 0; i < 1000; i+=1) {

      int userID = i+f[j];

      try {

        Behance_user[k]= loadJSONObject("Behance_user"+userID+".json");

        k += 1;

        println(k);

      } 

      catch (NullPointerException e) {

        println("Null");

      }

    }

  }



  for (int j = 0; j < tablec.getRowCount(); j++) {

    num = 0;

    following = 0;

    follower = 0;

    app = 0;

    views = 0;

    int tA = 0;

    int nA = 0;

    for (int i = 0; i < 1761; i++) {

      String CityName = Behance_user[i].getJSONObject("user").getString("city");

      //FOR NEW YORK

      if (j==1) {

        if (CityName.equals("Manhattan")||CityName.equals("The Bronx")||CityName.equals("Brooklyn")||CityName.equals("Queens")||CityName.equals("Staten Island")) {
        CityName = tablec.getString(j, 0);

          print(CityName);

        }        

      }

      if (j==11) {

        if (CityName.equals("Bochum")||CityName.equals("Bottrop")||CityName.equals("Dortmund,")||CityName.equals("Duisburg")||

          CityName.equals("Gelsenkirchen")||CityName.equals("Hagen")||CityName.equals("Hamm")||

          CityName.equals("Mulheim an der Ruhr")||CityName.equals("Oberhausen")||CityName.equals("die Kreise Recklinghausen")||

          CityName.equals("Unna")||CityName.equals("Wesel")||CityName.equals("Ennepe-Ruhr-Kreis")) {

          CityName = tablec.getString(j, 0);

          print(CityName);

        }

      }

      if (CityName.equals(tablec.getString(j, 0))) {

        print(CityName);

        num+=1;

        following += Behance_user[i].getJSONObject("user").getJSONObject("stats").getInt("following");

        follower += Behance_user[i].getJSONObject("user").getJSONObject("stats").getInt("followers");

        app += Behance_user[i].getJSONObject("user").getJSONObject("stats").getInt("appreciations");

        views += Behance_user[i].getJSONObject("user").getJSONObject("stats").getInt("views");

        for (int l = 0; l
          if (Behance_user[i].getJSONObject("user").getJSONArray("fields").getString(l).equals("Automotive Design")||

            Behance_user[i].getJSONObject("user").getJSONArray("fields").getString(l).equals("Computer Animation")||

            Behance_user[i].getJSONObject("user").getJSONArray("fields").getString(l).equals("Digital Art")||

            Behance_user[i].getJSONObject("user").getJSONArray("fields").getString(l).equals("Digital Imaging")||

            Behance_user[i].getJSONObject("user").getJSONArray("fields").getString(l).equals("Digital Photography")||

            Behance_user[i].getJSONObject("user").getJSONArray("fields").getString(l).equals("DJing")||

            Behance_user[i].getJSONObject("user").getJSONArray("fields").getString(l).equals("Game Design")||

            Behance_user[i].getJSONObject("user").getJSONArray("fields").getString(l).equals("Information Architecture")||

            Behance_user[i].getJSONObject("user").getJSONArray("fields").getString(l).equals("Installation Design")||

            Behance_user[i].getJSONObject("user").getJSONArray("fields").getString(l).equals("Interaction Design")||

            Behance_user[i].getJSONObject("user").getJSONArray("fields").getString(l).equals("Multimedia")||

            Behance_user[i].getJSONObject("user").getJSONArray("fields").getString(l).equals("Motion Graphics")||

            Behance_user[i].getJSONObject("user").getJSONArray("fields").getString(l).equals("Programming")||

            Behance_user[i].getJSONObject("user").getJSONArray("fields").getString(l).equals("Software Architecture")||

            Behance_user[i].getJSONObject("user").getJSONArray("fields").getString(l).equals("Television")||

            Behance_user[i].getJSONObject("user").getJSONArray("fields").getString(l).equals("UI/UX")||

            Behance_user[i].getJSONObject("user").getJSONArray("fields").getString(l).equals("Video Arts")||

            Behance_user[i].getJSONObject("user").getJSONArray("fields").getString(l).equals("Video Blogging")||

            Behance_user[i].getJSONObject("user").getJSONArray("fields").getString(l).equals("Video Game Design")||

            Behance_user[i].getJSONObject("user").getJSONArray("fields").getString(l).equals("Video Jockey")||

            Behance_user[i].getJSONObject("user").getJSONArray("fields").getString(l).equals("Virtual World Design")||

            Behance_user[i].getJSONObject("user").getJSONArray("fields").getString(l).equals("Web Design")||

            Behance_user[i].getJSONObject("user").getJSONArray("fields").getString(l).equals("Web Development")

            ) {

            nA++;

          } else {

            tA++;

          }

        }

      }

    } 

    TableRow newRow = table.addRow();

    newRow.setString("City", tablec.getString(j, 0));

    newRow.setInt("num", num);

    newRow.setInt("following", following);

    newRow.setInt("follower", follower);

    newRow.setInt("app", app);

    newRow.setInt("views", views);

    newRow.setFloat("nA", nA);

    newRow.setFloat("tA", tA);

  }

  saveTable(table, "data/city9.csv");

  print("\nDONE!");

}

---

Next, I summed up all ten cvs files together and wrote the data into one cvs file using processing.
Here is the code:

---

Table[] table;

Table tableAll;

Table tablec;



void setup() {

  size(1200, 800);

  tableAll = new Table();

  tablec = loadTable("GDP_city.csv", "header");

  table = new Table[10];

  for (int i = 0; i < 10; i++) {

    table[i]= loadTable("city"+i+".csv", "header");

  }



  int num = 0;

  int following = 0;

  int follower = 0;

  int app = 0;

  int views = 0;

  float new_media = 0;

  int tA = 0;

  int nA = 0;



  tableAll.addColumn("City");

  tableAll.addColumn("num");

  tableAll.addColumn("following");

  tableAll.addColumn("follower");

  tableAll.addColumn("app");

  tableAll.addColumn("views");

  tableAll.addColumn("nA");

  tableAll.addColumn("tA");



  for (int j = 0; j < tablec.getRowCount(); j++) {

    num = 0;

    following = 0;

    follower = 0;

    app = 0;

    views = 0;

    tA = 0;

    nA = 0;

    for (int i = 0; i < 10; i++) {

      num += table[i].getInt(j, 1);

      following += table[i].getInt(j, 2);

      follower += table[i].getInt(j, 3);

      app += table[i].getInt(j, 4);

      views += table[i].getInt(j, 5);

      nA += table[i].getInt(j, 6);

      tA += table[i].getInt(j, 7);

    }

    TableRow newRow = tableAll.addRow();

    newRow.setString("City", tablec.getString(j, 0));

    newRow.setInt("num", num);

    newRow.setInt("following", following);

    newRow.setInt("follower", follower);

    newRow.setInt("app", app);

    newRow.setInt("views", views);

    newRow.setFloat("nA", nA);

    newRow.setFloat("tA", tA);

  }

  saveTable(tableAll, "data/city_user.csv");

  print("\nDONE!");

}

---

The data I downloaded from Behance.net contains many empty items which I cannot use in my visualization. And I couldn't figure out a better solution to get those data since I need to learn data mining, data analysis and skills about Java which I cannot finish in such a short time. As a result, I decided to make a good use of the data I've already got. Also, I think it would be fun to add a function which can search the most recent projects from the cities in the lists and show the cover picture and the fields.
Here is the code I used to search the most recent project posted on Bechance.net by cities:

---

Table table;

int rows;



void setup() {

  size(120, 80);

  JSONObject[] Behance_user = new JSONObject[200];

  table = loadTable("GDP_city.csv", "header");

  rows = table.getRowCount(); 



  for (int i = 0; i < 150; i++) {

    String cityName = table.getString(i,0);

    if(i==1){

     cityName = "Manhattan";

   }

    if(1==11){

     cityName = "Essen";

   }

     try{

       Behance_user[i] = loadJSONObject("https://api.behance.net/v2/projects?city="+cityName+"&client_id=bMWqVFB27LovOd4TXfDvWe3qq0jCyZXn");

       saveJSONObject(Behance_user[i], "data/"+i+".json");

     } catch (NullPointerException e){

       println("Null");

     }

   }

    for (int i = 151; i < 154; i++) {

    String cityName = table.getString(i,0);

    try{

       Behance_user[i] = loadJSONObject("https://api.behance.net/v2/projects?city="+cityName+"&client_id=zfrSSyfv2QIfJ8veuBmzUAK5oX4LVwlB");

      saveJSONObject(Behance_user[i], "data/"+i+".json");

    } catch (NullPointerException e){

      println("Null");

    }

    }

  }

---

And I have already written this part into the visualization code to enable it to use realtime data.

Here is the sketch of the final virsion of my final visualization, though I changed some details.

Before the final version, I wanted to set the data on a globe.





This virsion is too general and lacking of details. Besides, the map which is not containing the most of the data in my project is playing a role now.
Therefore, under the suggestion from Professor Legrady, I changed it into the format I used in the sketch above.
And here are some screen shots about the process.
I found the geographical locations of the cities in my data.



I imported the csv file I created above.

Iused grid system to design the layout.



Side view.



I set the economy related data on the reverse side. Each pyramid represnts a city in the list. The length of the bottom edge of the pyramid represents the population of that city, and the height of the pyramid represents the GDP of that city.
The height of pyramid located on seastern Asia is very high.



But when I turn over the map, I found that the cubes which represent the user quantities of cities dosen't match the economy pyramids. The cubes located on eastern Asia is not as big as the pyramid. That means this website is not popular in this area. This may be caused by the difference in language. Besides, since China is an developing country, I think it should take some more time to see Chinese pay very high attention on design field. The biggest cube located in London. And New York, Los Angeles and London are three center of cities that have large cubes.





The hight of the tower is decided by the number of apperitiates or views or followers or followings of the users from that city. And the brighter color means there are more users in that city are from fields of new media or interaction design. I think that can display which city is surrounded by high technologh and willing to develope it.





I clicked on the cities to check the most recent projects from there. The screen shot displays the projects from Beijing and Sydney. And we can see these projects are related to which kinds of creative fields.
The size of the image represents the times this project has been viewed. And the height of the image represents how many users apprecited this project.





Check all the most recent projects from cities.





I can also change the transparency of the images to see the trends.



Hide the map.



After hiding all the images, the pattern became more clear. The visualization shows that most of the projects are from the fields of graphic design and painting. Many projects are from the fields of the field of new media and interaction design. This may be caused by the source of the data, considering Behance.net is a website. And unlike the user cubes and activeness towers, there are many projects come from northeastern Asia. Since Japan and Korea is developed country and their design industry is mature, my assumption is that northeastern asian are using this website more and the design industry in China is developing.



Some other views of my final project.

All work is developed within Processing
Source Code + Data