kriskuiper / frontend-data

Repo for the Frontend Data course from CMDA ID Tech Track 2019/20

Kris Kuiper, Front-end Developer & UX enthousiast
Good at building awesome and accessible stuff for the web.

👔 LinkedIn | 📫 Email me | 💻 Website

frontend-data's Issues

Add filter sidebar onto Map

Acceptance criteria:

• Follows design
• Has filter options in select

Focus op je wiki/documentatie

Ik zie wel al veel pages in je wiki alleen die zijn vaak nog leeg. Focus er ook nog echt op om een goede wiki te schrijven. De pages die je hebt aangemaakt hebben wel goede onderwerpen

Data die je gebruikt

Je kan nog meer over de data die je gebruikt opschrijven: welke data gebruik je precies? Waarom deze data? Wat doe je met lege waardes?

Filter religion results

Use filtered religion results as new data so dots go biem and get smaller

Dive into mapbox

Can and may I use mapbox to create a map viz?

Plot static datapoints on Mapbox

Acceptance criteria:

• Every country available in data is a point on mapbox using D3

Fix links in wiki

Loop wiki nog ff door op waar welke links geïmplementeerd moeten worden. Start met inhoudsopgave schrijven en daar de juiste links in droppen. Dan ff pushen en vervolgens elke pagina ff doorlopen op kapotte links

Plagiaat & Acknowledgements

In je readme moet je de acknowledgements nog toevoegen

Images

Het zou leuk zijn als je meer afbeeldingen plaatst, van hoe je site er nu uitziet en in je proces (zoals schetsen en screenshots tussendoor)

Come up with a concept

Acceptance criteria:

• Concept comes from multiple ideas
• Concept has multiple iterations
• Concept is sketched out multiple times
• Focus is on one type of object or something from the dataset
• Concept needs interaction to be cool

Bronnenlijst

In je wiki moet een bronnenlijst komen te staan van alle bronnen die je hebt gebruikt. Het moet duidelijk zijn (liefst met plaatjes) wat je van voorbeelden hebt gebruikt en wat je zelf hebt geschreven.

Query and clean right data

Acceptance criteria:

• SPARQL query is edited to query right data
• All queried data is used in concept
• Queried data is cleaned through formatters etc.
• Data is transformed using D3.js

Dots transition in nicely, don't do the same when transitioning out

When pop in they transition nicely from r 0 to r x, when they fade out they just do 'poof' gone.

Refactor dots rendering

Have two enter selections a.t.m.

Use the nice update pattern fix and transition only the radius of a circle so no magic happens when dragging and zooming the map

Legenda in je visualisatie

Duidelijke titel in je visualisatie

Een goede titel kan wel fijn zijn om direct (ook zonder de filter te gebruiken) er achter te komen wat de gebruiker hier kan verwachten

Find a good diameter for circles

Right now Suriname is not being displayed because the r is very very very small... 😭

Doing this because of

const diameter = d.results.length

Show tooltip on hover

Country name: totalResultsAmount

Filter dots based on select

Update dots

Revisit filter

Should I use object types in filter? Like 'wapens' or something

Render static barchart

First render a static barchart into the sidebar

Schrijven over D3

Je kunt ook (dacht dat het verplicht was, maar weet dit niet zeker) in je wiki nog een aparte pagina maken over D3. Wat je ervan vind en hoe je ermee gewerkt hebt, inclusief stukjes code.

Update bar chart

Initial bar chart gets rendered, now have to update it.

Find a way to use the data folder both in dev and production

Right now the path to the data folder is not defined when in public...

Fly to specific country and show data in sidebar

Use mapbox' flyTo to fly to specific coords when clicking on a country

Doelgroep?

Onder je concept in je readme kan je nog even kort vertellen wat je doelgroep is

Map object types to termmaster

Do the Better Train List trick ✨

Concept omschrijving mist nog

Responsive (mobile first) design

Keep helper text

Helper text should indicate that a user can hover its mouse over the bars

Explain step by step what I did (with uitleg)

in je readme nog even een before en after screenshot laten zien van je voorbeeld en je eindresultaat zodat anderen kunnen zien wat je zelf hebt gemaakt

Visualize project

Acceptance criteria:

• Adheres to material design principles
• Has some layout sketches
• Has color palette?

Update pattern

Vergeet niet het update pattern op te schrijven in je wiki (met enter, update & exit)

Set up Mapbox

Acceptance criteria:

• Map is an absolute positioned section using the whole page

Alter size of dots based on amount of items in country

Acceptance criteria:

• Dots scale
• Dots have cool hover state (scale, border size gets thicker)

Get precise lat and long from geo-countries.csv

Finalize bar chart styling

Add cool anims etc on update and initial render

x-as in je visualisatie in de viewport

Ik wist niet dat er een x-as was naast je kaart tot jij het zei. Dus misschien wel goed om deze te tonen binnen de viewport