logo

Jak vytvořit chybové grafy (JS):Vnímání hrozeb COVID-19 v USA stranou

Potřebujete skvělou interaktivní vizualizaci chybového grafu pro svou webovou stránku nebo aplikaci? Dovolte mi být vaším průvodcem! Postupujte podle tohoto návodu a dozvíte se, jak snadno vytvářet skvělé interaktivní grafy chyb pomocí JavaScriptu.

Zde budu vizualizovat data o vnímání hrozeb COVID-19 ve Spojených státech během prvních šesti měsíců pandemie podle politické příslušnosti. Takže budete také moci prozkoumat rozdíly v těchto postojích mezi demokraty a republikány. Data pocházejí z článku „COVID-19 a váhání s vakcínou:Longitudinální studie“ publikovaného v Plos One deník.

Co je graf chyb

Než začnu, rád bych se ujistil, že jsme na stejné stránce, abychom pochopili, co vlastně chybový graf je a jak funguje.

Chybový graf je typ vizualizace dat běžně používaný k zobrazení nejistoty nebo variability dat pomocí takzvaných chybových pruhů. Ten lze přidat nad hlavní graf, aby reprezentoval rozsahy hodnot kromě průměrných (středních) hodnot vykreslených ve formě čar, sloupců, pruhů, oblastí, značek nebo jiných typů řad.

Náhled grafu chyb

Nyní vám dovolte, abych vám ukázal, jak bude konečný graf chyb vypadat, abyste byli všichni ještě nadšenější z toho, jak si ho vytvořit sami!

Budu tedy představovat vnímanou hrozbu COVID-19 mezi americkou populací podle politické příslušnosti v průběhu času, od března do srpna 2020. Přesněji ukážu výsledky longitudinálního průzkumu provedeného Arielem Fridmanem, Rachel Gershonovou a Ayelet Gneezy následujícím způsobem. Průměrné odpovědi demokratů a republikánů, kteří se sami identifikovali, budou zobrazeny ve dvou čárových grafech a chybové úsečky budou představovat 95% intervaly spolehlivosti. V průzkumu byla škála odpovědí od 1 do 7, kde 1 je minimální vnímaná hrozba a 7 je maximum.

Základní tabulka chyb JS ve 4 jednoduchých krocích

Pomocí dobré knihovny grafů v JavaScriptu lze velmi snadno vytvořit graf chyb. Zde budu používat AnyChart, což je flexibilní a snadno použitelný. Má skvělou dokumentaci, spoustu užitečných příkladů a hřiště, kde můžete experimentovat s kódem vizualizace dat sami.

Základní znalost webových technologií je vždy dobré mít. Ale pokud jde o vytváření interaktivních grafů založených na JavaScriptu, jako je tento, vše je docela jednoduché i bez velkého množství takového pozadí.

Proces vytváření grafu chyb JS lze rozdělit do následujících čtyř základních kroků:

  1. Vytvořte stránku HTML.
  2. Zahrnout soubory JavaScript.
  3. Přidejte data.
  4. Napište nějaký kód pro grafy JS.

1. Vytvořte stránku HTML

První věc, kterou udělám, je vytvořit základní HTML stránku, která bude obsahovat můj graf chyb. Tam definuji prvek bloku s atributem id (ať je to „kontejner“). Dále přidám atributy stylu do <head> sekce, kde jsem nastavil šířku a výšku <div> jako 100 %, aby se můj graf vykreslil přes celou stránku. 

<html>
  <head>
    <title>JavaScript Error Chart</title>
    <style type="text/css">      
      html, body, #container { 
        width: 100%; height: 100%; margin: 0; padding: 0; 
      } 
    </style>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>

2. Zahrňte soubory JavaScript

Poté musím zahrnout všechny potřebné skripty. Budu je používat z CDN, ale pokud chcete, můžete si soubory také stáhnout.

Pro graf chyb potřebuji pouze základní modul. Odkazuji na něj v <head> části webové stránky. 

<html>
  <head>
    <title>JavaScript Error Chart</title>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-base.min.js"></script>
    <style type="text/css">      
        html, body, #container { 
          width: 100%; height: 100%; margin: 0; padding: 0; 
        } 
    </style>
  </head>
  <body>  
    <div id="container"></div>
    <script>
      // All the JS error chart code will be here.
    </script>
  </body>
</html>

3. Nastavte data

Existuje několik způsobů, jak načíst data. V tomto případě je množství dat, které chci vizualizovat, docela malé. Takže můžu pokračovat a vložit to přímo do kódu.

Chystám se nakreslit dvě série, pro demokraty a republikány. Takže přidám data takto:

var data1 = anychart.data
  .set([
    ['Mar', 4.26, 0.1, 0.1],
    ['Apr', 4.46, 0.11, 0.11],
    ['May', 4.36, 0.126, 0.126],
    ['June', 4.29, 0.132, 0.132],
    ['July', 4.49, 0.124, 0.124],
    ['Aug', 4.47, 0.124, 0.124]
  ])

var data2 = anychart.data
  .set([
    ['Mar', 3.9, 0.144, 0.144],
    ['Apr', 4.09, 0.172, 0.172],
    ['May', 3.71, 0.196, 0.196],
    ['June', 3.54, 0.198, 0.198],
    ['July', 3.78, 0.196, 0.196],
    ['Aug', 3.7, 0.194, 0.195]
  ])

Nyní, když byla veškerá práce na pozadí vyřešena, přejděme k hlavní části vytváření grafu chyb JavaScriptu. Chce to jen několik řádků kódu.

4. Napište nějaký kód pro grafy JS

Pro začátek přidávám funkci, která uzavře veškerý kód JavaScriptu, aby bylo zajištěno, že stránka je připravena, než cokoliv spustíte. Uvnitř této funkce vytvořím spojnicový graf a opatřím jej nadpisem. 

// create a line chart
var chart = anychart.line();

// add a chart title 
chart.title('Perceived threat of COVID-19 by political affiliation (March–August 2020)');

Dále nastavím data pro obě řady ve formě pole, jak je popsáno v předchozím kroku. A já používám mapAs funkce pro mapování toho, čemu každý prvek mého pole odpovídá. 

// create a dataset (democrats)
var data1 = anychart.data
  .set([
    ['Mar', 4.26, 0.1, 0.1],
    ['Apr', 4.46, 0.11, 0.11],
    ['May', 4.36, 0.126, 0.126],
    ['June', 4.29, 0.132, 0.132],
    ['July', 4.49, 0.124, 0.124],
    ['Aug', 4.47, 0.124, 0.124]
  ])
  // map the data
  .mapAs({
    x: 0,
    value: 1,
    valueLowerError: 2,
    valueUpperError: 3
  });

// create a dataset (republicans)
var data2 = anychart.data
  .set([
    ['Mar', 3.9, 0.144, 0.144],
    ['Apr', 4.09, 0.172, 0.172],
    ['May', 3.71, 0.196, 0.196],
    ['June', 3.54, 0.198, 0.198],
    ['July', 3.78, 0.196, 0.196],
    ['Aug', 3.7, 0.194, 0.195]
  ])
  // map the data
  .mapAs({
    x: 0,
    value: 1,
    valueLowerError: 2,
    valueUpperError: 3
  });

Protože všechny hodnoty dat leží v určitém rozsahu, nakonfiguruji osu Y odpovídajícím způsobem pomocí yScale funkce. 

var yScale = chart.yScale();
yScale.minimum(3.2);
yScale.maximum(4.8);

Nakonec vytvořím řadu čar pro každou datovou sadu, nastavím odkaz na kontejner a nakreslím výslednou chybovou grafiku. 

// create a line series for the first dataset
var series1 = chart.line(data1);

// create a line series for the second dataset
var series2 = chart.line(data2);

// set a container id for the chart
chart.container('container');

// command to draw the chart
chart.draw();

Aha – krásný interaktivní graf chyb je přímo na stránce!

Během prvních měsíců pandemie můžeme jasně vidět rozdíl ve vnímání hrozeb COVID-19 mezi demokraty (horní linie) a republikány (dolní linie) a odpovídající trendy v průběhu času se zdají být značně odlišné.

Jste více než vítáni, když se blíže podíváte na tento počáteční graf chyb založených na JavaScriptu a pohrajete si s jeho kódem na AnyChart Playground nebo CodePen.

Přizpůsobení grafu chyb

Přestože je zde základní tabulka chyb a je připravena plnit svou funkci, vždy je prostor pro zlepšení vzhledu, dojmu a čitelnosti. Knihovna AnyChart JS má spoustu skvělých možností, jak vylepšit graf chyb a učinit jej ještě elegantnějším a informativnějším. Dovolte mi tedy, abych vás provedl několika rychlými kroky přizpůsobení, které byste mohli chtít provést.

  1. Přidejte mřížku a značky os
  2. Změňte barvy
  3. Přidat značky
  4. Vylepšete popisek

CHCETE-LI SE PROHLÍŽET TĚMITO PŘIZPŮSOBENÍMI TABULKY CHYB JS, POKRAČUJTE ČÍST ZDE .