Apprentissage d3.js pour la visualisation des données [fermé]

Je veux commencer à apprendre à faire des visualisations de données (en tant que projet parallèle dans mon doctorat) de préférence avec le paquet D3.js. Je n'ai pas java-Expérience mais j'ai une formation en POO car je travaille principalement dans python. En tant que tel, je me demandais quelle est la meilleure façon d'apprendre à travailler avec d3 et quel environnement on pourrait me recommander.

47
demandé sur Adi 2012-08-19 12:58:35

6 réponses

Depuis que je l'ai récemment trouvé, je vous recommande de travailler avec http://phrogz.net/js/d3-playground / aussi pour un bac à sable dans lequel tester et apprendre comment les pièces peuvent travailler ensemble.

21
répondu heckj 2013-02-28 03:47:08

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 . c'est un éditeur de codage interactif conçu pour vous aider à apprendre d3.

37
répondu Gabriel Florit 2015-07-28 22:37:28

Le site Web de Scott Murrays est un bon premier départ http://alignedleft.com/tutorials/d3/.

Une fois cela fait, je pourrais vous recommander de jeter un oeil à ce site 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 localement sur votre propre ordinateur.

Vous pouvez également essayer de prendre une de ces parcelles et voir si vous pouvez la reconstruire.

La raison pourquoi 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 ne savez pas pourquoi il y a une erreur qui sont gênants. En ayant un exemple que vous reconstruisez, vous vous garantissez une copie du code qui fonctionne, vous pourriez être en mesure de vous corriger plus facilement.

8
répondu cantdutchthis 2013-04-27 16:54:38

J'ai écrit quelques tutoriels pour les débutants pour apprendre à la fois Javascript et la visualisation de données :

Http://blog.vida.io/2014/06/23/coding-visualization-tutorial-1-variables/ http://blog.vida.io/2014/06/23/coding-visualization-tutorial-2-functions/

Je trouve les quatre premiers Tutoriels du wiki très utiles pour apprendre D3 fundamentals :

Https://github.com/mbostock/d3/wiki/Tutorials

Introduction, Trois Petits Cercles, penser avec les jointures, Comment fonctionnent les sélections.

Mon équipe court https://vida.io . nous utilisons l'approche template 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. Consultez des exemples pour commencer:

Https://vida.io/explore

3
répondu Phuoc Do 2014-06-24 18:20:57

Voici une liste de ressources que j'utilise pour apprendre d3js. Le site officiel peut être un peu accablant pour quelqu'un de nouveau au développement web, alors voici un peu plus:

Tutoriels

  • site officiel D3js a une liste de bons exemples et tutoriels ici
  • Square a une excellente introduction rapide à D3 quand ils embarquent ici
  • Christophe Viau a une bonne page d'introduction ici
  • "Hello World" de Jérôme Cukier en D3, ce qui explique plus en détail la configuration de votre environnement disponible ici
  • Scott Murray (alignedleft) explique très bien les choses. Il est également l'auteur de "Interactive Data Visualization", que je recommande vivement. 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 .
2
répondu Will 2014-11-18 21:14:14

J'ai traversé beaucoup de d3.tutoriels js et les ont trouvés confus. 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

0
répondu Nav 2015-01-04 14:28:01