Het maken van de barchart
Ik besloot even een pauze te nemen van het gekloot met de map. Dit kwam goed uit, aangezien ik ook nog wilde proberen om een bar chart te maken die je kunt filtreren op verschillende landen/werelddelen. Ik heb gezocht naar de top 10 meest populaire katten in verschillende landen/werelddelen en die vervolgens in een Excel bestand gezet. Deze heb ik met een converter omgezet naar JSON en dat ziet er momenteel zo uit:
Ik heb een tijdje in Codepen gekut om het voor mekaar te krijgen, maar het wilde niet helemaal lukken. Uiteindelijk heb ik het formaat van mijn data verandert:
(Dit is nog in JavaScript) Hierna wilde het wel lukken, en heb ik deze chart neergezet met behulp van deze pagina:
Het was nogal een gekut om het voor mekaar te krijgen, de bar chart wilde maar niet werken in mijn eigen project. Nou scheen het dus dat mijn code voor het aanmaken van de barchart al uitgevoerd werd voordat mijn JSON bestand ingeladen was. Dus heeft m'n docent mij geholpen door de code in een functie te zetten die pas uitvoerde wanneer de data geladen was:
Vervolgens heb ik de code in de function makeChart gezet en wilde hij wel laden.
Nou ziet dit er natuurlijk niet uit, ik wilde de bars graag vervangen door png plaatjes van katten en tooltips toevoegen zodat je weet wat voor kat er staat. Ik begon met de tooltip, met behulp van de code van mijn docent uit deze CodePen. Dit werkte!
Nu nog het aanpassen van de bars.
Zoals ik eerder al zei, wilde ik graag dat de bars eruit zagen als de katten. Hoe ik dit moest gaan doen, wist ik niet, dus ook dit besloot ik te vragen aan mijn docent. Hij zei dat ik van mijn png plaatjes svg's kon maken. Dit kan gewoon in je HTML, op deze manier:
Op deze manier maak je een patroon aan. Ik moest hiervoor wel alle plaatjes uitsnijden aangezien, wanneer je googled op "PNG" je vaak een fake tegen komt, super vervelend. Hierna moest ik de juiste afmetingen weten. Het duurde me even, maar uiteindelijk heb ik alle plaatjes erin gezet.
Vervolgens kon ik in de code voor de rectangle die ik aanmaak deze lijn toevoegen:
.attr("fill", (d) => url(#${d.image}))
Hiermee voeg ik een attribute toe, in dit geval een fill. De d staat voor de data, en aangezien ik de image heb aangeroepen in mijn JSON bestand kan hij hem met d.image vinden.
{"category": "The World", "place": 10, "breed": "Sphynx", "image": "Sphynx"}
Dit werkte! Alleen had ik het probleem dat de plaatjes van de katten op elkaar gestacked werden. Wanneer ik probeerde te filtreren, kwamen er weer nieuwe plaatjes bovenop, terwijl ik er juist voor wilde zorgen dat de chart verandert. Ik heb hier even naar gekeken samen met mijn docent en hij concludeerde dat dit probleem veroorzaakt werd omdat ik telkens weer opnieuw de attributen voor mijn chart aanmaakte. Ik had alles namelijk in 1 functie staan. Dus hebben we dit verandert. Elementen die niet steeds opnieuw toegevoegd hoefden te worden, zoals de assen en de titel, gingen in een andere functie. Ook hanteerde ik een verouderde versie van d3, waardoor hij ook telkens mijn bars (met custom fills) opnieuw aanmaakte. Hier hebben we ook wat code verandert en het was even spannend maar het werkte!
En wanneer je op één van de knopjes drukt:
Ik moest er nu alleen nog voor zorgen dat de plaatjes in de bars zouden passen.
Ik heb best moeilijk gedaan om ervoor te zorgen dat de foto's van de katten in de bars pasten. Aangezien het bars zijn, passen de foto's niet helemaal of moet ik ze heel klein maken, dat wilde ik liever niet. Dus besloot ik om de foto's zelf, door middel van Photoshop, juist te positioneren in de chart. Na een paar verschillende pogingen was ik tevreden:
