From data feed to data viz: Reviewing the rewriting of the tabulated data

In the ordered list below, I review the major changes in the way the data was originally structured as tabulated information. Be sure to note how Ridolfo's data is written as a typical spreadsheet, which follows the standard rows and columns structure. In the second list item, note how the spreadsheet is reformatted as a JSON (JavaScript Object Notation). Then, be sure to note how I revise the data from its original format, using the JavaScript programming language. I use the first year (2012-2013) as a running example throughout the list below, as well as console logs which I review in the video:

  1. In the below image, this is how Ridolfo has structured the data in a table format:

    Note how the table's rows observe a per Week period, while the columns track the interested totals per Year. Now, compare these textual modes to the way they are represented in the temporal chart below. Notice how the per Week rows became the x-axis values along the bottom to chart the per Year values as individual lines with their weekly values along the y-axis.





  2. In the getData() function (lines 38-74), I retrieve the spreadsheet data in the JSON feed format. Note that this JSON feed includes data specific to the application data, which helps render the details of the user-interface rendering of Ridolfo's original table. Consequently, it includes far more information than I need; hence, the data processing work to follow.



  3. At the start of the formatData(), inside the for loop, I write the yr1213wks and other weekly data into a per Year array (list) structure:

    ["68", "83", "95", "113", "123", "134", "149", "155", "167", "176", "184", "193", "196", "198", "201", "205", "205"].

    Note how the array of items are in the order from the original table. Be careful about how you create any lists, since some computational methods in programming languages might rearrange values based on when and how they retrieve them.




  4. In writeYears(), I write the yr1213 and other year data into what is called a JS object array: { yr: "2012 - 2013", wks: ["68", "83", "95", ...] }. In this case, yr means "year" and is the key for the string value of the year, and wks means "weeks" and is the key for the array list of respective weekly job-posting totals.

    {
  yr: "2012 - 2013",
  wks: ["68", "83", "95", "113", "123", "134", ...]
}


    Object arrays provide you the capacity to name key-value paris and also create hierarchical relationships, if necessary.


  5. In writeMarketData() (lines 187-196), I write the yrData format:

    [ { yr:"", wks:[...] }, { yr:"", wks:[...] }, ... ].

    yrData is an array that combines the multiple "yearly data" objects that I created prior to this moment in the code, which have the same 2 key-value pairs: yr, the years, and wks, the sorted array list of weekly totals.

    [
  {
    yr: "2012 - 2013",
    wks: [ "68","83","95","113",... ]
  },
  {
    yr: "2013 - 2014",
    wks: [ "61","77","91","103",... ]
  }
  ...
]