Week 1

Briefing

Rick Herder, een tentoonstellingmaker van het Tropen Museum, gaf ons de opdracht om een infographic te maken van de hele collectie die verzameld is door NMVW. Er werden verschillende voorbeelden getoond om een beeld te schetsen van hoe de infographic moet worden uitgewerkt. Het is belangrijk dat in deze infographic het DNA van het tropenmuseum wordt uitgebeeld, door bijvoorbeeld:

Top 10 van:

• Meest voorkomende materialen
• Categorieën
• Trefwoorden
• Voorwerpen / Vormen

Of: een infographic waarmee je de voorwerpen van klein naar groot kan zien. De oorspronkelijke idee is om deze infographic langs de muur te plaatsen zodat men gelijk de indruk kan hebben wat er allemaal is verzameld en de hele collectie voorgesteld wordt.

Concept

Toen er een voorbeeld werd weergegeven dat je een infographic kon maken van klein naar groot, kreeg ik gelijk een idee om dit als uitgangspunt te nemen en dit uit te werken. Het idee is om alle voorwerpen/vormen op een groot rechthoekig boord te projecteren. De voorwerpen die ik heb gekozen zijn geluidsmiddelen; een bezoeker geeft zijn lengte aan op een interactief bord en krijgt daarna alle voorwerpen te zien die dezelfde lengte hebben. Bijvoorbeeld; een kind kan dezelfde lengte hebben als een gitaar. Na het invoeren krijgt de bezoeker het matchende voorwerp te zien, en kan vervolgens dmv zijwaarts scrollen alle andere voorwerpen zien die dan groter/kleiner dan dat zijn, op een volgorde van klein naar groot. Door op een item te tappen kan de gebruiker meer informatie krijgen over het voorwerp. (Het proces van het concept kan je in de logboek bekijken.)

Sub-concepten

Tot nu toe wil ik mij hierop focussen en als longshot ideeën wil ik kijken of je nog op landen kan filteren.

Feedback -> Concept iteratie

Na dat ik het concept heb gepresenteerd aan Rick Herder heb ik de volgende feedback gekregen:

• Het interactieve bord moet een relatie hebben met de bezoeker. Nu weet je als bezoeker niet zo goed wat je aan het interactieve board hebt.
• Misschien kan ik iets doen met een camera die een bepaalde vorm detecteert en dat daarbij een bijpassende afbeelding, standbeeld wordt weergegeven.
• Het zou mooi zijn dat het niet alleen voor een specifiek onderwerp gaat maar dat je voor verschillende categorieën kan gebruiken.

Data gebruik

De data dat ik wil gaan gebruiken binnen geluidsmiddelen zijn:

• Lengte
• Naam
• Afbeeldingen
• Datum
• informatie
• Oorsprong -> Plaats

Query

PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
PREFIX dc: <http://purl.org/dc/elements/1.1/>
PREFIX dct: <http://purl.org/dc/terms/>
PREFIX skos: <http://www.w3.org/2004/02/skos/core#>
PREFIX edm: <http://www.europeana.eu/schemas/edm/>
PREFIX foaf: <http://xmlns.com/foaf/0.1/>

SELECT ?cho ?title ?typeLabel ?lengte ?datum ?afb ?bes WHERE {

  <https://hdl.handle.net/20.500.11840/termmaster1248> skos:narrower* ?type .
  ?type skos:prefLabel ?typeLabel .

  ?cho edm:object ?type .
  ?cho dc:title ?title .
  ?cho dct:extent ?lengte.
  ?cho dct:created ?datum.
  ?cho edm:isShownBy ?afb.
  ?cho dc:description ?bes.
  FILTER langMatches(lang(?title), "ned")
} LIMIT 10

Met deze dat ben ik verder bezig geweest om het eerst alles data in de console weer te geven. Helaas was het te moeilijk voor mij dus daarom heb ik de voorbeeld code van Laurens.:

// Databases
export const url ="https://api.data.netwerkdigitaalerfgoed.nl/datasets/ivo/NMVW/services/NMVW-15/sparql"

//Note that the query is wrapped in es6 template strings to allow for easy copy pasting
export const query = `
#+ summary: Get photos through edm:object

PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
PREFIX dc: <http://purl.org/dc/elements/1.1/>
PREFIX dct: <http://purl.org/dc/terms/>
PREFIX skos: <http://www.w3.org/2004/02/skos/core#>
PREFIX edm: <http://www.europeana.eu/schemas/edm/>
PREFIX foaf: <http://xmlns.com/foaf/0.1/>

SELECT ?cho ?title ?typeLabel ?lengte ?datum ?afb ?bes WHERE {

  <https://hdl.handle.net/20.500.11840/termmaster1248> skos:narrower* ?type .
  ?type skos:prefLabel ?typeLabel .

  ?cho edm:object ?type .
  ?cho dc:title ?title .
  ?cho dct:extent ?lengte.
  ?cho dct:created ?datum.
  ?cho edm:isShownBy ?afb.
  ?cho dc:description ?bes.
  FILTER langMatches(lang(?title), "ned")
} LIMIT 10000

`
// Daan voor vragen voor promises 
// Wiebe voor klein naar groot


/*
//
  - Van uit een functie
  - Van uit een promises.
//

*/
  //Test if the endpoint is up and print result to page 
  // (you can improve this script by making the next part of this function wait for a succesful result)

getData(url, query)

export async function getData(url, query) {
    
    let fetched = await fetch(url+ "?query=" + encodeURIComponent(query) + "&format=json")
    .then(res => res.json())
    .then(json => {
      const dataKi =  json.results.bindings;
      let dataArrayKi = dataKi.map(dataKi => dataKi);
      return dataArrayKi;
    });
   
return fetched;
    
};

Met die code lukte mij om de ruwe data weer te geven, maar ik had nog niet de kennis om de data op te halen van de Sparql query. Om mijn project verder uit te werken en om aan de slag te gaan ben ik samen met Kris tot het idee gekomen om de sparql data te downloaden in een json file. (De code hierboven doet het ook maar ik wist niet goed wat ik ermee moest doen. )

Data filteren

Nadat ik de data handmatig van de json file naar een javaScript hebt gekopieerd, ben ik eerst gestart met alleen de lengtes op te halen van de data die ik heb gedownload.

Na veel uitproberen is het mij gelukt om deze functie te maken:

    let dataArray = results.map(result => result.lengte.value);
    //console.log(dataArray)

Dit was mij gelukt door naar de video tutorial te kijken van The code train :

Voorbeeld

function multiplicator(factor){
    return x => return x * factor
}

De uitgebreide uitleg van deze bron staat in de pagina Extra efforts