introduction
Si hay 2 tendencias fundamentales que impulsan el periodismo digital, serían estas:
- Se genera y captura una mayor cantidad de datos sobre sus clientes.
- Aumento de la penetración web (o móvil) entre los clientes y necesidad de contar historias de datos por medio de la web.
Aquí es donde entra en juego D3.js. D3.js se ha convertido en el santo grial de la visualización interactiva de datos.
D3.js frente a otras alternativas
Creo que la popularidad de D3.js en la fraternidad de la ciencia de datos no está sincronizada con su verdadero potencial. El motivo principal es que necesita un conjunto de habilidades distinto (par exemple, HTML, CSS y conocimientos sobre JavaScript) que la mayoría de las herramientas convencionales para ciencia de datos o aprendizaje automático. En même temps, existen herramientas fácilmente disponibles como QlikView y Tableau que proporcionan esta función.
Malgré cela, cuando desee paneles de control / historias de datos personalizados entregados en la web a bajo costo, D3.js es una de las mejores herramientas disponibles. Y es por esto que creemos en crear esta ruta de aprendizaje.
Hemos diseñado una ruta de aprendizaje para principiantes a continuación. Si lo encuentra intimidante al principio, ne t'inquiète pas, eso es natural. Mais, si promete dar su primer paso en D3.js, le prometemos que lo ayudaremos constantemente a superar los sucesivos estorbos.
Noter: Esta ruta de aprendizaje se ha diseñado asumiendo que es un novato en los lenguajes de codificación y desarrollo web (HTML / CSS y JavaScript). Si vous les connaissez déjà, puede omitir las secciones correspondientes.
Qu'est-ce que D3.js?
Documents pilotés par les données (D3) est une bibliothèque JavaScript open source utilisée pour créer des visualisations dynamiques et interactives sur un navigateur web moderne. Elle s'exécute principalement avec HTML, SVG, CSS y JavaScript. Créé par Mike Bostock, informaticien et spécialiste de la visualisation de données (en image).
D3.js est extrêmement rapide, réactif et en plus prend en charge de grands ensembles de données pour créer des animations dynamiques dans les navigateurs web. La collection de plug-ins et de composants de codage utiles rend les codes d3 réutilisables.
Conseil pour les débutants: Si vous êtes débutant, vous pouvez être confus entre le langage de programmation Java et le langage de script JavaScript. Fils 2 langues absolument indépendantes. Java est principalement utilisé pour le développement de logiciels et d'applications, alors que JavaScript est utilisé pour créer des pages web interactives.
Paso 0: Motivation – Pourquoi apprendre D3.js?
Je crois vraiment au cercle d'or expliqué par Simon Sinek. Il dit, si vous commencez quelque chose, commencez par « Parce que »?
Avant de commencer votre voyage, vous devez avoir une réponse à cette question:
Pourquoi devrais-je apprendre D3.js?
O
Comment D3.js m'aidera-t-il?
Laissez-moi vous aider à trouver sa réponse. Regardez cette conférence de Scott Murray, Auteur de Visualisation interactive de données pour le Web, pour comprendre le véritable pouvoir de créer des visualisations activées pour le Web.
5 exemples du monde réel
Ce qui est essentiel. Laissez-moi vous montrer certaines des visualisations créées avec d3. Il n'est pas nécessaire d'analyser ces visualisations, mais vous obtenez de l'inspiration et l'envie de créer.
- Grève effectuée par la police en janvier 2012 à New York
- Processus de Markov
- Introduction visuelle à l'apprentissage automatique
- Le circuit de course mène à la victoire
- Connexions entre les candidats aux Oscars
Je vous suggérerais fortement de consacrer un peu de temps à chacune de ces pages en interagissant avec les éléments de celles-ci. Vous commencerez à voir la puissance de ce que D3.js peut vous offrir!
Faire défiler Plus de 600 exemples dans D3.
Pertinence de la visualisation des données
Si vous avez vérifié les exemples précédents, je suis sûr qu'il n'est pas nécessaire d'insister sur la pertinence de la visualisation des données. Vous savez déjà à quel point les données peuvent parler d'elles-mêmes. En tant que data scientist, Votre véritable objectif devrait être d'expliquer le modèle aux parties prenantes. Le réel se manifeste dans la présentation des données aux parties prenantes qui ne sont pas analytiques. Ils ne veulent pas de chiffres, Mais une histoire magnifiquement racontée avec des chiffres. Si vous pouvez accomplir cette tâche avec D3, Excellent travail.
Paso 1: Apprendre les notions de base: HTML, CSS, SVG, Javascript
Commencez par effacer vos notions de codage de base. Si vous n'avez pas de connaissances préalables en codage, commencez par HTML et CSS Cours de Codecademy. C'est un cours interactif et le meilleur endroit pour commencer.
Une fois que vous avez terminé avec HTML et CSS, procédez à l'apprentissage des arguments de Javascript. Vous pouvez suivre le cours de JavaScript depuis Codecademy en outre.
De plus, vous pouvez consulter Pinch de l'Assemblée générale pour apprendre HTML, CSS et JavaScript de manière interactive. Une fois que vous avez terminé avec JavaScript, procéder à jQuery. Se tenir à codecademy une fois de plus. C'est un cours court. Mais, très utile pour D3.
Finalement, vous avez besoin Graphiques vectoriels évolutifs (SVG). Joue un rôle essentiel dans la création de diverses formes intégrées dans une visualisation D3. Pour ca, vous pouvez suivre ceci Didacticiel de w3schools.
En ce moment, vous devriez pouvoir créer des pages web interactives de base. Il est maintenant temps d'acquérir de l'expérience pratique.
Mettez vos compétences à l'épreuve: Pour examiner vos connaissances en HTML, CSS, Javascript, faites ceci exercer en créant des projets web. Cela devrait vous aider à gagner en confiance dans le codage.
Supplémentaire: Si vous vous sentez encore submergé par ces concepts, suivez ce cours complet de Freecodecamp. Si vous terminez avec succès tous les niveaux de ce cours, vous êtes plus que prêt à passer à l'étape suivante.
Paso 2: décharger, installer et exécuter D3.js
Vous devez maintenant installer un éditeur de texte où vous pouvez coder. C'est un facteur crucial. Le choix d'un bon éditeur de texte apporte un véritable élan et du plaisir au codage. J'utilise, je préfère et recommande Sublime Text. C'est un éditeur open source, rapide et facile à utiliser. Il est compatible avec de nombreux plugins utiles et options de personnalisation pour rendre l'expérience de codage incroyable.
Après avoir installé un éditeur de texte, l'étape suivante est de télécharger et d'installer la bibliothèque d3.js, ce qui est également assez simple.
Vous pouvez télécharger le fichier zip complet de d3 depuis ici. Créez un dossier sur votre machine locale et décompressez-le. Vous trouverez les fichiers JavaScript nommés d3.js Oui d3.min.js.
Pour charger la bibliothèque d3 dans votre éditeur de texte, vous pouvez le faire de plusieurs manières, soit depuis votre machine locale, soit depuis sa source. N'oubliez pas d'ajouter ce script dans la section
:<!--Charger D3 depuis le site source--> <script src="http://d3js.org/d3.v3.min.js"></script> <!--Charger D3 depuis la machine locale--> <script type="text/javascript" source="https://www.analyticsvidhya.com/learning-paths-data-science-business-analytics-business-intelligence-big-data/newbie-d3-js-expert-complete-path-create-interactive-visualization-d3-js/d3.min.js"></script>
Paso 3: Commencez à travailler avec D3 – premier exemple
Ensuite, vous devez travailler tout au long du chapitre 1b du cours pour Udacité. Il vous présentera les concepts de D3 à travers un exemple simple. Une fois que vous avez travaillé sur un exemple de base, vous pouvez voir plus de détails sur la façon de créer des éléments basés sur des données.
Vous pouvez regarder l'un ou l'autre:
- Chapitre 7 – Chapitre 20 de dashingd3 tutoriels; O
- Chapitre 4 – Chapitre 17 du livre de Scott Murray
Les deux couvrent plusieurs aspects de d3 en détail, en supposant que vous avez des connaissances préalables en html, css, javascript.
Paso 4: temps de pratique
À ce point, vous devriez avoir acquis des connaissances pratiques de d3. Vous devriez maintenant vous sentir à l'aise pour coder en utilisant ces différents langages. Pratiquons maintenant quelques techniques de visualisation de base que vous avez apprises dans les étapes précédentes.
L'idée derrière ces exemples est de vous faire pratiquer. Ne vérifiez pas le code au début. Essayez-le vous-même d'abord. Après, vérifiez la réponse si vous êtes bloqué.
Exemple 1: créer un graphique circulaire
<!DOCTYPE html>
<html>
<diriger>
<Titre>Chemin avec Ligne</Titre>
<script type="text/javascript" source="https://www.analyticsvidhya.com/learning-paths-data-science-business-analytics-business-intelligence-big-data/newbie-d3-js-expert-complete-path-create-interactive-visualization-d3-js/d3.min.js"></script>
</diriger>
<corps>
<script>
var data = [20, 50, 80];
var r = 150;
var canvas = d3.select("corps").ajouter("svg")
.attr("largeur", 1500)
.attr("la taille", 1500);
var color = d3.scale.ordinal()
.gamme(["Orange", "rouge", "vert"]);
var group = canvas.append("g")
.attr("transform", "translate(200, 200)");
var arc = d3.svg.arc()
.innerRadius(80)
.outerRadius(r);
var pie = d3.layout.pie()
.valeur ( une fonction(ré) { retour d; });
var arcs = group.selectAll(".arc") .Les données(tarte(Les données)) .Entrer() .ajouter("g") .attr("classer", "arc");
arcs.append("chemin") .attr("ré", arc) .attr("fill", une fonction(ré) { return color(d.data)});
arcs.append("texte") .attr("transform", une fonction(ré) { revenir "translate(" + arc.centroid(ré) + ")"; }) .attr("text-anchor", "middle") .attr("font-size", "1.5em") .texte(une fonction(ré) { return d.data; });
</script> </corps> </html>
Production: Est-ce que ça ressemble à ça:
Exemple 2: crear un gráfico de barras animado
<!DOCTYPE html>
<html>
<diriger>
<script type="text/javascript" source="https://www.analyticsvidhya.com/learning-paths-data-science-business-analytics-business-intelligence-big-data/newbie-d3-js-expert-complete-path-create-interactive-visualization-d3-js/d3.min.js"></script>
</diriger>
<corps>
<div class="container">
<h2>Animated Bar Chart</h2>
<div id="chart"></div>
</div>
<script>
var bardata = [];
pour (var i=0; je<50; i++){
bardata.push(Math.round(Math.random()*30))
}
bardata.sort(function compareNumbers(une,b){
return a-b;
})
var margin = { Haut: 30, droit: 30, bas: 40, la gauche: 50}
var height = 400 - margin.top - margin.bottom,
largeur = 600 - margin.right - margin.left,
barWidth = 50,
barOffset = 5;
var tempColor;
var tooltip = d3.select('body').ajouter('div')
.style('position', 'absolute')
.style('padding', '0 10px')
.style('background', 'white')
.style('opacity', 0)
var yScale = d3.scale.linear()
.domaine([0, d3.max(bardata)])
.gamme([0, la taille])
var xScale = d3.scale.ordinal()
.domaine(d3.range(0,bardata.length))
.rangeBands([0,largeur], .3)
var color = d3.scale.linear()
.domaine([0, bardata.length*.63, bardata.length])
.gamme(['#ffb832','#c61c6f','#d33682'])
var myChart = d3.select('#chart').ajouter('svg')
.style('background', '#e7e0cb')
.attr('width', largeur + margin.left + margin.right)
.attr('height', la taille + margin.top + margin.bottom)
.ajouter('g')
.attr('transform','translate(' + margin.left+','+ margin.top + ')')
.selectAll('rect')
.Les données(bardata)
.Entrer()
.ajouter('rect')
.style('fill', une fonction(ré,je){
return color(je);
})
.attr('width', xScale.rangeBand())
.attr('x', une fonction(ré,je){
return xScale(je);
})
.attr('height', 0)
.attr('y', la taille)
.au('mouseover', une fonction(ré){
tooltip.transition()
.style('opacity', 0.9)
tooltip.html(ré)
.style('left', (d3.event.pageX - 35)+'px')
.style('top', (d3.event.pageY - 40)+'px')
tempColor = this.style.fill;
d3.select(this)
.style('opacity', .5)
.style('fill', 'yellow')
})
.au('mouseout', une fonction(ré){
d3.select(this)
.style('opacity', 1)
.style('fill', tempColor)
})
myChart.transition()
.attr('height', une fonction(ré){
return yScale(ré);
})
.attr('y', une fonction(ré){
return height - yScale(ré);
})
.delay(une fonction(ré,je){
return i*20;
})
.duration(5000)
.ease('elastic')
var vGuideScale = d3.scale.linear()
.domaine([0, d3.max(bardata)])
.gamme([la taille, 0])
var vAxis = d3.svg.axis()
.escalader(vGuideScale)
.orient('left')
.tiques(10)
var vGuide = d3.select('svg').ajouter('g')
vAxis(vGuide)
vGuide.attr('transform','translate('+margin.left+',' + margin.top + ')')
vGuide.selectAll('path')
.style({fill: 'aucun', stroke: '#000'})
vGuide.selectAll('line')
.style({stroke: '#000'})
var hAxis = d3.svg.axis()
.escalader(xScale)
.orient('bottom')
.tickValues(xScale.domain().filtre(une fonction(ré,je){
revenir !(je % (bardata.length/5));
}))
var hGuide = d3.select('svg').ajouter('g')
hAxis(hGuide)
hGuide.attr('transform', 'translate('+margin.left+',' + (la taille + margin.top) + ')')
hGuide.selectAll('path')
.style({fill: 'aucun', stroke: '#000'})
hGuide.selectAll('line')
.style({stroke: '#000'})
</script>
</corps>
</html>
Production: Il est graphique à barresLe graphique à barres est une représentation visuelle des données qui utilise des barres rectangulaires pour montrer des comparaisons entre différentes catégories. Chaque barre représente une valeur et sa longueur est proportionnelle à celle-ci. Ce type de graphique est utile pour visualiser et analyser les tendances, faciliter l’interprétation des informations quantitatives. Il est largement utilisé dans diverses disciplines, tels que les statistiques, Marketing et recherche, En raison de sa simplicité et de son efficacité.... se parece a esto: Haga clic aquí
Exemple 3: crear un esquema de mapa simple
He demostrado este ejemplo usando el mapa del vecindario de Boston. La idea es comprender los argumentos de la elaboración de mapas, sin sumergirse en cosas sofisticadas.
<html>
<diriger>
<Titre>Basic D3 map</Titre>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="neighborhoods.js"></script>
</diriger>
<corps>
<script>
var width = 700,
hauteur = 580;
var svg = d3.select( "corps" )
.ajouter( "svg" )
.attr( "largeur", largeur )
.attr( "la taille", la taille );
var g = svg.append( "g" );
var albersProjection = d3.geo.albers()
.escalader( 190000 )
.rotate( [71.057,0] )
.centre( [0, 42.313] )
.translate( [width/2,height/2] );
var geoPath = d3.geo.path()
.projection( albersProjection );
g.selectAll( "chemin" )
.Les données( neighborhoods_json.features )
.Entrer()
.ajouter( "chemin" )
.attr( "fill", "#ccc" )
.attr( "ré", geoPath );
</script>
</corps>
</html>
Production: Ceci est le schéma de la carte du quartier de Boston:
Ces exemples ne sont là que pour vous mettre en appétit. Le vrai jeu commence avec des cartes géographiques animées. Une fois que vous vous sentez à l'aise en créant ces visualisations élémentaires, passez au niveau suivant. Pour les cartes, d3 fonctionne mieux avec les formats geojson et topojson. Geojson est le fichier de données géographiques par défaut. Mais, on considère que topojson est plus rapide et capable de charger de grands ensembles de données avec une taille réduite (données compressées).
Autres ressources utiles
Voici quelques autres ressources utiles qui pourraient vous être utiles:
- Dépôt GitHub des tutoriels D3.js
- Complétez le cours Udacity sur D3.js
- Meilleur tutoriel YouTube sur D3.js
- Site officiel de D3
- Astuces et conseils pour D3: Livre électronique gratuit
Même comme ça, si vous trouvez D3 difficile à apprendre, n'hésitez pas à partager vos problèmes dans la section des commentaires ci-dessous.
