Een coole interactieve foutgrafiekvisualisatie nodig voor uw webpagina of app? Laat mij je gids zijn! Volg deze tutorial en je leert hoe je eenvoudig coole interactieve foutgrafieken maakt met JavaScript.
Hier zal ik gegevens visualiseren over de dreigingspercepties van COVID-19 in de Verenigde Staten tijdens de eerste zes maanden van de pandemie, op basis van politieke overtuiging. U zult dus ook de divergentie in die houding tussen democraten en republikeinen kunnen onderzoeken. De gegevens zijn afkomstig uit het artikel "COVID-19 en aarzeling van vaccins:een longitudinaal onderzoek", gepubliceerd in de Plos One dagboek.
Wat is een foutentabel
Voordat ik begin, wil ik er zeker van zijn dat we op dezelfde lijn zitten om te begrijpen wat een foutendiagram eigenlijk is en hoe het werkt.
Een foutengrafiek is een type gegevensvisualisatie dat vaak wordt gebruikt om onzekerheid of variabiliteit van gegevens weer te geven met behulp van zogenaamde foutbalken. De laatste kan bovenop de hoofdgrafiek worden toegevoegd om waardebereiken weer te geven naast gemiddelde (gemiddelde) waarden die zijn uitgezet in de vorm van lijnen, kolommen, staven, gebieden, markeringen of andere soorten reeksen.
Voorbeeld van foutgrafiek
Laat me je nu laten zien hoe de uiteindelijke foutenkaart eruit zal zien om jullie allemaal nog enthousiaster te maken om te leren hoe je er zelf een kunt maken!
Dus ik ga de waargenomen dreiging van COVID-19 onder de Amerikaanse bevolking vertegenwoordigen door politieke overtuiging in de tijd, van maart tot augustus 2020. Precies, ik zal de resultaten tonen van het longitudinale onderzoek dat is uitgevoerd door Ariel Fridman, Rachel Gershon en Ayelet Gneezy op de volgende manier. De gemiddelde reacties van zelfbenoemde Democraten en Republikeinen worden weergegeven in twee lijndiagrammen en de foutbalken vertegenwoordigen de 95%-betrouwbaarheidsintervallen. In de enquête was de schaal voor de antwoorden van 1 tot 7, waarbij 1 de minimale waargenomen dreiging is en 7 de maximale.
Basis JS-fouttabel in 4 eenvoudige stappen
Een foutengrafiek is vrij eenvoudig te maken met een goede JavaScript-grafiekbibliotheek. Hier ga ik AnyChart gebruiken, een flexibele en gebruiksvriendelijke. Het heeft geweldige documentatie, veel nuttige voorbeelden en een speeltuin om zelf te experimenteren met de datavisualisatiecode.
Basiskennis van webtechnologieën is altijd goed om te hebben. Maar als het gaat om het maken van interactieve, op JavaScript gebaseerde grafieken zoals deze, is alles vrij eenvoudig, zelfs zonder veel van dergelijke achtergrond.
Het proces van het bouwen van een JS-foutdiagram kan worden opgesplitst in de volgende vier basisstappen:
- Maak een HTML-pagina.
- Voeg JavaScript-bestanden toe.
- Gegevens toevoegen.
- Schrijf wat JS-kaartcode.
1. Maak een HTML-pagina
Het eerste dat ik ga doen, is een eenvoudige HTML-pagina maken om mijn foutgrafiek op te slaan. Daar definieer ik een blokelement met een id-attribuut (laat het "container" zijn). Vervolgens voeg ik de stijlkenmerken toe in de <head> sectie, waar ik de breedte en hoogte van de <div> . instel als 100% zodat mijn grafiek over de hele pagina wordt weergegeven.
<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. JavaScript-bestanden opnemen
Vervolgens moet ik alle benodigde scripts opnemen. Ik ga ze gebruiken van het CDN, maar je kunt de bestanden ook downloaden als je wilt.
Voor een foutgrafiek heb ik alleen de basismodule nodig. Ik verwijs ernaar in de <head> gedeelte van de webpagina.
<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. Stel de gegevens in
Er zijn meerdere manieren om gegevens te laden. In dit geval is de hoeveelheid gegevens die ik wil visualiseren vrij klein. Dus ik kan gewoon doorgaan en het daar in de code plaatsen.
Ik ga twee series plotten, voor Democraten en Republikeinen. Dus ik voeg de gegevens als volgt toe:
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]
])
Nu al het achtergrondwerk is opgelost, gaan we naar het belangrijkste deel van het maken van een JavaScript-foutgrafiek. Nou, er zijn nog maar een paar regels code nodig.
4. Schrijf wat JS-kaartcode
Om te beginnen voeg ik een functie toe die alle JavaScript-grafiekcode omsluit om ervoor te zorgen dat de pagina klaar is voordat er iets wordt uitgevoerd. Binnen deze functie maak ik een lijndiagram en voorzie ik het van een titel.
// 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)');
Vervolgens stel ik de gegevens voor beide series in de vorm van een array in zoals beschreven in de vorige stap. En ik gebruik de mapAs functie om in kaart te brengen waar elk element van mijn array mee overeenkomt.
// 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
});
Omdat alle gegevenswaarden binnen een bereik liggen, configureer ik de Y-as dienovereenkomstig met behulp van de yScale functie.
var yScale = chart.yScale();
yScale.minimum(3.2);
yScale.maximum(4.8);
Ten slotte maak ik een lijnreeks voor elke dataset, stel de containerreferentie in en teken de resulterende foutgrafieken.
// 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 — er staat een mooie interactieve foutenkaart op de pagina!
We kunnen tijdens de eerste maanden van de pandemie duidelijk een verschil zien in de dreigingspercepties van COVID-19 tussen de Democraten (de bovenste regel) en de Republikeinen (de onderste regel), en de bijbehorende trends in de loop van de tijd lijken behoorlijk verschillend te zijn.
U bent van harte welkom om deze eerste op JavaScript gebaseerde foutentabel eens nader te bekijken en te spelen met de code op AnyChart Playground of CodePen.
Aanpassing foutkaart
Hoewel er een basisfoutgrafiek is en klaar is om zijn werk te doen, is er altijd ruimte voor verbetering in het uiterlijk, het gevoel en de leesbaarheid. De AnyChart JS-bibliotheek heeft veel geweldige opties om een foutendiagram te verbeteren en het nog eleganter en informatiever te maken. Dus laat me je door een paar snelle aanpassingsstappen leiden die je misschien wilt nemen.
- Voeg een raster en assen toe
- Verander de kleuren
- Markeringen toevoegen
- De knopinfo verbeteren
GA DOOR MET HET LEZEN VAN DEZE JS FOUTENKAART AANPASSINGEN, HIER LEZEN .