Question

Javascript each item must have at least three categorical attributes and at least one numeric attribute. Attributes such as ID, name etc do not count as categorical or numeric attributes.

Exercise 1

(a) Define a class for your item that meets the above three categorical and one numeric attribute requirements.

(b) Create a text file that contains at least 5 such records in CSV format.

(c) Create a HTML page that contains a table element the shows one item record (hardcoded in the HTML).

Exercise 2(need to handle three categorical attributes)

Write a function that counts the number of values each item attribute has. This is effectively a group-by on the item table for each column. For example: if the first attribute is colour, and its values are [ ‘red’, ‘black’, ‘white’, ‘black’, ‘red’ ], the counts for colour would be: red 2 black 2 white 1

Answer 1

Exercise 1)

class Car {
  constructor() {
  }

var categories = [
    { year:1, state:'NY' },
    { year:2, state:'CA' },
    { year:3, state:'TX' },
    { year:4, state:'4 },
];

// IMPORTANT! This is a way to make each state @ year unique, by returning a concatenation of state and year
categories.forEach(function(cat) {
    cat.toString = function() { return this.state + '_' + this.year }
});

// These year values should ideally be extracted from categories array above, not hardcoded as below
var years = ['Year 1', 'Year 2', 'Year 3'];

var svg = d3.select('body').append('svg');

}

NOTE: I concocted this solution before I was reminded about all the "special cases" that can occur in a valid CSV file, like escaped quotes. I'm leaving my answer for those who want something quick and dirty, but I recommend Evan's answer for accuracy.

This code will work when your data.txt file is one long string of comma-separated entries, with no newlines:

data.txt:

 heading1,heading2,heading3,heading4,heading5,value1_1,...,value5_2

javascript:

$(document).ready(function() {
    $.ajax({
        type: "GET",
        url: "data.txt",
        dataType: "text",
        success: function(data) {processData(data);}
     });
});

The HTML Markup consists of a FileUpload control (HTML File Input) and a HTML Button.

The CSV file is selected in FileUpload control (HTML File Input) and the Upload button is clicked and the Upload JavaScript function is called.

Inside the function, first, a check is performed to verify whether the file is a valid CSV or a text file. Then a check is performed to make sure whether the browser supports HTML5 File API.

Once the above checks are cleared then the contents of the CSV file are read as a text string and then the string is split into parts using comma and new line characters and finally is displayed as an HTML Table.

function processData(allText) {
    var record_num = 5;  // or however many elements there are in each row
    var allTextLines = allText.split(/\r\n|\n/);
    var entries = allTextLines[0].split(',');
    var lines = [];

    var headings = entries.splice(0,record_num);
    while (entries.length>0) {
        var tarr = [];
        for (var j=0; j<record_num; j++) {
            tarr.push(headings[j]+":"+entries.shift());
        }
        lines.push(tarr);
    }
    // alert(lines);
}

<script type="text/javascript">

    function Upload() {

        var fileUpload = document.getElementById("fileUpload");

        var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;

        if (regex.test(fileUpload.value.toLowerCase())) {

            if (typeof (FileReader) != "undefined") {

                var reader = new FileReader();

                reader.onload = function (e) {

                    var table = document.createElement("table");

                    var rows = e.target.result.split("\n");

                    for (var i = 0; i < rows.length; i++) {

                        var row = table.insertRow(-1);

                        var cells = rows[i].split(",");

                        for (var j = 0; j < cells.length; j++) {

                            var cell = row.insertCell(-1);

                            cell.innerHTML = cells[j];

                        }

                    }

                    var dvCSV = document.getElementById("dvCSV");

                    dvCSV.innerHTML = "";

                    dvCSV.appendChild(table);

                }

                reader.readAsText(fileUpload.files[0]);

            } else {

                alert("This browser does not support HTML5.");

            }

        } else {

            alert("Please upload a valid CSV file.");

        }

    }

</script>

<input type="file" id="fileUpload" />

<input type="button" id="upload" value="Upload" onclick="Upload()" />

<hr />

<div id="dvCSV">

</div>