[Prize Increased] SVG based technology heat map

Welcome to the SVG based technology heat map contest. As part of this contest, you will create a heat map that will show all the technologies in trend.

 

Contest Details

Use d3js or any MIT licensed svg library to create a Heat Map of technologies. The data for this heatmap will be available by calling an API, which we will share in the contest forum. We will also share the design with you in the forum.

 

The heat map is straightforward. The expectation is that you create a widget for the heat map - with the following in mind:

1. Both the filter, image export and legend and the heat map need to be part of the same widget

2. The data to be displayed will be passed to the widget

3. The widget is responsive - you will find both, desktop and mobile versions of the widget.

 

Getting the widget right is the major requirement of this contest. The design includes the heat map and filters, image export and legend into a page with the topcoder header and footer shown. Including this in your submission is a minor requirement. This is relevant for the scorecard used in this contest.

 

Point To Note

• Use the communityReady attribute in the data to determine the “heat” for the item. A value of 1 is hot and the hotness decreases as the value increases, with 5 being cold.

• The filter in the widget is dummy for now. The user should however be able to still select the different values
• There is a "X" on the design. You can ignore it for now. You need not show this

• Export of the heat map should work and should support both png and jpg versions. The exported image will be only the heat map. The filter will not be part of the image. The design also describes the dimensions of the exported images
   

Final Submission Guidelines

Your submission must contain documentation on how to integrate the widget into any web page - the scripts to include, the syntax to use etc. Submit the web page (as per the design) with the widget included. You can zip it and upload it.