As we work for two days on this challenge, we've decided to determine, thanks to an open data set, the five most popular family names for the female and male population in 26 cities, in 26 cantons, in Switzerland.

We want to visualize this data on an interactive map which shows what family names are predominantly represented throughout the country.

We want to visualize this data on an interactive map which shows what family names are predominantly represented throughout the country. An example is to find here: https://codepen.io/aomyers/pen/LWOwpR

We have not looked at the data set closely enough . it is always only the top 5 surnames per postal code. Sorted by woman and man. So we couldn't just say: These are the top 5 surnames per canton, because we would falsify the evaluation. So we decided to simply choose one postcode per canton and selected the data in Google docs and then converted it into a Jason. The goal is to create a One pager where you can see one city per canton, which is divided into top 5 men's last names and top 5 women's last names.

The dataset we used: https://opendata.swiss/de/dataset/nachnamen-pro-plz

First steps: 1. Some big cities in Switzerland are not mentioned. That means that the swiss post didn’t collect names there. 1. Some rangs are doubled because of the same number of names on the ranglist. Example: in Kloten are 35 surenames Mueller and 35 surenames Jäger -> so they show both as rang 5. For our project we only can use one name. Jäger and not Mueller for example.

1. We made our own list. We had to find out wich is the next big city in the canton. Check if there are double rangs and delete it if needed.

2. After that, we converted the excel list to a json object. That json-list is now input of our javascript-file.

Next steps and problems: 4. We recognized, that we need should use a databank. This is unfortunately way out of our programm skillz and would take to much time. 5. RETHINK: How can we still manage that the lists appears? 6. SOLUTION, (thank you brain), -> its possible to show the list female and male on each side, with flexboxes. For that we need to make excel lists for each canton. We’ve been working with atom and the integrated teleport package in order to be able to work together.. However, the team member who’s the owner of the files must always be online and always active, or else the invitees cannot access the files.

To be more precise: First of all, typed in a connection from the list in HTML to the pictures. They're changinge everytime they got hovered/unhovered. In a next step, we had to implement the .json, what wasn't easy because we didn't use a database so far in the reason of the time range. So we had to create a function, where the locations have to pass through our .json file. forEach() we used also to gather the gender and similar data out of JSON. Right after, we had to create a function for the table title. We had to create a function to read and parse the JSON:

function loadJSON(callback) {
  var xobj = new XMLHttpRequest();
  xobj.overrideMimeType("application/json");
  xobj.open('GET', 'convertcsv.json', true);
  xobj.onreadystatechange = function() {
    console.log(xobj.readyState);
    if (xobj.readyState == 4 && xobj.status == "200") {
      // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
      callback(xobj.responseText);
    }
  };
  xobj.send(null);
}

This was the most important step to set it up without a database.

LEARNINGS: We got the hint, that it's also possible to work on Github together and we'll definitely going to do that by the next project. The programming was kept very easy, as we are only Newbies. We made a map with pictures, every canton was one. For the hover we made an overlayer to color the canton red. We connected it with a class to the right name button.