Week 2

Nadat het mij gelukt was om de data te filteren kon ik verder met het opschonen van de data met javaScript en met Regex code.

Data opschonen

Samen met kris hebben gekeken naar wat het meest voorkomende tekens die moet worden opgeschoond:

Op te letten bij sizes data opschonen

1. Altijd komma’s naar punten
2. Altijd naar lowercase
3. Circa en ets eruit halen
4. Midden eruit halen
5. Object: eruit halen
6. Algemeen: eruit halen
7. ; vervangen met lege string
8. [n.b.] [ni] etc eruit filteren
9. Alles na l+spatie = lengte < die hebben we nodig
10. Als iets start met een cijfer is dat cijfer de lengte (lxbxh) (regex voor cijfer schrijven)
11. Alle cm eruit halen
12. Alle unicode x vervangen met x en dan x eruit halen?
13. Alles wat diam heeft is cirkel < iets mee doen? 5,9 x 5,9 cm (2,3 x 2,3 in.) lijkt het meest-voorkomende format, kan ook nog zonder inches in haakjes erachter

Dit geïnventariseerd heb de onderstaande code kunnen opstellen:

    let data = getData(url, query).then(results => {
      //console.log("This is in useData: ", results)
    
    let dataArray = results.map(result => result.lengte.value);
    //console.log(dataArray)
    
    let x = dataArray;
    
    // Hieronder staat de verschoonde data van de json file
    let cleaning = 
    x.map(size => size 
                .replace(/x/g, '')
                .replace(/×/g, '')
                .replace(/Dm/g, '')
                .replace(/circa/g, '')
                .replace(/midden/g, '')
                .replace(/object/g, '')
                .replace(/algemeen/g, '')
                .replace(/,/g, '.')
                .replace(/NI/g,'')
                .replace('[]', '')
                .replace('()', '')
                .replace(';', '')
                .replace(/[a-z]/g, '')
                .replace(/[A-Z]/g, '')
                .replace(/['"\u0040\u0026\u2122\u00ae]/g, '')
                .replace(/[\r\n]+/g, ' ')
                .replace(' ', '')
                .slice(0,4)
                .trim()
                .replace( /( )\w(\w)\s/g, '')
                .replace(/^\./, "")
                .replace(/\s\d/g, '')
                
        );

    // Als de waardes in een array onder de '10' zijn haal ze dan weg van de array
    function isBigEnough(value) {
        return value >= 10;
      }
    

Concept 2.0

In de tussen tijd heb ik een gesprek feedback gesprek gehad met de opdrachtgever. Aan de hand van zijn feedback heb ik het concept iets aangepast. De interactieve board kan nu een match vinden bij het invoeren van zijn eigen lengte. Zo wordt er een object gevonden die net zo groot is als de de bezoeker of gebruiker die de lengte heeft ingevoerd.

Onderbouwing

het onderwerp die ik heb gekozen is niet misschien niet zo relevant voor de museum maar dit kan in principe voor andere voorwerpen gebruikt worden zoals: wapens. Daarnaast kan dit een trigger te geven aan jonge bezoekers om toch naar de bepaalde voorwerpen te bekijken van het museum en zo hun nieuwsgierigheid te vergroten. Bovendien is de focus om de bezoekers en vooral kinderen en leuke ervaring/ belevenis te geven zodat ze het bezoeken van een museum niet snel vergeten door de: Match je lengte - concept.

Schone data transformere en een D3 barchart maken

Met de schone data moest ik in een korte tijd achter zien te komen hoe ik de data kan visualiseren in een bar chart. Hiervoor moest ik eerst de schone data die in een string werd terug gegeven omzetten in een array. Dit heb ik gedaan met de onderstaande code:

// Haal de verschoonde data op en maak van de string nummer naar array values.
    let arr = cleaning;
    arr = arr.map(Number);
        // // controleer of de data
        // console.log(arr);

Ook heb ik de data op volgorde gezet zodat het concept in het prototype duidelijker en een bar chart werd die van klein naar groot werd gevisualiseerd. Dit heb ik gedaan met de volgende code:

    let dataset = filtered.sort(d3.ascending);

Dit gedaan kon ik verder werken met de D3. Dit heb ik gedaan door de voorbeeld chart als in inspiratie te gebruiken van freeCodeCamp.org.

Waardoor ik mijn bar chart kon maken met de data die die ik heb opgeschoond.

Dit heb ik kunnen door de onderstaande code:

 let filtered = ownLeng.filter(isBigEnough);
    let dataset = filtered.sort(d3.ascending);
    
    let svgWidth = 6890, svgHeight = 350, barPadding = 5;
    let barWidth = 25;
    
    // De canvas van het staf daigram 
    let svg = d3.select('svg')
        .attr("width", svgWidth)
        .attr("height", svgHeight);
    
    // Haal de svg en maakt de staf diagramen aan
    let barChart = svg.selectAll("rect")
        .data(dataset)
        .enter()
        .append("rect", "p")
        .attr("y", function(d) {
             return svgHeight - d 
        })
        .attr("height", function(d) { 
            return d; 
        })
        .attr("width", barWidth - barPadding)
        .attr("transform", function (d, i) {
            let translate = [barWidth * i, 0]; 
            return "translate("+ translate +")";
        });

Voor in de toekomst voor mijn concept wil ik de volgende code in D3 uitwerken. Deze code is geinspireert door de bovenstaande code:

        // Longshot idea voor afbeeldingen.
        let alleenPics =  d3.select("article")
        .data(dataset)
        .enter()
        .append("img")
        .attr("width",200)
        .attr("height",200)
        .attr("src", (d, i) => ownPic[i])

Last minutes codes and ideas

Samen met klasgenoot hebben we nog gekeken naar wat nog beter kon in onze code, bijvoorbeeld:

Importeren & porteren van javaScript functies

export ...
import { url, query, getData } from './query.js';

Een for loop om de opgeschoonde data neer te zetten in een nieuwe dataset door de onderstaande code:

    // Verschoonde data transformeren en plaatsen in een nieuwe data -> in een nieuwe objecten. (code van Victor).
    const restOfData = results.map(item => {
        let newArr = {};
        newArr.title = item.title.value;
        newArr.pic = item.afb.value;
        newArr.info = item.bes.value;
        return newArr;
       });
       
       
    // Code gemaakt met behulp van Robert & Eyup (overgenomen van Victor). 
    // - Deze code is gebruikt om de verschoonde data.lengte om hierboven in de nieuwe data te plaatsen.
    for(let count=0; count < restOfData.length;count++){
    
    restOfData[count].size = arr[count]
    }
    const restOfDataWithSize = restOfData;
        // // controleren of de loop werkt. 
        // console.log(restOfDataWithSize);
    
    
    // Specifieke nieuwe data values zetten in een variabel in deze case: elment.size & elment.pic
    let ownLeng = restOfData.map(element => {
        return element.size;
    });
    
    let ownPic = restOfData.map(element => {
        return element.pic;
    }); 
        // // controleer of de variablelen
        // console.log(ownLeng);
        // console.log(ownPic);