CSV2Chart

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.

Chart preview of loaded CSV file

Properties preview of loaded CSV file prior to generation of the MediaWiki chart

Wikiversity Support Tool: CSV2WikiChart for Wikiversity and Wikipedia

Objective of the Learning Resource

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 graphs 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.

Exported File Formats

CSV2Chart Save and Export Formats

Exported SVG - Example

• Graphs can be stored as JSON file, that can be loaded and modified later due to updated data,
• target export format are charts in the format if Wiki Graph:Chart syntax,
• additional export format SVG was added, due to temporary unavailable rendering feature. SVG format is a vector graphic.

Name of the AppLSAC

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

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 $\lim _{x\to 0,x\geq 0}log(x)=-\infty$.

Learning Example

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

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

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

Motivation

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

An alpha-version of the AppLSAC is available on GitHub csv2wikichart_app.

Background Theory

• (JSON) Learn JSON as JavaScript Object Notation to store and load data in WebApps.
• (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
• (Preview of Graph) The preview of the data in graph should be possible, so that the chart can be cross checked without the need to render the chart in Wikiversity or Wikipedia. OpenSource libraries in Javascript must be identified that allow rendering of data in graph (e.g. MorrisJS)

Load and Import Date

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

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, ...

The JSON files stores all the additional information and can be reloaded for updating the chart e.g. for modification of the labels (e.g. for other learning resource with a different language - chart for the english Wikiversity modified the unit and titles for application in the german Wikiversity on the same topic (e.g. COVID-19/Mathematical Modelling). The JSON itself serves as input for Javascript template engine (see also Mustache, Handlebars, ....)

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

• 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.
• PanDocElectron
• CAS4Wiki Web-based Computer Algebra System based on Algebrite as Wikiversity for interactive learning for Mathematics.