Als u net begint met JavaScript, moet u weten dat het een uitstekende programmeertaal is voor het visualiseren van gegevens. Datavisualisatie is op dit moment een uiterst relevante vaardigheid, aangezien we ons in het tijdperk van Big Data bevinden. Visualisatietools zijn essentieel om alles te begrijpen en er inzichten uit te halen.
Hier is dus een basisoverzicht van hoe je grafieken maakt met JavaScript.
Wat je nodig hebt om grafieken te maken met JavaScript
Internetbrowser
Het eerste wat je nodig hebt om een van de honderden JavaScript-oplossingen voor diagrammen is een internetbrowser. Chrome of Firefox zijn beide prima voor deze oefening.
Teksteditor
U heeft ook een teksteditor nodig. Kladblok volstaat prima, maar idealiter kiest u voor een geavanceerde code-editor zoals VS Code. Deze biedt u een handigere gebruikerservaring die het schrijven van HTML5, CSS, JavaScript enz. makkelijker maakt. De code-editor helpt u fouten te vinden en te corrigeren als uw code niet draait.
Grafiekbibliotheek
Ten slotte heeft u een grafiekbibliotheek nodig om de gewenste grafiek te genereren. Ik raad JSCharting aan, maar er zijn er talloze om uit te kiezen. Deze tutorial richt zich echter op JSCharting. JSCharting kan allerlei soorten grafieken tekenen met SVG en is eenvoudig te gebruiken. De API vereenvoudigt veel dingen en is een goede optie om mee te experimenteren als u net begint.
Gegevens
Tenzij u al over gegevens beschikt om een grafiek te genereren, moet u deze verzamelen. U kunt gegevens verkrijgen bij instanties zoals het CDC, de WHO of het WFP. Elke dataset die twee waarden tegenover elkaar zet, voldoet. Zelfs een grafiek die de hoeveelheid regen per jaar in een stad of land bijhoudt, is prima.
Hoe maakt u grafieken met JavaScript
- Lege grafiek toevoegen
U moet eerst een lege grafiek downloaden met dit. Dit bestand bevat
- index.html
- js/index.js
Het .html-bestand is leeg, op een beetje standaardcode na. Het .js-bestand is volledig leeg.
- Open het bestand index.html in de door jou gekozen code-editor en voeg een script-tag toe om de JSCharting-bibliotheek op te nemen. Doe dit na de afsluitende </body>-tag.
De code zou er als volgt uit moeten zien:
</body>
<script src="https://code.jscharting.com/2.9.0/jscharting.js"></script>
</html>
- gebruik dezelfde techniek om een scripttag toe te voegen die naar een leeg .js-bestand verwijst. Voeg deze toe na het JSCharting-script. Het zou er zo uit moeten zien:
</body>
<script src="https://code.jscharting.com/2.9.0/jscharting.js"></script>
<script src="js/index.js"></script>
</html>
- Voeg ten slotte een <div>-placeholder toe in het html-bestand, zodat wordt bepaald waar de grafiek getekend moet worden.
Het zou er zo uit moeten zien:
<body>
<div id="chartDiv" style="width:50%; height:300px; margin:0 auto;"></div>
</body>
- De div moet een ID hebben, zodat de grafiek weet in welke div deze getekend moet worden. Hier is de ID chartDiv.
Open het .js-bestand en voeg een lege grafiek toe door de volgende code te schrijven:
JSC.Chart('chartDiv', {});
- Open ten slotte het bestand index.html in een browser. U kunt het bestand naar een browser zoals Chrome slepen. U ziet dan een klein JSC-logo op de pagina. Hiermee is de eerste stap voltooid naar grafieken verzenden met JavaScript.
- Speel er wat mee
Voeg een paar waarden toe om met de grafiek te spelen. Vervang de inhoud van het .js-bestand door de volgende code:
JSC.Chart('chartDiv', {
type: 'horizontal column',
series: [
{
points: [
{x: 'Appels', y: 50},
{x: 'Sinaasappels', y: 42}
]
}
]
});
- Vernieuw de browser waarin de pagina is geladen en je ziet mogelijk een staafdiagram. Dat komt omdat je het type in de code hebt ingesteld op 'horizontal column'.
Laten we nu ter zake komen.
- Bereid uw gegevens voor en breng ze samen
- Het CSV-dataformaat staat voor comma separated values (door komma's gescheiden waarden). Dit bestand bevat rijen, en elke rij vertegenwoordigt een record of item. De eerste rij met waarden bevat de namen van de door komma's gescheiden waarde. Dit is de kolom. De volgende rijen bevatten de waarden zelf. Bijvoorbeeld:
Naam, leeftijd
Milton, 45
Harry, 34
- CSV is leesbaar, maar er bestaan verschillende varianten van dit formaat. Als waarden komma's bevatten, zoals postadressen, werkt het formaat niet zoals het is. Elke waarde moet dan tussen aanhalingstekens worden geplaatst. Zo:
“naam”, “leeftijd”
“Milton”, “45”
“Harry”, “34”
- JSCharting biedt hiervoor veel hulpmiddelen. Je hoeft je geen zorgen meer te maken over CSV en kunt het omzetten naar JSON (JavaScript Object Notation). Dit wordt een array van objecten.
Download eerst dit bestand met CDC-gegevens voor een voorbeeldproject. U kunt dit CSV-bestand openen in Excel. U moet de CSV-gegevens in realtime downloaden met JavaScript-code. De code kan wat verwarrend zijn, maar is kort. U kunt hem ook gebruiken om elk CSV- of JSON-bestand van internet op te halen. - Vervang de inhoud van het bestand index.js door het volgende:
fetch('https://data.cdc.gov/resource/w9j2-ggv5.csv')
.then(function (response) {
return response.text();
})
.then(function (text) {
csvToSeries(text);
})
.catch(function (error) {
//Er is iets misgegaan
console.log(error);
});
function csvToSeries(text) {
console.log(text);
}
- De complexe code zorgt ervoor dat alle data direct beschikbaar is. Daarom wordt er een fetch()-functie gebruikt.
- de then(…)-code wordt aangeroepen wanneer de reactie binnenkomt. De functie converteert de reactie naar tekst en retourneert deze vervolgens.
- het tweede argument van de functie then(…) geeft de tekst als argument door.
- De functie catch() bepaalt wat er moet gebeuren als er iets misgaat. Dit kunnen netwerkproblemen, onjuiste URL's, enz. zijn. In die gevallen wordt de fout naar de console gestuurd.
- Daarna geeft de functie csvToSeries() de tekst door aan de console ter inspectie.
- Alles samenbrengen
Voeg aan het einde van het bestand index.js deze code toe om de grafiek weer te geven:
function renderChart(series){
JSC.Chart('chartDiv', {
series: series
});
}
vernieuw de browser en u heeft de grafiek die u nodig heeft.
U kunt uw kennis van JavaScript-grafieken aanvullen met ons artikel over staafdiagrammen.
