Création d’une carte polaire pour mesurer l’intensité du champ électromagnétique

Les graphiques polaires JavaScript, également appelés graphiques radar, sont un type de visualisation de données qui affiche des données multivariées dans un format circulaire.

Ces graphiques sont souvent utilisés pour représenter des ensembles de données multivariées d’une manière qui permet une comparaison facile entre les points de données et une identification rapide des tendances et des modèles.

L’utilisation de graphiques polaires dans JavaScript a gagné en popularité en raison de leur polyvalence et de leur capacité à afficher des données complexes dans un format facilement assimilable.

Au sein d’un graphique polaire, nous pouvons utiliser deux types de données :

1. La coordonnée radiale (distance entre les pôles).
2. La coordonnée angulaire (angle obtenu à partir d’un point fixe).

Dans cet article, je vais vous expliquer de plus près comment créer un diagramme polaire JavaScript pour mesurer l’intensité du champ électromagnétique et nous utiliserons les valeurs des angles et l’amplitude du spectre à partir de l’angle.

Que vous soyez un analyste de données, un développeur ou simplement quelqu’un qui cherche à créer sa propre application JS, vous êtes sûr de trouver ce didacticiel informatif et utile.

Configuration de notre modèle

1. Pour commencer, veuillez télécharger le modèle de projet.

2. Ouvrez le projet dans Visual Studio Code. Vous verrez une arborescence de fichiers comme celle-ci :

3. Maintenant, ouvrez un nouveau terminal et, comme d’habitude, dans les projets NodeJS, vous devrez exécuter le NPM Install commande.

Ce serait tout pour notre configuration initiale. Codons.

GRAPHIQUE.ts

Ce fichier contient tous les algorithmes et processus nécessaires pour construire notre carte polaire, configurer ses animations et organiser les données dans un format facilement interprétable. Pour commencer:

1. Importez le fichier de données JSON. Toutes les données seront encapsulées dans le dataJson objet:

import dataJson from './data.json'

2. Déclarez la constante lcjs qui fera référence à notre @arction/lcjs bibliothèque:

// Import LightningChartJS
const lcjs = require('@arction/lcjs')

3. Extraire les classes requises de lcjs:

const {
    lightningChart,
    Themes
} = lcjs

4. Création de l’objet graphique. L’objet graphique entier sera créé à l’intérieur du [app] objet. Le [app] La méthode aura besoin d’un objet de données. Nous avons déjà l’objet de données (dataJson):

const app = (data) => {
    // Create a polar chart.
    const polar = lightningChart().Polar({
        theme: Themes.darkGold,
    })
        .setTitle('Electromagnetic field strength')

Vous trouverez ci-dessous une ventilation du code :

• setTitle: étiquette de texte qui sera affichée comme titre du graphique.
• Polar: Le type de carte polaire existe déjà dans la bibliothèque LC, et nous avons juste besoin de spécifier le type comme propriété du lcjs classe.
• Theme: Une collection d’implémentations par défaut est accessible par thèmes. Le jeu de couleurs des composants doit être défini au moment de la création et ne peut pas être modifié après coup sans d’abord détruire le composant et le recréer avec le thème de couleur souhaité.

5. Configuration des axes :

const radialAxis = polar.getRadialAxis()
    .setTitle('Radial Degrees')

    const amplitudeAxis = polar.getAmplitudeAxis()
        .setTitle('Field strength H (A/m)')

• getRadialAxis: On peut accéder à l’axe radial de la carte polaire (degrés), en utilisant la [getRadialAxis] fonction. Dans ce cas, nous pouvons définir le titre de l’axe, comme indiqué :

Note: Si vous ne spécifiez pas de titre pour chaque axe, les titres « Degrés » et « Amplitude » apparaîtront par défaut.

6. Créez une série pour chaque ensemble de données. Dans cette fonction, nous allons créer une série pour chaque membre du fichier JSON :

const series = data.map(( info ) => {
        const { name } = info
        const polarAreaSeries = polar.addAreaSeries()
            .setName( name )
            .setConnectDataAutomaticallyEnabled(true)
            .setMouseInteractions(false)
            .setCursorResultTableFormatter((builder, series, angleDeg, amplitude, format) => builder
                .addRow(`${series.getName()}`)
                .addRow('Angle', '', `${Math.round(angleDeg)} °`)
                .addRow('Field strength', '', `${format(amplitude)} A/m`)
            )

        return polarAreaSeries
    })

• setConnectionDataAutomaticallyEnabled: Active ou non la connexion automatique du premier et du dernier point de données.
• setMouseInteractions: Définissez les interactions de la souris des composants activées ou désactivées. La désactivation des interactions avec la souris signifie que les objets situés sous ce composant peuvent interagir avec lui.
• setCursorResultTableFormatter: Configurer le formatage du curseur ResultTable en pointant sur cette série. La syntaxe générale de la configuration ResultTable la mise en forme est partagée entre tous les types de séries. Vous devez spécifier une fonction de rappel qui reçoit un TableContentBuilder. Le contenu de la table est ensuite défini à l’aide des méthodes du générateur de table.

Les valeurs supplémentaires fournies à la fonction de rappel varient selon les différents types de graphique. Toutes les séries polaires reçoivent trois paramètres supplémentaires :

1. series: référence à la série elle-même.
2. angleDeg: angle pointu du point de données en degrés.
3. amplitude: amplitude du point de données pointé.

7. Animez les données de la série avec des statiques aléatoires pour simuler des données de capteur en direct :

let freezeData = false
    const updateData = () => {
        if (! freezeData)
            series.forEach((series, i) => {
                const polarPoints = data[i].data
                const polarPointsWithStatic = polarPoints.map( polarPoint => ({
                    angle: polarPoint.angle,
                    amplitude: polarPoint.amplitude + (Math.random() * 2 - 1) * 0.2
                }))
                series.setData(polarPointsWithStatic)
            })

        requestAnimationFrame(updateData)
    }
    updateData()

8. Figez l’animation des données lorsque la souris est sur le graphique :

polar.onSeriesBackgroundMouseEnter(() => {
        freezeData = true
    })
    polar.onSeriesBackgroundMouseLeave(() => {
        freezeData = false
    })

9. Exécutez l’intégralité du processus d’application en ajoutant les données JSON en tant que paramètre :

MNP DÉBUT

Pour visualiser l’application Carte, exécutez npmstart dans le terminal pour visualiser le graphique dans un serveur local.

Derniers mots

En conclusion, les graphiques polaires JavaScript peuvent être un outil extrêmement précieux pour quiconque cherche à représenter et à analyser des ensembles de données complexes. Les cartes polaires offrent un moyen unique et intuitif de comprendre et de comparer des points de données.

Pour tirer le meilleur parti de votre carte polaire, il est important de choisir les bonnes données à afficher, de formater les données de manière appropriée et d’utiliser les bons outils et bibliothèques pour créer et personnaliser votre carte.

Pour créer un graphique polaire qui communique efficacement vos données, envisagez d’utiliser une bibliothèque de visualisation hautes performances.

L’avantage d’utiliser une bibliothèque de graphiques hautes performances est le large éventail d’options de personnalisation qui peuvent être utilisées pour créer des graphiques adaptés à vos besoins spécifiques.

Si vous avez besoin d’aide avec votre code, laissez un commentaire avec vos questions. Assurez-vous d’envoyer des extraits de code ou des captures d’écran et je serai heureux de vous aider.

Rendez-vous dans le prochain article !