Challenge Overview
Overview
TopCoder is building a web app that will be used to analyze health insurance data. The data consists of claims, which are demands for reimbursement. We already have a UI prototype for most of the front end. Currently we are building a set of graphically intensive modules that will be integrated with the overall UI. This contest deals with the module for visual analysis.
Open the attachment app.zip to see the existing UI prototype. Navigate to Study_Details_Completed.html and click on "Visual analysis" to see the tab in which the module will be implemented. This tab can expand vertically but not horizontally.
The attachment analytics.graphics.zip contains a pair of folders, a and b. Folder a contains graphics for all but one of the required chart types. Folder b contains graphics for the fancy pie chart.
Claim data
For the purposes of this prototype, assume that a claim contains the following fields.
- provider name: string
- insurer name: string
- cost: integer
- number of visits: integer
- procedure code: string
- procedure group: string
- date of service: yyyy-mm-dd
- date of claim
Time-based analysis is especially important. We expect each chart to be able to aggregate claims by month (e.g., 2008-11, 2008-12, 2009-01) and by year (e.g., 2008, 2009).
Input elements to configure charts
The storyboards show some input elements for each chart, but they're incomplete.
The top two input elements are always required (note the desired capitalization):
- Chart name: automatically filled with letters (A, B, C, ...) but can be edited by the user
- Chart type: dropdown list for selecting one of the seven chart types described below
Each chart has a specific number of data dimensions. Each dimension is configured with the following input elements:
- Data source: dropdown containing the field names above; a special value, disabled, is available if the dimension is optional
- Minimum value: an optional box for integer and date field types; the user enters a single value
- Maximum value: an optional box for integer and date field types; the user enters a single value
- Discrete set: an optional box; the user enters a comma-separated list of values
If the user enters a discrete set, the minimum and maximum values are ignored.
If any dimension is a date value, the user must additionally be able to select a unit: year, month, or day.
Bar charts
To make a bar chart, the user must be allowed to select two or three dimensions. The two required dimensions are the fields to use for the horizontal axis and vertical axis. The optional third dimension is the field displayed within each bar. The third dimension can only be displayed for a maximum of ten different values. If there are more than ten possible values in the third dimension, display an error message in the left panel and do not attempt to display the third dimension in the right panel.
The bars in a bar chart can be vertical or horizontal. If a third dimension has been chosen, each bar can be decomposed in parallel (grouped) or in sequence (stacked). The attached graphics show examples of vertical and horizontal bar charts, both grouped and stacked.
- vertical grouped bar chart: screens 10-4, 10-5
- vertical stacked bar chart: 10-1, 10-2, 10-3
- horizontal grouped bar chart: 10-10, 10-11
- horizontal stacked bar chart: 10-8, 10-9
The tool tip shown in the screenshots must be implemented. However, the arrow buttons shown at each end of year-based axes are not required.
Line chart
Like bar charts, a line chart has two or three dimensions. The third dimension is the attribute that is used to select the lines shown in the chart.
- line chart: 10-12, 10-13
Again, the tool tip is required and the arrow buttons are not.
Pie chart
The attached graphics show two types of pie charts. The essential difference is that the fancy pie chart shows the total number of data elements in the center.
- basic pie chart: 10-14, 10-15 (folder a)
- fancy pie chart: screens 05, 06, 07 (folder b)
Although you must implement both pie charts, the fancy pie chart should be a variant of the basic pie chart. The user will select "pie chart" from the menu of chart types, then click a checkbox labeled "fancy" to activate the fancy chart type.
Note that a pie chart can have one or two dimensions. In the case of one dimension, display a single pie divided into sectors according to the chosen dimensions. For two dimensions, the second dimension dictates the number of pies.
Final Submission Guidelines
Submission requirements
You may modify the existing HTML file, but not any other files. Make new directories called va.js, va.css, and va.i to store your new files. Submit the entire modified UI prototype package.
Your new code must not cause any errors. CSS warnings are acceptable if you explain them. The following browsers must be supported.
- Windows: IE 7+, Safari 5+
- Mac: Safari 6
- Linux, Mac, Windows: Firefox 20+, Chrome 24+
You may use jQuery. The copilot's permission is required for other libraries.
Judgment criteria
- clean, compact, well-documented, and generally maintainable HTML + CSS + JS is expected
- the left panel (chart configuration) should follow the spec, not the storyboards
- the right panel (chart display) should follow the storyboards
- the best submission will be error-free, with attractive charts and smooth UI operation