CSV2Chart

From Wikiversity
Jump to navigation Jump to search

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 | edit source]

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 | edit source]

The for an AppLSAC that we will call "CVS2Chart" because it takes data as CSV file as input and converts the CSV file into a chart for Wikiversity.

Example of the CSV2Chart Output[edit | edit source]

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 | edit source]

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 | edit source]

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 | edit source]

From the demo data as total numbers a LibreOffice File DiMoT_Demo_Counts.ods (Source: GitHub[1] 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[edit | edit source]

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 | edit source]

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

Background Theory[edit | edit source]

  • (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[2]
  • (Preview of Graph[3]) 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[edit | edit source]

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[4]. 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 | edit source]

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[5] 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 | edit source]

References[edit | edit source]

  1. "Wikiversity Files". niebert.github.io. Retrieved 2020-10-09.
  2. JSON Schema, Web Portal (2020). "Getting Started Step-By-Step". JSON Schema. Retrieved 2020-08-10.
  3. Olly Smith (2013). "Javascript Graph Rendering Library morris.js". morrisjs.github.io. Retrieved 2020-10-05.
  4. "GitLab-Projects LoadFile4DOM · Bert Niehaus / LoadFile4DOM". GitLab. Retrieved 2020-08-12.
  5. "GitLab-Project Handlebars4Code · Bert Niehaus / handlebars4code". GitLab. Retrieved 2020-08-28.
  6. 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
  7. Niehaus, Engelbert (2020-08-07), GitHub Repository Niehaus Bert (2019) Markers4Map, retrieved 2020-08-12