1658208600

¡Cree Su Primer Gráfico De Visualización De Datos En VueJS Con D3!

¿Qué es la visualización de datos? En pocas palabras, es solo una presentación de datos en un formato gráfico. El uso de tablas o gráficos para visualizar grandes cantidades de datos complejos es más fácil de entender para el cerebro humano. Nos ayuda a ver exactamente lo que necesitamos de nuestro conjunto de datos y procesar rápidamente la información requerida.

Una de las bibliotecas más populares para visualización de datos en JavaScript es D3.js. Como se indicó en la descripción general de D3, combina potentes componentes de visualización y un enfoque basado en datos para la manipulación de DOM. En otras palabras, es similar a cómo funciona jQuery con el DOM. Pero, ¿qué sucede si queremos usar un marco JS como Vue.js para crear una visualización de datos? Vue tiene su propio enfoque para la manipulación de DOM, ¿colisionaría con la forma D3 de hacer las cosas?

Intentemos crear una visualización simple para ver cómo funcionan juntas estas herramientas.

¿Qué vamos a construir?

En la primera parte, construiremos una aplicación simple para generar un gráfico en forma de estrella y cambiarlo dinámicamente usando el marco Vue.js.

Cambio de estrella verde

Si solo desea verificar el código fuente, está aquí .

Andamiaje del proyecto

Vamos a utilizar la CLI de Vue para montar nuestro proyecto. Necesitará Vue CLI instalado, si no lo tiene, ejecute:

npm install -g @vue/cli
# OR
yarn global add @vue/cli

Ahora estamos listos para crear una nueva aplicación Vue. Podemos hacerlo ejecutando el siguiente comando en la terminal:

vue create my-d3-app

Se le solicitará la lista de opciones. Por ahora, podemos ir con la Defaultconfiguración.

Ahora puede abrir su aplicación en el editor de código y ejecutar serveel comando en la raíz del proyecto para verlo en el navegador.

Vista predeterminada de la CLI de Vue

Eliminemos todo el contenido components/HelloWorld.vuey cámbiele el nombre a Chart.vue: vamos a colocar nuestro gráfico aquí.

También necesitamos editar nuestro App.vuearchivo para incluir nuestro gráfico allí: elimine el logotipo y cambie el nombre de un componente importado Charttambién:

<!-- App.vue -->

<template>
  <main>
    <Chart />
  </main>
</template>

<script>
  import Chart from './components/Chart.vue';
  export default {
    name: 'app',
    components: {
      Chart,
    },
  };
</script>

Lo único que queda es instalar D3.js como dependencia a través de npm:

npm install d3
# OR
yarn add d3

¡Ahora estamos listos para trabajar en nuestro gráfico!

Comenzando con SVG

Para dibujar nuestra estrella, usaremos un SVG. Entonces, lo primero que debe agregar a nuestra Chartplantilla de componentes es en realidad una <svg>etiqueta con un ancho y una altura de 500 px:

<!-- Chart.vue -->

<template>
  <section>
    <svg width="500" height="500"></svg>
  </section>
</template>

Para probar nuestro SVG, dibujemos un círculo simple allí. Podemos hacerlo con la circleetiqueta con cuatro atributos:

Coordenada X del centro del círculo;
Coordenada Y del centro del círculo;
radio del círculo;
color para llenar el círculo.

<svg width="500" height="500">
  <circle cx="60" cy="60" r="50" fill="red" />
</svg>

Actualmente, nuestro SVG se ve así:

circulo rojo

Pero sigue siendo el SVG puro sin ningún tipo de magia D3. ¡Arreglemos esto transformando nuestro círculo en una figura en forma de estrella!

Algunas matemáticas detrás de la estrella

Entonces, ¿qué necesitamos para dibujar una estrella en términos de geometría? En primer lugar, una estrella es una forma radial . Significa que la estrella se basa en un círculo y se puede crear con solo dos atributos: un ángulo y un radio. En cuanto al radio, es fácil ver que necesitaremos dos radios aquí: para los círculos exterior e interior.

Estrella con radio interior y exterior

¿Qué pasa con los ángulos? Conectemos el centro del círculo con los bordes de los rayos de estrellas y echemos un vistazo.

Estrella con radios exteriores

Entonces, si la estrella tiene nrayos (en nuestro caso n = 5), ¿cuál debería ser el ángulo entre estos rayos? Como puedes ver, estamos dividiendo el círculo en 5 partes iguales como si cortaramos un pastel en cinco partes iguales. La longitud del círculo es 2π; por lo que el ángulo es 2π / n(o, en nuestro caso 2π / 5)

Ángulo entre rayos

¿Qué pasa con los puntos en el círculo interior? Los necesitamos también para dibujar la estrella correctamente. Cada punto del círculo interior se coloca justo en el medio entre dos puntos del círculo exterior. Entonces, el ángulo entre los puntos interior y exterior es 2π / 2n(o en nuestro caso 2π / 10)

Estrella con ángulo de puntos interiores

Entonces, ¿cuál es el camino para dibujar una estrella? Primero, dibujamos el punto en un círculo exterior; luego nos movemos 2π / 10y dibujamos un punto en el círculo interior; un 2π / 10paso más y un punto en el círculo exterior, etc.

¡Intentemos implementar esto con D3!

Usando el método D3 `lineRadial`para generar la ruta SVG

Primero, definamos nuestro radio exterior y una cantidad de rayos y colóquelos en el componente Vue data:

<!-- Chart.vue -->

<template>
  ...
</template>

<script>
  export default {
    data() {
      return {
        outerRadius: 200,
        rays: 5,
      };
    },
  };
</script>

Vamos a establecer un radio interior para que sea igual al 50% del exterior:

<script>
  export default {
    data() {
      ...
    },
    computed: {
      innerRadius() {
        return this.outerRadius * 0.5
      }
    }
  }
</script>

Ahora vamos a crear una matriz de puntos para dibujar la estrella. Vamos a utilizar el algoritmo descrito en la sección anterior. Primero, especifiquemos el paso de ángulo entre dos puntos vecinos:

computed: {
  innerRadius() {
    return this.outerRadius * 0.5
  },
  radialPoints() {
    const step = 2 * Math.PI / (this.rays * 2)
  }
}

Luego, necesitamos crear una matriz vacía para puntos y un forciclo para llenarla:

radialPoints() {
  const step = 2 * Math.PI / (this.rays * 2)
  const points = [];
  for (let i = 0; i <= this.rays * 2; i++) {
  }
}

Como puede ver, generaremos un nuevo elemento de pointsmatriz para cada punto en los círculos interior y exterior, y tenemos rays * 2puntos. Para cada punto, también necesitamos un radio para definir si el punto se encuentra en el círculo interior o en el exterior. Es fácil: coloquemos todos los puntos pares en el círculo interior y todos los impares en el círculo exterior:

radialPoints() {
  const step = 2 * Math.PI / (this.rays * 2)
  const points = [];
  for (let i = 0; i <= this.rays * 2; i++) {
    const currentRadius = i % 2 ? this.innerRadius : this.outerRadius;
  }
}

Luego, podemos enviar una nueva pointa la pointsmatriz y devolver esta matriz desde la propiedad calculada:

radialPoints() {
  const step = 2 * Math.PI / (this.rays * 2)
  const points = [];
  for (let i = 0; i <= this.rays * 2; i++) {
    const currentRadius = i % 2 ? this.innerRadius : this.outerRadius;
    points.push([i * step, currentRadius])
  }
  return points;
}

Como resultado, tendremos esta matriz:

[
  [0,300],
  [0.6283185307179586,150],
  [1.2566370614359172,300],
  [1.8849555921538759,150],
  [2.5132741228718345,300],
  [3.141592653589793,150],
  [3.7699111843077517,300],
  [4.39822971502571,150],
  [5.026548245743669,300],
  [5.654866776461628,150],
  [6.283185307179586,300]
]

donde el primer valor es un ángulo desde el punto cero y el segundo valor es un radio.

Ahora necesitamos de alguna manera dibujar esta matriz en nuestro SVG. Para esto, necesitamos generar una ruta SVG y por eso necesitamos la biblioteca D3. Tiene muchos métodos mágicos para 'traducir' diferentes tipos de cálculos matemáticos a las propiedades SVG reales.

En este momento necesitamos un lineRadialmétodo que tome una matriz de puntos radiales y produzca la ruta SVG para dibujar. Pero primero necesitamos importar este método a nuestro componente Vue:

<script>
  import { lineRadial } from 'd3-shape';

  export default {
    data() {
      ...
    },
    computed: {
      ...
    }
  }
</script>

Y ahora podemos crear una propiedad calculada para calcular los datos radiales para la ruta SVG:

radialData() {
  const radialLineGenerator = lineRadial();
  return radialLineGenerator(this.radialPoints);
}

¡Hurra! Lo único que queda es dibujar estos datos usando el pathcomponente SVG. Reemplacemos nuestro círculo con él:

<template>
  <svg width="500" height="500">
    <path
      class="radial"
      :d="radialData"
      transform="translate(250, 250)"
      fill="green"
    ></path>
  </svg>
</template>

Usamos transformaquí para mover el centro de la estrella a la 250, 250coordenada para que esté centrado en nuestro fondo SVG. ¡Y ahora tenemos una estrella verde!

SVG estrella

Personalización de la cantidad de rayos de estrellas con Vue

¿Qué pasa si queremos cambiar el número de rayos? Por lo general, D3.js manipula DOM en jQuery-way: necesitaría selectun SVG y cambiar su pathelemento con nuevos datos. ¡Pero con Vue framework, no necesitamos esto! Simplemente podemos cambiar nuestras datapropiedades y Vue se preocupará por el proceso de renderizado automáticamente.

Intentemos cambiar la rayspropiedad:

data() {
  return {
    outerRadius: 200,
    rays: 8
  }
},

…¡y puedes ver que la estrella cambió inmediatamente!

estrella de 8 rayos

¿Podemos hacer que este proceso sea más interactivo ? ¡Por que no! Agreguemos una entrada de rango a nuestro componente Vue justo debajo de la </svg>etiqueta de cierre:

<section>
  <svg width="500" height="500">
    ...
  </svg>
  
    Rays
    
  
</section>

Queremos limitar nuestra estrella para que tenga 4 rayos como mínimo y 60 como máximo. Ahora podemos vincular esta entrada a la propiedad Vue rayscon la v-modeldirectiva:

<input name="rays" type="range" min="4" max="60" v-model="rays" />

¡Eso es todo! Ahora, cuando cambiamos la cantidad de rayos a través inputde , Vue volverá a renderizar la estrella:

Cambio de estrella verde

¿Que sigue?

En el próximo artículo, aprenderemos cómo escalar nuestros datos con D3 y cómo crear nuestras propias escalas. Agregaremos más propiedades a nuestra estrella para que se vea así:

generador de estrellas

Fuente: https://ultimatecourses.com/blog/create-data-visualization-chart-vuejs-d3

#vuejs

What is GEEK

Buddha Community

¡Cree Su Primer Gráfico De Visualización De Datos En VueJS Con D3!

Gonzalo Almanza Segundo

1658208600

¡Cree Su Primer Gráfico De Visualización De Datos En VueJS Con D3!

Intentemos crear una visualización simple para ver cómo funcionan juntas estas herramientas.

¿Qué vamos a construir?

En la primera parte, construiremos una aplicación simple para generar un gráfico en forma de estrella y cambiarlo dinámicamente usando el marco Vue.js.

Cambio de estrella verde

Si solo desea verificar el código fuente, está aquí .

Andamiaje del proyecto

Vamos a utilizar la CLI de Vue para montar nuestro proyecto. Necesitará Vue CLI instalado, si no lo tiene, ejecute:

npm install -g @vue/cli
# OR
yarn global add @vue/cli

Ahora estamos listos para crear una nueva aplicación Vue. Podemos hacerlo ejecutando el siguiente comando en la terminal:

vue create my-d3-app

Se le solicitará la lista de opciones. Por ahora, podemos ir con la Defaultconfiguración.

Ahora puede abrir su aplicación en el editor de código y ejecutar serveel comando en la raíz del proyecto para verlo en el navegador.

Vista predeterminada de la CLI de Vue

Eliminemos todo el contenido components/HelloWorld.vuey cámbiele el nombre a Chart.vue: vamos a colocar nuestro gráfico aquí.

También necesitamos editar nuestro App.vuearchivo para incluir nuestro gráfico allí: elimine el logotipo y cambie el nombre de un componente importado Charttambién:

<!-- App.vue -->

<template>
  <main>
    <Chart />
  </main>
</template>

<script>
  import Chart from './components/Chart.vue';
  export default {
    name: 'app',
    components: {
      Chart,
    },
  };
</script>

Lo único que queda es instalar D3.js como dependencia a través de npm:

npm install d3
# OR
yarn add d3

¡Ahora estamos listos para trabajar en nuestro gráfico!

Comenzando con SVG

Para dibujar nuestra estrella, usaremos un SVG. Entonces, lo primero que debe agregar a nuestra Chartplantilla de componentes es en realidad una <svg>etiqueta con un ancho y una altura de 500 px:

<!-- Chart.vue -->

<template>
  <section>
    <svg width="500" height="500"></svg>
  </section>
</template>

Para probar nuestro SVG, dibujemos un círculo simple allí. Podemos hacerlo con la circleetiqueta con cuatro atributos:

Coordenada X del centro del círculo;
Coordenada Y del centro del círculo;
radio del círculo;
color para llenar el círculo.

<svg width="500" height="500">
  <circle cx="60" cy="60" r="50" fill="red" />
</svg>

Actualmente, nuestro SVG se ve así:

circulo rojo

Pero sigue siendo el SVG puro sin ningún tipo de magia D3. ¡Arreglemos esto transformando nuestro círculo en una figura en forma de estrella!

Algunas matemáticas detrás de la estrella

Estrella con radio interior y exterior

¿Qué pasa con los ángulos? Conectemos el centro del círculo con los bordes de los rayos de estrellas y echemos un vistazo.

Estrella con radios exteriores

Ángulo entre rayos

Estrella con ángulo de puntos interiores

¡Intentemos implementar esto con D3!

Usando el método D3 `lineRadial`para generar la ruta SVG

Primero, definamos nuestro radio exterior y una cantidad de rayos y colóquelos en el componente Vue data:

<!-- Chart.vue -->

<template>
  ...
</template>

<script>
  export default {
    data() {
      return {
        outerRadius: 200,
        rays: 5,
      };
    },
  };
</script>

Vamos a establecer un radio interior para que sea igual al 50% del exterior:

<script>
  export default {
    data() {
      ...
    },
    computed: {
      innerRadius() {
        return this.outerRadius * 0.5
      }
    }
  }
</script>

Ahora vamos a crear una matriz de puntos para dibujar la estrella. Vamos a utilizar el algoritmo descrito en la sección anterior. Primero, especifiquemos el paso de ángulo entre dos puntos vecinos:

computed: {
  innerRadius() {
    return this.outerRadius * 0.5
  },
  radialPoints() {
    const step = 2 * Math.PI / (this.rays * 2)
  }
}

Luego, necesitamos crear una matriz vacía para puntos y un forciclo para llenarla:

radialPoints() {
  const step = 2 * Math.PI / (this.rays * 2)
  const points = [];
  for (let i = 0; i <= this.rays * 2; i++) {
  }
}

radialPoints() {
  const step = 2 * Math.PI / (this.rays * 2)
  const points = [];
  for (let i = 0; i <= this.rays * 2; i++) {
    const currentRadius = i % 2 ? this.innerRadius : this.outerRadius;
  }
}

Luego, podemos enviar una nueva pointa la pointsmatriz y devolver esta matriz desde la propiedad calculada:

radialPoints() {
  const step = 2 * Math.PI / (this.rays * 2)
  const points = [];
  for (let i = 0; i <= this.rays * 2; i++) {
    const currentRadius = i % 2 ? this.innerRadius : this.outerRadius;
    points.push([i * step, currentRadius])
  }
  return points;
}

Como resultado, tendremos esta matriz:

[
  [0,300],
  [0.6283185307179586,150],
  [1.2566370614359172,300],
  [1.8849555921538759,150],
  [2.5132741228718345,300],
  [3.141592653589793,150],
  [3.7699111843077517,300],
  [4.39822971502571,150],
  [5.026548245743669,300],
  [5.654866776461628,150],
  [6.283185307179586,300]
]

donde el primer valor es un ángulo desde el punto cero y el segundo valor es un radio.

En este momento necesitamos un lineRadialmétodo que tome una matriz de puntos radiales y produzca la ruta SVG para dibujar. Pero primero necesitamos importar este método a nuestro componente Vue:

<script>
  import { lineRadial } from 'd3-shape';

  export default {
    data() {
      ...
    },
    computed: {
      ...
    }
  }
</script>

Y ahora podemos crear una propiedad calculada para calcular los datos radiales para la ruta SVG:

radialData() {
  const radialLineGenerator = lineRadial();
  return radialLineGenerator(this.radialPoints);
}

¡Hurra! Lo único que queda es dibujar estos datos usando el pathcomponente SVG. Reemplacemos nuestro círculo con él:

<template>
  <svg width="500" height="500">
    <path
      class="radial"
      :d="radialData"
      transform="translate(250, 250)"
      fill="green"
    ></path>
  </svg>
</template>

Usamos transformaquí para mover el centro de la estrella a la 250, 250coordenada para que esté centrado en nuestro fondo SVG. ¡Y ahora tenemos una estrella verde!

SVG estrella

Personalización de la cantidad de rayos de estrellas con Vue

Intentemos cambiar la rayspropiedad:

data() {
  return {
    outerRadius: 200,
    rays: 8
  }
},

…¡y puedes ver que la estrella cambió inmediatamente!

estrella de 8 rayos

¿Podemos hacer que este proceso sea más interactivo ? ¡Por que no! Agreguemos una entrada de rango a nuestro componente Vue justo debajo de la </svg>etiqueta de cierre:

<section>
  <svg width="500" height="500">
    ...
  </svg>
  
    Rays
    
  
</section>

Queremos limitar nuestra estrella para que tenga 4 rayos como mínimo y 60 como máximo. Ahora podemos vincular esta entrada a la propiedad Vue rayscon la v-modeldirectiva:

<input name="rays" type="range" min="4" max="60" v-model="rays" />

¡Eso es todo! Ahora, cuando cambiamos la cantidad de rayos a través inputde , Vue volverá a renderizar la estrella:

Cambio de estrella verde

¿Que sigue?

En el próximo artículo, aprenderemos cómo escalar nuestros datos con D3 y cómo crear nuestras propias escalas. Agregaremos más propiedades a nuestra estrella para que se vea así:

generador de estrellas

Fuente: https://ultimatecourses.com/blog/create-data-visualization-chart-vuejs-d3

#vuejs

hourly developer

1594024630

Hire Dedicated VueJS Developers

Want to Hire VueJS Developer to develop an amazing app?

Hire Dedicated VueJS Developers on the contract (time/project) basis providing regular reporting about your app. We, at HourlyDeveloper.io, implement the right strategic approach to offer a wide spectrum of vue.js development services to suit your requirements at most competitive prices.

Consult with us:- https://bit.ly/2C5M6cz

#hire dedicated vuejs developers #vuejs developer #vuejs development company #vuejs development services #vuejs development #vuejs developer

joe biden

1617257581

Software de restauración de Exchange para restaurar sin problemas PST en Exchange Server

¿Quiere restaurar los buzones de correo de PST a Exchange Server? Entonces, estás en la página correcta. Aquí, lo guiaremos sobre cómo puede restaurar fácilmente mensajes y otros elementos de PST a MS Exchange Server.

Muchas veces, los usuarios necesitan restaurar los elementos de datos de PST en Exchange Server, pero debido a la falta de disponibilidad de una solución confiable, los usuarios no pueden obtener la solución. Háganos saber primero sobre el archivo PST y MS Exchange Server.

Conozca PST y Exchange Server

PST es un formato de archivo utilizado por MS Outlook, un cliente de correo electrónico de Windows y muy popular entre los usuarios domésticos y comerciales.

Por otro lado, Exchange Server es un poderoso servidor de correo electrónico donde todos los datos se almacenan en un archivo EDB. Los usuarios generalmente guardan la copia de seguridad de los buzones de correo de Exchange en el archivo PST, pero muchas veces, los usuarios deben restaurar los datos del archivo PST en Exchange. Para resolver este problema, estamos aquí con una solución profesional que discutiremos en la siguiente sección de esta publicación.

Un método profesional para restaurar PST a Exchange Server

No le recomendamos que elija una solución al azar para restaurar los datos de PST en Exchange Server. Por lo tanto, al realizar varias investigaciones, estamos aquí con una solución inteligente y conveniente, es decir, Exchange Restore Software. Es demasiado fácil de manejar por todos los usuarios y restaurar cómodamente todos los datos del archivo PST a Exchange Server.

Funciones principales ofrecidas por Exchange Restore Software

El software es demasiado simple de usar y se puede instalar fácilmente en todas las versiones de Windows. Con unos pocos clics, la herramienta puede restaurar los elementos del buzón de Exchange.

No es necesario que MS Outlook restaure los datos PST en Exchange. Todos los correos electrónicos, contactos, notas, calendarios, etc. se restauran desde el archivo PST a Exchange Server.

Todas las versiones de Outlook son compatibles con la herramienta, como Outlook 2019, 2016, 2013, 2010, 2007, etc. La herramienta proporciona varios filtros mediante los cuales se pueden restaurar los datos deseados desde un archivo PST a Exchange Server. El programa se puede instalar en todas las versiones de Windows como Windows 10, 8.1, 8, 7, XP, Vista, etc.

Descargue la versión de demostración del software de restauración de Exchange y analice el funcionamiento del software restaurando los primeros 50 elementos por carpeta.

Líneas finales

No existe una solución manual para restaurar los buzones de correo de Exchange desde el archivo PST. Por lo tanto, hemos explicado una solución fácil e inteligente para restaurar datos de archivos PST en Exchange Server. Simplemente puede usar este software y restaurar todos los datos de PST a Exchange Server.

Más información:- https://www.datavare.com/software/exchange-restore.html

#intercambio de software de restauración #intercambio de restauración #buzón del servidor de intercambio #herramienta de restauración de intercambio

Gonzalo Almanza Segundo

1658207847

Trabajar Con Escalado De Datos En VueJS Y D3

Puedes encontrar la primera parte de este artículo aquí .

Si te saltaste la parte 1, aquí está el código para comenzar 😉

¿Qué vamos a construir?

En este artículo, mejoraremos nuestro ejemplo estrella con el escalado de datos D3. Las funciones de escala son funciones de JavaScript que:

tomar una entrada (generalmente un número, fecha o categoría) y
devolver un valor (como una coordenada, un color, una longitud o un radio).

Por lo general, se usan para transformar (o map) valores de datos en variables visuales (como posición, longitud y color). De esta manera, podemos 'dibujar' rápidamente cualquier conjunto de datos iniciales como SVG.

Entonces, mapearemos nuestras 'visuales' de estrellas a valores de datos específicos. Al final del artículo, nuestra estrella se verá así:

muestra terminada

Radio de estrella de escala

La primera pregunta obvia es: ¿por qué necesitamos escalar el radio? ¿No podemos usar el valor sin escalar, como hicimos con los rayos en el artículo anterior ?

La razón es que queremos limitar el radio exterior de nuestra estrella, mientras que el valor de los datos de entrada puede variar en un amplio rango. D3 calculará la proporción y escalará nuestro radio de estrella proporcionalmente.

Para la primera iteración, digamos que nuestro valor de entrada escalará de 10 a 1000, pero queremos mostrar una estrella con un radio máximo de 250 px. Para realizar el cálculo, vamos a utilizar el método D3 scaleLinear.

scaleLinearconstruye una nueva escala continua con el dominio y el rango especificados. Cada valor de rango y se puede expresar como una función del valor de dominio x: y = mx + b. ( D3Wiki )

Primero, eliminemos nuestro código fijo outerRadiusy datacreemos una nueva computedpropiedad para calcularlo. En su lugar, agregaremos una radiuspropiedad a los datos; servirá como nuestro valor de entrada.

data() {
  return {
    radius: 300,
    rays: 8,
  };
},
computed: {
  outerRadius() {
    return this.radius
  },
  ...
},

Así que, por ahora outerRadiussolo returnslo ponemos en radio. Ahora, ¡agreguémosle algo de escala! Primero, necesitamos importar el scaleLinearmétodo de D3:

import { lineRadial } from 'd3-shape';
import { scaleLinear } from 'd3-scale';

Necesitamos definir una función de escala usando scaleLinearel método y luego debemos llamar a esta función con nuestra entrada radiuscomo parámetro:

computed: {
  outerRadius() {
    const scale = scaleLinear()
      .domain([10, 1000])
      .range([5, 250]);

    return this.radius
  },
  ...
},

¿Que esta pasando aqui? Proporcionamos un domaina scaleLinear, y es el rango en el que cambiará nuestro valor de entrada. En cuanto a range, es lo que tenemos como output: esperamos outerRadiusque cambie en el rango entre 5px y 250px.

Ahora podemos pasar radiusa la scalefunción:

computed: {
  outerRadius() {
  const scale = scaleLinear()
    .domain([10, 1000])
    .range([5, 250]);

  return scale(this.radius)
  },
  ...
},

Como resultado, tendremos algo como esto:

Estrella con radio escalado

Prueba a cambiar la radiuspropiedad a 500 o 1000, y verás como la estrella crece de tamaño.

Ahora, de manera similar a los rayos, agreguemos una entrada para cambiar el radio de la estrella dinámicamente. En nuestro template, agreguemos

<div class="range-input">
  <label for="radius">Radius</label>
</div>

De esta manera, hemos vinculado nuestra radiuspropiedad de datos al valor del campo de entrada.

Gif de radio de escala

Estilo de la aplicación

Ahora podemos cambiar el radio de la estrella y la cantidad de rayos, pero aún conserva este color verde apagado. ¿Y si podemos mejorarlo? Si nuestra estrella fuera una estrella real, cambiaría de color proporcionalmente a su temperatura , de rojo a azul. ¿Podemos crear una escala que haga lo mismo? Con D3, la respuesta es obvia 😊.

Pero antes de comenzar a trabajar en ello, diseñemos un poco nuestra aplicación. Primero, muevamos los controles deslizantes al lado derecho de nuestra imagen. Para hacerlo, necesitamos cambiar la plantilla ligeramente:

<template>
  <section class="wrapper">
    <svg width="500" height="500">
      <path
        class="radial"
        :d="radialData"
        transform="translate(250, 250)"
        fill="green"></path>
    </svg>
    <aside>
      <div class="range-input">
        <label for="radius">Radius</label>
      </div>
      <div class="range-input">
        <label for="radius">Radius</label>
      </div>
    </aside>
  </section>
</template>

Y agreguemos algunos estilos a la sección de estilo:

<style lang="scss">
  .wrapper {
    display: flex;
    align-items: center;
  }
  aside {
    padding-left: 20px;

    .range-input {
      display: flex;
      align-items: center;
      margin-bottom: 10px;

      input {
        margin-right: 10px;
      }
    }
  }
</style>

Ahora nuestra aplicación se ve más estructurada:

aplicación con estilo

Además, queremos que nuestra estrella sea más ligera, como… ¡bueno, como estrellas de verdad! Démosle un fondo oscuro con un rectángulo azul profundo y cambiemos el color de la estrella a blanco por ahora.

<svg width="500" height="500">
  <rect width="100%" height="100%" fill="#0e0432" />
  <path
    class="radial"
    :d="radialData"
    transform="translate(250, 250)"
    fill="white"
  ></path>
</svg>

Estrella sobre fondo oscuro

¡Ahora podemos jugar cambiando el color de las estrellas!

Creación de una escala personalizada para el color de la estrella

Si bien D3 tiene interpoladores de color incorporados , queremos construir uno simple. Tomaremos un valor de entrada de 0 a 100 y definiremos un color para las marcas 0, 25, 50, 75 y 100. D3 es lo suficientemente inteligente como para interpolar el color para valores intermedios.

Como primer paso, creemos una nueva datapropiedad heaty establezcamos que sea 5:

data() {
  return {
    radius: 300,
    rays: 8,
    heat: 5,
  };
},

A continuación, creemos una nueva computedpropiedad para el cálculo del color de las estrellas:

starColor() {
  return this.heat
},

Y finalmente estamos listos para crear una nueva escala:

starColor() {
  const myColor = scaleLinear()
    .domain([0, 25, 50, 75, 100])
    .range(['#ff7665', '#ffb469', '#ffe876', '#fff', '#99cdff']);
  return myColor(this.heat);
},

Ahora, tenemos un color de estrella listo para agregar a nuestra propiedad SVG en lugar de un color path fillestático . whiteVamos a crear un enlace dinámico allí:

<path
  class="radial"
  :d="radialData"
  transform="translate(250, 250)"
  :fill="starColor"
></path>

¡Nuestra estrella ha cambiado de color!

Estrella Roja

Intentemos cambiar la heatpropiedad de datos a 90, y una estrella se volverá azul claro. Para que se vea mejor, podemos crear un degradado de blanco al color actual de la estrella:

<svg width="500" height="500">
  <defs>
    <radialGradient id="starGradient">
      <stop offset="2%" stop-color="white" />
      <stop offset="95%" :stop-color="starColor" />
    </radialGradient>
  </defs>
  ...
</svg>

Y ahora podemos llenar nuestra estrella con este degradado en lugar de un color sólido:

<svg width="500" height="500">
  <defs>
    <radialGradient id="starGradient">
      <stop offset="2%" stop-color="white" />
      <stop offset="95%" :stop-color="starColor" />
    </radialGradient>
  </defs>
  <rect width="100%" height="100%" fill="#0e0432" />
  <path
    class="radial"
    :d="radialData"
    transform="translate(250, 250)"
    fill="url(#starGradient)"
  ></path>
</svg>

Ahora nuestra estrella es muy bonita:

estrella de degradado

Y lo último que queda es agregar el mismo control deslizante de entrada que hicimos anteriormente para los rayos y el radio:

<div class="range-input">
  <label for="heat">Heat</label>
</div>

¡Y estamos listos para irnos! Puede encontrar el código final del componente Gráfico aquí .

¿Que sigue?

En la parte 3, ¡vamos a crear no una sola estrella sino toda la constelación! Y visualizaremos un conjunto de datos real de los repositorios de Vue:

constelación vue

Fuente: https://ultimatecourses.com/blog/working-with-data-scaling-in-vuejs-and-d3

#vuejs

Berta Escamilla

1648066680

Visualización de Datos con Svelte y D3

En el mundo de la visualización de datos, muchas personas ahora adoptan un enfoque híbrido para el código que escriben. Usan una biblioteca/marco de interfaz de usuario como React para manejar el estado y la manipulación DOM en un estilo de codificación declarativo y reactivo.

Los desarrolladores usan D3 para el diseño de la visualización, que sigue un estilo de codificación imperativo. Este enfoque híbrido utiliza las fortalezas de ambas bibliotecas para producir un código más mantenible y legible.

¿Por qué usar Svelte?

En los últimos años, ha habido una migración a Svelte para la visualización de datos (visualización de datos): las principales publicaciones ahora usan Svelte para producir sus historias visuales basadas en datos.

The Pudding es una publicación digital que escribe ensayos visuales sobre cultura popular y temas de actualidad, y su último artículo es un gran ejemplo de cómo se utilizan hoy en día la visualización de datos y los gráficos. Observe cómo la historia usa transiciones basadas en desplazamiento para presentar gráficos relacionados con el texto a medida que avanza en la historia, haciéndola más envolvente e informativa.

Russell Goldenberg de The Pudding habló recientemente sobre su transición a Svelte en un episodio del podcast The Changelog :

Creo que he convertido a algunas personas del equipo en Svelte. Simplemente tiene mucho sentido para el tipo de trabajo que hacemos. Lo he encontrado realmente genial para tratar específicamente con la visualización de datos... Y es realmente bueno cuando tenemos muchos niveles diferentes de ingeniería en nuestro equipo. Es el único marco que he encontrado que realmente funciona en todos los niveles, porque es una curva de aprendizaje realmente fácil para comenzar.

Esta migración tiene sentido, ya que Svelte fue creado por un ex editor gráfico de The New York Times, Rich Harris . Una de las razones por las que construyó Svelte fue para facilitar su trabajo diario.

Como resultado, las preocupaciones de visualización de datos fueron consideraciones iniciales al crear el marco, y esto ha llevado a que sea más adecuado para realizar visualizaciones de datos.

Requisitos previos para visualización de datos con Svelte y D3

Esta no es una guía para principiantes de Svelte o D3. Se supone que conoce los conceptos básicos de ambos. Si estás empezando, puedes probar los siguientes recursos:

Si eres nuevo en Svelte, puedes dirigirte al tutorial oficial . Es un tutorial interactivo que cubre toda la amplitud de la sintaxis de Svelte.
Para comenzar con D3, consulte este tutorial de varias partes de Amelia Wattenberger , que está bien escrito y tiene excelentes ayudas visuales para demostrar los conceptos clave de D3.

¿Qué es el código de visualización de datos declarativo frente al imperativo?

El código imperativo es donde escribimos código para cada paso para obtener el resultado deseado, mientras que, con el código declarativo, expresamos el resultado que queremos. Por ejemplo, en nuestro código de visualización de datos, es posible que deseemos crear un SVG y establecer sus dimensiones. Usando D3, esto es lo que hacemos:

//d3-example.js
const width = 800;
const height = 600;

const svg = d3
  .select("#chart")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

En Svelte, escribimos lo siguiente:

<!-- Example.svelte -->
<script>
    const width = 800;
    const height = 600;
</script>

<svg {width} {height}></svg>

Usaremos Svelte para declarar HTML y SVG y vincular datos a él. Para el diseño de los elementos, usaremos D3 dentro de un componente Svelte.

Antes de continuar, es posible que se pregunte por qué usaría Svelte en lugar de React para la visualización de datos. Este es el por qué.

¿Por qué usar Svelte en lugar de React?

Si bien puede lograr las mismas cosas con ambos marcos, son bastante diferentes en filosofía y estilo. Vamos a cubrir las diferencias clave.

En primer lugar, a la hora de visualizar datos en el navegador, es preferible trabajar con elementos SVG, ya que son más expresivos que HTML. Específicamente, deberíamos usar el circleelemento SVG para un círculo en lugar de un divestilo con border-radius: 50%. Debido a que los componentes de Svelte están diseñados para trabajar sobre el marcado, escribe menos código repetitivo cuando trabaja con SVG.

En segundo lugar, React usa un DOM virtual (VDOM), mientras que Svelte usa el DOM. Svelte tiene menos sobrecarga de tiempo de ejecución que React, ya que no guarda instantáneas de estado en la memoria. Debido a que Svelte es un compilador, sabe en el momento de la compilación cómo cambian las cosas en su aplicación en lugar de esperar para hacer el trabajo en tiempo de ejecución. Al manipular conjuntos de datos en el navegador, este ahorro puede marcar una diferencia significativa en el rendimiento.

A continuación, Svelte realiza la sacudida de árboles en tiempo de compilación y solo incluye el código que necesita para ejecutarse en sus paquetes, lo que da como resultado tamaños de paquetes más pequeños. React es una biblioteca completa que incluye como una dependencia de tiempo de ejecución.

Además, las transiciones y las animaciones se usan a menudo en la visualización de datos para mostrar cambios de estado y resaltar las correlaciones entre los datos. Svelte tiene soporte incorporado para transiciones y animaciones desde la versión 3. Con Svelte, si no tiene una transición o animación personalizada en su aplicación, no se incluirá en el código incluido. Con React, es su elección incluir una biblioteca de complementos, como React Transition Group , para hacer esto por usted. Si bien D3 tiene un módulo para transiciones , es preferible dejar que el marco de la interfaz de usuario lo maneje.

Finalmente, Svelte elimina algunas restricciones que puede encontrar con los marcos que construyen componentes sobre JavaScript. Puede escribir JavaScript más idiomático en Svelte, lo que puede facilitar la integración con otras bibliotecas como D3. Como dice Rich Harris:

Como no estamos sujetos a las peculiaridades de JavaScript, podemos diseñar una experiencia de creación de componentes, en lugar de tener que adaptarla a la semántica del lenguaje. Paradójicamente, esto da como resultado un código más idiomático, por ejemplo, el uso de variables de forma natural en lugar de a través de proxies o ganchos, al tiempo que ofrece aplicaciones con un rendimiento significativamente mayor.

Si tiene experiencia con React, podemos mitigar las desventajas a través de una toma de decisiones informada, pero creo que obtener estos beneficios de forma "gratuita" es una razón suficiente para considerar Svelte en su lugar. Es importante comprender las diferencias y limitaciones para tomar la mejor decisión para su proyecto.

Ahora que tenemos una descripción general de por qué podría usar Svelte y D3 juntos, mostremos cómo crear una visualización de datos.

Crear un gráfico de barras con Svelte

Usaré Svelte REPL, el patio de juegos de código básico para Svelte. Comencemos con un ejemplo relativamente simple: un gráfico de barras con código mínimo. Tenga en cuenta que si solo necesita crear un gráfico de barras, existen formas más simples y eficientes de hacerlo ( Charts.css es una solución solo para CSS). D3 brilla cuando desea tener un control total sobre un gráfico o desea crear una visualización de datos personalizada.

Crearé un gráfico de barras horizontales que muestre los diez países más poblados en 2019, como se muestra a continuación. Aquí hay un enlace al ejemplo en Svelte REPL .

Para mantenerlo simple, no agregaré CSS (de ahí la apariencia un tanto aburrida), y haré que el tamaño del gráfico sea fijo.

Usaremos datos de población obtenidos de World Population Prospects de las Naciones Unidas . Pondré los datos de población de 2019 en un archivo separado llamado 2019.js.

// 2019.js
export default [
    { country: "China", population: 1439324 },
    { country: "India", population: 1380004 },
    { country: "United States of America", population: 331003 },
    { country: "Indonesia", population: 273524 },
    { country: "Pakistan", population: 220892 },
    { country: "Brazil", population: 212559 },
    { country: "Nigeria", population: 206140 },
    { country: "Bangladesh", population: 164689 },
    { country: "Russian Federation", population: 145934 },
    { country: "Mexico", population: 128933 },
]

Crearemos un BarChartcomponente que mostrará estos datos como un gráfico de barras horizontales.

`App.svelte`

En App.svelte, usamos nuestro BarChartcomponente y pasamos nuestros datos como apoyo. Usamos la abreviatura Svelte para el dataaccesorio. Si el nombre de una propiedad y el nombre del valor son iguales, puede escribir la propiedad como {data}en lugar de data={data}.

<script>
  import data from "./2019.js";
  import BarChart from "./BarChart.svelte";
</script>

<BarChart {data} />

`BarChart.svelte`

Queremos crear un BarChartcomponente que tenga un dataaccesorio.

<script>
  import { scaleBand, scaleLinear } from "d3-scale";

  export let data;

  const width = 800;
  const height = 600;

  const margin = { top: 20, right: 20, bottom: 20, left: 180 };
  const innerHeight = height - margin.top - margin.bottom;
  const innerWidth = width - margin.left - margin.right;

  $: xDomain = data.map((d) => d.country);
  $: yDomain = data.map((d) => +d.population);

  $: yScale = scaleBand().domain(xDomain).range([0, innerHeight]).padding(0.1);
  $: xScale = scaleLinear()
    .domain([0, Math.max.apply(null, yDomain)])
    .range([0, innerWidth]);
</script>

<svg {width} {height}>
  <g transform={`translate(${margin.left},${margin.top})`}>
    {#each xScale.ticks() as tickValue}
      <g transform={`translate(${xScale(tickValue)},0)`}>
        <line y2={innerHeight} stroke="black" />
        <text text-anchor="middle" dy=".71em" y={innerHeight + 3}>
          {tickValue}
        </text>
      </g>
    {/each}
    {#each data as d}
      <text
        text-anchor="end"
        x="-3"
        dy=".32em"
        y={yScale(d.country) + yScale.bandwidth() / 2}
      >
        {d.country}
      </text>
      <rect
        x="0"
        y={yScale(d.country)}
        width={xScale(d.population)}
        height={yScale.bandwidth()}
      />
    {/each}
  </g>
</svg>

D3 tiene un diseño modular, por lo que solo necesita incluir los módulos que necesita: ¡ahorre a su usuario los kilobytes adicionales de JavaScript! En nuestro caso, necesitamos el módulo de escala d3 (escalas en la figura a continuación) para asignar nuestros valores de datos a píxeles para las escalas y barras de nuestro gráfico de barras.

Gráfico de burbujas de los módulos D3 (fuente: https://wattenberger.com/blog/d3 )

Puede importar y utilizar el módulo D3 mediante la sintaxis estándar de ESM . Aquí, Svelte REPL descarga el módulo por mí. Si desea incluirlo en su proyecto, puede descargarlo utilizando su administrador de paquetes preferido, como npm.

A continuación, declaramos nuestra dataprop. En Svelte, los accesorios se declaran con la exportpalabra clave, seguida de la declaración de la variable. Al omitir un valor predeterminado, estamos forzando la provisión de la prop. ¡Queremos datos! 😀

exportar datos de alquiler;

Luego, escriba un código para establecer las variables para las dimensiones y cree nuestras propias funciones de escala para facilitar el mapeo de nuestros valores de datos a las posiciones. Tenga en cuenta que este código es el mismo que el código D3 regular, pero con una excepción: para algunas de nuestras variables, las antecedemos con un signo de dólar para decirle al compilador Svelte que estas declaraciones son reactivas.

Cada vez que se pasa un nuevo valor a la datapropiedad, queremos que nuestras barras y ejes se vuelvan a calcular y, al marcar estas declaraciones como reactivas, se volverán a evaluar cuando cambie cualquiera de las variables dependientes.

Ahora, creamos nuestro SVG a mano. Declaramos cada elemento SVG que necesitamos y usamos nuestras funciones de escala dentro de las propiedades de nuestros elementos SVG para establecer la posición y las dimensiones donde sea necesario. Usamos un eachbloque para iterar a través de nuestra datamatriz para crear las marcas para el eje Y y los rectángulos para cada barra.

En menos de 50 líneas de código, obtiene un componente de gráfico de barras reutilizable y legible. Por supuesto, se puede mejorar y diseñar, ¡pero eso se lo dejo a usted!

Comparación de la implementación de Svelte y D3 con otras implementaciones

Si tiene curiosidad y desea comparar el código en paralelo, puede encontrar ejemplos en vivo aquí:

Ajuste de visualización para diferentes tamaños de pantalla

Deberá ajustar el tamaño de su visualización para aprovechar al máximo el espacio disponible en la pantalla. Si su visualización de datos se basa en SVG, por lo general puede evitar tener que cambiar el tamaño de las cosas explícitamente, dado que SVG es inherentemente escalable. Con la API de Canvas , debe cambiar el tamaño (redibujar) explícitamente los elementos.

Para volver a nuestro ejemplo anterior, hay un ancho máximo y mínimo que nos gustaría que tuviera el gráfico de barras. Es posible que queramos que se amplíe en pantallas más grandes, pero no querríamos que se encogiera para pantallas móviles, ya que estará demasiado aplastado.

Sería preferible darle al gráfico de barras un ancho mínimo y hacer que se pueda desplazar horizontalmente si no cabe completamente en la pantalla, como se muestra en la siguiente captura de pantalla.

Este es el ejemplo ajustado que permite que el gráfico de barras varíe en ancho de 600pxa 1200px:

<!-- App.svelte -->
<script>
  import data from "./2019.js";
  import BarChart from "./BarChart.svelte";
</script>

<div class="container">
  <BarChart {data} />
</div>

<style>
   :global(.chart) {
      width: 100%;
      min-width: 600px;
      max-width: 1200px;
    }

  .container {
    overflow-x: auto;
  }
</style>

Establecemos width, min-widthy max-widthen el BarChartcomponente con un estilo global en la chartclase. Envolvemos BarChartun contenedor div, que establecemos overflow-x:autoque agregará una barra de desplazamiento horizontal solo cuando sea necesario (cuando el ancho de la pantalla sea inferior a 600 px).

Solo una nota sobre la altura del SVG: en este caso, heightse fija en 600px, lo que funciona bien porque queremos que el eje X siempre esté visible. La altura es fija porque configuramos el heightatributo en el SVG y no configuramos ninguna propiedad relacionada con la altura en CSS.

Si desea que el SVG se escale según una relación de aspecto, puede usar los atributos viewBoxy . preserveAspectRatioCuando hay un viewBox, preserveAspectRatiodescribe cómo se debe escalar el SVG si la relación de aspecto del viewBoxno coincide con la relación de aspecto de la ventana gráfica.

La mayoría de las veces, el comportamiento predeterminado funciona bastante bien: la imagen se escala hasta que se ajusta tanto al alto como al ancho, y se centra dentro de cualquier espacio adicional. Este es el valor predeterminado si omite el atributo por completo.

<!-- BarChart.svelte -->
<script>
  import { scaleBand, scaleLinear } from "d3-scale";

 //same code as before
</script>

<svg viewBox={`0 0 ${width} ${height}`}>
  <!--code omitted for brevity-->
</svg>

Si usa viewBoxsolo como se indicó anteriormente, se reduce para que pueda ver más del gráfico de barras:

La mayoría de las veces, viewBoxofrece un resultado preferible de forma predeterminada. Recomiendo leer este artículo para aprender más sobre este tema.

Si desea cambiar el tamaño de los elementos de una visualización en función de las dimensiones de un elemento en particular, Svelte proporciona algunos enlaces de dimensión incorporados convenientes. Los siguientes enlaces están disponibles para cada elemento de nivel de bloque: clientWidth, clientHeight, offsetWidthy offsetHeight.

Estos enlaces son de solo lectura, por lo que solo los usaría como entradas dentro de otras declaraciones. Estas son operaciones costosas, así que no las use con demasiada frecuencia.

Agregar transiciones en Svelte

Una transición se desencadena cuando un elemento entra o sale del DOM debido a un cambio de estado.

Svelte proporciona siete funciones de transición : fade, blur, fly, slide, scale, drawy crossfade. Para usar cualquiera de estas funciones, debe importarlas desde el svelte/transitionmódulo y puede agregarlas a un elemento a través de la transitiondirectiva. La sintaxis es transition:fn={params}y los parámetros son opcionales.

<p transition:fade>Fades in and out</p>

Pase los parámetros en un objeto con las propiedades opcionales: duration, easingy delay.

Veamos un ejemplo rápido de un gráfico de líneas. Digamos que queremos usar la drawtransición para dibujar la línea en dos segundos.

Necesitamos agregar transition:draw={{duration: 2000}}al pathelemento.

<script>
   import { draw } from 'svelte/transition';

   // props
   export let data;
   export let show;

  //other code
</script>

<svg viewBox="0 0 100 100">
   {#if (show)}
    <path transition:draw={{duration: 2000}} d={pathLine(data)} />
   {/if}
</svg>

Aquí está el ejemplo completo.

Las transiciones son reversibles: si activa la casilla de verificación mientras la transición está en curso, se realiza la transición desde el punto actual en lugar del principio o el final.

De forma predeterminada, la transición no se reproducirá en el primer renderizado. Por lo tanto, si elimina el ifbloque en este ejemplo, no verá una transición cuando se cargue la página. Puede cambiar este comportamiento configurando la opción introde inicialización truecuando crea un componente , como se muestra a continuación.

//main.js
import App from "./App.svelte";

const app = new App({
  target: document.getElementById("app"),
  intro: true,
});

export default app;

Con la visualización de datos, usted controla cuándo se agrega un elemento a través de la indirectiva y cuándo se elimina un elemento a través de la outdirectiva. Por lo tanto, puede crear transiciones más matizadas.

Este es un ejemplo del uso de las transiciones para desplazar las barras en el gráfico de barras cuando cambia el conjunto de datos. Al agregar el atributo out:slide="{{duration: 1000}}"al rectelemento, obtenemos el siguiente efecto:

Muy bien, ¿eh?

Puede hacer mucho más e incluso crear sus propias transiciones personalizadas .

Ejemplos avanzados de visualización de datos con Svelte y D3

Encuentro que aprendo más explorando ejemplos completos. ¡Usted también puede preferir hincar el diente directamente en ejemplos más sustanciosos!

Amelia Wattenberger ha compartido algunas recetas de visualización de datos Svelte , que en su mayoría son ejemplos completos, y tienen un buen tamaño. Este es un excelente ejemplo de un gráfico en espiral que muestra la tendencia de los casos de covid a lo largo del tiempo para diferentes países.

Amelia también apareció recientemente en un episodio de Frontend Horse , donde creó un gráfico utilizando datos de superhéroes para el sitio web de la agencia de relaciones públicas Supervillain de Alex Trost.

Además, Matthias Stahl tiene una charla informativa sobre Svelte y D3, donde muestra lo que hace que Svelte y D3 sean tan buenos para la visualización de datos. Tiene algunos ejemplos avanzados que presenta en la charla, que incluyen:

Firmas humanas ( código ): basada en un estudio exhaustivo de los datos de temperatura corporal humana que abarcan los últimos 150 años, esta visualización muestra el perfil de la temperatura corporal promedio para una selección de hombres y mujeres. Puede hacer clic en los cuerpos para ver sus temperaturas como un gráfico de líneas a lo largo de su vida útil.

Mortalidad infantil ( código ): esta visualización muestra cómo están disminuyendo las tasas de mortalidad de los niños de 5 años o menos. Muestra las tasas de mortalidad de cada país durante los últimos 20 años en patrones concéntricos repetidos de círculos intercalados, mostrando la magnitud de los valores para los diferentes años. Puede pasar el cursor sobre los segmentos para resaltar los datos de un país específico. Matthias usa canvaspara los aspectos de la visualización que requieren más datos y SVG para los gráficos adjuntos más pequeños. Es un buen ejemplo de cómo optimizar una visualización de datos más compleja.

Conclusión

Espero haber mostrado las ventajas de usar Svelte y D3 juntos para la visualización de datos. Conduce a más código declarativo y código en componentes al que los desarrolladores se han acostumbrado, pero sin sacrificar el rendimiento.

He brindado una introducción sólida aquí y proporcioné más ejemplos para ayudarlo en el camino hacia la creación de visualizaciones de datos personalizadas más complejas. ¡Diviértete y embellece algunos datos! 🌈📊

Fuente: https://blog.logrocket.com/data-visualization-svelte-d3/

#svelte #d3

¡Cree Su Primer Gráfico De Visualización De Datos En VueJS Con D3!

¿Qué vamos a construir?

Andamiaje del proyecto

Comenzando con SVG

Algunas matemáticas detrás de la estrella

Usando el método D3 lineRadialpara generar la ruta SVG

Personalización de la cantidad de rayos de estrellas con Vue

¿Que sigue?

What is GEEK

Buddha Community

¡Cree Su Primer Gráfico De Visualización De Datos En VueJS Con D3!

¿Qué vamos a construir?

Andamiaje del proyecto

Comenzando con SVG

Algunas matemáticas detrás de la estrella

Usando el método D3 lineRadialpara generar la ruta SVG

Personalización de la cantidad de rayos de estrellas con Vue

¿Que sigue?

Hire Dedicated VueJS Developers

Software de restauración de Exchange para restaurar sin problemas PST en Exchange Server

Conozca PST y Exchange Server

Un método profesional para restaurar PST a Exchange Server

Funciones principales ofrecidas por Exchange Restore Software

Líneas finales

Trabajar Con Escalado De Datos En VueJS Y D3

¿Qué vamos a construir?

Radio de estrella de escala

Estilo de la aplicación

Creación de una escala personalizada para el color de la estrella

¿Que sigue?

Visualización de Datos con Svelte y D3

¿Por qué usar Svelte?

Requisitos previos para visualización de datos con Svelte y D3

¿Qué es el código de visualización de datos declarativo frente al imperativo?

¿Por qué usar Svelte en lugar de React?

Crear un gráfico de barras con Svelte

App.svelte

BarChart.svelte

Comparación de la implementación de Svelte y D3 con otras implementaciones

Ajuste de visualización para diferentes tamaños de pantalla

Agregar transiciones en Svelte

Ejemplos avanzados de visualización de datos con Svelte y D3

Conclusión

Usando el método D3 `lineRadial`para generar la ruta SVG

Usando el método D3 `lineRadial`para generar la ruta SVG

`App.svelte`

`BarChart.svelte`