Challenge Project

Swiss Name Chart

We connect names out of a data set and integrate the data into a map of Switzerland or some other visual form of a map.

⛶  Fullscreen ↓  Download

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:

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:

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");'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.

Event finished


06.06.2020 13:51 ~ tako_yakii-crypto

Joined the team

06.06.2020 13:11 ~ tako_yakii-crypto


06.06.2020 13:07 ~ Geruscha Lau FHGR

Joined the team

06.06.2020 08:05 ~ SimoneB.


06.06.2020 07:57 ~ rayyan waldburger

Joined the team

06.06.2020 07:55 ~ rayyan waldburger


06.06.2020 06:52 ~ GLAMoperator

Joined the team

05.06.2020 15:48 ~ Geruscha Lau FHGR

First post View challenge

05.06.2020 15:48 ~ Geruscha Lau FHGR


Event started

Contributed 4 years ago by Geruscha Lau FHGR for GLAMhack 2020

Connect to our community on: | twitter | facebook

All attendees, sponsors, partners, volunteers and staff at our hackathon are required to agree with the Hack Code of Conduct. Organisers will enforce this code throughout the event. We expect cooperation from all participants to ensure a safe environment for everybody. For more details on how the event is run, see the Guidelines on our wiki.

Creative Commons LicenceThe contents of this website, unless otherwise stated, are licensed under a Creative Commons Attribution 4.0 International License.