cstefanache

[
  {
    "from": "Sami Rocha",
    "date": "2019-06-07T19:25:48.141Z",
    "to": [
      "Aden Crane"
    ]
  },
  {
    "from": "Sami Rocha",

cstefanache

license: mit

cstefanache

Window width (wwidth) = 100
DATA.length = 8
dataPointsOnScreen = 5

Case 1: x scroll = 0
          0        [middle]
          |           |
          *----*----*-+--*----*----*----*----*
                      |
          |<---- width = 100 --->|

cstefanache

Requirements

Application Requirements:

Create a static web application that is able to explore the movies data set. The application should list all movie names in a paged mannor and will allow the user to filter by name. All searches must be performed lowercase. More than that the application, during data parsing step, will have to compile a list of all available tags (e.g. Comedy|Drama|Romance) and compile a set of tags + appearance count such that it should be presented to the user.

Sample representation:

cstefanache

D3 Based Real Time Chart

The real time chart is a resuable Javascript component that accepts real time data. The chart's time domain is moving with the passage of time, which means that any data placed in the chart eventually will age out and leave the chart. In addition to the main chart, the component also manages a "focus" window with a viewport (d3.brush) that can moved and sized to view an arbitrary portion of the time series data.

The component adheres to the pattern described in Towards Reusable Chart.

The following options are currently supported:

• width and height in pixels (Number)
• border (Boolean)

cstefanache

let data = [
  ['356.0','Ailment_6','sleep pain back','food concentrate'],
  ['356.0','Ailment_2','sick feel','food healthy'],
  ['356.0','Ailment_10','cramps eyes', 'ibuprofen'],
  ['357.0','Ailment_4','back sick knee', 'biking eat'],
  ['357.0','Ailment_6','sick joint', 'juice nutrient'],
  ['357.0','Ailment_8','hurt heart', 'ibuprofen']
].reduce( (memo, item) => {
  console.log(item);
  const [ state, ailment, symptoms, treatments ] = item;

cstefanache

license: mit

cstefanache

cstefanache

{
  "columns": 7,
  "image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAANACAYAAADEtbMjAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFFmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDAgNzkuMTYwNDUxLCAyMDE3LzA1LzA2LTAxOjA4OjIxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKE1hY2ludG9zaCkiIHhtcDpDcmVhdGVEYXRlPSIyMDE4LTAyLTAyVDE0OjM2OjU2KzAyOjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAxOC0wMi0wMlQxNDo1OToxNCswMjowMCIgeG1w

cstefanache

{
  "files": ["initScript.js"]
}