Challenge Overview
Project Overview
For this project we will build an MVP type product to satisfy two main stories:
1. A developer can enable the MVP service quickly through bluemix and deploy simple javascript code to get a standard NPS Survey integrated to their SaaS application. If they want to brand / customize the survey they will be able to do so through either CSS / Javascript parameters or similar easy configuration. This can be embedded on any SaaS on "public internet".
2. A SaaS business user can access the reporting / analytics piece through log in to the Bluemix environment (access to the environment will be sufficient for access to all functionality / data exposed through the application). They will be able to see basic reports and filter by product.
Competition Task Overview
IBM would like to visualize the results of Net Promoter Score (NPS) Surveys using charts built using d3js and wrapped as react components. These components will be used in a React-based Admin Panel that reports on the results of surveys across their clients.
For this challenge, we are going to implement one of the charts using d3js. There will be subsequent challenges to build out 2 other similar charts as well as wrap each of those three charts in react components for use in a web application. The keys to this challenge are accuracy to the design, simplicity and clarity of the code, and resuability.
Key Requirements
- d3js must be used. You may also use a library built on top of d3js, example: https://dc-js.github.io/dc.js/ This library is approved for use, if you want to use any other libraries, please ask in the forums.
- The implemented chart must be completed exactly as the sample we provided. It can't be just close, in either layout or colors.
- If you want to use any other libraries, it has to have an open license like Apache v2 or MIT, no GPL or LGPL or anything like that. All JavaScript must not have a copyright by a third party
- The code that renders the chart should be separate and reusable, there should be no hardcoded logic in it to get data. The code should be clear and consistent and well documented.
- There should be a sample web page that demonstrates usage of the code you write, showing how to pass data to it and how to display the rendered chart on the sample web page.
- Test in all the required browsers.
- Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
- Ensure you submission clear of HTML and CSS Validation error and warning.
Specific HTML/CSS/JavaScript Requirements
- You MUST use HTML5 and CSS3
- Validate your code - reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
- No inline CSS styles - all styles must be placed in an external stylesheet.
- Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent).
- Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.
- Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.
You must use d3js for this challenge.
Timeline
This challenge has aggresive timeline for both submission and review, please make sure you don't miss the deadlines.
Browser Requirements- IE11+
- FF Latest
- Chrome Latest
- Safari latest (mac only)
Final Submission Guidelines
Submission Deliverables
Submit a zip archive file that contains all HTML/CSS/JS/images and other required files via the challenge detail page on topcoder.com.