Full path to create interactive visualization using D3.js

Share on facebook
Share on twitter
Share on linkedin
Share on telegram
Share on whatsapp

Contents

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 (as an example, HTML, CSS y conocimientos sobre JavaScript) que la mayoría de las herramientas convencionales para ciencia de datos o aprendizaje automático. At the same time, existen herramientas fácilmente disponibles como QlikView y Tableau que proporcionan esta función.

Despite this, 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.

ruta de aprendizaje completa para dominar d3.js

Hemos diseñado una ruta de aprendizaje para principiantes a continuación. Si lo encuentra intimidante al principio, do not worry, eso es natural. But, si promete dar su primer paso en D3.js, le prometemos que lo ayudaremos constantemente a superar los sucesivos estorbos.

Note: 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). If you already know them, puede omitir las secciones correspondientes.

¿Qué es D3.js?

mike bostock d3.jsDocumentos controlados por datos (D3) es una biblioteca de JavaScript open source que se utiliza para crear visualizaciones dinámicas e interactivas habilitadas en un navegador web moderno. Se ejecuta principalmente con HTML, SVG, CSS y JavaScript. Fue creado por Mike Bostock, informático y especialista en visualización de datos (en imagen).

D3.js es extremadamente rápido, receptivo y además admite grandes conjuntos de datos para crear animaciones dinámicas en navegadores web. La colección de complementos y componentes de codificación útiles hace que los códigos d3 sean reutilizables.

Consejo para principiantes: Si es un principiante, puede confundirse entre el lenguaje de programación Java y el lenguaje de scripting JavaScript. Son 2 idiomas absolutamente independientes. Java se utiliza principalmente para el desarrollo de software y aplicaciones, mientras que JavaScript se utiliza para crear páginas web interactivas.

Paso 0: Motivación¿Por qué aprender D3.js?

Verdaderamente creo en el circulo dorado explicado por Simon Sinek. Él dice, si está comenzando con algo, comience con “Why”?

Before starting your journey, debe tener respuesta a esta pregunta:

¿Por qué debería aprender D3.js?

O

¿Cómo me ayudará D3.js?

Déjame ayudarte a hallar su respuesta. Ver este charla de Scott Murray, Autor de Visualización interactiva de datos para la Web, para comprender el verdadero poder de crear visualizaciones habilitadas para la Web.

5 ejemplos del mundo real

This is essential. Déjame mostrarte algunas de las visualizaciones que se crean con d3. No es necesario que analices estas visualizaciones, pero obtienes inspiración y ganas de crear una.

  1. Paro realizado por la policía en enero de 2012 en Nueva York
  2. Proceso de Markov
  3. Introducción visual al aprendizaje automático
  4. Race Track conduce a la victoria
  5. Conexiones entre los contendientes de Oscar

Sugeriría encarecidamente que dedique algún tiempo a cada una de estas páginas interactuando con los ítems de estas páginas. ¡Comenzará a ver el poder de lo que D3.js puede ofrecerle!

Desplazarse por More of 600 ejemplos en D3.

Relevancia de la visualización de datos

Si ha comprobado los ejemplos anteriores, estoy seguro de que no es necesario que haga hincapié en la relevancia de visualizar los datos. Ya sabe lo bien que pueden hablar los datos por sí mismos. As a data scientist, su verdadero motivo debería ser explicar el modelo a las partes interesadas. Lo real viene en la presentación de datos a las partes interesadas que no son analíticas. No quieren números, sino una historia bellamente elaborada con números. Si puede realizar esta tarea con D3, excelente trabajo.

Paso 1: Aprender los conceptos básicos: HTML, CSS, SVG, Javascript

Primero borre sus conceptos básicos de codificación. Si no tiene conocimientos previos de codificación, comience con HTML y CSS curso de Codecademy. Es un curso interactivo y el mejor lugar para comenzar.

Una vez que haya terminado con HTML y CSS, proceda a aprender los argumentos de Javascript. Puede realizar el curso de Javascript desde Codecademy what's more.

Además puede consultar Pizca de la Asamblea General para aprender HTML, CSS y JavaScript de manera interactiva. Una vez que haya terminado con Javascript, proceed to jQuery. Atenerse a codecademy one more time. Es un curso corto. But, muy útil para D3.

Finally, you need Gráficos vectoriales escalables (SVG). Desempeña un papel vital en la creación de varias formas integradas en una visualización d3. For this, puedes seguir esto tutorial de w3schools.

At the moment, debería poder crear páginas web interactivas básicas. Ahora es el momento de obtener experiencia práctica.

Pon a prueba tus habilidades: Para examinar su conocimiento de HTML, CSS, Javascript, haga esto exercise de crear proyectos web. Esto debería ayudarlo a ganar confianza en la codificación.

Additional: Si aún se siente sumergido profundamente en estos argumentos, tome este curso completo de Freecodecamp. Si completa con éxito todos los niveles de este curso, está más que preparado para continuar con el siguiente paso.

Paso 2: descargar, instalar y ejecutar D3.js

Ahora necesita instalar un editor de texto donde pueda codificar. Este es un factor crucial. La selección de un buen editor de texto proporciona un verdadero impulso y emoción al código. Yo uso, prefiero y recomiendo Sublime Text. Es un editor open source, rápido y fácil de utilizar. Es compatible con muchos complementos útiles y opciones de personalización para que la experiencia de codificación sea increíble.

Después de haber instalado un editor de texto, el siguiente paso es descargar e instalar la biblioteca d3.js, que además es bastante simple.

Puede descargar el archivo zip d3 completo desde here. Cree una carpeta en su máquina local y descomprímala. Encontrarás los archivos javascript con nombre d3.js Y d3.min.js.

Para cargar la biblioteca d3 en su editor de texto, puede hacerlo de varias formas, ya sea desde su máquina local o desde su fuente. No olvide agregar este script en la sección :

<!--Load D3 from source website-->
<script src="https://d3js.org/d3.v3.min.js"></script> 
<!--Load D3 from local machine-->
<script type="text/javascript" src="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: Comience a trabajar en D3primer ejemplo

Then, debe trabajar a lo largo del capítulo 1b del curso desde Udacity. Le presentará los conceptos de D3 por medio de un ejemplo sencillo. Una vez que haya trabajado con un ejemplo básico, puede ver más detalles acerca de cómo crear ítems basados ​​en datos.

Puedes mirar cualquiera de los dos:

Ambos cubren varios aspectos de d3 en detalle, asumiendo que tiene conocimientos previos de html, css, javascript.

Paso 4: tiempo de práctica

At this stage, debería haber adquirido conocimientos prácticos de d3. Ahora debería sentirse cómodo codificando usando estos diferentes lenguajes. Practiquemos ahora algunas técnicas básicas de visualización que ha aprendido en los pasos anteriores.

La idea detrás de estos ejemplos es hacerte practicar. No verifique el código al principio. Pruébelo usted mismo primero. After, revisa la respuesta si te quedas atascado.

Example 1: crear un gráfico circular

<!DOCTYPE html>
<html>
<head>
 <title>Path with Line</title>
 <script type="text/javascript" src="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>
</head>
<body>
<script>
       var data = [20, 50, 80];
       var r = 150;

       var canvas = d3.select("body").append("svg")
                    .attr("width", 1500)
                    .attr("height", 1500);
       var color = d3.scale.ordinal()
                   .range(["orange", "red", "green"]);
       var group = canvas.append("g")
                   .attr("transform", "translate(200, 200)");
       var arc = d3.svg.arc()
                .innerRadius(80)
                .outerRadius(r);
       var pie = d3.layout.pie()
                 .value ( function(d) { return d; });
       var arcs = group.selectAll(".arc")
                 .data(pie(data))
                 .enter()
                 .append("g") 
                 .attr("class", "arc");
       arcs.append("path")
       .attr("d", arc)
       .attr("fill", function(d) { return color(d.data)});
       arcs.append("text")
       .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
       .attr("text-anchor", "middle")
       .attr("font-size", "1.5em")
       .text(function(d) { return d.data; });
</script>
</body>
</html>

Production: Does it look like this:

tarta

Example 2: crear un gráfico de barras animado

<!DOCTYPE html>
<html>
<head>
      <script type="text/javascript" src="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>
</head>
<body>
 
      <div class="container">
           <h2>Animated Bar Chart</h2>
                 <div id="chart"></div>
      </div>
<script>
  
       var bardata = [];

       for (var i=0; i<50; i++){
            bardata.push(Math.round(Math.random()*30))
       }

       bardata.sort(function compareNumbers(a,b){
            return a-b;
       })
             var margin = { top: 30, right: 30, bottom: 40, left: 50}

             var height = 400 - margin.top - margin.bottom,
                 width = 600 - margin.right - margin.left,
                 barWidth = 50,
                 barOffset = 5;

             var tempColor;

             var tooltip = d3.select('body').append('div')
                          .style('position', 'absolute')
                          .style('padding', '0 10px')
                          .style('background', 'white')
                          .style('opacity', 0)

             var yScale = d3.scale.linear()
                         .domain([0, d3.max(bardata)])
                         .range([0, height])

             var xScale = d3.scale.ordinal()
                         .domain(d3.range(0,bardata.length))
                         .rangeBands([0,width], .3)

             var color = d3.scale.linear()
                         .domain([0, bardata.length*.63, bardata.length])
                         .range(['#ffb832','#c61c6f','#d33682'])


             var myChart = d3.select('#chart').append('svg')
                         .style('background', '#e7e0cb')
                         .attr('width', width + margin.left + margin.right)
                         .attr('height', height + margin.top + margin.bottom)
                         .append('g')
                         .attr('transform','translate(' + margin.left+','+ margin.top + ')')
                         .selectAll('rect')
                         .data(bardata)
                         .enter()
                         .append('rect')

                          .style('fill', function(d,i){
                                 return color(i);
                             })
                         .attr('width', xScale.rangeBand())
                         .attr('x', function(d,i){
                                return xScale(i);
                             })
                         .attr('height', 0)
                         .attr('and', height)

                         .on('mouseover', function(d){

                             tooltip.transition()
                               .style('opacity', 0.9)
                             tooltip.html(d)
                                     .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')
                         })
                        .on('mouseout', function(d){
                          d3.select(this)
                               .style('opacity', 1)
                               .style('fill', tempColor)
                         })

                         myChart.transition()
                                .attr('height', function(d){
                                       return yScale(d);
                         })
                                .attr('and', function(d){
                                       return height - yScale(d);
                         })
                        .delay(function(d,i){
                                return i*20;
                         })
                        .duration(5000)
                        .ease('elastic')

            var vGuideScale = d3.scale.linear()
                              .domain([0, d3.max(bardata)])
                              .range([height, 0])

            var vAxis = d3.svg.axis()
                        .scale(vGuideScale)
                        .orient('left')
                        .ticks(10)

            var vGuide = d3.select('svg').append('g')
                vAxis(vGuide)

                vGuide.attr('transform','translate('+margin.left+',' + margin.top + ')')
                vGuide.selectAll('path')
                      .style({fill: 'none', stroke: '#000'})
                vGuide.selectAll('line')
                      .style({stroke: '#000'})

            var hAxis = d3.svg.axis()
                      .scale(xScale)
                      .orient('bottom')
                      .tickValues(xScale.domain().filter(function(d,i){
                           return !(i % (bardata.length/5));
                       }))

            var hGuide = d3.select('svg').append('g')
                        hAxis(hGuide)
                hGuide.attr('transform', 'translate('+margin.left+',' + (height + margin.top)                            + ')')
                hGuide.selectAll('path')
                      .style({fill: 'none', stroke: '#000'})
                hGuide.selectAll('line')
                      .style({stroke: '#000'})
 
</script>
</body>
 
</html>

Production: Este gráfico de barras se parece a esto: Haga clic aquí

Example 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>
   <head>
       <title>Basic D3 map</title>
       <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
       <script src="neighborhoods.js"></script> 
</head>
<body>
    <script>
          var width = 700,
          height = 580;

          var svg = d3.select( "body" )
                   .append( "svg" )
                   .attr( "width", width )
                   .attr( "height", height );

          var g = svg.append( "g" );

          var albersProjection = d3.geo.albers()
              .scale( 190000 )
              .rotate( [71.057,0] )
              .center( [0, 42.313] )
              .translate( [width/2,height/2] );

          var geoPath = d3.geo.path()
              .projection( albersProjection );
            
          g.selectAll( "path" )
           .data( neighborhoods_json.features )
           .enter()
           .append( "path" )
           .attr( "fill", "#ccc" )
           .attr( "d", geoPath );

  </script>
</body>
</html>

Production: Este es el esquema del mapa del vecindario de Boston:

mapa de boston en d3

Estos ejemplos son solo para abrirle el apetito. El juego real comienza con mapas geográficos animados. Una vez que se sienta cómodo creando estas visualizaciones elementales, pase al siguiente nivel. Para mapas, d3 funciona mejor con formatos geojson y topojson. Geojson es el archivo de datos geográficos predeterminado. But, se considera que topojson es más rápido y es capaz de cargar grandes conjuntos de datos en tamaño pequeño (datos comprimidos).

Otros recursos útiles

Aquí hay algunos recursos más útiles que pueden resultarle útiles:

  1. Repositorio Github de los tutoriales de d3.js
  2. Completa el curso Udacity en d3.js
  3. Mejor tutorial de Youtube sobre d3.js
  4. Sitio web oficial de D3
  5. Consejos y trucos de D3: libro electrónico gratuito

Even so, si encuentra D3 difícil de aprender, no dude en compartir sus problemas en la sección de comentarios a continuación.

If you like what you have just read and want to continue your analytical learning, subscribe to our emails, Follow us on twitter or like ours Facebook page.

Subscribe to our Newsletter

We will not send you SPAM mail. We hate it as much as you.