Challenge Overview
Project Overview
The customer has a set of tools that heavily use charts for data visualization. The purpose of this project is to run a series of challenges to build these chart components so we can later integrate them into the tools.
Competition Task Overview
In this challenge, you will need to implement the 1st set of the charts. There will be subsequent challenges to build out other charts. 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 charts must follow the samples in the design we provided.
- 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.
- No data should be hardcoded, instead you must create some reasonable mock data to test the prototype. The left sidebar filters in the design are related to the data in the charts, so when creating mock data you should keep that in mind. We do NOT have any sample data so just make reasonable assumptions based on the design.
- 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 charts 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.
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.