Challenge Javascript - Datavisualisation

Link to the site

Presentation

Challenge started on November 12, turned in November 19th. The challenge was made during a Web Dev formation given by BeCode.

Realised based on the given instructions.

Datavisualisation

The project consists in 3 charts :

• A bar chart, updating every second, based on an external API
• A bar chart, created based on data provided in the HTML file, about crime stats.
• A pie chart, created based on data provided in the HTML file, about prison population.

Contributors

• Denis Bourgeois

Languages

Realised using Javascript.

Library

D3.js

Progression

Still WIP, to improve animations and data presentation.

Mentions

• BeCode for the challenge.
• Special thanks to Térence Hecq.
• La promotion CRL-Woods-2.15 pour l'aide et le support.

Criteria (french version)

Évaluation

Le mode d'évaluation choisi est une auto-évaluation sur base des indicateurs suivants :

(Ce qui suit est un aperçu, utilise le formulaire fourni pour t'auto-évaluer. Un coach réalisera la même évaluation.)

1. Manipulation du DOM :

• J'ai pu trouver le bon sélecteur pour y arriver.
• J'ai pu injecter le graphique au bon endroit de la page via javascript.
• J'ai pu récupérer les données html dans un format adapté à mon code javascript.

2. Requête ajax :

• J'ai pu recevoir la réponse du serveur distant en json.
• ensuite, j'ai pu construire une fonction de callback traitant ces données.

3. Utilisation de librairies tierces :

• J'ai pu intégrer la librairie tierce dans mon application.
• J'ai utilisé la documentation fournie par la librairie.
• J'ai pu générer les 2 graphiques "inline data".
• J'ai pu générer le graphique "remote data".

4. Problem-solving :

• Rigueur syntaxique : j'ai pu traduire les processus que j'ai imaginé en syntaxe javascript.
• Pensée logique : à force d'itérations et d' essais & erreurs, j'ai pu trouver un chemin logique qui fonctionne pour répondre aux problèmes soulevés par la demande du client. Spécifiquement :
• J'ai pu générer les 2 graphiques "inline data".
• J'ai pu générer le graphique "remote data".
• J'ai pu construire une fonction de callback traitant les données remote (reçues via ajax).
• J'ai pu faire en sorte que le graphique realtime se rafraichisse en temps réel.
• J'ai pu afficher les données détaillées au survol de la souris.

5. Débogage :

• J'utilise la console pour comprendre ce qui se passe et confronter ce que je tente de programmer à ce que la machine exécute.

6. Séparation des préoccupations :

• Si je désactive le javascript, l'expérience-utilisateur est satisfaisante, l'utilisateur a accès aux données et au contenu
• Si j'active le javascript, les tableaux sont agrémentés d'un graphique interactif.