{"id":95758,"date":"2022-09-01T09:39:14","date_gmt":"2022-09-01T07:39:14","guid":{"rendered":"https:\/\/rmarketingdigital.com\/javascript\/tutorial-de-d3-js-creacion-de-graficos-de-barras-interactivos-con-javascript\/"},"modified":"2020-12-08T06:15:24","modified_gmt":"2020-12-08T09:15:24","slug":"tutorial-de-d3-js-creacion-de-graficos-de-barras-interactivos-con-javascript","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/de\/javascript\/tutorial-de-d3-js-creacion-de-graficos-de-barras-interactivos-con-javascript\/","title":{"rendered":"D3.js Tutorial: Erstellen interaktiver Balkendiagramme mit JavaScript"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Contenidos<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rmarketingdigital.com\/de\/javascript\/tutorial-de-d3-js-creacion-de-graficos-de-barras-interactivos-con-javascript\/#Primero-que-todo-%C2%BFQue-es-D3js\" >Primero que todo \u00bfQu\u00e9 es D3.js?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/de\/javascript\/tutorial-de-d3-js-creacion-de-graficos-de-barras-interactivos-con-javascript\/#%C2%BFPor-que-deberias-crear-graficos-con-D3js-%C2%BFPor-que-no-solo-mostrar-una-imagen\" >\u00bfPor qu\u00e9 deber\u00edas crear gr\u00e1ficos con D3.js? \u00bfPor qu\u00e9 no solo mostrar una imagen?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/de\/javascript\/tutorial-de-d3-js-creacion-de-graficos-de-barras-interactivos-con-javascript\/#Los-beneficios-de-SVG\" >Los beneficios de SVG<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/de\/javascript\/tutorial-de-d3-js-creacion-de-graficos-de-barras-interactivos-con-javascript\/#Pros\" >Pros:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rmarketingdigital.com\/de\/javascript\/tutorial-de-d3-js-creacion-de-graficos-de-barras-interactivos-con-javascript\/#Contras\" >Contras:<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rmarketingdigital.com\/de\/javascript\/tutorial-de-d3-js-creacion-de-graficos-de-barras-interactivos-con-javascript\/#Empezando-con-D3js\" >Empezando con D3.js<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rmarketingdigital.com\/de\/javascript\/tutorial-de-d3-js-creacion-de-graficos-de-barras-interactivos-con-javascript\/#%C2%A1Hora-de-dibujar\" >\u00a1Hora de dibujar!<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/rmarketingdigital.com\/de\/javascript\/tutorial-de-d3-js-creacion-de-graficos-de-barras-interactivos-con-javascript\/#Formatos-de-entrada-D3js-soportados\" >Formatos de entrada D3.js soportados<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/rmarketingdigital.com\/de\/javascript\/tutorial-de-d3-js-creacion-de-graficos-de-barras-interactivos-con-javascript\/#Escalado-y-ejes\" >Escalado y ejes<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/rmarketingdigital.com\/de\/javascript\/tutorial-de-d3-js-creacion-de-graficos-de-barras-interactivos-con-javascript\/#Barras-de-dibujo-en-D3js\" >Barras de dibujo en D3.js<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<div itemprop=\"articleBody\">\n<p>Para el tutorial de hoy vamos a empezar a dise\u00f1ar y crear gr\u00e1ficos de barras usando D3.js, sigue leyendo para que sepas c\u00f3mo hacerlo<span id=\"more-137\"\/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Primero-que-todo-%C2%BFQue-es-D3js\"><\/span>Primero que todo \u00bfQu\u00e9 es D3.js?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>D3.js es una biblioteca de JavaScript basada en datos para manipular elementos DOM.<\/p>\n<p>\u201cD3 te ayuda a dar vida a los datos mediante HTML, SVG y CSS. El \u00e9nfasis de D3 en los est\u00e1ndares web le brinda todas las capacidades de los navegadores modernos sin atarse a un marco propietario, combinando poderosos componentes de visualizaci\u00f3n y un enfoque basado en datos para la manipulaci\u00f3n de DOM \u00ab. \u2013 d3js.org<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFPor-que-deberias-crear-graficos-con-D3js-%C2%BFPor-que-no-solo-mostrar-una-imagen\"><\/span>\u00bfPor qu\u00e9 deber\u00edas crear gr\u00e1ficos con D3.js? \u00bfPor qu\u00e9 no solo mostrar una imagen?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Bueno, los gr\u00e1ficos se basan en informaci\u00f3n proveniente de recursos de terceros que requieren una visualizaci\u00f3n din\u00e1mica durante el tiempo de procesamiento. Adem\u00e1s, SVG es una herramienta muy poderosa que se adapta bien a este caso de aplicaci\u00f3n.<\/p>\n<p>Tomemos un desv\u00edo para ver qu\u00e9 beneficios podemos obtener del uso de SVG.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Los-beneficios-de-SVG\"><\/span>Los beneficios de SVG<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>SVG significa gr\u00e1ficos vectoriales escalables, que t\u00e9cnicamente es un lenguaje de marcado basado en XML.<\/p>\n<p>Se usa com\u00fanmente para dibujar gr\u00e1ficos vectoriales, especificar l\u00edneas y formas o modificar im\u00e1genes existentes.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Pros\"><\/span>Pros:<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ul>\n<li>Compatible con todos los principales navegadores<\/li>\n<li>Tiene interfaz DOM, no requiere lib de terceros<\/li>\n<li>Escalable, puede mantener alta resoluci\u00f3n<\/li>\n<li>Tama\u00f1o reducido en comparaci\u00f3n con otros formatos de imagen.<\/li>\n<\/ul>\n<h4><span class=\"ez-toc-section\" id=\"Contras\"><\/span>Contras:<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ul>\n<li>Solo puede mostrar im\u00e1genes bidimensionales;<\/li>\n<li>Larga curva de aprendizaje<\/li>\n<li>Render puede tomar mucho tiempo con operaciones intensivas de c\u00f3mputo.<\/li>\n<li>A pesar de sus inconvenientes, SVG es una gran herramienta para mostrar iconos, logotipos, ilustraciones o, en este caso, gr\u00e1ficos.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Empezando-con-D3js\"><\/span>Empezando con D3.js<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Eleg\u00ed el gr\u00e1fico de barras para comenzar porque representa un elemento visual de baja complejidad mientras ense\u00f1a la aplicaci\u00f3n b\u00e1sica de D3.js en s\u00ed. Esto no deber\u00eda enga\u00f1arte, D3 proporciona un gran conjunto de herramientas para visualizar datos.<\/p>\n<p>Un gr\u00e1fico de barras puede ser horizontal o vertical en funci\u00f3n de su orientaci\u00f3n. Ir\u00e9 con el gr\u00e1fico de columnas alias vertical.<\/p>\n<p>En este diagrama, voy a mostrar los 10 lenguajes de programaci\u00f3n m\u00e1s populares seg\u00fan el resultado de la Encuesta de Desarrolladores 2018 de Stack Overflow .<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%A1Hora-de-dibujar\"><\/span>\u00a1Hora de dibujar!<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>SVG tiene un sistema de coordenadas que comienza desde la esquina superior izquierda (0; 0). El eje x positivo va hacia la derecha, mientras que el eje y positivo va hacia la parte inferior. Por lo tanto, la altura de la SVG debe tenerse en cuenta a la hora de calcular la coordenada y de un elemento.<\/p>\n<p>Quiero crear un gr\u00e1fico con 1000 p\u00edxeles de ancho y 600 p\u00edxeles de altura.<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\n&lt;body&gt;&#13;\n&lt;svg \/&gt;&#13;\n&lt;\/body&gt;&#13;\n&lt;script&gt;&#13;\nconst margin = 60;&#13;\nconst width = 1000 - 2 * margin;&#13;\nconst height = 600 - 2 * margin;&#13;\n&#13;\nconst svg = d3.select('svg');&#13;\n&lt;\/script&gt;&#13;\n&#13;\n<\/pre>\n<p>\nEn el fragmento de c\u00f3digo anterior, selecciono el elemento\u00a0 creado en el archivo HTML con D3 select. Este m\u00e9todo de selecci\u00f3n acepta todo tipo de cadenas de selecci\u00f3n y devuelve el primer elemento coincidente. Utiliza selectAll si desea obtener todos ellos.<\/p>\n<p>Tambi\u00e9n defino un valor de margen que le da un poco de relleno adicional al gr\u00e1fico. El relleno se puede aplicar con un elemento\u00a0&lt;g&gt; traducido por el valor deseado. De ahora en adelante, recurro a este grupo para mantener una buena distancia de cualquier otro contenido de la p\u00e1gina.<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nconst chart = svg.append('g')&#13;\n.attr('transform', `translate(${margin}, ${margin})`);&#13;\n&#13;\n<\/pre>\n<p>\nAgregar atributos a un elemento es tan f\u00e1cil como llamar al m\u00e9todo attr. El primer par\u00e1metro del m\u00e9todo toma un atributo que quiero aplicar al elemento DOM seleccionado. El segundo par\u00e1metro es el valor o una funci\u00f3n de devoluci\u00f3n de llamada que devuelve su valor. El c\u00f3digo anterior simplemente mueve el inicio del gr\u00e1fico a la posici\u00f3n (60; 60) del SVG.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Formatos-de-entrada-D3js-soportados\"><\/span>Formatos de entrada D3.js soportados<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Para comenzar a dibujar, necesito definir la fuente de datos de la que estoy trabajando. Para este tutorial, uso una matriz de JavaScript simple que contiene objetos con el nombre de los idiomas y sus porcentajes, pero es importante mencionar que D3.js admite varios formatos de datos.<\/p>\n<p>La biblioteca tiene una funcionalidad incorporada para cargar desde XMLHttpRequest, archivos .csv, archivos de texto, etc. Cada una de estas fuentes puede contener datos que D3.js puede usar, lo \u00fanico importante es construir una matriz a partir de ellos. Ten en cuenta que, a partir de la versi\u00f3n 5.0, la biblioteca utiliza promesas en lugar de devoluciones de llamada para cargar datos, lo que no es un cambio compatible con versiones anteriores.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Escalado-y-ejes\"><\/span>Escalado y ejes<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Continuemos con los ejes del gr\u00e1fico. Para dibujar el eje <strong>y<\/strong>, necesito establecer el l\u00edmite de valor m\u00e1s bajo y m\u00e1s alto, que en este caso son 0 y 100.<\/p>\n<p>Estoy trabajando con porcentajes en este tutorial, pero hay funciones de utilidad para tipos de datos distintos de los n\u00fameros que explicar\u00e9 m\u00e1s adelante.<\/p>\n<p>Tengo que dividir la altura del gr\u00e1fico entre estos dos valores en partes iguales. Para esto, creo algo que se llama una funci\u00f3n de escalado.<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nconst yScale = d3.scaleLinear()&#13;\n.range([height, 0])&#13;\n.domain([0, 100]);&#13;\n&#13;\n<\/pre>\n<p>\nLa escala lineal es el tipo de escala m\u00e1s conocido. Convierte un dominio de entrada continuo en un rango de salida continuo. Observa el m\u00e9todo rangey domain. El primero toma la longitud que debe dividirse entre los l\u00edmites de los valores del dominio.<\/p>\n<p>Recuerda, el sistema de coordenadas SVG comienza desde la esquina superior izquierda, por eso el rango toma la altura como primer par\u00e1metro y no a cero.<\/p>\n<p>Crear un eje a la izquierda es tan simple como agregar otro grupo y llamar al m\u00e9todo axisLeft de D3 con la funci\u00f3n de escala como par\u00e1metro.<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nchart.append('g')&#13;\n.call(d3.axisLeft(yScale));&#13;\n&#13;\n<\/pre>\n<p>\nAhora, contin\u00faa con el eje x.<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nconst xScale = d3.scaleBand()&#13;\n.range([0, width])&#13;\n.domain(sample.map((s) =&gt; s.language))&#13;\n.padding(0.2)&#13;\n&#13;\nchart.append('g')&#13;\n.attr('transform', `translate(0, ${height})`)&#13;\n.call(d3.axisBottom(xScale));&#13;\nd3-js-tutorial-bar-chart-labels&#13;\n&#13;\n<\/pre>\n<p>Ten en cuenta que utilizo scaleBand para el eje x, que ayuda a dividir el rango en bandas y calcular las coordenadas y los anchos de las barras con relleno adicional.<\/p>\n<p>D3.js tambi\u00e9n es capaz de manejar el tipo de fecha entre muchos otros. scaleTime es realmente similar a scaleLinear, excepto que el dominio es aqu\u00ed un conjunto de fechas.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Barras-de-dibujo-en-D3js\"><\/span>Barras de dibujo en D3.js<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Piensa en qu\u00e9 tipo de entrada necesitamos para dibujar las barras. Cada uno representa un valor que se ilustra con formas simples, espec\u00edficamente rect\u00e1ngulos. En el siguiente fragmento de c\u00f3digo, los adjunto al elemento de grupo creado.<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nchart.selectAll()&#13;\n.data(goals)&#13;\n.enter()&#13;\n.append('rect')&#13;\n.attr('x', (s) =&gt; xScale(s.language))&#13;\n.attr('y', (s) =&gt; yScale(s.value))&#13;\n.attr('height', (s) =&gt; height - yScale(s.value))&#13;\n.attr('width', xScale.bandwidth())&#13;\n&#13;\n<\/pre>\n<p>Primero, usa selectAll para seleccionar los elementos en el gr\u00e1fico que regresa con un conjunto de resultados vac\u00edo. Luego, la funci\u00f3n data que indica cu\u00e1ntos elementos debe actualizarse el DOM seg\u00fan la longitud del arreglo. enter identifica los elementos que faltan si la entrada de datos es m\u00e1s larga que la selecci\u00f3n. Esto devuelve una nueva selecci\u00f3n que representa los elementos que deben agregarse. Por lo general, esto es seguido por un elemento\u00a0append que agrega elementos al DOM.<\/p>\n<p>B\u00e1sicamente, le digo a D3.js que agregue un rect\u00e1ngulo para cada miembro de la matriz.<\/p>\n<p>Ahora, esto solo agrega rect\u00e1ngulos uno encima del otro que no tienen altura ni ancho. Estos dos atributos tienen que calcularse y ah\u00ed es donde las funciones de escalado vuelven a ser \u00fatiles.<\/p>\n<p>Mira, agrego las coordenadas de los rect\u00e1ngulos con la attrllamada. El segundo par\u00e1metro puede ser una devoluci\u00f3n de llamada que toma 3 par\u00e1metros: el miembro real de los datos de entrada, su \u00edndice y toda la entrada.<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\n.attr(\u2019x\u2019, (actual, index, array) =&gt;&#13;\nxScale(actual.value))&#13;\n&#13;\n<\/pre>\n<p>\nLa funci\u00f3n de escala devuelve la coordenada para un valor de dominio dado. El c\u00e1lculo de las coordenadas es un pedazo de pastel, el truco est\u00e1 con la altura de la barra. La coordenada y calculada se debe restar de la altura del gr\u00e1fico para obtener la representaci\u00f3n correcta del valor como una columna.<\/p>\n<p>Yo defino el ancho de los rect\u00e1ngulos con la funci\u00f3n de escalado tambi\u00e9n scaleBand tiene una\u00a0funci\u00f3n bandwidth que devuelve el ancho calculado para un elemento en funci\u00f3n del conjunto de relleno.<\/p>\n<pre data-enlighter-language=\"php\" class=\"EnlighterJSRAW\">&#13;\n&#13;\nd3-js-tutorial-bar-chart-drawn-out-with-javascript&#13;\n&#13;\n<\/pre>\n<p>Buen trabajo, pero no tan elegante, \u00bfverdad?<\/p>\n<p>Para evitar que nuestra audiencia se aburra, \u00a1agreguemos informaci\u00f3n y mejoremos las im\u00e1genes para que tu gr\u00e1fico se vea mucho mejor!<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Im heutigen Tutorial beginnen wir mit dem Entwerfen und Erstellen von Balkendiagrammen mit D3.js. Lesen Sie weiter, um herauszufinden, wie das geht. Zun\u00e4chst einmal: Was ist D3.js?\u2026<\/p>","protected":false},"author":1,"featured_media":95759,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1374],"tags":[],"class_list":["post-95758","post","type-post","status-publish","format-standard","has-post-thumbnail","category-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Tutorial de D3.js: Creaci\u00f3n de gr\u00e1ficos de barras interactivos con JavaScript - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"Para el tutorial de hoy vamos a empezar a dise\u00f1ar y crear gr\u00e1ficos de barras usando D3.js, sigue leyendo para que sepas c\u00f3mo hacerlo Primero que todo \u00bfQu\u00e9\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/de\/javascript\/tutorial-de-d3-js-creacion-de-graficos-de-barras-interactivos-con-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tutorial de D3.js: Creaci\u00f3n de gr\u00e1ficos de barras interactivos con JavaScript\" \/>\n<meta property=\"og:description\" content=\"Para el tutorial de hoy vamos a empezar a dise\u00f1ar y crear gr\u00e1ficos de barras usando D3.js, sigue leyendo para que sepas c\u00f3mo hacerlo Primero que todo \u00bfQu\u00e9\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/de\/javascript\/tutorial-de-d3-js-creacion-de-graficos-de-barras-interactivos-con-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-01T07:39:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/12\/1_JRnjRl6yKg7txT0ouQRdxA-6063793.png\" \/>\n\t<meta property=\"og:image:width\" content=\"921\" \/>\n\t<meta property=\"og:image:height\" content=\"382\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"R Marketing Digital\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/tutorial-de-d3-js-creacion-de-graficos-de-barras-interactivos-con-javascript\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/tutorial-de-d3-js-creacion-de-graficos-de-barras-interactivos-con-javascript\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"Tutorial de D3.js: Creaci\u00f3n de gr\u00e1ficos de barras interactivos con JavaScript\",\"datePublished\":\"2022-09-01T07:39:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/tutorial-de-d3-js-creacion-de-graficos-de-barras-interactivos-con-javascript\\\/\"},\"wordCount\":1393,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/tutorial-de-d3-js-creacion-de-graficos-de-barras-interactivos-con-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/1_JRnjRl6yKg7txT0ouQRdxA-6063793.png\",\"articleSection\":[\"Javascript\"],\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/tutorial-de-d3-js-creacion-de-graficos-de-barras-interactivos-con-javascript\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/tutorial-de-d3-js-creacion-de-graficos-de-barras-interactivos-con-javascript\\\/\",\"name\":\"Tutorial de D3.js: Creaci\u00f3n de gr\u00e1ficos de barras interactivos con JavaScript - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/tutorial-de-d3-js-creacion-de-graficos-de-barras-interactivos-con-javascript\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/tutorial-de-d3-js-creacion-de-graficos-de-barras-interactivos-con-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/1_JRnjRl6yKg7txT0ouQRdxA-6063793.png\",\"datePublished\":\"2022-09-01T07:39:14+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"Para el tutorial de hoy vamos a empezar a dise\u00f1ar y crear gr\u00e1ficos de barras usando D3.js, sigue leyendo para que sepas c\u00f3mo hacerlo Primero que todo \u00bfQu\u00e9\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/tutorial-de-d3-js-creacion-de-graficos-de-barras-interactivos-con-javascript\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/javascript\\\/tutorial-de-d3-js-creacion-de-graficos-de-barras-interactivos-con-javascript\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/1_JRnjRl6yKg7txT0ouQRdxA-6063793.png\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/1_JRnjRl6yKg7txT0ouQRdxA-6063793.png\",\"width\":921,\"height\":382,\"caption\":\"1_jrnjrl6ykg7txt0ouqrdxa-6063793-3831568-png\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"caption\":\"R Marketing Digital\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"D3.js-Lernprogramm: Erstellen interaktiver Balkendiagramme mit JavaScript \u2013 R Marketing Digital","description":"F\u00fcr das heutige Tutorial werden wir mit dem Entwerfen und Erstellen von Balkendiagrammen mit D3.js beginnen. Lesen Sie weiter, damit Sie wissen, wie es geht. Zun\u00e4chst einmal: Was","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rmarketingdigital.com\/de\/javascript\/tutorial-de-d3-js-creacion-de-graficos-de-barras-interactivos-con-javascript\/","og_locale":"de_DE","og_type":"article","og_title":"Tutorial de D3.js: Creaci\u00f3n de gr\u00e1ficos de barras interactivos con JavaScript","og_description":"Para el tutorial de hoy vamos a empezar a dise\u00f1ar y crear gr\u00e1ficos de barras usando D3.js, sigue leyendo para que sepas c\u00f3mo hacerlo Primero que todo \u00bfQu\u00e9","og_url":"https:\/\/rmarketingdigital.com\/de\/javascript\/tutorial-de-d3-js-creacion-de-graficos-de-barras-interactivos-con-javascript\/","og_site_name":"R Marketing Digital","article_published_time":"2022-09-01T07:39:14+00:00","og_image":[{"width":921,"height":382,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/12\/1_JRnjRl6yKg7txT0ouQRdxA-6063793.png","type":"image\/png"}],"author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/javascript\/tutorial-de-d3-js-creacion-de-graficos-de-barras-interactivos-con-javascript\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/javascript\/tutorial-de-d3-js-creacion-de-graficos-de-barras-interactivos-con-javascript\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"Tutorial de D3.js: Creaci\u00f3n de gr\u00e1ficos de barras interactivos con JavaScript","datePublished":"2022-09-01T07:39:14+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/javascript\/tutorial-de-d3-js-creacion-de-graficos-de-barras-interactivos-con-javascript\/"},"wordCount":1393,"image":{"@id":"https:\/\/rmarketingdigital.com\/javascript\/tutorial-de-d3-js-creacion-de-graficos-de-barras-interactivos-con-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/12\/1_JRnjRl6yKg7txT0ouQRdxA-6063793.png","articleSection":["Javascript"],"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/javascript\/tutorial-de-d3-js-creacion-de-graficos-de-barras-interactivos-con-javascript\/","url":"https:\/\/rmarketingdigital.com\/javascript\/tutorial-de-d3-js-creacion-de-graficos-de-barras-interactivos-con-javascript\/","name":"D3.js-Lernprogramm: Erstellen interaktiver Balkendiagramme mit JavaScript \u2013 R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/javascript\/tutorial-de-d3-js-creacion-de-graficos-de-barras-interactivos-con-javascript\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/javascript\/tutorial-de-d3-js-creacion-de-graficos-de-barras-interactivos-con-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/12\/1_JRnjRl6yKg7txT0ouQRdxA-6063793.png","datePublished":"2022-09-01T07:39:14+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"F\u00fcr das heutige Tutorial werden wir mit dem Entwerfen und Erstellen von Balkendiagrammen mit D3.js beginnen. Lesen Sie weiter, damit Sie wissen, wie es geht. Zun\u00e4chst einmal: Was","inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/javascript\/tutorial-de-d3-js-creacion-de-graficos-de-barras-interactivos-con-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/rmarketingdigital.com\/javascript\/tutorial-de-d3-js-creacion-de-graficos-de-barras-interactivos-con-javascript\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/12\/1_JRnjRl6yKg7txT0ouQRdxA-6063793.png","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/12\/1_JRnjRl6yKg7txT0ouQRdxA-6063793.png","width":921,"height":382,"caption":"1_jrnjrl6ykg7txt0ouqrdxa-6063793-3831568-png"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"R Digitales Marketing","description":"SEO Agentur | Werbung f\u00fcr soziale Netzwerke | Community Management","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"R Digitales Marketing","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","caption":"R Marketing Digital"}}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts\/95758","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/comments?post=95758"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts\/95758\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/media\/95759"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/media?parent=95758"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/categories?post=95758"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/tags?post=95758"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}