Apprentissage de d3.js pour la visualisation de données
Je veux commencer à apprendre à faire des visualisations de données (en tant que projet parallèle dans ma thèse) de préférence avec le D3.js paquet. Je n'ai pas d'expérience Java- mais j'ai une formation en OOP car je travaille principalement dans python. En tant que tel, je me demandais quel était le meilleur façon d'apprendre à travailler avec d3 et quel environnement on pourrait me recommander.
Depuis que je l'ai trouvé récemment, je recommanderais de travailler avec http://phrogz.net/js/d3-playground/ ainsi que pour un bac à sable dans lequel tester et apprendre comment les pièces peuvent fonctionner ensemble.
Les tutoriels de Scott Murray sont un excellent point de départ: http://alignedleft.com/tutorials/d3/
En ce qui concerne les environnements, vous pourriez trouver cela utile: http://tributary.io . Il s'agit d'un éditeur de codage interactif conçu pour vous aider à apprendre le d3.
Le site Web de Scott Murrays est un bon premier début http://alignedleft.com/tutorials/d3/ .
Une fois cela fait, je pourrais vous recommander de jeter un œil à ce site Web http://techslides.com/over-1000-d3-js-examples-and-demos/ , il répertorie 1000 exemples de d3. Vous pouvez généralement copier les données et le code javascript et jouer avec eux localement sur votre propre ordinateur.
Vous pouvez également essayer de prendre l'une de ces parcelles et voir si vous pouvez la reconstruire.
La raison pour laquelle j'ai trouvé cela utile, c'est que vous devez être capable de reconnaître les erreurs que d3 vous lance. Ce sont les moments où vous n'avez aucune idée pourquoi il y a une erreur qui sont gênants. En ayant un exemple que vous reconstruisez, vous vous garantissez une copie de code qui fonctionne de telle sorte que vous pourriez vous corriger plus facilement.
J'ai écrit quelques tutoriels pour les débutants pour apprendre à la fois Javascript et la visualisation des données :
http://blog.vida.io/2014/06/23/coding-visualization-tutorial-1-variables/http://blog.vida.io/2014/06/23/codage-visualisation-tutoriel-2-fonctions /
Je trouve les quatre premiers tutoriels du wiki très utiles pour apprendre les principes de base du D3 :
https://github.com/mbostock/d3/wiki/Tutorials
Introduction, Trois petits cercles, Penser avec les jointures, Fonctionnement des sélections.
Mon équipe court https://vida.io . Nous utilisons une approche de modèle pour d3 et permettons à l'utilisateur de créer rapidement un document de travail, de télécharger de nouvelles données et de lier des données au document via l'éditeur GUI. Découvrez des exemples pour commencer:
Voici une liste de ressources que j'utilise pour apprendre d3js. Le site officiel peut être un peu écrasant pour quelqu'un de nouveau dans le développement Web, alors en voici quelques autres:
Tutoriels
- Le site officiel de D3js a une liste de bons exemples et tutoriels ici
- Square a une excellente introduction rapide à D3 quand ils sont à bord ici
- Christophe Viau a une bonne introduction d'une page ici
- "Hello World" de Jerome Cukier dans D3, qui va plus en détail dans la configuration de votre environnement disponible ici
- Scott Murray (aligné à gauche) explique très bien les choses. Il est également l'auteur de "Interactive Data Visualization", que je recommande fortement. Tutoriel ici
Référence
- Vous allez voir beaucoup de fonctions d3 différentes et vous demander ce qu'elles font. Utilisez l'API officielle ici .
J'ai parcouru de nombreux didacticiels d3.js et les ai trouvés déroutants. Lorsqu'une personne n'est pas encore très familière avec HTML et CSS, elle a besoin d'un peu plus d'explications sur les détails. Ces détails sont mieux présentés dans NRecursions:
Partie 1: http://nrecursions.blogspot.in/2014/11/getting-your-head-around-d3js.html
Partie 2: http://nrecursions.blogspot.in/2014/12/getting-your-head-around-d3js-part2.html