Cómo crear una visualización D3 sencilla

¿Cómo crear una visualización D3 sencilla?

Data-DrivenDocuments (D3) es una biblioteca de JavaScript para crear visualizaciones y documentos basados ​​en datos. Puede utilizar datos con HTML, SVG y CSS para crear una variedad de visualizaciones interesantes. Sin embargo, para crear con éxito un gráfico de visualización D3, debe seguir ciertos pasos. Este artículo presentará cómo crear una visualización D3 simple.

Paso 1: Preparar los datos

Antes de crear la visualización D3, es necesario preparar los datos. D3 se ocupa principalmente de datos, por lo que la calidad y preparación de los datos son cruciales para la eficacia de la visualización. En este ejemplo usaremos los siguientes datos:

vardata=;

Esto significa que tenemos una matriz que contiene 5 números y la usaremos para crear un gráfico de barras simple.

Paso 2: configurar el lienzo

Antes de crear una visualización D3, debe configurar el lienzo. Canvas se refiere a un elemento HTML en blanco sobre el cual dibujaremos la visualización. En este ejemplo, usaremos un elemento

como lienzo. Estableceremos el ancho y el alto de este elemento

y lo agregaremos al elemento.

varsvg=d3.select(body).append(svg)

.attr(ancho,500)

.attr(alto,500);

Este código creará un elemento con un ancho y alto de 500 píxeles y lo agregará al elemento.

Paso 3: Crear la visualización

Con los datos y el lienzo, podemos comenzar a crear la visualización. En este ejemplo crearemos un gráfico de barras simple. Para crear un histograma, debemos seguir los siguientes pasos:

1. Crear una barra de escala

Las barras de escala asignan valores de datos a atributos visuales. En este ejemplo, necesitamos asignar los valores de los datos a la altura del histograma. Crearemos una escala lineal usando la función d3.scale.linear().

varyScale=d3.scale.linear()

.domain();

Este código creará una escala lineal que asigna valores de datos a 0 -Intervalo de altura de 400 píxeles.

2. Dibujar los pilares

Ahora que tenemos la escala y el lienzo, podemos empezar a dibujar los pilares. En este ejemplo, dibujaremos un gráfico de barras simple donde cada barra tiene 50 píxeles de ancho. Usaremos la función d3.selectAll() para seleccionar todos los elementos y la función .data() para vincular datos a los elementos.

varbars=svg.selectAll(rect)

.data(data)

.enter()

.append(rect)

.attr(x,function(d,i){returni*60;})

.attr(y,function(d){return400yScale(d);})

.attr(ancho,50)

.attr(alto,función(d){returnyScale(d);})

.attr(relleno,azul acero );

Este código creará un gráfico que consta de barras. Usamos las funciones xScale e yScale para asignar los valores de datos a atributos visuales y establecer el color de relleno en azul acero.

Paso 4: Adjuntar etiquetas

El último paso es agregar etiquetas. En este ejemplo, agregaremos una etiqueta en la parte superior de cada columna que muestra el valor de cada columna.

varlabels=svg.selectAll(texto)

.data(datos)

.enter()

.append(texto)

.text(function(d){returnd;})

.attr(x,function(d,i){returni*625;})

.attr(y,function(d){return400yScale(d)5;})

.attr(text-anchor,middle);

Este código creará A Gráfico que consta de etiquetas, cada una colocada en la parte superior de una columna y que muestra el valor correspondiente.

Resumen

Crear visualizaciones D3 requiere cierta habilidad y experiencia, pero puedes crear gráficos simples incluso sin experiencia. Este artículo explica cómo crear una visualización D3 simple, incluida la preparación de datos, la configuración del lienzo, la creación de la visualización y la colocación de etiquetas. Siguiendo estos pasos, podrá crear fácilmente algunas visualizaciones D3 simples.