Kvadrantni diagram
Kvadrantni diagram je vizualizacijski diagram, ki podatke razdeli na štiri kvadrante. Uporablja se za risanje podatkovnih točk na dvodimenzionalni mreži, pri čemer ena spremenljivka predstavlja os x, druga pa os y. Razdelitev kvadrantov se določi tako, da se diagram razdeli na štiri enake dele glede na nabor meril, značilnih za analizirane podatke. Kvadrantni diagram se običajno uporablja za prepoznavanje vzorcev in trendov v podatkih ter za določanje prednostnega vrstnega reda dejanj glede na položaj podatkovnih točk v diagramu. Običajno se uporablja v scenarijih, kot so poslovanje, trženje in upravljanje tveganj.
Primer
Kopiraj
Vdelava
quadrantChart
title Reach and engagement of campaigns
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
quadrant-1 We should expand
quadrant-2 Need to promote
quadrant-3 Re-evaluate
quadrant-4 May be improved
Campaign A: [0.3, 0.6]
Campaign B: [0.45, 0.23]
Campaign C: [0.57, 0.69]
Campaign D: [0.78, 0.34]
Campaign E: [0.40, 0.34]
Campaign F: [0.35, 0.78]
Sintaksa
Če v diagramu ni razpoložljivih podatkovnih točk, se besedilo osi in imena kvadrantov upodobijo na sredini ustreznega kvadranta. Če so podatkovne točke prisotne, se oznake osi x upodobijo z leve strani ustreznega kvadranta, besedilo kvadranta pa je prikazano na dnu diagrama. Oznake osi y se upodobijo na dnu ustreznega kvadranta, besedilo kvadranta pa na vrhu ustreznega kvadranta.
Za koordinatne vrednosti podatkovnih točk je najmanjša vrednost 0, največja pa 1.
Naslov
Naslov je kratek opis diagrama in se vedno upodobi na vrhu diagrama.
Primer
Kopiraj
Vdelava
quadrantChart
title This is a sample example
x-axis
Os x določa besedilo, prikazano na osi x. Os x je razdeljena na dva dela, 'levi' in 'desni'; vnesete lahko oba ali samo 'levega'. Stavek se mora začeti z x-axis, nato left axis text, sledi ločilo --> in na koncu right axis text.
Primer
1. x-axis --> upodobita se tako besedilo leve kot desne osi.
2. x-axis upodobi le besedilo leve osi.
y-axis
Os y določa besedilo, prikazano na osi y. Os y je razdeljena na dva dela, 'zgornji' in 'spodnji'; vnesete lahko oba ali samo 'spodnjega'. Stavek se mora začeti z y-axis, nato bottom axis text, sledi ločilo --> in na koncu top axis text.
Primer
1. y-axis --> upodobita se tako besedilo spodnje kot zgornje osi.
2. y-axis upodobi le besedilo spodnje osi.
Besedilo kvadranta
quadrant-[1,2,3,4] določa vsebino besedila, prikazanega v posameznem kvadrantu.
Primer
1. quadrant-1 določa besedilo, ki bo prikazano v zgornjem desnem kvadrantu
2. quadrant-2 določa besedilo, ki bo prikazano v zgornjem levem kvadrantu.
3. quadrant-3 določa besedilo, ki bo prikazano v spodnjem levem kvadrantu.
4. quadrant-4 določa besedilo, ki bo prikazano v spodnjem desnem kvadrantu.
Pika
Uporablja se za risanje kroga znotraj kvadrantnega diagrama. Sintaksa je : [x, y], pri čemer je obseg vrednosti x in y od 0 do 1.
Primer
1. Point 1: [0.75, 0.80], pika 1 bo narisana v zgornjem desnem kvadrantu.
2. Point 2: [0.35, 0.24], pika 2 bo narisana v spodnjem levem kvadrantu.
Konfiguracija diagrama
| Parameter | Opis | Privzeta vrednost |
|---|---|---|
| chartWidth | Širina diagrama | 500 |
| chartHeight | Višina diagrama | 500 |
| titlePadding | Zgornji in spodnji notranji odmik naslova | 10 |
| titleFontSize | Velikost pisave naslova | 20 |
| quadrantPadding | Obloga zunaj vseh kvadrantov | 5 |
| quadrantTextTopPadding | Zgornji odmik besedila kvadranta, ko je besedilo narisano na vrhu (ne na podatkovni točki) | 5 |
| quadrantLabelFontSize | Velikost pisave besedila kvadranta | 16 |
| quadrantInternalBorderStrokeWidth | Širina notranjega roba kvadranta | 1 |
| quadrantExternalBorderStrokeWidth | Širina obrobe zunanjega roba kvadranta | 2 |
| xAxisLabelPadding | Zgornji in spodnji notranji odmik besedila osi x | 5 |
| xAxisLabelFontSize | Velikost pisave besedila osi x | 16 |
| xAxisPosition | Položaj osi x (zgoraj, spodaj). Če so podatkovne točke prisotne, se os x vedno upodobi na dnu | top |
| yAxisLabelPadding | Levi in desni notranji odmik besedila osi y | 5 |
| yAxisLabelFontSize | Velikost pisave besedila osi y | 16 |
| yAxisPosition | Položaj osi y (levo, desno) | left |
| pointTextPadding | Razmik med podatkovno točko in besedilom pod njo | 5 |
| pointLabelFontSize | Velikost pisave besedila podatkovne točke | 12 |
| pointRadius | Polmer podatkovne točke | 5 |
Spremenljivke teme diagrama
| Parameter | Opis |
|---|---|
| quadrant1Fill | Barva polnila zgornjega desnega kvadranta |
| quadrant2Fill | Barva polnila zgornjega levega kvadranta |
| quadrant3Fill | Barva polnila spodnjega levega kvadranta |
| quadrant4Fill | Barva polnila spodnjega desnega kvadranta |
| quadrant1TextFill | Barva besedila zgornjega desnega kvadranta |
| quadrant2TextFill | Barva besedila zgornjega levega kvadranta |
| quadrant3TextFill | Barva besedila spodnjega levega kvadranta |
| quadrant4TextFill | Barva besedila spodnjega desnega kvadranta |
| quadrantPointFill | Barva polnila podatkovne točke |
| quadrantPointTextFill | Barva besedila podatkovne točke |
| quadrantXAxisTextFill | Barva besedila osi x |
| quadrantYAxisTextFill | Barva besedila osi y |
| quadrantInternalBorderStrokeFill | Barva notranjega roba kvadranta |
| quadrantExternalBorderStrokeFill | Barva zunanjega roba kvadranta |
| quadrantTitleFill | Barva naslova |
Primer konfiguracije in teme
Kopiraj
Vdelava
---
config:
quadrantChart:
chartWidth: 400
chartHeight: 400
themeVariables:
quadrant1TextFill: "ff0000"
---
quadrantChart
x-axis Urgent --> Not Urgent
y-axis Not Important --> "Important ❤"
quadrant-1 Plan
quadrant-2 Do
quadrant-3 Delegate
quadrant-4 Delete
Slog podatkovne točke
Podatkovne točke je mogoče oblikovati neposredno ali z uporabo že definiranih skupnih razredov
Neposredni slog
Kopiraj
Vdelava
Point A: [0.9, 0.0] radius: 12
Point B: [0.8, 0.1] color: #ff3300, radius: 10
Point C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0
Point D: [0.6, 0.3] radius: 15, stroke-color: #00ff0f, stroke-width: 5px ,color: #ff33f0
Slog razreda
Kopiraj
Vdelava
Point A:::class1: [0.9, 0.0]
Point B:::class2: [0.8, 0.1]
Point C:::class3: [0.7, 0.2]
Point D:::class3: [0.7, 0.2]
classDef class1 color: #109060
classDef class2 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10px
classDef class3 color: #f00fff, radius : 10
Razpoložljivi slogi:
| Parameter | Opis |
|---|---|
| color | Barva polnila podatkovne točke |
| radius | Polmer podatkovne točke |
| stroke-width | Širina roba podatkovne točke |
| stroke-color | Barva roba podatkovne točke (neveljavna, kadar stroke-width ni določen) |
Prednostni vrstni red: 1. Neposredni slog 2. Slog razreda 3. Slog teme
Primer sloga
Kopiraj
Vdelava
quadrantChart
title Reach and engagement of campaigns
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
quadrant-1 We should expand
quadrant-2 Need to promote
quadrant-3 Re-evaluate
quadrant-4 May be improved
Campaign A: [0.9, 0.0] radius: 12
Campaign B:::class1: [0.8, 0.1] color: #ff3300, radius: 10
Campaign C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0
Campaign D: [0.6, 0.3] radius: 15, stroke-color: #00ff0f, stroke-width: 5px ,color: #ff33f0
Campaign E:::class2: [0.5, 0.4]
Campaign F:::class3: [0.4, 0.5] color: #0000ff
classDef class1 color: #109060
classDef class2 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10px
classDef class3 color: #f00fff, radius : 10
