In this learning resource we will create an AppLSAC that is able to load data from a CSV (Comma-separated values) file and create a Chart for Wikiversity learning resources. The AppLSAC will be able to store and load the data into a JSON file that contains not only the raw data but also the titles of data rows and colors of th curves.
Objective of the Learning Resource edit
This learning resource was created on the margins of COVID-19. COVID-19 content in Wikiversity is dynamic due to increasing amount of scientific knowledge and studies and due to the fact that data on COVID-19 cases is updated on a daily basis. Creating new images for graphs and diagrams on a daily basis and storing them on WikiCommons is quite inefficient and consumes a lot of storage resources in comparision to additing the new data in a string.
- This learning resource helps you to create graph for Wikiversity learning resources based on data in a CSV-file.
- This learning resource can be used as a template for workflow to create Wikiversity tools as AppLSACs that support authors in creating and maintaining learning resources with dynamic data.
- this learning resource is a full use-case for the application of JSON2Schema and the corresponding learning resource in Wikiversity.
Name of the AppLSAC edit
The WetbApp CSV2WikiChart is a support for Wikiversity learning resources, to create charts with values that can be edited in the source of the Wikiversity article. The support tool is an AppLSAC that is called "CVS2WikiChart" because it takes data as CSV file as input and converts the CSV file into a chart for Wikipedia and Wikiversity.
Example of the CSV2Chart Output edit
See COVID-19 Mathematical Modelling for a basic example use Charts in learning resources and how the diagrams can be embedded with templates calls in a Wikiversity learning resource.
- When the AppLSAC is finished we can use that WebApp for graph updates in Wikiversity learning resources. You will be able to load the updated CSV and export the new chart from CSV2Chart.
- The following graph is not an image. It is a template call of Graph:Chart that creates the graph based on the parameters of the template.
The graph uses a logarithmic scale on the y-axis. yAxisMin was set to 0.5 to avoid display problems for y-values equal to 0, because .
Learning Example edit
We will create an AppLSAC in this learning task, that converts a data in a CSV file into a Graph that can be used in learning resources.
- (Demo Data in CSV2Chart) Start CSV2WikiChart in your browser as a AppLSAC. An export the generated output with preloaded demo data in CSV2WikiChart . The WebApp contains some demo data for your first export.
- (Load CSV Data) For this learning resource an LibreOffice file Create your CSV e.g. in LibreOffice and preview the generated chart in CSV2WikiChart. Change some settings and see how the exported graph look like in MorrisJS. Some features of MorrisJS are missing to create a similar view of final result in Wikiversity.
Example Export edit
In comparison to the chart above the same data is used but the y-axis has a linear scale instead of a logarithmic scale as used above.
In this graph we change the line thinkness of the curve and increase the symbol size. With the symbol size set to 0 in CSV2Chart the symbols (filled circles) are not visible anymore.
LibreOffice Calc - Source for CSV Export edit
From the demo data as total numbers a LibreOffice File DiMoT_Demo_Counts.ods (Source: GitHub wikiversity_files) was created with some sample data and 2 main tables. One table with total numbers of cases and one table with the empirical density. The calculations are performed in LibreOffice Calc. Two
Assume you have COVID-19 data about the epidemiological spread of the disease that is updated on a daily basis on Wikipedia in a curve. It is really very time consuming to convert the data into graph and update the image of representing the graph. This needs a new version of the image on WikiCommons. So the underlying idea is to use a CSV file with the data and update the data directly in the Graph Template. In general spreadsheet data can be prepared and updated for learning resources in Wikiversity.
Current Status of the AppLSAC edit
Background Theory edit
- (JSON Editor) Learn about webbased applications (WebApps) that can load, save and modifiy the data in a JSON data container.
- (AppLSAC) Learn about AppLSAC web-based applications that do not need internet connectivity and run in your browser as runtime environment.
- (JSON Schema) Learn about JSON Schema - see JSON Schema - Step by Step Tutorial
Load and Import Date edit
The JSON Editor in CSV2Chart will load and import a CSV file with the data. The data in the CSV file is stored on the hard disk as string and must be parsed into a JSON.
- (AppLSAC/Load) Loading the file will be perform with LoadFile4DOM. It uses the upload feature of browsers to upload files to the server with FileReader-API, but the file is kept in the browser with uploading the data to a remote server.
- (Import CSV) With LoadFile4DOM with have a string available in the browser and this string must be parsed into a JSON. JQuery has a integrated CSV parser but search the internet for keywords "parse CSV into JSON". There are different possibilities to store a CSV into the JSON object structure. See CSV2JSON for further details for the implementation used for CSV2Chart.
Save and Export edit
For saving and export of the graph in the Wiki format, CSV2Chart should be able to import a CSV and convert the CSV into a JSON which
- contains the data of CSV
- lets the author of the data edit additional parameters of the generated graph
- labels of x-axis, y-axis
- colors of the lines and point of the chart.
- title of the chart, ...
In CSV2Chart the export will be generated with a Handlebars4Code template, which extends the Handlebars template engine with additional helper for code generation. The syntax of the generate code is the Wiki source code format for Wikiversity/Wikipedia articles. The JSON as input contains the parameters for the output for the graph in the Wiki format.
See also edit
- Density Estimation - in the learning resource an Density Estimation was calculated in the LibreOffice-Calc spreadsheet document.
- LibreOffice-Calc - for generating the demo CSV file from a single LibreOffice Calc spreadsheet document. You can import XLS and XLSX files in Calc as well.
- Template:Graph:Chart - Template defines the export format for CSV2Chart.
- COVID-19 Mathematical Modelling with a Disease Modelling Time (DiMoT)
- JSON3D4Aframe - Wikiversity Tool for the learning environment about 3D Modelling is also a JSON Editor for generating 3D models for learning resources.
- Markers4Map - Wikiversity Tool for creating links, that contain markers and small info box for the marker.
- Risk Literacy
- AppLSAC - WebApps that runs complete in the browser without a server backend to convert the CSV into Wiki Chart format.
- CAS4Wiki Web-based Computer Algebra System based on Algebrite as Wikiversity for interactive learning for Mathematics.
- CSV2WikiChart (2019) Bert Niehaus, Wikiversity Support Tool as WebApp for Charts in Learning resources - URL: https://niebert.github.io/csv2wikichart_app/ ZIP of AppLSAC: https://github.com/niebert/csv2wikichart_app/archive/master.zip (accessed 2021/12/06)
- "Wikiversity Files". niebert.github.io. Retrieved 2020-10-09.
- JSON Schema, Web Portal (2020). "Getting Started Step-By-Step". JSON Schema. Retrieved 2020-08-10.
- "GitLab-Projects LoadFile4DOM · Bert Niehaus / LoadFile4DOM". GitLab. Retrieved 2020-08-12.
- "GitLab-Project Handlebars4Code · Bert Niehaus / handlebars4code". GitLab. Retrieved 2020-08-28.
- Niehaus, Engelbert (2020-10-07), GitHub Repository LibreOffice Calc ODS-File - DiMot_Demo_Counts.ods (2019) Files for Wikiversity Learning Resources, retrieved 2020-10-09
- Niehaus, Engelbert (2020-08-07), GitHub Repository Niehaus Bert (2019) Markers4Map, retrieved 2020-08-12