Skip to content
Data visualisation for the 'NMVW' with D3 library
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
cleaning-data
dist
src
.babelrc
.gitignore
LICENSE
README.md
package-lock.json
package.json

README.md

frontend-data

Image from Gyazo

Het concept

Ik ga een overziecht maken van de data. Ik wil de alle categorieën in een pie-chart laten zien en als je op de pie-chart hovert krijg je dan de naam van de categorie en hoeveel objecten erin zijn die aan een locatie zijn toegewezen. Daarnaast kan de gebruiker op een van de categorieën klikken. Zodat de gebruiker de bar-chart kan updaten. De bar-chart bevat de continenten en aantal objecten per continent van de gekozen categorie. Bovendien kan de gebruiker klikken op een van de continenten zodat de pie-chart aangepast wordt en laat objecten zien van de continenet die de gebruieker erop heeft geklikt. Ik heb deze concept gekozen omdat ik het leuk vindt om Rik te helpen en zijn werk makkelijker maken door een overzicht aan hem te geven van alle objecten die de musea hebben en waar deze objecten vandaan komen zodat hij makkelijker een tentoonstelling kan maken.

De Opdrachtgever is Rick en mijn eindgebruiker is ook Rik.

Features

  • Animation
  • Giving information on hover
  • Connected charts

Functional programming pattren

click here

D3 update pattren

click here

API reference

I used SPARQL in this app to retrieve data from the museum's database. For more information about SPARQL click here

Om mijn concept tot leven te brengen heb ik de volgende data variabelen nodig: alle categorieën van de collectie en het aantal objecten per collectie, per categorieën heb ik de continenten en he aantal objecten daarin. Daardoor moet ik een query schrijven die de categorieën ophaalt met het aantal objecten erin. En omdat er 19 hoofdcategorieën zijn heb ik dan per categorie een query moeten schrijven die de continenten van de categorie kan ophalen.

Hier kun je de queries bekijken die ik geschreven heb om de juiste data binnen te halen.

Installation

These instructions will get you a copy of the project up and running on your local machine.

  • If you dont have node js on your device download it first from here.
  • Download the project.
  • Open the terminal and navigate to the project folder and run npm install to install the node modules.
  • Run in your terminal npm start to open the project in your favorite browser.

Deployment

I used Netlify te deploy my project more information about Netlify click hier

Netlify Status

Credits

Thanks to the museum of volkenkunde for sharing their data and hosting us at the museum. And thanks to my teachers and colleagues for their help and sharing their knowledge. Thanks to Karthik Thota for the tutorial and thanks to David Buezas for his transition function of the pie-chart on update.

Authors

Mohamad Al Ghorani

License

Code is MIT

You can’t perform that action at this time.