Create a D3/JSON based graphing application

Overall Description

The goal is to replace a set of thick client visualization tools with a rich, highly interactive HTML 5 solution, delivering thick client application-like functionality in a browser. High performance and usability are key success criteria.

Please reference, use, extend the attached code base in file "kpi.zip" as desired to complete this challenge. This code base comes from a related challenge for the same customer and explored the use of D3 as the graphing engine.

General Requirements

• node.js and D3 based
• Meets all requirement defined below
• Fully documented

Overall Graph Requirements

• Graph with multiple time series on a linear x-axis with various, data-specific scales on the y-axis
• See included file "combined.png" for the desired format/general layout
• Default is to display one day based on the current time - 24 hours
• Six sets of sample data will be provided in JSON format (see Series Selection below as well as the attached "tags-JSON.zip" file
  • Additional JSON files with a great number of samples will be provided after the challenge launch as well (5k instead of 1K samples)
• Auto refresh the graph on a set time interval while minimizing data transfer and maximizing performance with a user set interval (minimum = ideally, 1 second)
  • For this challenge, auto-refresh should generate additional random data-points (small to medium changes) at the end of each existing series

Main Graph Requirements (Top)

• The main graph should include all the features depicted in the "combined.png" image (additions to this as well as clarifications below)
• The main graph may display more than one series at once, depending on the selected series in "Series Selection" area (bottom)
  • For each series displayed on the graph, a scale for that series needs to appear on the left of the graph (as shown with two series in "combined.png")
• Drag-and-select an area of the graph to zoom into that date range
• Reset button to restore the view to match the date/time controls (i.e. undo the drag-and-select)
• The graph needs background shading as demonstrated in "combined.png" (the alternating white/grey shading)
• Within each data series, each data point will include fields for upper and lower limits
  • A single series should include three lines on the graph
    • The main line representing the primary value
    • An upper line representing the upper limit
    • A lower line representing the lower limit
    • The upper and lower lines should be the same color as the series, but in a different style (dotted, dashed, ...etc)
• "Defects" and Annotations
  • Defects are "points of interest" on the graph
  • Defects are marked/represented visually on the graph with a symbol
    • The symbol should be red while the defect is Not Acknowledged (see below) and greed after it is Acknowledged
  • A data structure for storing defects (in memory) will need to be created
    • For this challenge, defects and annotations can be stored in memory (for now it does not need to persist across browser sessions)
  • 3 - 5 example defects per series should be created by the challenge participant
  • Additional defects can be created by providing the user an option to create a new "defect" when the they click on a point on the graph
  • Each defect has a set of data associated with it
    • Date and Time of the defect
    • A status 
      • Acknowledged
      • Not Acknowledged
    • An annotation entered by the user
      • Once an annotation is entered, status changes from Not Acknowledged to Acknowledged and the symbol changes from Red to Green
    • Date and Time the annotation was entered
  • An overall list of defects should be shown in a box on the right hand side of the graph under the legend (see "combined.png")
    • Date and data value should be included in this list
    • Color should be red for Not Acknowledged defects and green for Acknowledged defects
  • When a user clicks on a defect (either in the graph or in the list) they will get an overlay window to edit data for that defect (e.g. add an annotation)

Long Range Mini-Graph Requirements (Middle)

• The Long Range Mini-Graph should include the features depicted in "combined.png" (additions to this as well as clarifications below)
• Provide date/time controls to change data/range displayed in main graph
• Shows data from the current time, back to one week and can be scrolled back further to the beginning of the data set
  • Since multiple sets may be graphed at one time in the main graph, a selector box should be included in this section to show which series will be the source for the long range mini-graph (this selector box is not represented currently on the example "combined.png" image)

Series Selection Requirements (Bottom)

• The series Selection area should show each series and implement all of the features depicted in "combined.png"
• There will be 6 data sets for this challenge (represented in six files containing JSON data)
  • The JSON data needs to be parsed directly as JSON data - the participant can not reformat the data statically (e.g. your code needs to capability to read this JSON data in it's current format)

Documentation Requirements

• Detailed installation instructions must be provided
• Any necessary modifications or configuration settings to the web server must be documented
• All third party library installations and setup steps must be documented

Submission Guidelines

• All source files and compiled executables
• All documentation specified above
• Screenshots of running examples

Related Challenges

• Proof of Concept - Visualize JSON KPI Data

Additional Resources

• Attached file "combined.png" show the desired overall look of the application
• Attached files tag1 - tag6 containing sample data for each series in JSON format

Final Submission Guidelines

Code Aesthetics

• Code must be clean (no non-applicable comments, unused variables etc), tidy (consistent indents) and well commented
• Clear and purposeful naming for variables, classes etc.