(currently not working and hard coded data)

maybe we have an js expert who can find a cleaner approach to solve the "this" problem.

…rect is set relative to the label's text length.

if dataurl is provided, this will be used, otherwise the parameters dataset and labels are processed.

replacing ready by attached has done the trick

Set SVG height and width dynamically based on the size of the dataset and squaresPerRow. Use ES6 notation for calculating min and max values of the dataset.

Make the dataset that is passed to D3 and which the visualization is built from look like this: [ {'x': timeStamp0, 'y': value0}, ... ,{'x': timeStampN, 'y': valueN}]

Use the two custom colors marking the minimum and the maximum color. Custom colors can be passed to the component via an attribute in the HTML tag.

Change orientation changing the focus from rows to columns.
Improve the calculation of positions and sizes for the labels to make these values more consistent among different square sizes, spacing options etc by mostly dropping hardcoded values.

Allow the minimum and maximum value used for the color scale to be overwritten by arguments in the HTML tag. By default, these values are derived from the dataset.

Omitted unnecessary != "" part in if
Moved a var declaration above its use

SquaresPerColumn is now always derived from the number of axis labels. Add stub for alternating between user and course activity. Fix Polymer.dom(this).parentNode problem. Limit D3 to only scan the Polymer component's local DOM instead of the whole DOM thus avoiding problems when instantiating a component more than once on a page.

Improve some naming of the attributes too.