Deze repo is voor het project frontend data. Hierin ga ik een interactieve datavisualisatie maken met de data van de OBA api.
Tijdens dit project wil ik de volgende dingen gaan doen.
- Data ophalen uit de oba api
- Bedenken wat ik wil gaan visualiseren
- Statische visualisatie maken met D3
- Juiste data toevoegen aan deze statische visualisatie
- Interactie toevoegen aan de visualisatie is deels gelukt
Om dit project te installeren ga je naar je terminal en voer je dit uit :
git clone https://github.com/Roene/frontend-data
cd frontend-data
npm install rijkvanzanten/node-oba-api
npm install
Dit project maakt gebruik van de volgende packages :
Mijn eerste idee was om autheurs te gaan gebruiken voor de visualisatie. Wanneer de gebruiker hierop klikt krijgt hij zij de genres te zien van de autheur. Klikt de gebruiker op een genre dan krijgt hij de boeken van de bepaalde autheur.
Na de feedback van Bas Pieren op 12-11-2018 kwam ik tot een nieuw inzicht om dit andersom te gaan doen
Ik wil genres gaan gebruiken voor mijn visualisatie, wanneer de gebruiker hierop klikt moet hij/zij de autheurs binnen dit genre kunnen zien. Vervolgens wil ik dat als de gebruiker op de autheur klikt hij/zij de boeken te zien krijgt van deze autheur binnen een genre.
14-11-2018 Feedback van Laurens, Jesse & Loc
Mijn idee wat hierboven staat was nog niet zo concreet en niet zo interessant. Aangezien er boeken met meerdere genres zijn kwam Laurens met het idee om de 5 genres tegen elkaar uit te zetten, zodat je kunt zien hoe deze genres bij elkaar horen dus bijvoorbeeld thriller ten opzichte van romantiek. Dit zou je kunnen visualiseren door een Chord-diagram te gebruiken. Met dit concept ga ik dan ook door.
De genres die ik wil gaan gebruiken zijn :
- Pyschologisch verhaal
- Thriller
- Detective
- Romantisch verhaal
- Science fiction
Dit zijn de grootste 5 genres van de OBA.
15-11-2018 Voorbeelden Ik ben gaan kijken naar voorbeelden van chord diagrams, vervolgens ben ik gaan kijken of ik deze werkend kreeg. Dit voorbeeld heb ik werkend gekregen.
15-11-2018 Feedback Aan het einde van deze dag hebben we het idee gepitcht aan de klas. Ik had nog geen idee van welke interactie ik ga gebruiken, vanuit de klas kreeg ik tips om bijvoorbeeld extra genres toe te voegen of andere jaren te selecteren ipv alles.
Ik ga als interactie toevoegen dat gebruikers andere jaren kunnen selecteren.
19-11-2018 Omdat ik niet de boeken ophaal met jaar maar alleen het totaal aantal in een bepaald genre ga ik niks met jaar en internactie doen, maar wil ik de gebruiker een mogelijkheid geven om een extra genre toevoegen (verhalenbundel).
21-11-2018
Na een kort gesprek met Laurens heb ik het idee voor de interactie aanpassen. De eerst chort is een totaal overzicht :
Totaal overzicht
Alleen dubbele genres
De buitenkant van de chord, ook wel arc's / labels zijn het totaal aantal boeken binnen dit genre. De ribbons / labels zijn steeds het totaal aantal boeken met dubbele genres.
Deze charts vond ik tot nu toe interessant om voor mijn idee te gebruiken en om de visualisatie interactief te maken.
- Sunburst chart 📊
- Bubble chart
- Chord diagram (na feedback op 14-11-2018)
13-11-2018 Ik ben nog meer charts aan het zoeken voor inspiratie
Tof voorbeeld voor een interactieve sunburst
Dit is ook een tof voorbeeld van een interactieve chord diagram
✏️📐📏
Sunburst en bubble chart
Sunburst uitgewerkt
1e Chord diagram
2e Chord diagram
Door middel van de volgende code haal ik dat op uit de OBA api
client.get('search', {
q: 'format:book',
refine: true,
librarian: true
})- In de q geef ik mee dat ik alleen boeken wil ophalen.
- Ik zet refine op zodat ik deze later mee kan geven.
.then(results => JSON.parse(results))
.then(results => {
// Bron Sterre van Geest
client
.get("refine", {
rctx:
"AWNkYOZmYGcwzDfMKiouLTY1TKooNUrLLkzNLEysKMnIZGZk4MxNzMxjYGYQT8svyk0ssUrKz8@mBBGMzNKZ8UWpycUFqUUFiemprEYGTAwPzjHeKr9VznSvj4lR40gGIwMDe35SIgMDg6J$UX5$iX5OZmFpZoo$UIy9tCiHgTUvhxEA",
count: 100
})
.then(response => JSON.parse(response))
.then(response => {
let metadata = response.aquabrowser.facets.facet;
let genre_object = [];
let genreCounts = metadata.find(item => item.id == "Genre").value;
genreCounts = genreCounts.map(genre => {
return {
count: genre.count,
genre: genre.id
}
})
console.log(genreCounts)
})
})- Met de rctx krijg ik de counts en resultaten van de facets terug, met behulp van de parameter count kan je dit lijstje uitbreiden tot bijvoorbeeld 100.
- Vervolgens map ik over de metadata om de genres te zoeken.
Dit is dan het resultaat wat ik terug krijg :
[ { count: '2003', genre: 'avonturenroman' },
{ count: '119', genre: 'bijbels-verhaal' },
{ count: '944', genre: 'biografie' },
{ count: '7411', genre: 'detective' },
{ count: '2765', genre: 'dieren' },
{ count: '296', genre: 'doktersverhaal' },
{ count: '660', genre: 'erotiek' },
{ count: '6', genre: 'experimentele-roman' },
{ count: '5082', genre: 'familieroman' },
{ count: '228', genre: 'feministisch-verhaal' },
{ count: '111', genre: 'homofiel-thema' },
{ count: '3747', genre: 'humor' },
{ count: '4', genre: 'indisch-milieu' },
{ count: '46', genre: 'islamitisch-milieu' },
{ count: '10', genre: 'joods-milieu' },
{ count: '650', genre: 'kinderleven' },
{ count: '2370', genre: 'oorlog-en-verzet' },
{ count: '403', genre: 'paarden-pony\'s' },
{ count: '1500', genre: 'politieke-roman' },
{ count: '2467', genre: 'protestants-milieu' },
{ count: '11367', genre: 'psychologisch-verhaal' },
{ count: '354', genre: 'racisme' },
{ count: '7090', genre: 'romantisch-verhaal' },
{ count: '1738', genre: 'school' },
{ count: '5179', genre: 'science-fiction' },
{ count: '2670', genre: 'sociaal-politiek-verhaal' },
{ count: '395', genre: 'spionage' },
{ count: '962', genre: 'sport' },
{ count: '3073', genre: 'sprookjes' },
{ count: '997', genre: 'streek-boeren-verhaal' },
{ count: '7207', genre: 'stripverhaal' },
{ count: '10815', genre: 'thriller' },
{ count: '8675', genre: 'verhalenbundel' },
{ count: '289', genre: 'western' },
{ count: '503', genre: 'zeeverhaal' } ]
- Boeken met dubbele genres heb ik uit de oba interface gehaald.
- Wat wil ik visualiseren?
- Wat wil ik dat de gebruiker uit de data visualisatie kan halen zodat hij/zij de data kan gaan ontdekken?
- Welke charts ga ik hiervoor gebruiken?
- Welke charts vind ik zelf interessant / leip om te maken?
- Wat zijn interessante patronen om te gebruiken?
Andere probelemen :
- Hoe haal ik alle boeken op uit een bepaald genre?
- Hoe ga ik de chord diagram maken ? 😨😨😨
- Hoe ga ik interactie toevoegen? 😨😨😨
19-11-2018
- Ik heb nu het totaal aantal boeken per genre en het aantal boeken met dubbele genre.
22-11-2018
- Ik heb interactie kunnen toevoegen alleen werken de ticks nu niet meer 😥😥
- Ik heb een tooltip toegepast om het totaal aantal boeken te bekijken. De eerste keer werkt deze nog niet, zodra je op de button alleen dubbele genres hebt geklikt werkt deze wel. De tooltip op de chords heb ik nog niet werkend gekregen.
Ik ben erachter gekomen hoe ik de data in kan laden :
var data = [
[9962, 1196, 94, 93, 18],
[1196, 9102, 11, 343, 169],
[94, 11, 7143, 138, 32],
[93, 343, 138, 6440, 75],
[18, 169, 32, 75, 4886]
]Dit zijn gegevens van de boeken je kan het zo het makkelijkste uitlezen :
Zoals je hier ziet is de groene cel naar zichzelf, de rest is steeds naar een ander genre. Als je alles bij elkaar optelt kom je bij het totaal van de boeken uit van dit bepaalde genre.
Om de update te updaten heb ik een 2e matrix tabel gemaakt. Er moet een nullen ingezet worden om hem vierkant te houden, hierdoor verwijder je de chords naar zichzelf (zie afbeelding totaal overzicht).
var dataUpdate = [
[0, 1196, 94, 93, 18],
[1196, 0, 11, 343, 169],
[94, 11, 0, 138, 32],
[93, 343, 138, 0, 75],
[18, 169, 32, 75, 0],
]De visualisatie is hier te vinden.
🙏🏻 Special thanks naar deze mensen die mij hebben geholpen tijdens dit project. 🙏🏻
- Bas Pieren Voor het halen van ☕.
- Daniel van de Velde Voor de readme over de OBA api.
- Sterre van Geest Voor de code om totaal aantal boeken per genre op te halen.
De volgende bronnen heb ik gebruikt voor dit project :
- Project is gebasseerd op chord diagram
- Voor het begrijpen van de matrix tabel zie afbeelding Table of Hair Color Data
- Voorbeelden waar ik delen van heb gebruikt, voorbeeld 1 & voorbeeld 2
- Documentatie van de Oba api