-
-
Save campeterson/6175097 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| from __future__ import division | |
| import numpy | |
| import shlex | |
| from uuid import uuid1 | |
| class d3object: | |
| def __init__(self, | |
| height=100, | |
| width=100, | |
| topHtml='', | |
| bottomHtml='', | |
| style=None, | |
| publish=False, | |
| test=False, | |
| precision=4, | |
| d3=None, | |
| **kw): | |
| self.id='id-{0}'.format(uuid1()) | |
| self.html='<div id="{0}" class="d3Output"></div>'.format(self.id) | |
| self.css='' | |
| self.varsToPass={'width':width, | |
| 'height':height, | |
| 'd3ObjId':self.id, | |
| } | |
| self.precision=precision | |
| self.js=[''' | |
| var None=null; | |
| var inf='Inf.'; | |
| function utfDecode(x){ | |
| try{ | |
| var r = /[\\\\]{1,2}u([0-9a-fA-F]{4})/gi; | |
| var xnew = x.replace(r, function (match, grp) { | |
| return String.fromCharCode(parseInt(grp, 16)); | |
| }); | |
| xnew = unescape(xnew); | |
| return xnew; | |
| } | |
| catch(err){ | |
| return x | |
| } | |
| } | |
| ''',''] | |
| if style in (None, ''): | |
| self.html='{0}\n{1}\n{2}'.format(topHtml, self.html, bottomHtml) | |
| elif style=='JFFigure': | |
| self.html='\n'.join((self.html, | |
| '''<div class="d3Output description figure" style="width: {0}px"> | |
| <b>Figure{1}.{2}</b>{3}</div> | |
| ''' | |
| .format(width, | |
| ' '+str(kw['number']) if 'number' in kw else '', | |
| ' '+str(kw['title'])+'.' if 'title' in kw else '', | |
| ' '+str(kw['desc']) if 'desc' in kw else '', | |
| ), | |
| )) | |
| self.addCss(self.getStandardCss('jfCss')) | |
| elif style=='JFTable': | |
| self.html='\n'.join(('<div class="d3Output header" style="width: {0}px;">Table{1}</div>' | |
| .format(width, ' '+str(kw['number']) if 'number' in kw else ''), | |
| '<div class="d3Output title" style="width: {0}px;">{1}</div>' | |
| .format(width, ' '+str(kw['title']) if 'title' in kw else ''), | |
| '<div class="d3Output description" style="width: {0}px">{1}</div>' | |
| .format(width, ' '+str(kw['desc']) if 'desc' in kw else ''), | |
| self.html, | |
| )) | |
| self.addCss(self.getStandardCss('jfCss')) | |
| if d3!=None: | |
| if d3.__class__.__name__=='d3object': | |
| if d3.css!='\n'+self.getStandardCss('jfCss'): | |
| self.addCss(d3.css) | |
| d3.addPageBreak() | |
| self.html='\n'.join((d3.render(mode=('only','html')),self.html)) | |
| else: | |
| raise TypeError | |
| self.publish=publish | |
| if publish: | |
| from IPython.core.display import publish_html | |
| if test: | |
| from IPython.core.display import publish_javascript | |
| publish_javascript('''$('#d3TestOutput').remove();''') | |
| html=u''' | |
| <div id="d3TestOutput" | |
| style=" | |
| position: absolute; | |
| z-index:100; | |
| right:-2px; | |
| top:100px; | |
| background: rgba(255, 255, 255, 1); | |
| display:block | |
| "> | |
| {0} | |
| </div>'''.format(self.html) | |
| publish_javascript('''$('#toolbar').append('{0}');'''.format(html.replace('\n',''))) | |
| html='</script><style>\n{0}\n</style>'.format(self.css) | |
| else: | |
| html='<style>\n{0}\n</style>\n{1}'.format(self.css, self.html) | |
| publish_html(html) | |
| self.html='' | |
| def removeTestObject(self): | |
| from IPython.core.display import publish_javascript | |
| publish_javascript('''$('#d3TestOutput').remove();''') | |
| def convertVar(self, var): | |
| typeVar=type(var) | |
| if typeVar==numpy.ndarray: | |
| return self.convertVar(var.tolist()) | |
| elif typeVar == float: | |
| return round(var, self.precision) | |
| elif typeVar == list: | |
| return [self.convertVar(i) for i in var] | |
| elif typeVar == dict: | |
| outTemp={} | |
| for k in var: | |
| outTemp[k]=self.convertVar(var[k]) | |
| return outTemp | |
| elif typeVar in (str, int) or var==None: | |
| return var | |
| else: | |
| print typeVar | |
| raise TypeError | |
| def addVar(self, **kw): | |
| for k in kw: | |
| self.varsToPass[k]=self.convertVar(kw[k]) | |
| def getJsInputs(self): | |
| jsInputs=[] | |
| inputs=self.varsToPass | |
| for i in inputs: | |
| outTemp=i+'=' | |
| typeOut=type(inputs[i]) | |
| if typeOut == str: | |
| outTemp+='"%s"' % inputs[i] | |
| elif typeOut in (list, dict, int, float) or inputs[i]==None: | |
| outTemp+=str(inputs[i]) | |
| else: | |
| print typeOut | |
| raise TypeError | |
| jsInputs.append(outTemp) | |
| jsInputs='\n'.join(['var '+i+';' for i in jsInputs]).replace("u'", "'") | |
| self.jsInputs=jsInputs | |
| def addJs(self, jsStr): | |
| if type(jsStr)!=str: | |
| raise TypeError | |
| self.js.append(jsStr) | |
| def addCss(self, css): | |
| if type(css)!=str: | |
| raise TypeError | |
| self.css+='\n{0}'.format(css) | |
| def pValsStar(self, dataAdd, index=0): | |
| if len(dataAdd)==0: | |
| return | |
| for i in xrange(len(dataAdd[index])): | |
| for j in xrange(len(dataAdd[index][0])): | |
| if type(dataAdd[index][i][j])==str: continue | |
| x=dataAdd[index][i][j] | |
| if x<0: dataAdd[index][i][j]='Error' | |
| elif x<=0.01: dataAdd[index][i][j]='★★★' | |
| elif x<=0.05: dataAdd[index][i][j]='★★' | |
| elif x<=0.1: dataAdd[index][i][j]='★' | |
| elif x<=1: dataAdd[index][i][j]='' | |
| else: dataAdd[index][i][j]='Error' | |
| def addTable(self, | |
| data=[], | |
| dataAdd=[], | |
| pVals=False, | |
| fontSizeCells=[12,8], | |
| fontSizeCellsLabels=[16,10], | |
| sRows=None, | |
| sColumns=None, | |
| sRowsMargins=[5], | |
| sColsMargins=[5], | |
| varLabels=['Value', 'p-value'], | |
| fontSizeHeaders=12, | |
| shrinkHeadersBorders=1.5, | |
| heatmapIgnoreText=1, | |
| heatmap={ | |
| 'draw':1, | |
| 'spacing':2, | |
| 'fillProportion':5, | |
| 'addText':1, | |
| 'addTextRows':1, | |
| 'addBorders':1, | |
| 'addOutsideBorders':-1, | |
| 'rectWidth':45, | |
| 'rectHeight':45, | |
| }, | |
| smallHeatmap={ | |
| 'draw':1, | |
| 'spacing':0, | |
| 'fillProportion':4, | |
| 'addText':0, | |
| 'addTextRows':0, | |
| 'addBorders':0, | |
| 'addOutsideBorders':-1, | |
| 'rectWidth':4, | |
| 'rectHeight':4, | |
| }, | |
| heatmapLegendVert=0, | |
| legend= { | |
| 'draw':1, | |
| 'width':100, | |
| 'height':15, | |
| 'rectWidth':60, | |
| 'rectHeight':60 | |
| }, | |
| rightPaneOffset=100, | |
| colorDomainMin=False, | |
| colorDomainMax=False, | |
| colorDomainSymmetric=False, | |
| colorDomainAuto=1, | |
| colorDomainAutoIgnoreColumns=[], | |
| colorDomainAutoIgnoreRows=[], | |
| colorRange=['#B9FB8A', '#9BF293', '#7EE79D', '#65DCA6', '#51CFAD', '#43C3B1', '#3FB5B3', | |
| '#43A7B2', '#4C99AD', '#568BA6', '#5F7D9C', '#656F8F', '#696181', '#6A5471', | |
| '#684861', '#633D51', '#5B3341', '#522A33', '#472226', '#3B1B1A', '#2E1510'] | |
| ): | |
| figTag='-tag-{0}'.format(uuid1()) | |
| if type(pVals)!=bool: | |
| self.pValsStar(dataAdd, pVals) | |
| if sRows==None: | |
| sRows = ['' for _ in data[0]] | |
| if sColumns==None: | |
| sColumns = ['' for _ in data] | |
| colorDomain=[0,1] | |
| if colorDomainAuto>0: | |
| colorRangeData=data | |
| if len(colorDomainAutoIgnoreColumns)+len(colorDomainAutoIgnoreRows)>0: | |
| colorRangeData=[] | |
| for i in xrange(len(data)): | |
| if i in colorDomainAutoIgnoreRows: continue | |
| for j in xrange(len(data[0])): | |
| if j in colorDomainAutoIgnoreColumns: continue | |
| colorRangeData.append(data[i][j]) | |
| if colorDomainAuto==2: | |
| avgRes=numpy.average(colorRangeData) | |
| stdRes=numpy.std(colorRangeData, dtype=numpy.float64, ddof=1) | |
| nObs=len(colorRangeData) | |
| colorDomain=[max(numpy.min(colorRangeData),avgRes-stdRes/nObs*1.96), | |
| min(numpy.max(colorRangeData),avgRes+stdRes/nObs*1.96)] | |
| if colorDomainAuto==1: | |
| colorDomain=[numpy.min(colorRangeData),numpy.max(colorRangeData)] | |
| if colorDomainSymmetric: | |
| colorDomain=max(numpy.fabs(colorDomain)) | |
| colorDomain=[-colorDomain, colorDomain] | |
| colorRange=list(reversed(colorRange))+colorRange[1:] | |
| if colorDomainMin: | |
| colorDomain=[colorDomainMin, colorDomain[1]] | |
| if colorDomainMax: | |
| colorDomain=[colorDomain[0], colorDomainMax] | |
| colorRangeLen=len(colorRange) | |
| colorDomain=(numpy.array([i/colorRangeLen for i in xrange(colorRangeLen+1)])*(colorDomain[1]-colorDomain[0])+colorDomain[0]).tolist() | |
| self.addVar( figTag=figTag, | |
| colorDomain=colorDomain, | |
| colorRange=colorRange, | |
| data=data, | |
| dataAdd=dataAdd, | |
| fontSizeCellsLabels=fontSizeCellsLabels, | |
| fontSizeCells=fontSizeCells, | |
| varLabels=varLabels, | |
| sRows=sRows, | |
| sColumns=sColumns, | |
| heatmapLegendVert=heatmapLegendVert, | |
| heatmap=heatmap, | |
| smallHeatmap=smallHeatmap, | |
| legend=legend, | |
| fontSizeHeaders=fontSizeHeaders, | |
| heatmapIgnoreText=heatmapIgnoreText, | |
| sRowsMargins=sRowsMargins, | |
| sColsMargins=sColsMargins, | |
| shrinkHeadersBorders=shrinkHeadersBorders, | |
| rightPaneOffset=rightPaneOffset | |
| ) | |
| self.addCss(''' | |
| .heatmapCell path, .heatmapCell line, .heatmapCell polyline, .d3Output polyline { | |
| fill: none; | |
| stroke-width: 1px; | |
| stroke: black; | |
| shape-rendering: crispEdges !important; | |
| } | |
| .heatmapCell text, .heatmapCell rect, .d3Output rect { | |
| font-size: 1em; | |
| shape-rendering: crispEdges !important; | |
| } | |
| ''') | |
| self.addCss('#'+figTag+'{shape-rendering: crispEdges !important;}') | |
| self.addJs(''' | |
| Array.prototype.sum = function() { | |
| return this.reduce(function(a,b){return a+b;}); | |
| } | |
| var svg = d3.select("#"+d3ObjId) | |
| .append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .style("border-bottom", "1px solid black") | |
| var color = d3.scale.linear() | |
| .domain(colorDomain) | |
| .range(colorRange); | |
| //_________________________________________________________________________________ | |
| // | |
| //Heatmap drawing function | |
| //_________________________________________________________________________________ | |
| function drawHeatmap(data, | |
| x, | |
| y, | |
| spacing, | |
| fillProportion, | |
| addText, | |
| addTextRows, | |
| addBorders, | |
| addOutsideBorders, | |
| rectWidth, | |
| rectHeight, | |
| svg, | |
| objId){ | |
| var heatmap=svg.append("svg") | |
| .attr("class", "heatmap") | |
| .attr("y", y) | |
| .attr("x", x) | |
| .attr("id", objId) | |
| var addLength = dataAdd.length; | |
| if(heatmapIgnoreText==1) | |
| var cumulHeight=rectHeight-fontSizeCells.sum()-(addLength+1)*2; | |
| else | |
| var cumulHeight=rectHeight-fillProportion-fontSizeCells.sum()-(addLength+1)*2; | |
| var borderOffset=[0,0]; | |
| if(addOutsideBorders>=0&&objId=='smallHeatmap') | |
| borderOffset=[addOutsideBorders+1,addOutsideBorders+1]; | |
| for(var i=0; i<data[0].length; i++){ | |
| for(var j=0; j<data.length; j++){ | |
| if(addLength>0){ | |
| if(dataAdd[0][j][i]=='Error'){ continue; } | |
| if(addLength>1){ | |
| if(dataAdd[1][j][i]=='Error'){ continue; } | |
| } | |
| } | |
| var g=heatmap.append("g") | |
| .attr("class", "heatmapCell") | |
| .attr("transform", "translate("+ (borderOffset[0]+(i)*(rectWidth+spacing)+addTextRows*(sRowsMargins.sum()+5)) +","+ (borderOffset[1]+(j)*(rectHeight+spacing)+addTextRows*(sColsMargins.sum()+5)) + ")") | |
| g.append("rect") | |
| .attr("y", rectHeight-fillProportion) | |
| .attr("fill", color(data[j][i])) | |
| .attr("id", "heatCell") | |
| .attr("width", rectWidth) | |
| .attr("height", fillProportion) | |
| if(addText||addText==1){ | |
| g.append("text") | |
| .attr("x", rectWidth-5) | |
| .attr("y",cumulHeight) | |
| .attr("id", "heatText") | |
| .attr("dy", fontSizeCells[0]+"px") | |
| .style("font-size", fontSizeCells[0]+"px") | |
| .attr("text-anchor", "end") | |
| .text(data[j][i]); | |
| for(var k=0; k<addLength; k++){ | |
| g.append("text") | |
| .attr("x", rectWidth-5) | |
| .attr("y", cumulHeight+fontSizeCells.slice(0,k+1).sum()+(k+1)*2) | |
| .attr("dy", fontSizeCells[k+1]+"px") | |
| .attr("id", "heatTextAdd") | |
| .style("font-size", fontSizeCells[k+1]+"px") | |
| .attr("text-anchor", "end") | |
| .text(dataAdd[k][j][i]); | |
| } | |
| } | |
| if(addBorders||addBorders==1){ | |
| g.append("polyline") | |
| .attr("points", "0,0 "+rectWidth+",0 "+rectWidth+","+rectHeight+" 0,"+rectHeight+" 0,0") | |
| } | |
| } | |
| } | |
| if(addOutsideBorders>=0){ | |
| var box = heatmap.append("rect") | |
| .attr("fill", "none") | |
| .attr("stroke", "#000") | |
| .attr("stroke-widtx", "1px"); | |
| if(objId=='heatmap') | |
| box.attr("x", sRowsMargins.sum()+5-addOutsideBorders) | |
| .attr("y", sColsMargins.sum()+5-addOutsideBorders) | |
| .attr("width", data[0].length*(spacing+rectWidth)-spacing+2*addOutsideBorders) | |
| .attr("height", data.length*(spacing+rectHeight)-spacing+2*addOutsideBorders); | |
| else{ | |
| box.attr("x", 1) | |
| .attr("y", 1) | |
| .attr("width", data[0].length*(spacing+rectWidth)-spacing+2*addOutsideBorders-1) | |
| .attr("height", data.length*(spacing+rectHeight)-spacing+2*addOutsideBorders-1); | |
| } | |
| } | |
| if(addTextRows||addTextRows==1){ | |
| //Columns | |
| for(var k=0; k<sColumns.length; k++){ | |
| var z=0; | |
| for(var i=0; i<data[0].length; i++){ | |
| if(sColumns[k][i]==null){ | |
| z++; | |
| } | |
| else if(sColumns[k][i]==''){ | |
| z=0; | |
| } | |
| else{ | |
| var g=heatmap.append("g") | |
| .attr("class", "heatmapCell") | |
| .attr("transform", "translate("+ ((i-z)*(rectWidth+spacing)+(sRowsMargins.sum()+5)) +",0)"); | |
| g.append("text") | |
| .attr("x", (rectWidth/2)*(z+1)+z*spacing/2) | |
| .attr("y", sColsMargins.sum()-sColsMargins.slice(0,k+1).sum()) | |
| .style("font-size", fontSizeHeaders+"px") | |
| .attr("text-anchor", "middle") | |
| .text(sColumns[k][i]); | |
| g.append("polyline") | |
| .attr("points", ""+ (0+shrinkHeadersBorders) +","+ (sColsMargins.sum()-sColsMargins.slice(0,k+1).sum()+5) +" "+ (rectWidth*(z+1)+z*spacing-shrinkHeadersBorders) +","\ | |
| +(sColsMargins.sum()-sColsMargins.slice(0,k+1).sum()+5)+""); | |
| z=0; | |
| } | |
| } | |
| } | |
| //Rows | |
| for(var k=0; k<sRows.length; k++){ | |
| var z=0; | |
| for(var j=0; j<data.length; j++){ | |
| if(sRows[k][j]==null){ | |
| z++; | |
| } | |
| else if(sRows[k][j]==''){ | |
| z=0; | |
| } | |
| else{ | |
| var g=heatmap.append("g") | |
| .attr("class", "heatmapCell") | |
| .attr("transform", "translate(0,"+ ((j-z)*(rectHeight+spacing)+(sColsMargins.sum()+5))+ ")"); | |
| g.append("text") | |
| .attr("x", sRowsMargins.sum()-sRowsMargins.slice(0,k+1).sum()) | |
| .attr("y", 0.5*(rectHeight*(z+1)+(z)*spacing+fontSizeHeaders)) | |
| .style("font-size", fontSizeHeaders+"px") | |
| .attr("text-anchor", "end") | |
| .text(sRows[k][j]); | |
| g.append("polyline") | |
| .attr("points", ""+ (sRowsMargins.sum()-sRowsMargins.slice(0,k+1).sum()+5) +","+ (0+shrinkHeadersBorders) + " "\ | |
| + (sRowsMargins.sum()-sRowsMargins.slice(0,k+1).sum()+5) +","+ ((z+1)*rectHeight+z*spacing-shrinkHeadersBorders) +""); | |
| z=0; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| //_________________________________________________________________________________ | |
| // | |
| //Legend for a heatmap | |
| //_________________________________________________________________________________ | |
| function drawLegend(legendSize, x, y, tickValues, colorDomain, color, svg){ | |
| var legendcolorRangecale=d3.scale.linear() | |
| .domain([0,legendSize[0]]) | |
| .range([colorDomain[0], colorDomain[colorDomain.length-1]]), | |
| legendObj=svg.append("svg") | |
| //.attr("width", legendSize[0]+legendSize[2]) | |
| //.attr("height", legendSize[1]+12) | |
| .attr("y", y) | |
| .attr("x", x) | |
| for(var i=0; i<=legendSize[0]; i=i+legendSize[2]){ | |
| legendObj.append("rect") | |
| .attr("x", i-1) | |
| .attr("fill", color(legendcolorRangecale(i))) | |
| .attr("width", legendSize[2]) | |
| .attr("height", legendSize[1]) | |
| .attr("transform", "translate(5,0)") | |
| } | |
| var legendScale = d3.scale.linear() | |
| .domain([colorDomain[0], colorDomain[colorDomain.length-1]]) | |
| .range([0,legendSize[0]]); | |
| var legendXAxis = d3.svg.axis() | |
| .scale(legendScale) | |
| .orient("bottom") | |
| .tickSize(0,0,0) | |
| .tickValues(tickValues) | |
| legendObj.append("g") | |
| .attr('class', 'axis') | |
| .attr("transform", "translate(5," + legendSize[1] + ")") | |
| .call(legendXAxis); | |
| } | |
| function drawLegendVert(legendSize, x, y, tickValues, colorDomain, color, svg){ | |
| var legendcolorRangecale=d3.scale.linear() | |
| .domain([0,legendSize[0]]) | |
| .range([colorDomain[0], colorDomain[colorDomain.length-1]]), | |
| legendObj=svg.append("svg") | |
| //.attr("width", legendSize[0]+legendSize[2]) | |
| //.attr("height", legendSize[1]+12) | |
| .attr("y", y) | |
| .attr("x", x) | |
| .attr("id", "vertLegend") | |
| if(heatmapLegendVert==1) | |
| legendObj.style("opacity", 0.01) | |
| for(var i=0; i<=legendSize[0]; i=i+legendSize[2]){ | |
| legendObj.append("rect") | |
| .attr("y", i-1) | |
| .attr("fill", color(legendcolorRangecale(i))) | |
| .attr("width", legendSize[1]) | |
| .attr("height", legendSize[2]) | |
| .attr("transform", "translate(5,0)") | |
| } | |
| var legendScale = d3.scale.linear() | |
| .domain([colorDomain[0], colorDomain[colorDomain.length-1]]) | |
| .range([5,legendSize[0]-5]); | |
| var legendXAxis = d3.svg.axis() | |
| .scale(legendScale) | |
| .orient("right") | |
| .tickSize(0,0,0) | |
| .ticks(5) | |
| legendObj.append("g") | |
| .attr('class', 'axis') | |
| .attr("transform", "translate("+(legendSize[1]*1.5)+"," + (0*legendSize[1]) + ")") | |
| .call(legendXAxis); | |
| } | |
| function drawLegendBox(x, y, rectWidth, rectHeight, svg){ | |
| var legendObj=svg.append("svg") | |
| //.attr("width", legendSize[0]+legendSize[2]) | |
| //.attr("height", legendSize[1]+12) | |
| .attr("y", y-rectHeight) | |
| .attr("x", x) | |
| var addLength = dataAdd.length; | |
| var cumulHeight=fontSizeCellsLabels.sum()+addLength*2; | |
| var g=legendObj.append("g") | |
| .attr("class", "heatmapCell") | |
| g.append("rect") | |
| .attr("x", 1) | |
| .attr("y", rectHeight-heatmap.fillProportion/heatmap.rectHeight*rectHeight) | |
| .attr("fill", colorRange[0]) | |
| .attr("width", rectWidth-1) | |
| .attr("height", heatmap.fillProportion/heatmap.rectHeight*rectHeight) | |
| g.append("text") | |
| .attr("x", rectWidth-5) | |
| .attr("y", rectHeight-cumulHeight-5-heatmap.fillProportion) | |
| .attr("dy", fontSizeCellsLabels[0]+"px") | |
| .style("font-size", fontSizeCellsLabels[0]+"px") | |
| .attr("text-anchor", "end") | |
| .text(varLabels[0]); | |
| for(var k=0; k<addLength; k++){ | |
| g.append("text") | |
| .attr("x", rectWidth-5) | |
| .attr("y", rectHeight-5-heatmap.fillProportion-cumulHeight+fontSizeCellsLabels.slice(0,k+1).sum()+(k+1)*2) | |
| .attr("dy", fontSizeCellsLabels[k+1]+"px") | |
| .style("font-size", fontSizeCellsLabels[k+1]+"px") | |
| .attr("text-anchor", "end") | |
| .text(varLabels[k+1]); | |
| } | |
| g.append("polyline") | |
| .attr("points", "1,1 "+ (rectWidth-1) +",1 "+ (rectWidth-1) +","+rectHeight+" 1,"+rectHeight+" 1,1") | |
| } | |
| var regressionResults=svg.append("g").attr('id', 'svgElement'+d3ObjId+figTag) | |
| if(heatmap.draw==1){ | |
| drawHeatmap(data/*data*/, | |
| 0/*x*/, | |
| 0/*y*/, | |
| heatmap.spacing/*spacing*/, | |
| heatmap.fillProportion/*fillProportion*/, | |
| heatmap.addText/*addText*/, | |
| heatmap.addTextRows/*addTextRows*/, | |
| heatmap.addBorders/*addBorders*/, | |
| heatmap.addOutsideBorders/*addOutsideBorders*/, | |
| heatmap.rectWidth/*rectWidth*/, | |
| heatmap.rectHeight/*rectHeight*/, | |
| regressionResults,/*svg parent*/ | |
| 'heatmap'/*id*/) | |
| } | |
| var legendX=Math.round(sRowsMargins.slice(0,sRowsMargins.length-1).sum()/2+data[0].length*(heatmap.rectWidth+heatmap.spacing)+5+rightPaneOffset); | |
| if(smallHeatmap.draw==1){ | |
| drawHeatmap(data/*data*/, | |
| legendX/*x*/, | |
| Math.round(heatmap.addTextRows*(sColsMargins.sum()))/*y*/, | |
| smallHeatmap.spacing/*spacing*/, | |
| smallHeatmap.fillProportion/*fillProportion*/, | |
| smallHeatmap.addText/*addText*/, | |
| smallHeatmap.addTextRows/*addTextRows*/, | |
| smallHeatmap.addBorders/*addBorders*/, | |
| smallHeatmap.addOutsideBorders/*addOutsideBorders*/, | |
| smallHeatmap.rectWidth/*rectWidth*/, | |
| smallHeatmap.rectHeight/*rectHeight*/, | |
| regressionResults,/*svg parent*/ | |
| 'smallHeatmap'/*id*/) | |
| } | |
| if(legend.draw==1){ | |
| if(smallHeatmap.draw==1){ | |
| drawLegend( [data[0].length*(smallHeatmap.rectWidth+smallHeatmap.spacing)-smallHeatmap.spacing-smallHeatmap.rectWidth,legend.height,1] /*legendSize*/, | |
| Math.round(smallHeatmap.rectWidth/2+legendX-5+ Math.max(0,smallHeatmap.addOutsideBorders ))/*x*/, | |
| Math.round((data.length)*(smallHeatmap.rectHeight+smallHeatmap.spacing)+sColsMargins.sum()+legend.height+5+2*Math.max(0,smallHeatmap.addOutsideBorders))/*y*/, | |
| [colorDomain[1], colorDomain[colorDomain.length-2]]/*tickValues*/, | |
| colorDomain/*colorDomain*/, | |
| color/*color*/, | |
| regressionResults/*svg*/); | |
| } | |
| drawLegendBox(legendX, | |
| Math.round((data.length)*(heatmap.rectHeight+heatmap.spacing)+heatmap.spacing+1+sColsMargins.sum()), | |
| Math.max(legend.rectWidth, data[0].length*(smallHeatmap.rectWidth+smallHeatmap.spacing)-smallHeatmap.spacing+Math.max(0,2*smallHeatmap.addOutsideBorders)), | |
| legend.rectHeight, | |
| regressionResults) | |
| } | |
| if(heatmapLegendVert==1||heatmapLegendVert==2) | |
| drawLegendVert( [data.length*(heatmap.rectHeight+heatmap.spacing),legend.height,1] /*legendSize*/, | |
| sRowsMargins.slice(0,sRowsMargins.length ).sum()+data[0].length*(heatmap.rectWidth+heatmap.spacing)+25/*x*/, | |
| sColsMargins.sum()+5/*y*/, | |
| [colorDomain[1], colorDomain[colorDomain.length-2]]/*tickValues*/, | |
| colorDomain/*colorDomain*/, | |
| color/*color*/, | |
| regressionResults/*svg*/); | |
| var objWidth=document.getElementById('svgElement'+d3ObjId+figTag).getBoundingClientRect()['width'] | |
| var objHeight=document.getElementById('svgElement'+d3ObjId+figTag).getBoundingClientRect()['height'] | |
| regressionResults.attr("transform", "translate("+ ((width-objWidth)/2) +","+ ((height-objHeight)/2) + ")") | |
| ''') | |
| def getPhantomJsScript(self, mode): | |
| if 'html' in mode: | |
| phantomJs=''' | |
| var page = require('webpage').create(), | |
| system = require('system'), | |
| address, elementHtml; | |
| address = system.args[1]; | |
| page.viewportSize = { width: 600, height: 600 }; | |
| page.open(address, function (status) { | |
| if (status !== 'success') { | |
| console.log('Unable to load the address!'); | |
| } else { | |
| window.setTimeout(function () { | |
| elementHtml=page.evaluate(function() { | |
| document.body.bgColor = 'white'; | |
| return document.getElementById("d3OutputOutterContainer").innerHTML; | |
| }); | |
| console.log(elementHtml); | |
| phantom.exit(1); | |
| }, 200); | |
| } | |
| }); | |
| ''' | |
| return phantomJs | |
| def render(self, mode=['html'], fileName=None): | |
| if type(mode) not in (list, tuple): | |
| mode=(mode,) | |
| self.getJsInputs() | |
| html=['<style>', | |
| self.css, | |
| '</style>', | |
| '</head>', | |
| '<body>', | |
| '<div id="d3OutputOutterContainer">', | |
| self.html, | |
| '</div>', | |
| '<script>', | |
| self.js[0], | |
| self.jsInputs,] + self.js[1:] + ['</script>' | |
| ] | |
| if self.publish: | |
| html='\n'.join(html) | |
| from IPython.core.display import publish_html | |
| publish_html(html) | |
| return True | |
| import tempfile | |
| from os import unlink | |
| import subprocess | |
| from time import sleep | |
| html=['<html>', | |
| '<head>', | |
| '<title></title>', | |
| '<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>', | |
| '<script src="http://d3js.org/d3.v3.min.js"></script>',] +\ | |
| html +\ | |
| ['</body>', | |
| '</html>',] | |
| html='\n'.join(html) | |
| tempJs=tempfile.NamedTemporaryFile(mode="w+b", delete=False, suffix='.js') | |
| tempJs.write(self.getPhantomJsScript(mode)) | |
| tempJs.flush() | |
| tempJs.close() | |
| temp=tempfile.NamedTemporaryFile(mode="w+b", delete=False, suffix='.htm') | |
| temp.write(html) | |
| temp.flush() | |
| temp.close() | |
| phantomJs=r'''phantomjs {0} {1}'''.format(tempJs.name, temp.name) | |
| phantomJsProc = subprocess.Popen( shlex.split(phantomJs), stdout = subprocess.PIPE, stderr = subprocess.PIPE) | |
| html = '' | |
| err = '' | |
| while phantomJsProc.poll() is None: | |
| sleep( 0.1 ) | |
| html, err = phantomJsProc.communicate() | |
| unlink(temp.name) | |
| unlink(tempJs.name) | |
| if 'html' in mode: | |
| if 'only' in mode: | |
| return html | |
| html=html.replace("&", "&") | |
| if 'file'in mode and fileName!=None: | |
| html=['<html>', | |
| '<head>', | |
| '</head>', | |
| '<style>', | |
| self.css, | |
| '</style>', | |
| html, | |
| '</body>', | |
| '</html>',] | |
| fileOpen=open(fileName,'wb') | |
| fileOpen.write('\n'.join(html)) | |
| fileOpen.close() | |
| return True | |
| html='\n'.join(['<style>',self.css,'</style>'])+html | |
| if 'show'in mode: | |
| from IPython.core.display import publish_html | |
| publish_html(html) | |
| return True | |
| return html | |
| def addSimpleTable(self, | |
| data, | |
| dataAdd=[], | |
| pVals=False, | |
| fontSizeCells=[], | |
| sRows=[], | |
| sColumns=[], | |
| sRowsMargins=[5,100], | |
| sColsMargins=[5,20], | |
| fontSizeHeaders=9, | |
| shrinkHeadersBorders=1.5, | |
| spacing=0, | |
| addBorders=1, | |
| addOutsideBorders=-1, | |
| rectWidth=45, | |
| rectHeight=0, | |
| ): | |
| if len(fontSizeCells)==0: | |
| fontSizeCells=[12]*(1+len(dataAdd)) | |
| self.addTable(data=data, | |
| dataAdd=dataAdd, | |
| pVals=pVals, | |
| fontSizeCells=fontSizeCells+[5], | |
| fontSizeCellsLabels=fontSizeCells+[5], | |
| sRows=sRows, | |
| sColumns=sColumns, | |
| sRowsMargins=sRowsMargins, | |
| sColsMargins=sColsMargins, | |
| varLabels=[], | |
| fontSizeHeaders=fontSizeHeaders, | |
| shrinkHeadersBorders=shrinkHeadersBorders, | |
| heatmapIgnoreText=1, | |
| heatmap={ | |
| 'draw':1, | |
| 'spacing':spacing, | |
| 'fillProportion':0, | |
| 'addText':1, | |
| 'addTextRows':1, | |
| 'addBorders':addBorders, | |
| 'addOutsideBorders':addOutsideBorders, | |
| 'rectWidth':rectWidth, | |
| 'rectHeight':rectHeight if rectHeight>0 else sum(fontSizeCells)+10+2*len(dataAdd), | |
| }, | |
| smallHeatmap={ | |
| 'draw':0, | |
| }, | |
| legend= { | |
| 'draw':0, | |
| }, | |
| rightPaneOffset=0 | |
| ) | |
| def addPageBreak(self): | |
| self.addJs('''$("#"+d3ObjId).append('<div style="page-break-after:always; display:block; width:1px; height:1px;"> </div>')''') | |
| def getStandardCss(self, mode='jfCss'): | |
| if mode=='jfCss': | |
| return''' | |
| .d3Output{ | |
| min-height: 1.2em; | |
| line-height: 1.2em; | |
| position: relative; | |
| font-size: 1em; | |
| padding: 5px 0; | |
| list-style: none; | |
| background: #fff; | |
| color: #000; | |
| } | |
| svg{ | |
| color-rendering: optimizeQuality !important; | |
| shape-rendering: geometricPrecision !important; | |
| text-rendering: geometricPrecision !important; | |
| } | |
| .d3Output.header{ | |
| text-align: center; | |
| font-weight: bold; | |
| border-bottom: none; | |
| font-size: 0.9em; | |
| } | |
| .d3Output.title{ | |
| text-align: center; | |
| font-weight: bold; | |
| border-bottom: none; | |
| font-size: 1.2em; | |
| } | |
| .d3Output.description{ | |
| font-size: 0.8em; | |
| text-align:justify; | |
| text-justify:inter-word; | |
| border-bottom: 1px solid #000; | |
| } | |
| .d3Output.description.panel{ | |
| text-align: center; | |
| } | |
| svg, canvas { | |
| border-bottom: 1px solid #000; | |
| display: block; | |
| margin: 5px 0; | |
| } | |
| .d3Output.description.figure{ | |
| border-bottom: none; | |
| } | |
| ''' | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "metadata": { | |
| "name": "ipyD3sample" | |
| }, | |
| "nbformat": 3, | |
| "nbformat_minor": 0, | |
| "worksheets": [ | |
| { | |
| "cells": [ | |
| { | |
| "cell_type": "code", | |
| "collapsed": false, | |
| "input": [ | |
| "%cd \"c:\\Projects\\HFI\\Python\"" | |
| ], | |
| "language": "python", | |
| "metadata": {}, | |
| "outputs": [ | |
| { | |
| "output_type": "stream", | |
| "stream": "stdout", | |
| "text": [ | |
| "c:\\Projects\\HFI\\Python\n" | |
| ] | |
| } | |
| ], | |
| "prompt_number": 1 | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": {}, | |
| "source": [ | |
| "While Matplotlib is powerful, it requires a steep learning curve. Moreover, I found it often requires more lines of code for the type of visualisations I wish to produce than various *.js libriaries. Ever since I found out about IPython Notebook and d3js I wanted to combine the two and replace Matplotlib in my workflow. IPython offers a great interactive way of using Python. D3js coupled with developer tools in Chrome/Firefox does the same to graphics.\n", | |
| "\n", | |
| "There are a few obstacles.\n", | |
| "\n", | |
| "##Obstacle 1: Javascript in a function is confusing" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "collapsed": false, | |
| "input": [ | |
| "def x():\n", | |
| " from IPython.core.display import Javascript\n", | |
| " Javascript('alert(\"a\")')\n", | |
| "x()" | |
| ], | |
| "language": "python", | |
| "metadata": {}, | |
| "outputs": [], | |
| "prompt_number": 2 | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": {}, | |
| "source": [ | |
| "This will not produce a warning if executed." | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "collapsed": false, | |
| "input": [ | |
| "def x():\n", | |
| " from IPython.core.display import publish_javascript\n", | |
| " publish_javascript('alert(\"a\")')\n", | |
| "x()" | |
| ], | |
| "language": "python", | |
| "metadata": {}, | |
| "outputs": [ | |
| { | |
| "javascript": [ | |
| "alert(\"a\")" | |
| ], | |
| "output_type": "display_data" | |
| } | |
| ], | |
| "prompt_number": 3 | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": {}, | |
| "source": [ | |
| "While this will...\n", | |
| "\n", | |
| "##Obstacle 2: Neither will execute after page refresh" | |
| ] | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": {}, | |
| "source": [ | |
| "Which initially forced me to output scripts in html.\n", | |
| "\n", | |
| "Of course, just like Javascript(), HTML() does not work from withing a function as well." | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "collapsed": false, | |
| "input": [ | |
| "def x():\n", | |
| " from IPython.core.display import HTML\n", | |
| " HTML('<script>alert(\"a\")</script>')\n", | |
| "#x()" | |
| ], | |
| "language": "python", | |
| "metadata": {}, | |
| "outputs": [], | |
| "prompt_number": 4 | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": {}, | |
| "source": [ | |
| "You need to use publish_html if you want to get anywhere. It has the added benefit of executing on page refresh." | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "collapsed": false, | |
| "input": [ | |
| "def x():\n", | |
| " from IPython.core.display import publish_html\n", | |
| " publish_html('<script>alert(\"a\")</script>')\n", | |
| "#x()" | |
| ], | |
| "language": "python", | |
| "metadata": {}, | |
| "outputs": [], | |
| "prompt_number": 5 | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": {}, | |
| "source": [ | |
| "##Obstacle 3: Javascript executes too soon\n", | |
| "While publish_html works, I found that it would execute before d3js could be loaded, resulting only in errors in the console.\n", | |
| "\n", | |
| "##Obstacle 4: Some Javascript breaks the Notebook\n", | |
| "Moreover, I found that every now and again, some long Javascript instructions would result in IPython Notebook not being able to display notebooks in whole. While the data was not destroyed, the page would stop displaying at a cell with the faulty script. Since you cannot save a selective cell, this forced me to manually edit notebooks all too often.\n", | |
| "\n", | |
| "##Result\n", | |
| "As a result I resorted to creating the d3 scripts from within (I)Python but rendering them later on with PhantomJs. Becasue of that one can easily switch between producing interactive SVG visualisations by just copying the resulting HTML code from the rendered script file, or saving a static version in PNG, PDF, etc.\n", | |
| "\n", | |
| "The main ingredients are coded as a [class in Python](http://gist.github.com/4484816)" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "collapsed": false, | |
| "input": [ | |
| "from ipyD3 import *" | |
| ], | |
| "language": "python", | |
| "metadata": {}, | |
| "outputs": [], | |
| "prompt_number": 6 | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": {}, | |
| "source": [ | |
| "The first thing is to start a d3 object instance." | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "collapsed": false, | |
| "input": [ | |
| "d3 = d3object()" | |
| ], | |
| "language": "python", | |
| "metadata": {}, | |
| "outputs": [], | |
| "prompt_number": 7 | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": {}, | |
| "source": [ | |
| "All arguments are kwargs, and you can set:\n", | |
| "\n", | |
| "* _height_ of your object\n", | |
| "* _width_ of your object\n", | |
| "* html that will preceed yout object (_topHtml_)\n", | |
| "* html that will follow yout object (_bottomHtml_)\n", | |
| "* a predefined _style_ that includes _topHtml_, _botttomHtml_, and css\n", | |
| "* weather to execute the scripts in your notebook (_publish_)\n", | |
| "* weather to append the resulting object to to toolbar so that it is always visible (_test_, requires _publish=1_)\n", | |
| "* how precise should be the data on conversion to Javascript variables (_precision_)\n", | |
| "* previous _d3_ objects if you wish to create a multi-page report\n", | |
| "\n", | |
| "\n", | |
| "##Tables\n", | |
| "I often use this class to produce tables." | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "collapsed": false, | |
| "input": [ | |
| "d3 = d3object(width=800,\n", | |
| " height=400,\n", | |
| " style='JFTable',\n", | |
| " number=1,\n", | |
| " d3=None,\n", | |
| " title='Example table with d3js',\n", | |
| " desc='An example table created created with d3js with data generated with Python.')\n", | |
| "data=[[1277.0, 654.0, 288.0, 1976.0, 3281.0, 3089.0, 10336.0, 4650.0, 4441.0, 4670.0, 944.0, 110.0],\n", | |
| "[1318.0, 664.0, 418.0, 1952.0, 3581.0, 4574.0, 11457.0, 6139.0, 7078.0, 6561.0, 2354.0, 710.0],\n", | |
| "[1783.0, 774.0, 564.0, 1470.0, 3571.0, 3103.0, 9392.0, 5532.0, 5661.0, 4991.0, 2032.0, 680.0],\n", | |
| "[1301.0, 604.0, 286.0, 2152.0, 3282.0, 3369.0, 10490.0, 5406.0, 4727.0, 3428.0, 1559.0, 620.0],\n", | |
| "[1537.0, 1714.0, 724.0, 4824.0, 5551.0, 8096.0, 16589.0, 13650.0, 9552.0, 13709.0, 2460.0, 720.0],\n", | |
| "[5691.0, 2995.0, 1680.0, 11741.0, 16232.0, 14731.0, 43522.0, 32794.0, 26634.0, 31400.0, 7350.0, 3010.0],\n", | |
| "[1650.0, 2096.0, 60.0, 50.0, 1180.0, 5602.0, 15728.0, 6874.0, 5115.0, 3510.0, 1390.0, 170.0],\n", | |
| "[72.0, 60.0, 60.0, 10.0, 120.0, 172.0, 1092.0, 675.0, 408.0, 360.0, 156.0, 100.0]]\n", | |
| "data=[list(i) for i in zip(*data)]\n", | |
| "sRows=[['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'Deecember']]\n", | |
| "sColumns=[['Prod {0}'.format(i) for i in xrange(1,9)],\n", | |
| " [None, '', None, None, 'Group 1', None, None, 'Group 2']]\n", | |
| "d3.addSimpleTable( data, \n", | |
| " fontSizeCells=[12,],\n", | |
| " sRows=sRows,\n", | |
| " sColumns=sColumns,\n", | |
| " sRowsMargins=[5,50,0],\n", | |
| " sColsMargins=[5,20,10],\n", | |
| " spacing=2,\n", | |
| " addBorders=1,\n", | |
| " addOutsideBorders=-1,\n", | |
| " rectWidth=45,\n", | |
| " rectHeight=0 \n", | |
| " )\n", | |
| "d3.render(mode=['html', 'show'])" | |
| ], | |
| "language": "python", | |
| "metadata": {}, | |
| "outputs": [ | |
| { | |
| "html": [ | |
| "<style>\n", | |
| "\n", | |
| "\n", | |
| " .d3Output{\n", | |
| " min-height: 1.2em;\n", | |
| " line-height: 1.2em;\n", | |
| " position: relative;\n", | |
| " font-size: 1em;\n", | |
| " padding: 5px 0;\n", | |
| " \n", | |
| " list-style: none;\n", | |
| " background: #fff;\n", | |
| " color: #000;\n", | |
| " }\n", | |
| " svg{\n", | |
| " color-rendering: optimizeQuality !important;\n", | |
| " shape-rendering: geometricPrecision !important;\n", | |
| " text-rendering: geometricPrecision !important;\n", | |
| " }\n", | |
| " .d3Output.header{\n", | |
| " text-align: center;\n", | |
| " font-weight: bold;\n", | |
| " border-bottom: none;\n", | |
| " font-size: 0.9em;\n", | |
| " \n", | |
| " }\n", | |
| " .d3Output.title{\n", | |
| " text-align: center;\n", | |
| " font-weight: bold;\n", | |
| " border-bottom: none;\n", | |
| " font-size: 1.2em;\n", | |
| " \n", | |
| " }\n", | |
| " .d3Output.description{\n", | |
| " font-size: 0.8em;\n", | |
| " text-align:justify;\n", | |
| " text-justify:inter-word;\n", | |
| " border-bottom: 1px solid #000;\n", | |
| " }\n", | |
| " .d3Output.description.panel{\n", | |
| " text-align: center;\n", | |
| " }\n", | |
| " svg, canvas {\n", | |
| " border-bottom: 1px solid #000;\n", | |
| " display: block;\n", | |
| " margin: 5px 0;\n", | |
| " }\n", | |
| " .d3Output.description.figure{\n", | |
| " border-bottom: none;\n", | |
| " }\n", | |
| " \n", | |
| "\n", | |
| " .heatmapCell path, .heatmapCell line, .heatmapCell polyline, .d3Output polyline {\n", | |
| " fill: none;\n", | |
| " stroke-width: 1px;\n", | |
| " stroke: black;\n", | |
| " shape-rendering: crispEdges !important;\n", | |
| " }\n", | |
| " .heatmapCell text, .heatmapCell rect, .d3Output rect {\n", | |
| " font-size: 1em;\n", | |
| " shape-rendering: crispEdges !important;\n", | |
| " }\n", | |
| " \n", | |
| "#-tag-60a90190-59a9-11e2-bed8-00268315e762{shape-rendering: crispEdges !important;}\n", | |
| "</style>\r\n", | |
| "<div class=\"d3Output header\" style=\"width: 800px;\">Table 1</div>\r\n", | |
| "<div class=\"d3Output title\" style=\"width: 800px;\"> Example table with d3js</div>\r\n", | |
| "<div class=\"d3Output description\" style=\"width: 800px\"> An example table created created with d3js with data generated with Python.</div>\r\n", | |
| "<div id=\"id-60a9018f-59a9-11e2-a85c-00268315e762\" class=\"d3Output\"><svg width=\"800\" height=\"400\" style=\"border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: black; \"><g id=\"svgElementid-60a9018f-59a9-11e2-a85c-00268315e762-tag-60a90190-59a9-11e2-bed8-00268315e762\" transform=\"translate(187.5,37)\"><svg class=\"heatmap\" y=\"0\" x=\"0\" id=\"heatmap\"><g class=\"heatmapCell\" transform=\"translate(60,40)\"><rect y=\"22\" fill=\"#a7f590\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">1277</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(60,64)\"><rect y=\"22\" fill=\"#b0f88d\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">654</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(60,88)\"><rect y=\"22\" fill=\"#b5fa8b\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">288</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(60,112)\"><rect y=\"22\" fill=\"#9df293\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">1976</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(60,136)\"><rect y=\"22\" fill=\"#8aec99\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">3281</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(60,160)\"><rect y=\"22\" fill=\"#8ded98\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">3089</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(60,184)\"><rect y=\"22\" fill=\"#43c3b1\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">10336</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(60,208)\"><rect y=\"22\" fill=\"#78e49f\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">4650</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(60,232)\"><rect y=\"22\" fill=\"#7be59e\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">4441</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(60,256)\"><rect y=\"22\" fill=\"#78e49f\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">4670</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(60,280)\"><rect y=\"22\" fill=\"#abf78e\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">944</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(60,304)\"><rect y=\"22\" fill=\"#b8fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">110</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(107,40)\"><rect y=\"22\" fill=\"#a6f590\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">1318</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(107,64)\"><rect y=\"22\" fill=\"#b0f88d\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">664</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(107,88)\"><rect y=\"22\" fill=\"#b3f98c\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">418</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(107,112)\"><rect y=\"22\" fill=\"#9df392\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">1952</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(107,136)\"><rect y=\"22\" fill=\"#86ea9a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">3581</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(107,160)\"><rect y=\"22\" fill=\"#79e59f\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">4574</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(107,184)\"><rect y=\"22\" fill=\"#41bcb2\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">11457</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(107,208)\"><rect y=\"22\" fill=\"#66dca6\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">6139</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(107,232)\"><rect y=\"22\" fill=\"#5dd7a9\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">7078</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(107,256)\"><rect y=\"22\" fill=\"#62daa7\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">6561</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(107,280)\"><rect y=\"22\" fill=\"#97f194\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">2354</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(107,304)\"><rect y=\"22\" fill=\"#aff88d\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">710</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(154,40)\"><rect y=\"22\" fill=\"#9ff392\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">1783</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(154,64)\"><rect y=\"22\" fill=\"#aef88d\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">774</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(154,88)\"><rect y=\"22\" fill=\"#b1f98c\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">564</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(154,112)\"><rect y=\"22\" fill=\"#a4f590\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">1470</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(154,136)\"><rect y=\"22\" fill=\"#86ea9a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">3571</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(154,160)\"><rect y=\"22\" fill=\"#8ded98\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">3103</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(154,184)\"><rect y=\"22\" fill=\"#4ac9af\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">9392</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(154,208)\"><rect y=\"22\" fill=\"#6de0a3\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">5532</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(154,232)\"><rect y=\"22\" fill=\"#6cdfa4\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">5661</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(154,256)\"><rect y=\"22\" fill=\"#74e3a1\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">4991</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(154,280)\"><rect y=\"22\" fill=\"#9cf293\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">2032</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(154,304)\"><rect y=\"22\" fill=\"#aff88d\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">680</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(201,40)\"><rect y=\"22\" fill=\"#a6f590\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">1301</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(201,64)\"><rect y=\"22\" fill=\"#b0f88d\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">604</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(201,88)\"><rect y=\"22\" fill=\"#b5fa8b\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">286</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(201,112)\"><rect y=\"22\" fill=\"#9af293\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">2152</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(201,136)\"><rect y=\"22\" fill=\"#8aec99\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">3282</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(201,160)\"><rect y=\"22\" fill=\"#89eb99\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">3369</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(201,184)\"><rect y=\"22\" fill=\"#43c2b1\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">10490</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(201,208)\"><rect y=\"22\" fill=\"#6fe0a2\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">5406</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(201,232)\"><rect y=\"22\" fill=\"#77e49f\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">4727</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(201,256)\"><rect y=\"22\" fill=\"#88eb99\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">3428</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(201,280)\"><rect y=\"22\" fill=\"#a3f491\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">1559</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(201,304)\"><rect y=\"22\" fill=\"#b0f88d\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">620</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(248,40)\"><rect y=\"22\" fill=\"#a3f491\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">1537</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(248,64)\"><rect y=\"22\" fill=\"#a0f491\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">1714</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(248,88)\"><rect y=\"22\" fill=\"#aff88d\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">724</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(248,112)\"><rect y=\"22\" fill=\"#76e3a0\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">4824</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(248,136)\"><rect y=\"22\" fill=\"#6de0a3\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">5551</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(248,160)\"><rect y=\"22\" fill=\"#53d0ac\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">8096</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(248,184)\"><rect y=\"22\" fill=\"#4c99ad\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">16589</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(248,208)\"><rect y=\"22\" fill=\"#41adb2\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">13650</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(248,232)\"><rect y=\"22\" fill=\"#49c8af\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">9552</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(248,256)\"><rect y=\"22\" fill=\"#41acb2\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">13709</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(248,280)\"><rect y=\"22\" fill=\"#96f095\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">2460</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(248,304)\"><rect y=\"22\" fill=\"#aff88d\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">720</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(295,40)\"><rect y=\"22\" fill=\"#6bdfa4\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">5691</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(295,64)\"><rect y=\"22\" fill=\"#8eed97\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">2995</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(295,88)\"><rect y=\"22\" fill=\"#a1f491\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">1680</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(295,112)\"><rect y=\"22\" fill=\"#40bab2\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">11741</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(295,136)\"><rect y=\"22\" fill=\"#4a9bae\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">16232</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(295,160)\"><rect y=\"22\" fill=\"#44a6b1\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">14731</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(295,184)\"><rect y=\"22\" fill=\"#210f06\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">43522</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(295,208)\"><rect y=\"22\" fill=\"#5c3544\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">32794</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(295,232)\"><rect y=\"22\" fill=\"#6a5673\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">26634</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(295,256)\"><rect y=\"22\" fill=\"#623c4f\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">31400</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(295,280)\"><rect y=\"22\" fill=\"#5ad5aa\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">7350</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(295,304)\"><rect y=\"22\" fill=\"#8eed97\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">3010</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(342,40)\"><rect y=\"22\" fill=\"#a1f491\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">1650</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(342,64)\"><rect y=\"22\" fill=\"#9bf293\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">2096</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(342,88)\"><rect y=\"22\" fill=\"#b8fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">60</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(342,112)\"><rect y=\"22\" fill=\"#b8fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">50</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(342,136)\"><rect y=\"22\" fill=\"#a8f68f\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">1180</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(342,160)\"><rect y=\"22\" fill=\"#6ddfa3\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">5602</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(342,184)\"><rect y=\"22\" fill=\"#489faf\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">15728</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(342,208)\"><rect y=\"22\" fill=\"#5fd8a8\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">6874</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(342,232)\"><rect y=\"22\" fill=\"#72e2a1\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">5115</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(342,256)\"><rect y=\"22\" fill=\"#87ea9a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">3510</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(342,280)\"><rect y=\"22\" fill=\"#a5f590\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">1390</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(342,304)\"><rect y=\"22\" fill=\"#b7fa8b\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">170</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(389,40)\"><rect y=\"22\" fill=\"#b8fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">72</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(389,64)\"><rect y=\"22\" fill=\"#b8fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">60</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(389,88)\"><rect y=\"22\" fill=\"#b8fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">60</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(389,112)\"><rect y=\"22\" fill=\"#b9fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">10</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(389,136)\"><rect y=\"22\" fill=\"#b7fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">120</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(389,160)\"><rect y=\"22\" fill=\"#b7fa8b\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">172</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(389,184)\"><rect y=\"22\" fill=\"#a9f68f\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">1092</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(389,208)\"><rect y=\"22\" fill=\"#aff88d\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">675</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(389,232)\"><rect y=\"22\" fill=\"#b3f98c\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">408</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(389,256)\"><rect y=\"22\" fill=\"#b4f98c\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">360</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(389,280)\"><rect y=\"22\" fill=\"#b7fa8b\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">156</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(389,304)\"><rect y=\"22\" fill=\"#b8fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">100</text><polyline points=\"0,0 45,0 45,22 0,22 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(60,0)\"><text x=\"22.5\" y=\"30\" style=\"font-size: 9px; \" text-anchor=\"middle\">Prod 1</text><polyline points=\"1.5,35 43.5,35\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(107,0)\"><text x=\"22.5\" y=\"30\" style=\"font-size: 9px; \" text-anchor=\"middle\">Prod 2</text><polyline points=\"1.5,35 43.5,35\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(154,0)\"><text x=\"22.5\" y=\"30\" style=\"font-size: 9px; \" text-anchor=\"middle\">Prod 3</text><polyline points=\"1.5,35 43.5,35\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(201,0)\"><text x=\"22.5\" y=\"30\" style=\"font-size: 9px; \" text-anchor=\"middle\">Prod 4</text><polyline points=\"1.5,35 43.5,35\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(248,0)\"><text x=\"22.5\" y=\"30\" style=\"font-size: 9px; \" text-anchor=\"middle\">Prod 5</text><polyline points=\"1.5,35 43.5,35\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(295,0)\"><text x=\"22.5\" y=\"30\" style=\"font-size: 9px; \" text-anchor=\"middle\">Prod 6</text><polyline points=\"1.5,35 43.5,35\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(342,0)\"><text x=\"22.5\" y=\"30\" style=\"font-size: 9px; \" text-anchor=\"middle\">Prod 7</text><polyline points=\"1.5,35 43.5,35\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(389,0)\"><text x=\"22.5\" y=\"30\" style=\"font-size: 9px; \" text-anchor=\"middle\">Prod 8</text><polyline points=\"1.5,35 43.5,35\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(154,0)\"><text x=\"69.5\" y=\"10\" style=\"font-size: 9px; \" text-anchor=\"middle\">Group 1</text><polyline points=\"1.5,15 137.5,15\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(295,0)\"><text x=\"69.5\" y=\"10\" style=\"font-size: 9px; \" text-anchor=\"middle\">Group 2</text><polyline points=\"1.5,15 137.5,15\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(0,40)\"><text x=\"50\" y=\"15.5\" style=\"font-size: 9px; \" text-anchor=\"end\">January</text><polyline points=\"55,1.5 55,20.5\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(0,64)\"><text x=\"50\" y=\"15.5\" style=\"font-size: 9px; \" text-anchor=\"end\">February</text><polyline points=\"55,1.5 55,20.5\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(0,88)\"><text x=\"50\" y=\"15.5\" style=\"font-size: 9px; \" text-anchor=\"end\">March</text><polyline points=\"55,1.5 55,20.5\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(0,112)\"><text x=\"50\" y=\"15.5\" style=\"font-size: 9px; \" text-anchor=\"end\">April</text><polyline points=\"55,1.5 55,20.5\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(0,136)\"><text x=\"50\" y=\"15.5\" style=\"font-size: 9px; \" text-anchor=\"end\">May</text><polyline points=\"55,1.5 55,20.5\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(0,160)\"><text x=\"50\" y=\"15.5\" style=\"font-size: 9px; \" text-anchor=\"end\">June</text><polyline points=\"55,1.5 55,20.5\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(0,184)\"><text x=\"50\" y=\"15.5\" style=\"font-size: 9px; \" text-anchor=\"end\">July</text><polyline points=\"55,1.5 55,20.5\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(0,208)\"><text x=\"50\" y=\"15.5\" style=\"font-size: 9px; \" text-anchor=\"end\">August</text><polyline points=\"55,1.5 55,20.5\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(0,232)\"><text x=\"50\" y=\"15.5\" style=\"font-size: 9px; \" text-anchor=\"end\">September</text><polyline points=\"55,1.5 55,20.5\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(0,256)\"><text x=\"50\" y=\"15.5\" style=\"font-size: 9px; \" text-anchor=\"end\">October</text><polyline points=\"55,1.5 55,20.5\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(0,280)\"><text x=\"50\" y=\"15.5\" style=\"font-size: 9px; \" text-anchor=\"end\">November</text><polyline points=\"55,1.5 55,20.5\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(0,304)\"><text x=\"50\" y=\"15.5\" style=\"font-size: 9px; \" text-anchor=\"end\">Deecember</text><polyline points=\"55,1.5 55,20.5\"></polyline></g></svg></g></svg></div>\r\n", | |
| "\r\n" | |
| ], | |
| "output_type": "display_data" | |
| }, | |
| { | |
| "output_type": "pyout", | |
| "prompt_number": 8, | |
| "text": [ | |
| "True" | |
| ] | |
| } | |
| ], | |
| "prompt_number": 8 | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": {}, | |
| "source": [ | |
| "For a slightly cleaner look you can remove the borders..." | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "collapsed": false, | |
| "input": [ | |
| "d3 = d3object(width=800,\n", | |
| " height=400,\n", | |
| " style='JFTable',\n", | |
| " number=1,\n", | |
| " d3=None,\n", | |
| " title='Example table with d3js',\n", | |
| " desc='An example table created created with d3js with data generated with Python.')\n", | |
| "d3.addSimpleTable( data, \n", | |
| " fontSizeCells=[12,],\n", | |
| " sRows=sRows,\n", | |
| " sColumns=sColumns,\n", | |
| " sRowsMargins=[5,50,0],\n", | |
| " sColsMargins=[5,20,10],\n", | |
| " spacing=2,\n", | |
| " addBorders=0,\n", | |
| " addOutsideBorders=-1,\n", | |
| " rectWidth=45,\n", | |
| " rectHeight=0 \n", | |
| " )\n", | |
| "d3.render(mode=['html', 'show'])" | |
| ], | |
| "language": "python", | |
| "metadata": {}, | |
| "outputs": [ | |
| { | |
| "html": [ | |
| "<style>\n", | |
| "\n", | |
| "\n", | |
| " .d3Output{\n", | |
| " min-height: 1.2em;\n", | |
| " line-height: 1.2em;\n", | |
| " position: relative;\n", | |
| " font-size: 1em;\n", | |
| " padding: 5px 0;\n", | |
| " \n", | |
| " list-style: none;\n", | |
| " background: #fff;\n", | |
| " color: #000;\n", | |
| " }\n", | |
| " svg{\n", | |
| " color-rendering: optimizeQuality !important;\n", | |
| " shape-rendering: geometricPrecision !important;\n", | |
| " text-rendering: geometricPrecision !important;\n", | |
| " }\n", | |
| " .d3Output.header{\n", | |
| " text-align: center;\n", | |
| " font-weight: bold;\n", | |
| " border-bottom: none;\n", | |
| " font-size: 0.9em;\n", | |
| " \n", | |
| " }\n", | |
| " .d3Output.title{\n", | |
| " text-align: center;\n", | |
| " font-weight: bold;\n", | |
| " border-bottom: none;\n", | |
| " font-size: 1.2em;\n", | |
| " \n", | |
| " }\n", | |
| " .d3Output.description{\n", | |
| " font-size: 0.8em;\n", | |
| " text-align:justify;\n", | |
| " text-justify:inter-word;\n", | |
| " border-bottom: 1px solid #000;\n", | |
| " }\n", | |
| " .d3Output.description.panel{\n", | |
| " text-align: center;\n", | |
| " }\n", | |
| " svg, canvas {\n", | |
| " border-bottom: 1px solid #000;\n", | |
| " display: block;\n", | |
| " margin: 5px 0;\n", | |
| " }\n", | |
| " .d3Output.description.figure{\n", | |
| " border-bottom: none;\n", | |
| " }\n", | |
| " \n", | |
| "\n", | |
| " .heatmapCell path, .heatmapCell line, .heatmapCell polyline, .d3Output polyline {\n", | |
| " fill: none;\n", | |
| " stroke-width: 1px;\n", | |
| " stroke: black;\n", | |
| " shape-rendering: crispEdges !important;\n", | |
| " }\n", | |
| " .heatmapCell text, .heatmapCell rect, .d3Output rect {\n", | |
| " font-size: 1em;\n", | |
| " shape-rendering: crispEdges !important;\n", | |
| " }\n", | |
| " \n", | |
| "#-tag-645fef0f-59a9-11e2-ae2c-00268315e762{shape-rendering: crispEdges !important;}\n", | |
| "</style>\r\n", | |
| "<div class=\"d3Output header\" style=\"width: 800px;\">Table 1</div>\r\n", | |
| "<div class=\"d3Output title\" style=\"width: 800px;\"> Example table with d3js</div>\r\n", | |
| "<div class=\"d3Output description\" style=\"width: 800px\"> An example table created created with d3js with data generated with Python.</div>\r\n", | |
| "<div id=\"id-645fc800-59a9-11e2-b901-00268315e762\" class=\"d3Output\"><svg width=\"800\" height=\"400\" style=\"border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: black; \"><g id=\"svgElementid-645fc800-59a9-11e2-b901-00268315e762-tag-645fef0f-59a9-11e2-ae2c-00268315e762\" transform=\"translate(190,39)\"><svg class=\"heatmap\" y=\"0\" x=\"0\" id=\"heatmap\"><g class=\"heatmapCell\" transform=\"translate(60,40)\"><rect y=\"22\" fill=\"#a7f590\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">1277</text></g><g class=\"heatmapCell\" transform=\"translate(60,64)\"><rect y=\"22\" fill=\"#b0f88d\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">654</text></g><g class=\"heatmapCell\" transform=\"translate(60,88)\"><rect y=\"22\" fill=\"#b5fa8b\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">288</text></g><g class=\"heatmapCell\" transform=\"translate(60,112)\"><rect y=\"22\" fill=\"#9df293\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">1976</text></g><g class=\"heatmapCell\" transform=\"translate(60,136)\"><rect y=\"22\" fill=\"#8aec99\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">3281</text></g><g class=\"heatmapCell\" transform=\"translate(60,160)\"><rect y=\"22\" fill=\"#8ded98\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">3089</text></g><g class=\"heatmapCell\" transform=\"translate(60,184)\"><rect y=\"22\" fill=\"#43c3b1\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">10336</text></g><g class=\"heatmapCell\" transform=\"translate(60,208)\"><rect y=\"22\" fill=\"#78e49f\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">4650</text></g><g class=\"heatmapCell\" transform=\"translate(60,232)\"><rect y=\"22\" fill=\"#7be59e\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">4441</text></g><g class=\"heatmapCell\" transform=\"translate(60,256)\"><rect y=\"22\" fill=\"#78e49f\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">4670</text></g><g class=\"heatmapCell\" transform=\"translate(60,280)\"><rect y=\"22\" fill=\"#abf78e\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">944</text></g><g class=\"heatmapCell\" transform=\"translate(60,304)\"><rect y=\"22\" fill=\"#b8fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">110</text></g><g class=\"heatmapCell\" transform=\"translate(107,40)\"><rect y=\"22\" fill=\"#a6f590\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">1318</text></g><g class=\"heatmapCell\" transform=\"translate(107,64)\"><rect y=\"22\" fill=\"#b0f88d\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">664</text></g><g class=\"heatmapCell\" transform=\"translate(107,88)\"><rect y=\"22\" fill=\"#b3f98c\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">418</text></g><g class=\"heatmapCell\" transform=\"translate(107,112)\"><rect y=\"22\" fill=\"#9df392\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">1952</text></g><g class=\"heatmapCell\" transform=\"translate(107,136)\"><rect y=\"22\" fill=\"#86ea9a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">3581</text></g><g class=\"heatmapCell\" transform=\"translate(107,160)\"><rect y=\"22\" fill=\"#79e59f\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">4574</text></g><g class=\"heatmapCell\" transform=\"translate(107,184)\"><rect y=\"22\" fill=\"#41bcb2\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">11457</text></g><g class=\"heatmapCell\" transform=\"translate(107,208)\"><rect y=\"22\" fill=\"#66dca6\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">6139</text></g><g class=\"heatmapCell\" transform=\"translate(107,232)\"><rect y=\"22\" fill=\"#5dd7a9\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">7078</text></g><g class=\"heatmapCell\" transform=\"translate(107,256)\"><rect y=\"22\" fill=\"#62daa7\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">6561</text></g><g class=\"heatmapCell\" transform=\"translate(107,280)\"><rect y=\"22\" fill=\"#97f194\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">2354</text></g><g class=\"heatmapCell\" transform=\"translate(107,304)\"><rect y=\"22\" fill=\"#aff88d\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">710</text></g><g class=\"heatmapCell\" transform=\"translate(154,40)\"><rect y=\"22\" fill=\"#9ff392\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">1783</text></g><g class=\"heatmapCell\" transform=\"translate(154,64)\"><rect y=\"22\" fill=\"#aef88d\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">774</text></g><g class=\"heatmapCell\" transform=\"translate(154,88)\"><rect y=\"22\" fill=\"#b1f98c\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">564</text></g><g class=\"heatmapCell\" transform=\"translate(154,112)\"><rect y=\"22\" fill=\"#a4f590\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">1470</text></g><g class=\"heatmapCell\" transform=\"translate(154,136)\"><rect y=\"22\" fill=\"#86ea9a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">3571</text></g><g class=\"heatmapCell\" transform=\"translate(154,160)\"><rect y=\"22\" fill=\"#8ded98\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">3103</text></g><g class=\"heatmapCell\" transform=\"translate(154,184)\"><rect y=\"22\" fill=\"#4ac9af\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">9392</text></g><g class=\"heatmapCell\" transform=\"translate(154,208)\"><rect y=\"22\" fill=\"#6de0a3\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">5532</text></g><g class=\"heatmapCell\" transform=\"translate(154,232)\"><rect y=\"22\" fill=\"#6cdfa4\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">5661</text></g><g class=\"heatmapCell\" transform=\"translate(154,256)\"><rect y=\"22\" fill=\"#74e3a1\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">4991</text></g><g class=\"heatmapCell\" transform=\"translate(154,280)\"><rect y=\"22\" fill=\"#9cf293\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">2032</text></g><g class=\"heatmapCell\" transform=\"translate(154,304)\"><rect y=\"22\" fill=\"#aff88d\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">680</text></g><g class=\"heatmapCell\" transform=\"translate(201,40)\"><rect y=\"22\" fill=\"#a6f590\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">1301</text></g><g class=\"heatmapCell\" transform=\"translate(201,64)\"><rect y=\"22\" fill=\"#b0f88d\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">604</text></g><g class=\"heatmapCell\" transform=\"translate(201,88)\"><rect y=\"22\" fill=\"#b5fa8b\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">286</text></g><g class=\"heatmapCell\" transform=\"translate(201,112)\"><rect y=\"22\" fill=\"#9af293\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">2152</text></g><g class=\"heatmapCell\" transform=\"translate(201,136)\"><rect y=\"22\" fill=\"#8aec99\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">3282</text></g><g class=\"heatmapCell\" transform=\"translate(201,160)\"><rect y=\"22\" fill=\"#89eb99\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">3369</text></g><g class=\"heatmapCell\" transform=\"translate(201,184)\"><rect y=\"22\" fill=\"#43c2b1\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">10490</text></g><g class=\"heatmapCell\" transform=\"translate(201,208)\"><rect y=\"22\" fill=\"#6fe0a2\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">5406</text></g><g class=\"heatmapCell\" transform=\"translate(201,232)\"><rect y=\"22\" fill=\"#77e49f\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">4727</text></g><g class=\"heatmapCell\" transform=\"translate(201,256)\"><rect y=\"22\" fill=\"#88eb99\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">3428</text></g><g class=\"heatmapCell\" transform=\"translate(201,280)\"><rect y=\"22\" fill=\"#a3f491\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">1559</text></g><g class=\"heatmapCell\" transform=\"translate(201,304)\"><rect y=\"22\" fill=\"#b0f88d\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">620</text></g><g class=\"heatmapCell\" transform=\"translate(248,40)\"><rect y=\"22\" fill=\"#a3f491\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">1537</text></g><g class=\"heatmapCell\" transform=\"translate(248,64)\"><rect y=\"22\" fill=\"#a0f491\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">1714</text></g><g class=\"heatmapCell\" transform=\"translate(248,88)\"><rect y=\"22\" fill=\"#aff88d\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">724</text></g><g class=\"heatmapCell\" transform=\"translate(248,112)\"><rect y=\"22\" fill=\"#76e3a0\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">4824</text></g><g class=\"heatmapCell\" transform=\"translate(248,136)\"><rect y=\"22\" fill=\"#6de0a3\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">5551</text></g><g class=\"heatmapCell\" transform=\"translate(248,160)\"><rect y=\"22\" fill=\"#53d0ac\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">8096</text></g><g class=\"heatmapCell\" transform=\"translate(248,184)\"><rect y=\"22\" fill=\"#4c99ad\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">16589</text></g><g class=\"heatmapCell\" transform=\"translate(248,208)\"><rect y=\"22\" fill=\"#41adb2\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">13650</text></g><g class=\"heatmapCell\" transform=\"translate(248,232)\"><rect y=\"22\" fill=\"#49c8af\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">9552</text></g><g class=\"heatmapCell\" transform=\"translate(248,256)\"><rect y=\"22\" fill=\"#41acb2\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">13709</text></g><g class=\"heatmapCell\" transform=\"translate(248,280)\"><rect y=\"22\" fill=\"#96f095\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">2460</text></g><g class=\"heatmapCell\" transform=\"translate(248,304)\"><rect y=\"22\" fill=\"#aff88d\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">720</text></g><g class=\"heatmapCell\" transform=\"translate(295,40)\"><rect y=\"22\" fill=\"#6bdfa4\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">5691</text></g><g class=\"heatmapCell\" transform=\"translate(295,64)\"><rect y=\"22\" fill=\"#8eed97\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">2995</text></g><g class=\"heatmapCell\" transform=\"translate(295,88)\"><rect y=\"22\" fill=\"#a1f491\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">1680</text></g><g class=\"heatmapCell\" transform=\"translate(295,112)\"><rect y=\"22\" fill=\"#40bab2\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">11741</text></g><g class=\"heatmapCell\" transform=\"translate(295,136)\"><rect y=\"22\" fill=\"#4a9bae\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">16232</text></g><g class=\"heatmapCell\" transform=\"translate(295,160)\"><rect y=\"22\" fill=\"#44a6b1\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">14731</text></g><g class=\"heatmapCell\" transform=\"translate(295,184)\"><rect y=\"22\" fill=\"#210f06\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">43522</text></g><g class=\"heatmapCell\" transform=\"translate(295,208)\"><rect y=\"22\" fill=\"#5c3544\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">32794</text></g><g class=\"heatmapCell\" transform=\"translate(295,232)\"><rect y=\"22\" fill=\"#6a5673\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">26634</text></g><g class=\"heatmapCell\" transform=\"translate(295,256)\"><rect y=\"22\" fill=\"#623c4f\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">31400</text></g><g class=\"heatmapCell\" transform=\"translate(295,280)\"><rect y=\"22\" fill=\"#5ad5aa\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">7350</text></g><g class=\"heatmapCell\" transform=\"translate(295,304)\"><rect y=\"22\" fill=\"#8eed97\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">3010</text></g><g class=\"heatmapCell\" transform=\"translate(342,40)\"><rect y=\"22\" fill=\"#a1f491\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">1650</text></g><g class=\"heatmapCell\" transform=\"translate(342,64)\"><rect y=\"22\" fill=\"#9bf293\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">2096</text></g><g class=\"heatmapCell\" transform=\"translate(342,88)\"><rect y=\"22\" fill=\"#b8fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">60</text></g><g class=\"heatmapCell\" transform=\"translate(342,112)\"><rect y=\"22\" fill=\"#b8fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">50</text></g><g class=\"heatmapCell\" transform=\"translate(342,136)\"><rect y=\"22\" fill=\"#a8f68f\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">1180</text></g><g class=\"heatmapCell\" transform=\"translate(342,160)\"><rect y=\"22\" fill=\"#6ddfa3\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">5602</text></g><g class=\"heatmapCell\" transform=\"translate(342,184)\"><rect y=\"22\" fill=\"#489faf\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">15728</text></g><g class=\"heatmapCell\" transform=\"translate(342,208)\"><rect y=\"22\" fill=\"#5fd8a8\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">6874</text></g><g class=\"heatmapCell\" transform=\"translate(342,232)\"><rect y=\"22\" fill=\"#72e2a1\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">5115</text></g><g class=\"heatmapCell\" transform=\"translate(342,256)\"><rect y=\"22\" fill=\"#87ea9a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">3510</text></g><g class=\"heatmapCell\" transform=\"translate(342,280)\"><rect y=\"22\" fill=\"#a5f590\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">1390</text></g><g class=\"heatmapCell\" transform=\"translate(342,304)\"><rect y=\"22\" fill=\"#b7fa8b\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">170</text></g><g class=\"heatmapCell\" transform=\"translate(389,40)\"><rect y=\"22\" fill=\"#b8fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">72</text></g><g class=\"heatmapCell\" transform=\"translate(389,64)\"><rect y=\"22\" fill=\"#b8fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">60</text></g><g class=\"heatmapCell\" transform=\"translate(389,88)\"><rect y=\"22\" fill=\"#b8fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">60</text></g><g class=\"heatmapCell\" transform=\"translate(389,112)\"><rect y=\"22\" fill=\"#b9fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">10</text></g><g class=\"heatmapCell\" transform=\"translate(389,136)\"><rect y=\"22\" fill=\"#b7fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">120</text></g><g class=\"heatmapCell\" transform=\"translate(389,160)\"><rect y=\"22\" fill=\"#b7fa8b\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">172</text></g><g class=\"heatmapCell\" transform=\"translate(389,184)\"><rect y=\"22\" fill=\"#a9f68f\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">1092</text></g><g class=\"heatmapCell\" transform=\"translate(389,208)\"><rect y=\"22\" fill=\"#aff88d\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">675</text></g><g class=\"heatmapCell\" transform=\"translate(389,232)\"><rect y=\"22\" fill=\"#b3f98c\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">408</text></g><g class=\"heatmapCell\" transform=\"translate(389,256)\"><rect y=\"22\" fill=\"#b4f98c\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">360</text></g><g class=\"heatmapCell\" transform=\"translate(389,280)\"><rect y=\"22\" fill=\"#b7fa8b\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">156</text></g><g class=\"heatmapCell\" transform=\"translate(389,304)\"><rect y=\"22\" fill=\"#b8fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">100</text></g><g class=\"heatmapCell\" transform=\"translate(60,0)\"><text x=\"22.5\" y=\"30\" style=\"font-size: 9px; \" text-anchor=\"middle\">Prod 1</text><polyline points=\"1.5,35 43.5,35\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(107,0)\"><text x=\"22.5\" y=\"30\" style=\"font-size: 9px; \" text-anchor=\"middle\">Prod 2</text><polyline points=\"1.5,35 43.5,35\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(154,0)\"><text x=\"22.5\" y=\"30\" style=\"font-size: 9px; \" text-anchor=\"middle\">Prod 3</text><polyline points=\"1.5,35 43.5,35\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(201,0)\"><text x=\"22.5\" y=\"30\" style=\"font-size: 9px; \" text-anchor=\"middle\">Prod 4</text><polyline points=\"1.5,35 43.5,35\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(248,0)\"><text x=\"22.5\" y=\"30\" style=\"font-size: 9px; \" text-anchor=\"middle\">Prod 5</text><polyline points=\"1.5,35 43.5,35\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(295,0)\"><text x=\"22.5\" y=\"30\" style=\"font-size: 9px; \" text-anchor=\"middle\">Prod 6</text><polyline points=\"1.5,35 43.5,35\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(342,0)\"><text x=\"22.5\" y=\"30\" style=\"font-size: 9px; \" text-anchor=\"middle\">Prod 7</text><polyline points=\"1.5,35 43.5,35\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(389,0)\"><text x=\"22.5\" y=\"30\" style=\"font-size: 9px; \" text-anchor=\"middle\">Prod 8</text><polyline points=\"1.5,35 43.5,35\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(154,0)\"><text x=\"69.5\" y=\"10\" style=\"font-size: 9px; \" text-anchor=\"middle\">Group 1</text><polyline points=\"1.5,15 137.5,15\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(295,0)\"><text x=\"69.5\" y=\"10\" style=\"font-size: 9px; \" text-anchor=\"middle\">Group 2</text><polyline points=\"1.5,15 137.5,15\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(0,40)\"><text x=\"50\" y=\"15.5\" style=\"font-size: 9px; \" text-anchor=\"end\">January</text><polyline points=\"55,1.5 55,20.5\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(0,64)\"><text x=\"50\" y=\"15.5\" style=\"font-size: 9px; \" text-anchor=\"end\">February</text><polyline points=\"55,1.5 55,20.5\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(0,88)\"><text x=\"50\" y=\"15.5\" style=\"font-size: 9px; \" text-anchor=\"end\">March</text><polyline points=\"55,1.5 55,20.5\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(0,112)\"><text x=\"50\" y=\"15.5\" style=\"font-size: 9px; \" text-anchor=\"end\">April</text><polyline points=\"55,1.5 55,20.5\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(0,136)\"><text x=\"50\" y=\"15.5\" style=\"font-size: 9px; \" text-anchor=\"end\">May</text><polyline points=\"55,1.5 55,20.5\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(0,160)\"><text x=\"50\" y=\"15.5\" style=\"font-size: 9px; \" text-anchor=\"end\">June</text><polyline points=\"55,1.5 55,20.5\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(0,184)\"><text x=\"50\" y=\"15.5\" style=\"font-size: 9px; \" text-anchor=\"end\">July</text><polyline points=\"55,1.5 55,20.5\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(0,208)\"><text x=\"50\" y=\"15.5\" style=\"font-size: 9px; \" text-anchor=\"end\">August</text><polyline points=\"55,1.5 55,20.5\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(0,232)\"><text x=\"50\" y=\"15.5\" style=\"font-size: 9px; \" text-anchor=\"end\">September</text><polyline points=\"55,1.5 55,20.5\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(0,256)\"><text x=\"50\" y=\"15.5\" style=\"font-size: 9px; \" text-anchor=\"end\">October</text><polyline points=\"55,1.5 55,20.5\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(0,280)\"><text x=\"50\" y=\"15.5\" style=\"font-size: 9px; \" text-anchor=\"end\">November</text><polyline points=\"55,1.5 55,20.5\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(0,304)\"><text x=\"50\" y=\"15.5\" style=\"font-size: 9px; \" text-anchor=\"end\">Deecember</text><polyline points=\"55,1.5 55,20.5\"></polyline></g></svg></g></svg></div>\r\n", | |
| "\r\n" | |
| ], | |
| "output_type": "display_data" | |
| }, | |
| { | |
| "output_type": "pyout", | |
| "prompt_number": 9, | |
| "text": [ | |
| "True" | |
| ] | |
| } | |
| ], | |
| "prompt_number": 9 | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": {}, | |
| "source": [ | |
| "But since it is HTML you can easily increase readability of the table!! With _addTable_ instead of _addSimpleTable_. In fact _addSimpleTable_ is just a reference to _addTable_" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "collapsed": false, | |
| "input": [ | |
| "d3 = d3object(width=800,\n", | |
| " height=400,\n", | |
| " style='JFTable',\n", | |
| " number=1,\n", | |
| " d3=None,\n", | |
| " title='Example table with d3js',\n", | |
| " desc='An example table created created with d3js with data generated with Python.')\n", | |
| "d3.addTable(data,\n", | |
| " dataAdd=[],\n", | |
| " pVals=-1,\n", | |
| " fontSizeCells=[11,5],\n", | |
| " fontSizeCellsLabels=[11,5],\n", | |
| " sRows=sRows,\n", | |
| " sColumns=sColumns,\n", | |
| " sRowsMargins=[5,50,0],\n", | |
| " sColsMargins=[5,20,10],\n", | |
| " fontSizeHeaders=11,\n", | |
| " shrinkHeadersBorders=1.5,\n", | |
| " heatmapIgnoreText=1,\n", | |
| " varLabels=[],\n", | |
| " heatmap={\n", | |
| " 'draw':1,\n", | |
| " 'spacing':2,\n", | |
| " 'fillProportion':21,\n", | |
| " 'addText':1,\n", | |
| " 'addTextRows':1,\n", | |
| " 'addBorders':1,\n", | |
| " 'addOutsideBorders':-1,\n", | |
| " 'rectWidth':45,\n", | |
| " 'rectHeight':21,\n", | |
| " },\n", | |
| " smallHeatmap={\n", | |
| " 'draw':0,\n", | |
| " 'spacing':0,\n", | |
| " 'fillProportion':5,\n", | |
| " 'addText':0,\n", | |
| " 'addTextRows':0,\n", | |
| " 'addBorders':1,\n", | |
| " 'addOutsideBorders':-1,\n", | |
| " 'rectWidth':5,\n", | |
| " 'rectHeight':5,\n", | |
| " },\n", | |
| " heatmapLegendVert=1,\n", | |
| " legend= {\n", | |
| " 'draw':0,\n", | |
| " 'width':2,\n", | |
| " 'height':15,\n", | |
| " 'rectWidth':60,\n", | |
| " 'rectHeight':60\n", | |
| " },\n", | |
| " rightPaneOffset=0,\n", | |
| " colorDomainAuto=1,\n", | |
| " #colorDomainAutoIgnoreRows=[5],\n", | |
| " colorRange=['#ffffff', '#dddddd', '#cccccc', '#bbbbbb', '#aaaaaa', '#999999']\n", | |
| ")\n", | |
| "d3 = d3object(width=800,\n", | |
| " height=400,\n", | |
| " style='JFTable',\n", | |
| " number=1,\n", | |
| " d3=d3,\n", | |
| " title='Example table with d3js with a small heatmap',\n", | |
| " desc='An example table created created with d3js with data generated with Python.')\n", | |
| "d3.addTable(data,\n", | |
| " dataAdd=[],\n", | |
| " pVals=-1,\n", | |
| " fontSizeCells=[11,5],\n", | |
| " fontSizeCellsLabels=[11,5],\n", | |
| " sRows=sRows,\n", | |
| " sColumns=sColumns,\n", | |
| " sRowsMargins=[5,50,0],\n", | |
| " sColsMargins=[5,20,10],\n", | |
| " fontSizeHeaders=11,\n", | |
| " shrinkHeadersBorders=1.5,\n", | |
| " heatmapIgnoreText=1,\n", | |
| " varLabels=['Sales'],\n", | |
| " heatmap={\n", | |
| " 'draw':1,\n", | |
| " 'spacing':2,\n", | |
| " 'fillProportion':0,\n", | |
| " 'addText':1,\n", | |
| " 'addTextRows':1,\n", | |
| " 'addBorders':1,\n", | |
| " 'addOutsideBorders':-1,\n", | |
| " 'rectWidth':45,\n", | |
| " 'rectHeight':21,\n", | |
| " },\n", | |
| " smallHeatmap={\n", | |
| " 'draw':1,\n", | |
| " 'spacing':0,\n", | |
| " 'fillProportion':10,\n", | |
| " 'addText':0,\n", | |
| " 'addTextRows':0,\n", | |
| " 'addBorders':0,\n", | |
| " 'addOutsideBorders':0,\n", | |
| " 'rectWidth':10,\n", | |
| " 'rectHeight':10,\n", | |
| " },\n", | |
| " heatmapLegendVert=1,\n", | |
| " legend= {\n", | |
| " 'draw':1,\n", | |
| " 'width':2,\n", | |
| " 'height':15,\n", | |
| " 'rectWidth':45,\n", | |
| " 'rectHeight':30\n", | |
| " },\n", | |
| " rightPaneOffset=100,\n", | |
| " colorDomainAuto=1,\n", | |
| " colorRange=['#ffffff', '#eeeeee', '#aaaaaa', '#111111', '#000000']\n", | |
| ")\n", | |
| "d3.render(mode=['html', 'show'])" | |
| ], | |
| "language": "python", | |
| "metadata": {}, | |
| "outputs": [ | |
| { | |
| "html": [ | |
| "<style>\n", | |
| "\n", | |
| "\n", | |
| " .d3Output{\n", | |
| " min-height: 1.2em;\n", | |
| " line-height: 1.2em;\n", | |
| " position: relative;\n", | |
| " font-size: 1em;\n", | |
| " padding: 5px 0;\n", | |
| " \n", | |
| " list-style: none;\n", | |
| " background: #fff;\n", | |
| " color: #000;\n", | |
| " }\n", | |
| " svg{\n", | |
| " color-rendering: optimizeQuality !important;\n", | |
| " shape-rendering: geometricPrecision !important;\n", | |
| " text-rendering: geometricPrecision !important;\n", | |
| " }\n", | |
| " .d3Output.header{\n", | |
| " text-align: center;\n", | |
| " font-weight: bold;\n", | |
| " border-bottom: none;\n", | |
| " font-size: 0.9em;\n", | |
| " \n", | |
| " }\n", | |
| " .d3Output.title{\n", | |
| " text-align: center;\n", | |
| " font-weight: bold;\n", | |
| " border-bottom: none;\n", | |
| " font-size: 1.2em;\n", | |
| " \n", | |
| " }\n", | |
| " .d3Output.description{\n", | |
| " font-size: 0.8em;\n", | |
| " text-align:justify;\n", | |
| " text-justify:inter-word;\n", | |
| " border-bottom: 1px solid #000;\n", | |
| " }\n", | |
| " .d3Output.description.panel{\n", | |
| " text-align: center;\n", | |
| " }\n", | |
| " svg, canvas {\n", | |
| " border-bottom: 1px solid #000;\n", | |
| " display: block;\n", | |
| " margin: 5px 0;\n", | |
| " }\n", | |
| " .d3Output.description.figure{\n", | |
| " border-bottom: none;\n", | |
| " }\n", | |
| " \n", | |
| "\n", | |
| "\n", | |
| " .d3Output{\n", | |
| " min-height: 1.2em;\n", | |
| " line-height: 1.2em;\n", | |
| " position: relative;\n", | |
| " font-size: 1em;\n", | |
| " padding: 5px 0;\n", | |
| " \n", | |
| " list-style: none;\n", | |
| " background: #fff;\n", | |
| " color: #000;\n", | |
| " }\n", | |
| " svg{\n", | |
| " color-rendering: optimizeQuality !important;\n", | |
| " shape-rendering: geometricPrecision !important;\n", | |
| " text-rendering: geometricPrecision !important;\n", | |
| " }\n", | |
| " .d3Output.header{\n", | |
| " text-align: center;\n", | |
| " font-weight: bold;\n", | |
| " border-bottom: none;\n", | |
| " font-size: 0.9em;\n", | |
| " \n", | |
| " }\n", | |
| " .d3Output.title{\n", | |
| " text-align: center;\n", | |
| " font-weight: bold;\n", | |
| " border-bottom: none;\n", | |
| " font-size: 1.2em;\n", | |
| " \n", | |
| " }\n", | |
| " .d3Output.description{\n", | |
| " font-size: 0.8em;\n", | |
| " text-align:justify;\n", | |
| " text-justify:inter-word;\n", | |
| " border-bottom: 1px solid #000;\n", | |
| " }\n", | |
| " .d3Output.description.panel{\n", | |
| " text-align: center;\n", | |
| " }\n", | |
| " svg, canvas {\n", | |
| " border-bottom: 1px solid #000;\n", | |
| " display: block;\n", | |
| " margin: 5px 0;\n", | |
| " }\n", | |
| " .d3Output.description.figure{\n", | |
| " border-bottom: none;\n", | |
| " }\n", | |
| " \n", | |
| "\n", | |
| " .heatmapCell path, .heatmapCell line, .heatmapCell polyline, .d3Output polyline {\n", | |
| " fill: none;\n", | |
| " stroke-width: 1px;\n", | |
| " stroke: black;\n", | |
| " shape-rendering: crispEdges !important;\n", | |
| " }\n", | |
| " .heatmapCell text, .heatmapCell rect, .d3Output rect {\n", | |
| " font-size: 1em;\n", | |
| " shape-rendering: crispEdges !important;\n", | |
| " }\n", | |
| " \n", | |
| "#-tag-65b6cc81-59a9-11e2-b2d2-00268315e762{shape-rendering: crispEdges !important;}\n", | |
| "\n", | |
| " .heatmapCell path, .heatmapCell line, .heatmapCell polyline, .d3Output polyline {\n", | |
| " fill: none;\n", | |
| " stroke-width: 1px;\n", | |
| " stroke: black;\n", | |
| " shape-rendering: crispEdges !important;\n", | |
| " }\n", | |
| " .heatmapCell text, .heatmapCell rect, .d3Output rect {\n", | |
| " font-size: 1em;\n", | |
| " shape-rendering: crispEdges !important;\n", | |
| " }\n", | |
| " \n", | |
| "#-tag-67054580-59a9-11e2-84c0-00268315e762{shape-rendering: crispEdges !important;}\n", | |
| "</style>\r\n", | |
| "\r\n", | |
| "<div class=\"d3Output header\" style=\"width: 800px;\">Table 1</div>\r\n", | |
| "<div class=\"d3Output title\" style=\"width: 800px;\"> Example table with d3js</div>\r\n", | |
| "<div class=\"d3Output description\" style=\"width: 800px\"> An example table created created with d3js with data generated with Python.</div>\r\n", | |
| "<div id=\"id-65b6cc80-59a9-11e2-a446-00268315e762\" class=\"d3Output\"><svg width=\"800\" height=\"400\" style=\"border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: black; \"><g id=\"svgElementid-65b6cc80-59a9-11e2-a446-00268315e762-tag-65b6cc81-59a9-11e2-b2d2-00268315e762\" transform=\"translate(136.75,41.5)\"><svg class=\"heatmap\" y=\"0\" x=\"0\" id=\"heatmap\"><g class=\"heatmapCell\" transform=\"translate(60,40)\"><rect y=\"0\" fill=\"#f9f9f9\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">1277</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(60,63)\"><rect y=\"0\" fill=\"#fcfcfc\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">654</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(60,86)\"><rect y=\"0\" fill=\"#fefefe\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">288</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(60,109)\"><rect y=\"0\" fill=\"#f6f6f6\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">1976</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(60,132)\"><rect y=\"0\" fill=\"#f0f0f0\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">3281</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(60,155)\"><rect y=\"0\" fill=\"#f1f1f1\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">3089</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(60,178)\"><rect y=\"0\" fill=\"#d6d6d6\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">10336</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(60,201)\"><rect y=\"0\" fill=\"#e9e9e9\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">4650</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(60,224)\"><rect y=\"0\" fill=\"#eaeaea\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">4441</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(60,247)\"><rect y=\"0\" fill=\"#e9e9e9\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">4670</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(60,270)\"><rect y=\"0\" fill=\"#fbfbfb\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">944</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(60,293)\"><rect y=\"0\" fill=\"#ffffff\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">110</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(107,40)\"><rect y=\"0\" fill=\"#f9f9f9\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">1318</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(107,63)\"><rect y=\"0\" fill=\"#fcfcfc\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">664</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(107,86)\"><rect y=\"0\" fill=\"#fdfdfd\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">418</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(107,109)\"><rect y=\"0\" fill=\"#f6f6f6\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">1952</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(107,132)\"><rect y=\"0\" fill=\"#eeeeee\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">3581</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(107,155)\"><rect y=\"0\" fill=\"#eaeaea\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">4574</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(107,178)\"><rect y=\"0\" fill=\"#d3d3d3\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">11457</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(107,201)\"><rect y=\"0\" fill=\"#e2e2e2\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">6139</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(107,224)\"><rect y=\"0\" fill=\"#dedede\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">7078</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(107,247)\"><rect y=\"0\" fill=\"#e0e0e0\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">6561</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(107,270)\"><rect y=\"0\" fill=\"#f4f4f4\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">2354</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(107,293)\"><rect y=\"0\" fill=\"#fcfcfc\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">710</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(154,40)\"><rect y=\"0\" fill=\"#f7f7f7\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">1783</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(154,63)\"><rect y=\"0\" fill=\"#fbfbfb\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">774</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(154,86)\"><rect y=\"0\" fill=\"#fcfcfc\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">564</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(154,109)\"><rect y=\"0\" fill=\"#f8f8f8\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">1470</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(154,132)\"><rect y=\"0\" fill=\"#eeeeee\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">3571</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(154,155)\"><rect y=\"0\" fill=\"#f0f0f0\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">3103</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(154,178)\"><rect y=\"0\" fill=\"#d8d8d8\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">9392</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(154,201)\"><rect y=\"0\" fill=\"#e5e5e5\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">5532</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(154,224)\"><rect y=\"0\" fill=\"#e5e5e5\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">5661</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(154,247)\"><rect y=\"0\" fill=\"#e8e8e8\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">4991</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(154,270)\"><rect y=\"0\" fill=\"#f6f6f6\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">2032</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(154,293)\"><rect y=\"0\" fill=\"#fcfcfc\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">680</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(201,40)\"><rect y=\"0\" fill=\"#f9f9f9\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">1301</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(201,63)\"><rect y=\"0\" fill=\"#fcfcfc\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">604</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(201,86)\"><rect y=\"0\" fill=\"#fefefe\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">286</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(201,109)\"><rect y=\"0\" fill=\"#f5f5f5\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">2152</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(201,132)\"><rect y=\"0\" fill=\"#f0f0f0\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">3282</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(201,155)\"><rect y=\"0\" fill=\"#efefef\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">3369</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(201,178)\"><rect y=\"0\" fill=\"#d5d5d5\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">10490</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(201,201)\"><rect y=\"0\" fill=\"#e6e6e6\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">5406</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(201,224)\"><rect y=\"0\" fill=\"#e9e9e9\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">4727</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(201,247)\"><rect y=\"0\" fill=\"#efefef\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">3428</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(201,270)\"><rect y=\"0\" fill=\"#f8f8f8\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">1559</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(201,293)\"><rect y=\"0\" fill=\"#fcfcfc\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">620</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(248,40)\"><rect y=\"0\" fill=\"#f8f8f8\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">1537</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(248,63)\"><rect y=\"0\" fill=\"#f7f7f7\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">1714</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(248,86)\"><rect y=\"0\" fill=\"#fcfcfc\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">724</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(248,109)\"><rect y=\"0\" fill=\"#e8e8e8\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">4824</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(248,132)\"><rect y=\"0\" fill=\"#e5e5e5\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">5551</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(248,155)\"><rect y=\"0\" fill=\"#dbdbdb\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">8096</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(248,178)\"><rect y=\"0\" fill=\"#c7c7c7\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">16589</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(248,201)\"><rect y=\"0\" fill=\"#cecece\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">13650</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(248,224)\"><rect y=\"0\" fill=\"#d8d8d8\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">9552</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(248,247)\"><rect y=\"0\" fill=\"#cecece\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">13709</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(248,270)\"><rect y=\"0\" fill=\"#f4f4f4\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">2460</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(248,293)\"><rect y=\"0\" fill=\"#fcfcfc\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">720</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(295,40)\"><rect y=\"0\" fill=\"#e4e4e4\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">5691</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(295,63)\"><rect y=\"0\" fill=\"#f1f1f1\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">2995</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(295,86)\"><rect y=\"0\" fill=\"#f7f7f7\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">1680</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(295,109)\"><rect y=\"0\" fill=\"#d3d3d3\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">11741</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(295,132)\"><rect y=\"0\" fill=\"#c8c8c8\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">16232</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(295,155)\"><rect y=\"0\" fill=\"#cbcbcb\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">14731</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(295,178)\"><rect y=\"0\" fill=\"#888888\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">43522</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(295,201)\"><rect y=\"0\" fill=\"#a1a1a1\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">32794</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(295,224)\"><rect y=\"0\" fill=\"#b0b0b0\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">26634</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(295,247)\"><rect y=\"0\" fill=\"#a4a4a4\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">31400</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(295,270)\"><rect y=\"0\" fill=\"#dddddd\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">7350</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(295,293)\"><rect y=\"0\" fill=\"#f1f1f1\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">3010</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(342,40)\"><rect y=\"0\" fill=\"#f7f7f7\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">1650</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(342,63)\"><rect y=\"0\" fill=\"#f5f5f5\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">2096</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(342,86)\"><rect y=\"0\" fill=\"#ffffff\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">60</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(342,109)\"><rect y=\"0\" fill=\"#ffffff\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">50</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(342,132)\"><rect y=\"0\" fill=\"#fafafa\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">1180</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(342,155)\"><rect y=\"0\" fill=\"#e5e5e5\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">5602</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(342,178)\"><rect y=\"0\" fill=\"#c9c9c9\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">15728</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(342,201)\"><rect y=\"0\" fill=\"#dfdfdf\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">6874</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(342,224)\"><rect y=\"0\" fill=\"#e7e7e7\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">5115</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(342,247)\"><rect y=\"0\" fill=\"#efefef\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">3510</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(342,270)\"><rect y=\"0\" fill=\"#f9f9f9\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">1390</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(342,293)\"><rect y=\"0\" fill=\"#fefefe\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">170</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(389,40)\"><rect y=\"0\" fill=\"#ffffff\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">72</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(389,63)\"><rect y=\"0\" fill=\"#ffffff\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">60</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(389,86)\"><rect y=\"0\" fill=\"#ffffff\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">60</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(389,109)\"><rect y=\"0\" fill=\"#ffffff\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">10</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(389,132)\"><rect y=\"0\" fill=\"#fefefe\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">120</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(389,155)\"><rect y=\"0\" fill=\"#fefefe\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">172</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(389,178)\"><rect y=\"0\" fill=\"#fafafa\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">1092</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(389,201)\"><rect y=\"0\" fill=\"#fcfcfc\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">675</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(389,224)\"><rect y=\"0\" fill=\"#fdfdfd\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">408</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(389,247)\"><rect y=\"0\" fill=\"#fdfdfd\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">360</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(389,270)\"><rect y=\"0\" fill=\"#fefefe\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">156</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(389,293)\"><rect y=\"0\" fill=\"#ffffff\" id=\"heatCell\" width=\"45\" height=\"21\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">100</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(60,0)\"><text x=\"22.5\" y=\"30\" style=\"font-size: 11px; \" text-anchor=\"middle\">Prod 1</text><polyline points=\"1.5,35 43.5,35\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(107,0)\"><text x=\"22.5\" y=\"30\" style=\"font-size: 11px; \" text-anchor=\"middle\">Prod 2</text><polyline points=\"1.5,35 43.5,35\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(154,0)\"><text x=\"22.5\" y=\"30\" style=\"font-size: 11px; \" text-anchor=\"middle\">Prod 3</text><polyline points=\"1.5,35 43.5,35\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(201,0)\"><text x=\"22.5\" y=\"30\" style=\"font-size: 11px; \" text-anchor=\"middle\">Prod 4</text><polyline points=\"1.5,35 43.5,35\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(248,0)\"><text x=\"22.5\" y=\"30\" style=\"font-size: 11px; \" text-anchor=\"middle\">Prod 5</text><polyline points=\"1.5,35 43.5,35\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(295,0)\"><text x=\"22.5\" y=\"30\" style=\"font-size: 11px; \" text-anchor=\"middle\">Prod 6</text><polyline points=\"1.5,35 43.5,35\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(342,0)\"><text x=\"22.5\" y=\"30\" style=\"font-size: 11px; \" text-anchor=\"middle\">Prod 7</text><polyline points=\"1.5,35 43.5,35\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(389,0)\"><text x=\"22.5\" y=\"30\" style=\"font-size: 11px; \" text-anchor=\"middle\">Prod 8</text><polyline points=\"1.5,35 43.5,35\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(154,0)\"><text x=\"69.5\" y=\"10\" style=\"font-size: 11px; \" text-anchor=\"middle\">Group 1</text><polyline points=\"1.5,15 137.5,15\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(295,0)\"><text x=\"69.5\" y=\"10\" style=\"font-size: 11px; \" text-anchor=\"middle\">Group 2</text><polyline points=\"1.5,15 137.5,15\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(0,40)\"><text x=\"50\" y=\"16\" style=\"font-size: 11px; \" text-anchor=\"end\">January</text><polyline points=\"55,1.5 55,19.5\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(0,63)\"><text x=\"50\" y=\"16\" style=\"font-size: 11px; \" text-anchor=\"end\">February</text><polyline points=\"55,1.5 55,19.5\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(0,86)\"><text x=\"50\" y=\"16\" style=\"font-size: 11px; \" text-anchor=\"end\">March</text><polyline points=\"55,1.5 55,19.5\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(0,109)\"><text x=\"50\" y=\"16\" style=\"font-size: 11px; \" text-anchor=\"end\">April</text><polyline points=\"55,1.5 55,19.5\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(0,132)\"><text x=\"50\" y=\"16\" style=\"font-size: 11px; \" text-anchor=\"end\">May</text><polyline points=\"55,1.5 55,19.5\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(0,155)\"><text x=\"50\" y=\"16\" style=\"font-size: 11px; \" text-anchor=\"end\">June</text><polyline points=\"55,1.5 55,19.5\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(0,178)\"><text x=\"50\" y=\"16\" style=\"font-size: 11px; \" text-anchor=\"end\">July</text><polyline points=\"55,1.5 55,19.5\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(0,201)\"><text x=\"50\" y=\"16\" style=\"font-size: 11px; \" text-anchor=\"end\">August</text><polyline points=\"55,1.5 55,19.5\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(0,224)\"><text x=\"50\" y=\"16\" style=\"font-size: 11px; \" text-anchor=\"end\">September</text><polyline points=\"55,1.5 55,19.5\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(0,247)\"><text x=\"50\" y=\"16\" style=\"font-size: 11px; \" text-anchor=\"end\">October</text><polyline points=\"55,1.5 55,19.5\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(0,270)\"><text x=\"50\" y=\"16\" style=\"font-size: 11px; \" text-anchor=\"end\">November</text><polyline points=\"55,1.5 55,19.5\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(0,293)\"><text x=\"50\" y=\"16\" style=\"font-size: 11px; \" text-anchor=\"end\">Deecember</text><polyline points=\"55,1.5 55,19.5\"></polyline></g></svg><svg y=\"40\" x=\"456\" id=\"vertLegend\" style=\"opacity: 0.01; \"><rect y=\"-1\" fill=\"#ffffff\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"0\" fill=\"#fefefe\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"1\" fill=\"#fefefe\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"2\" fill=\"#fdfdfd\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"3\" fill=\"#fcfcfc\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"4\" fill=\"#fbfbfb\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"5\" fill=\"#fbfbfb\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"6\" fill=\"#fafafa\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"7\" fill=\"#f9f9f9\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"8\" fill=\"#f8f8f8\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"9\" fill=\"#f8f8f8\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"10\" fill=\"#f7f7f7\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"11\" fill=\"#f6f6f6\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"12\" fill=\"#f5f5f5\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"13\" fill=\"#f5f5f5\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"14\" fill=\"#f4f4f4\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"15\" fill=\"#f3f3f3\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"16\" fill=\"#f2f2f2\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"17\" fill=\"#f2f2f2\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"18\" fill=\"#f1f1f1\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"19\" fill=\"#f0f0f0\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"20\" fill=\"#efefef\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"21\" fill=\"#efefef\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"22\" fill=\"#eeeeee\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"23\" fill=\"#ededed\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"24\" fill=\"#ededed\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"25\" fill=\"#ececec\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"26\" fill=\"#ebebeb\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"27\" fill=\"#eaeaea\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"28\" fill=\"#eaeaea\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"29\" fill=\"#e9e9e9\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"30\" fill=\"#e8e8e8\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"31\" fill=\"#e7e7e7\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"32\" fill=\"#e7e7e7\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"33\" fill=\"#e6e6e6\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"34\" fill=\"#e5e5e5\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"35\" fill=\"#e4e4e4\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"36\" fill=\"#e4e4e4\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"37\" fill=\"#e3e3e3\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"38\" fill=\"#e2e2e2\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"39\" fill=\"#e1e1e1\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"40\" fill=\"#e1e1e1\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"41\" fill=\"#e0e0e0\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"42\" fill=\"#dfdfdf\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"43\" fill=\"#dedede\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"44\" fill=\"#dedede\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"45\" fill=\"#dddddd\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"46\" fill=\"#dddddd\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"47\" fill=\"#dcdcdc\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"48\" fill=\"#dcdcdc\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"49\" fill=\"#dcdcdc\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"50\" fill=\"#dbdbdb\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"51\" fill=\"#dbdbdb\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"52\" fill=\"#dadada\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"53\" fill=\"#dadada\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"54\" fill=\"#dadada\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"55\" fill=\"#d9d9d9\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"56\" fill=\"#d9d9d9\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"57\" fill=\"#d9d9d9\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"58\" fill=\"#d8d8d8\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"59\" fill=\"#d8d8d8\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"60\" fill=\"#d7d7d7\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"61\" fill=\"#d7d7d7\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"62\" fill=\"#d7d7d7\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"63\" fill=\"#d6d6d6\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"64\" fill=\"#d6d6d6\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"65\" fill=\"#d6d6d6\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"66\" fill=\"#d5d5d5\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"67\" fill=\"#d5d5d5\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"68\" fill=\"#d5d5d5\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"69\" fill=\"#d4d4d4\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"70\" fill=\"#d4d4d4\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"71\" fill=\"#d3d3d3\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"72\" fill=\"#d3d3d3\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"73\" fill=\"#d3d3d3\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"74\" fill=\"#d2d2d2\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"75\" fill=\"#d2d2d2\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"76\" fill=\"#d2d2d2\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"77\" fill=\"#d1d1d1\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"78\" fill=\"#d1d1d1\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"79\" fill=\"#d0d0d0\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"80\" fill=\"#d0d0d0\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"81\" fill=\"#d0d0d0\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"82\" fill=\"#cfcfcf\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"83\" fill=\"#cfcfcf\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"84\" fill=\"#cfcfcf\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"85\" fill=\"#cecece\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"86\" fill=\"#cecece\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"87\" fill=\"#cdcdcd\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"88\" fill=\"#cdcdcd\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"89\" fill=\"#cdcdcd\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"90\" fill=\"#cccccc\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"91\" fill=\"#cccccc\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"92\" fill=\"#cccccc\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"93\" fill=\"#cbcbcb\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"94\" fill=\"#cbcbcb\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"95\" fill=\"#cbcbcb\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"96\" fill=\"#cacaca\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"97\" fill=\"#cacaca\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"98\" fill=\"#c9c9c9\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"99\" fill=\"#c9c9c9\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"100\" fill=\"#c9c9c9\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"101\" fill=\"#c8c8c8\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"102\" fill=\"#c8c8c8\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"103\" fill=\"#c8c8c8\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"104\" fill=\"#c7c7c7\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"105\" fill=\"#c7c7c7\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"106\" fill=\"#c6c6c6\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"107\" fill=\"#c6c6c6\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"108\" fill=\"#c6c6c6\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"109\" fill=\"#c5c5c5\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"110\" fill=\"#c5c5c5\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"111\" fill=\"#c5c5c5\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"112\" fill=\"#c4c4c4\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"113\" fill=\"#c4c4c4\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"114\" fill=\"#c4c4c4\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"115\" fill=\"#c3c3c3\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"116\" fill=\"#c3c3c3\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"117\" fill=\"#c2c2c2\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"118\" fill=\"#c2c2c2\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"119\" fill=\"#c2c2c2\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"120\" fill=\"#c1c1c1\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"121\" fill=\"#c1c1c1\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"122\" fill=\"#c1c1c1\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"123\" fill=\"#c0c0c0\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"124\" fill=\"#c0c0c0\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"125\" fill=\"#bfbfbf\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"126\" fill=\"#bfbfbf\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"127\" fill=\"#bfbfbf\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"128\" fill=\"#bebebe\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"129\" fill=\"#bebebe\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"130\" fill=\"#bebebe\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"131\" fill=\"#bdbdbd\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"132\" fill=\"#bdbdbd\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"133\" fill=\"#bcbcbc\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"134\" fill=\"#bcbcbc\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"135\" fill=\"#bcbcbc\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"136\" fill=\"#bbbbbb\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"137\" fill=\"#bbbbbb\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"138\" fill=\"#bbbbbb\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"139\" fill=\"#bababa\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"140\" fill=\"#bababa\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"141\" fill=\"#bababa\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"142\" fill=\"#b9b9b9\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"143\" fill=\"#b9b9b9\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"144\" fill=\"#b8b8b8\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"145\" fill=\"#b8b8b8\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"146\" fill=\"#b8b8b8\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"147\" fill=\"#b7b7b7\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"148\" fill=\"#b7b7b7\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"149\" fill=\"#b7b7b7\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"150\" fill=\"#b6b6b6\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"151\" fill=\"#b6b6b6\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"152\" fill=\"#b5b5b5\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"153\" fill=\"#b5b5b5\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"154\" fill=\"#b5b5b5\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"155\" fill=\"#b4b4b4\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"156\" fill=\"#b4b4b4\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"157\" fill=\"#b4b4b4\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"158\" fill=\"#b3b3b3\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"159\" fill=\"#b3b3b3\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"160\" fill=\"#b3b3b3\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"161\" fill=\"#b2b2b2\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"162\" fill=\"#b2b2b2\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"163\" fill=\"#b1b1b1\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"164\" fill=\"#b1b1b1\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"165\" fill=\"#b1b1b1\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"166\" fill=\"#b0b0b0\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"167\" fill=\"#b0b0b0\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"168\" fill=\"#b0b0b0\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"169\" fill=\"#afafaf\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"170\" fill=\"#afafaf\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"171\" fill=\"#aeaeae\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"172\" fill=\"#aeaeae\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"173\" fill=\"#aeaeae\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"174\" fill=\"#adadad\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"175\" fill=\"#adadad\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"176\" fill=\"#adadad\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"177\" fill=\"#acacac\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"178\" fill=\"#acacac\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"179\" fill=\"#ababab\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"180\" fill=\"#ababab\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"181\" fill=\"#ababab\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"182\" fill=\"#aaaaaa\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"183\" fill=\"#aaaaaa\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"184\" fill=\"#aaaaaa\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"185\" fill=\"#a9a9a9\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"186\" fill=\"#a9a9a9\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"187\" fill=\"#a9a9a9\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"188\" fill=\"#a8a8a8\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"189\" fill=\"#a8a8a8\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"190\" fill=\"#a7a7a7\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"191\" fill=\"#a7a7a7\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"192\" fill=\"#a7a7a7\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"193\" fill=\"#a6a6a6\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"194\" fill=\"#a6a6a6\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"195\" fill=\"#a6a6a6\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"196\" fill=\"#a5a5a5\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"197\" fill=\"#a5a5a5\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"198\" fill=\"#a4a4a4\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"199\" fill=\"#a4a4a4\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"200\" fill=\"#a4a4a4\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"201\" fill=\"#a3a3a3\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"202\" fill=\"#a3a3a3\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"203\" fill=\"#a3a3a3\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"204\" fill=\"#a2a2a2\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"205\" fill=\"#a2a2a2\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"206\" fill=\"#a2a2a2\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"207\" fill=\"#a1a1a1\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"208\" fill=\"#a1a1a1\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"209\" fill=\"#a0a0a0\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"210\" fill=\"#a0a0a0\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"211\" fill=\"#a0a0a0\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"212\" fill=\"#9f9f9f\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"213\" fill=\"#9f9f9f\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"214\" fill=\"#9f9f9f\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"215\" fill=\"#9e9e9e\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"216\" fill=\"#9e9e9e\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"217\" fill=\"#9d9d9d\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"218\" fill=\"#9d9d9d\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"219\" fill=\"#9d9d9d\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"220\" fill=\"#9c9c9c\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"221\" fill=\"#9c9c9c\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"222\" fill=\"#9c9c9c\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"223\" fill=\"#9b9b9b\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"224\" fill=\"#9b9b9b\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"225\" fill=\"#9a9a9a\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"226\" fill=\"#9a9a9a\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"227\" fill=\"#9a9a9a\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"228\" fill=\"#999999\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"229\" fill=\"#999999\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"230\" fill=\"#999999\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"231\" fill=\"#989898\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"232\" fill=\"#989898\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"233\" fill=\"#989898\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"234\" fill=\"#979797\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"235\" fill=\"#979797\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"236\" fill=\"#969696\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"237\" fill=\"#969696\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"238\" fill=\"#969696\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"239\" fill=\"#959595\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"240\" fill=\"#959595\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"241\" fill=\"#959595\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"242\" fill=\"#949494\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"243\" fill=\"#949494\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"244\" fill=\"#939393\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"245\" fill=\"#939393\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"246\" fill=\"#939393\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"247\" fill=\"#929292\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"248\" fill=\"#929292\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"249\" fill=\"#929292\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"250\" fill=\"#919191\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"251\" fill=\"#919191\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"252\" fill=\"#919191\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"253\" fill=\"#909090\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"254\" fill=\"#909090\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"255\" fill=\"#8f8f8f\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"256\" fill=\"#8f8f8f\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"257\" fill=\"#8f8f8f\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"258\" fill=\"#8e8e8e\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"259\" fill=\"#8e8e8e\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"260\" fill=\"#8e8e8e\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"261\" fill=\"#8d8d8d\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"262\" fill=\"#8d8d8d\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"263\" fill=\"#8c8c8c\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"264\" fill=\"#8c8c8c\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"265\" fill=\"#8c8c8c\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"266\" fill=\"#8b8b8b\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"267\" fill=\"#8b8b8b\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"268\" fill=\"#8b8b8b\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"269\" fill=\"#8a8a8a\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"270\" fill=\"#8a8a8a\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"271\" fill=\"#898989\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"272\" fill=\"#898989\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"273\" fill=\"#898989\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"274\" fill=\"#888888\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"275\" fill=\"#888888\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><g class=\"axis\" transform=\"translate(22.5,0)\"><g style=\"opacity: 1; \" transform=\"translate(0,66.07142857142857)\"><line class=\"tick\" x2=\"0\" y2=\"0\"></line><text x=\"3\" y=\"0\" dy=\".32em\" text-anchor=\"start\">10,000</text></g><g style=\"opacity: 1; \" transform=\"translate(0,127.2039897039897)\"><line class=\"tick\" x2=\"0\" y2=\"0\"></line><text x=\"3\" y=\"0\" dy=\".32em\" text-anchor=\"start\">20,000</text></g><g style=\"opacity: 1; \" transform=\"translate(0,188.33655083655086)\"><line class=\"tick\" x2=\"0\" y2=\"0\"></line><text x=\"3\" y=\"0\" dy=\".32em\" text-anchor=\"start\">30,000</text></g><g style=\"opacity: 1; \" transform=\"translate(0,249.469111969112)\"><line class=\"tick\" x2=\"0\" y2=\"0\"></line><text x=\"3\" y=\"0\" dy=\".32em\" text-anchor=\"start\">40,000</text></g><path class=\"domain\" d=\"M0,5H0V271H0\"></path></g></svg></g></svg><div style=\"page-break-after:always; display:block; width:1px; height:1px;\"> </div></div>\r\n", | |
| "\r\n", | |
| "\r\n", | |
| "<div class=\"d3Output header\" style=\"width: 800px;\">Table 1</div>\r\n", | |
| "<div class=\"d3Output title\" style=\"width: 800px;\"> Example table with d3js with a small heatmap</div>\r\n", | |
| "<div class=\"d3Output description\" style=\"width: 800px\"> An example table created created with d3js with data generated with Python.</div>\r\n", | |
| "<div id=\"id-65b6cc82-59a9-11e2-9aaa-00268315e762\" class=\"d3Output\"><svg width=\"800\" height=\"400\" style=\"border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: black; \"><g id=\"svgElementid-65b6cc82-59a9-11e2-9aaa-00268315e762-tag-67054580-59a9-11e2-84c0-00268315e762\" transform=\"translate(103.5,41.5)\"><svg class=\"heatmap\" y=\"0\" x=\"0\" id=\"heatmap\"><g class=\"heatmapCell\" transform=\"translate(60,40)\"><rect y=\"21\" fill=\"#fdfdfd\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">1277</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(60,63)\"><rect y=\"21\" fill=\"#fefefe\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">654</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(60,86)\"><rect y=\"21\" fill=\"#fefefe\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">288</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(60,109)\"><rect y=\"21\" fill=\"#fbfbfb\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">1976</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(60,132)\"><rect y=\"21\" fill=\"#f9f9f9\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">3281</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(60,155)\"><rect y=\"21\" fill=\"#f9f9f9\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">3089</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(60,178)\"><rect y=\"21\" fill=\"#e1e1e1\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">10336</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(60,201)\"><rect y=\"21\" fill=\"#f6f6f6\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">4650</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(60,224)\"><rect y=\"21\" fill=\"#f6f6f6\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">4441</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(60,247)\"><rect y=\"21\" fill=\"#f6f6f6\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">4670</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(60,270)\"><rect y=\"21\" fill=\"#fdfdfd\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">944</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(60,293)\"><rect y=\"21\" fill=\"#ffffff\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">110</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(107,40)\"><rect y=\"21\" fill=\"#fcfcfc\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">1318</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(107,63)\"><rect y=\"21\" fill=\"#fefefe\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">664</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(107,86)\"><rect y=\"21\" fill=\"#fefefe\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">418</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(107,109)\"><rect y=\"21\" fill=\"#fbfbfb\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">1952</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(107,132)\"><rect y=\"21\" fill=\"#f8f8f8\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">3581</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(107,155)\"><rect y=\"21\" fill=\"#f6f6f6\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">4574</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(107,178)\"><rect y=\"21\" fill=\"#d9d9d9\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">11457</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(107,201)\"><rect y=\"21\" fill=\"#f3f3f3\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">6139</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(107,224)\"><rect y=\"21\" fill=\"#f1f1f1\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">7078</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(107,247)\"><rect y=\"21\" fill=\"#f2f2f2\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">6561</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(107,270)\"><rect y=\"21\" fill=\"#fafafa\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">2354</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(107,293)\"><rect y=\"21\" fill=\"#fefefe\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">710</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(154,40)\"><rect y=\"21\" fill=\"#fcfcfc\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">1783</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(154,63)\"><rect y=\"21\" fill=\"#fefefe\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">774</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(154,86)\"><rect y=\"21\" fill=\"#fefefe\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">564</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(154,109)\"><rect y=\"21\" fill=\"#fcfcfc\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">1470</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(154,132)\"><rect y=\"21\" fill=\"#f8f8f8\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">3571</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(154,155)\"><rect y=\"21\" fill=\"#f9f9f9\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">3103</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(154,178)\"><rect y=\"21\" fill=\"#e9e9e9\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">9392</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(154,201)\"><rect y=\"21\" fill=\"#f4f4f4\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">5532</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(154,224)\"><rect y=\"21\" fill=\"#f4f4f4\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">5661</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(154,247)\"><rect y=\"21\" fill=\"#f5f5f5\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">4991</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(154,270)\"><rect y=\"21\" fill=\"#fbfbfb\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">2032</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(154,293)\"><rect y=\"21\" fill=\"#fefefe\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">680</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(201,40)\"><rect y=\"21\" fill=\"#fcfcfc\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">1301</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(201,63)\"><rect y=\"21\" fill=\"#fefefe\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">604</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(201,86)\"><rect y=\"21\" fill=\"#fefefe\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">286</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(201,109)\"><rect y=\"21\" fill=\"#fbfbfb\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">2152</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(201,132)\"><rect y=\"21\" fill=\"#f9f9f9\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">3282</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(201,155)\"><rect y=\"21\" fill=\"#f8f8f8\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">3369</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(201,178)\"><rect y=\"21\" fill=\"#e0e0e0\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">10490</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(201,201)\"><rect y=\"21\" fill=\"#f4f4f4\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">5406</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(201,224)\"><rect y=\"21\" fill=\"#f6f6f6\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">4727</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(201,247)\"><rect y=\"21\" fill=\"#f8f8f8\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">3428</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(201,270)\"><rect y=\"21\" fill=\"#fcfcfc\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">1559</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(201,293)\"><rect y=\"21\" fill=\"#fefefe\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">620</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(248,40)\"><rect y=\"21\" fill=\"#fcfcfc\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">1537</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(248,63)\"><rect y=\"21\" fill=\"#fcfcfc\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">1714</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(248,86)\"><rect y=\"21\" fill=\"#fefefe\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">724</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(248,109)\"><rect y=\"21\" fill=\"#f6f6f6\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">4824</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(248,132)\"><rect y=\"21\" fill=\"#f4f4f4\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">5551</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(248,155)\"><rect y=\"21\" fill=\"#efefef\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">8096</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(248,178)\"><rect y=\"21\" fill=\"#b0b0b0\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">16589</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(248,201)\"><rect y=\"21\" fill=\"#c7c7c7\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">13650</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(248,224)\"><rect y=\"21\" fill=\"#e7e7e7\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">9552</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(248,247)\"><rect y=\"21\" fill=\"#c7c7c7\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">13709</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(248,270)\"><rect y=\"21\" fill=\"#fafafa\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">2460</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(248,293)\"><rect y=\"21\" fill=\"#fefefe\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">720</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(295,40)\"><rect y=\"21\" fill=\"#f4f4f4\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">5691</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(295,63)\"><rect y=\"21\" fill=\"#f9f9f9\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">2995</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(295,86)\"><rect y=\"21\" fill=\"#fcfcfc\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">1680</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(295,109)\"><rect y=\"21\" fill=\"#d6d6d6\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">11741</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(295,132)\"><rect y=\"21\" fill=\"#b3b3b3\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">16232</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(295,155)\"><rect y=\"21\" fill=\"#bfbfbf\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">14731</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(295,178)\"><rect y=\"21\" fill=\"#000000\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">43522</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(295,201)\"><rect y=\"21\" fill=\"#040404\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">32794</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(295,224)\"><rect y=\"21\" fill=\"#101010\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">26634</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(295,247)\"><rect y=\"21\" fill=\"#070707\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">31400</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(295,270)\"><rect y=\"21\" fill=\"#f1f1f1\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">7350</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(295,293)\"><rect y=\"21\" fill=\"#f9f9f9\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">3010</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(342,40)\"><rect y=\"21\" fill=\"#fcfcfc\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">1650</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(342,63)\"><rect y=\"21\" fill=\"#fbfbfb\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">2096</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(342,86)\"><rect y=\"21\" fill=\"#ffffff\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">60</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(342,109)\"><rect y=\"21\" fill=\"#ffffff\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">50</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(342,132)\"><rect y=\"21\" fill=\"#fdfdfd\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">1180</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(342,155)\"><rect y=\"21\" fill=\"#f4f4f4\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">5602</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(342,178)\"><rect y=\"21\" fill=\"#b7b7b7\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">15728</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(342,201)\"><rect y=\"21\" fill=\"#f2f2f2\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">6874</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(342,224)\"><rect y=\"21\" fill=\"#f5f5f5\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">5115</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(342,247)\"><rect y=\"21\" fill=\"#f8f8f8\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">3510</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(342,270)\"><rect y=\"21\" fill=\"#fcfcfc\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">1390</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(342,293)\"><rect y=\"21\" fill=\"#ffffff\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">170</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(389,40)\"><rect y=\"21\" fill=\"#ffffff\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">72</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(389,63)\"><rect y=\"21\" fill=\"#ffffff\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">60</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(389,86)\"><rect y=\"21\" fill=\"#ffffff\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">60</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(389,109)\"><rect y=\"21\" fill=\"#ffffff\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">10</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(389,132)\"><rect y=\"21\" fill=\"#ffffff\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">120</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(389,155)\"><rect y=\"21\" fill=\"#ffffff\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">172</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(389,178)\"><rect y=\"21\" fill=\"#fdfdfd\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">1092</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(389,201)\"><rect y=\"21\" fill=\"#fefefe\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">675</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(389,224)\"><rect y=\"21\" fill=\"#fefefe\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">408</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(389,247)\"><rect y=\"21\" fill=\"#fefefe\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">360</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(389,270)\"><rect y=\"21\" fill=\"#ffffff\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">156</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(389,293)\"><rect y=\"21\" fill=\"#ffffff\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">100</text><polyline points=\"0,0 45,0 45,21 0,21 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(60,0)\"><text x=\"22.5\" y=\"30\" style=\"font-size: 11px; \" text-anchor=\"middle\">Prod 1</text><polyline points=\"1.5,35 43.5,35\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(107,0)\"><text x=\"22.5\" y=\"30\" style=\"font-size: 11px; \" text-anchor=\"middle\">Prod 2</text><polyline points=\"1.5,35 43.5,35\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(154,0)\"><text x=\"22.5\" y=\"30\" style=\"font-size: 11px; \" text-anchor=\"middle\">Prod 3</text><polyline points=\"1.5,35 43.5,35\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(201,0)\"><text x=\"22.5\" y=\"30\" style=\"font-size: 11px; \" text-anchor=\"middle\">Prod 4</text><polyline points=\"1.5,35 43.5,35\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(248,0)\"><text x=\"22.5\" y=\"30\" style=\"font-size: 11px; \" text-anchor=\"middle\">Prod 5</text><polyline points=\"1.5,35 43.5,35\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(295,0)\"><text x=\"22.5\" y=\"30\" style=\"font-size: 11px; \" text-anchor=\"middle\">Prod 6</text><polyline points=\"1.5,35 43.5,35\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(342,0)\"><text x=\"22.5\" y=\"30\" style=\"font-size: 11px; \" text-anchor=\"middle\">Prod 7</text><polyline points=\"1.5,35 43.5,35\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(389,0)\"><text x=\"22.5\" y=\"30\" style=\"font-size: 11px; \" text-anchor=\"middle\">Prod 8</text><polyline points=\"1.5,35 43.5,35\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(154,0)\"><text x=\"69.5\" y=\"10\" style=\"font-size: 11px; \" text-anchor=\"middle\">Group 1</text><polyline points=\"1.5,15 137.5,15\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(295,0)\"><text x=\"69.5\" y=\"10\" style=\"font-size: 11px; \" text-anchor=\"middle\">Group 2</text><polyline points=\"1.5,15 137.5,15\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(0,40)\"><text x=\"50\" y=\"16\" style=\"font-size: 11px; \" text-anchor=\"end\">January</text><polyline points=\"55,1.5 55,19.5\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(0,63)\"><text x=\"50\" y=\"16\" style=\"font-size: 11px; \" text-anchor=\"end\">February</text><polyline points=\"55,1.5 55,19.5\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(0,86)\"><text x=\"50\" y=\"16\" style=\"font-size: 11px; \" text-anchor=\"end\">March</text><polyline points=\"55,1.5 55,19.5\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(0,109)\"><text x=\"50\" y=\"16\" style=\"font-size: 11px; \" text-anchor=\"end\">April</text><polyline points=\"55,1.5 55,19.5\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(0,132)\"><text x=\"50\" y=\"16\" style=\"font-size: 11px; \" text-anchor=\"end\">May</text><polyline points=\"55,1.5 55,19.5\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(0,155)\"><text x=\"50\" y=\"16\" style=\"font-size: 11px; \" text-anchor=\"end\">June</text><polyline points=\"55,1.5 55,19.5\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(0,178)\"><text x=\"50\" y=\"16\" style=\"font-size: 11px; \" text-anchor=\"end\">July</text><polyline points=\"55,1.5 55,19.5\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(0,201)\"><text x=\"50\" y=\"16\" style=\"font-size: 11px; \" text-anchor=\"end\">August</text><polyline points=\"55,1.5 55,19.5\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(0,224)\"><text x=\"50\" y=\"16\" style=\"font-size: 11px; \" text-anchor=\"end\">September</text><polyline points=\"55,1.5 55,19.5\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(0,247)\"><text x=\"50\" y=\"16\" style=\"font-size: 11px; \" text-anchor=\"end\">October</text><polyline points=\"55,1.5 55,19.5\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(0,270)\"><text x=\"50\" y=\"16\" style=\"font-size: 11px; \" text-anchor=\"end\">November</text><polyline points=\"55,1.5 55,19.5\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(0,293)\"><text x=\"50\" y=\"16\" style=\"font-size: 11px; \" text-anchor=\"end\">Deecember</text><polyline points=\"55,1.5 55,19.5\"></polyline></g></svg><svg class=\"heatmap\" y=\"35\" x=\"509\" id=\"smallHeatmap\"><g class=\"heatmapCell\" transform=\"translate(1,1)\"><rect y=\"0\" fill=\"#fdfdfd\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(1,11)\"><rect y=\"0\" fill=\"#fefefe\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(1,21)\"><rect y=\"0\" fill=\"#fefefe\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(1,31)\"><rect y=\"0\" fill=\"#fbfbfb\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(1,41)\"><rect y=\"0\" fill=\"#f9f9f9\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(1,51)\"><rect y=\"0\" fill=\"#f9f9f9\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(1,61)\"><rect y=\"0\" fill=\"#e1e1e1\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(1,71)\"><rect y=\"0\" fill=\"#f6f6f6\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(1,81)\"><rect y=\"0\" fill=\"#f6f6f6\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(1,91)\"><rect y=\"0\" fill=\"#f6f6f6\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(1,101)\"><rect y=\"0\" fill=\"#fdfdfd\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(1,111)\"><rect y=\"0\" fill=\"#ffffff\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(11,1)\"><rect y=\"0\" fill=\"#fcfcfc\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(11,11)\"><rect y=\"0\" fill=\"#fefefe\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(11,21)\"><rect y=\"0\" fill=\"#fefefe\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(11,31)\"><rect y=\"0\" fill=\"#fbfbfb\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(11,41)\"><rect y=\"0\" fill=\"#f8f8f8\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(11,51)\"><rect y=\"0\" fill=\"#f6f6f6\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(11,61)\"><rect y=\"0\" fill=\"#d9d9d9\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(11,71)\"><rect y=\"0\" fill=\"#f3f3f3\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(11,81)\"><rect y=\"0\" fill=\"#f1f1f1\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(11,91)\"><rect y=\"0\" fill=\"#f2f2f2\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(11,101)\"><rect y=\"0\" fill=\"#fafafa\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(11,111)\"><rect y=\"0\" fill=\"#fefefe\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(21,1)\"><rect y=\"0\" fill=\"#fcfcfc\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(21,11)\"><rect y=\"0\" fill=\"#fefefe\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(21,21)\"><rect y=\"0\" fill=\"#fefefe\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(21,31)\"><rect y=\"0\" fill=\"#fcfcfc\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(21,41)\"><rect y=\"0\" fill=\"#f8f8f8\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(21,51)\"><rect y=\"0\" fill=\"#f9f9f9\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(21,61)\"><rect y=\"0\" fill=\"#e9e9e9\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(21,71)\"><rect y=\"0\" fill=\"#f4f4f4\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(21,81)\"><rect y=\"0\" fill=\"#f4f4f4\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(21,91)\"><rect y=\"0\" fill=\"#f5f5f5\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(21,101)\"><rect y=\"0\" fill=\"#fbfbfb\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(21,111)\"><rect y=\"0\" fill=\"#fefefe\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(31,1)\"><rect y=\"0\" fill=\"#fcfcfc\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(31,11)\"><rect y=\"0\" fill=\"#fefefe\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(31,21)\"><rect y=\"0\" fill=\"#fefefe\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(31,31)\"><rect y=\"0\" fill=\"#fbfbfb\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(31,41)\"><rect y=\"0\" fill=\"#f9f9f9\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(31,51)\"><rect y=\"0\" fill=\"#f8f8f8\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(31,61)\"><rect y=\"0\" fill=\"#e0e0e0\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(31,71)\"><rect y=\"0\" fill=\"#f4f4f4\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(31,81)\"><rect y=\"0\" fill=\"#f6f6f6\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(31,91)\"><rect y=\"0\" fill=\"#f8f8f8\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(31,101)\"><rect y=\"0\" fill=\"#fcfcfc\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(31,111)\"><rect y=\"0\" fill=\"#fefefe\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(41,1)\"><rect y=\"0\" fill=\"#fcfcfc\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(41,11)\"><rect y=\"0\" fill=\"#fcfcfc\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(41,21)\"><rect y=\"0\" fill=\"#fefefe\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(41,31)\"><rect y=\"0\" fill=\"#f6f6f6\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(41,41)\"><rect y=\"0\" fill=\"#f4f4f4\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(41,51)\"><rect y=\"0\" fill=\"#efefef\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(41,61)\"><rect y=\"0\" fill=\"#b0b0b0\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(41,71)\"><rect y=\"0\" fill=\"#c7c7c7\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(41,81)\"><rect y=\"0\" fill=\"#e7e7e7\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(41,91)\"><rect y=\"0\" fill=\"#c7c7c7\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(41,101)\"><rect y=\"0\" fill=\"#fafafa\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(41,111)\"><rect y=\"0\" fill=\"#fefefe\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(51,1)\"><rect y=\"0\" fill=\"#f4f4f4\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(51,11)\"><rect y=\"0\" fill=\"#f9f9f9\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(51,21)\"><rect y=\"0\" fill=\"#fcfcfc\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(51,31)\"><rect y=\"0\" fill=\"#d6d6d6\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(51,41)\"><rect y=\"0\" fill=\"#b3b3b3\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(51,51)\"><rect y=\"0\" fill=\"#bfbfbf\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(51,61)\"><rect y=\"0\" fill=\"#000000\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(51,71)\"><rect y=\"0\" fill=\"#040404\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(51,81)\"><rect y=\"0\" fill=\"#101010\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(51,91)\"><rect y=\"0\" fill=\"#070707\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(51,101)\"><rect y=\"0\" fill=\"#f1f1f1\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(51,111)\"><rect y=\"0\" fill=\"#f9f9f9\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(61,1)\"><rect y=\"0\" fill=\"#fcfcfc\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(61,11)\"><rect y=\"0\" fill=\"#fbfbfb\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(61,21)\"><rect y=\"0\" fill=\"#ffffff\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(61,31)\"><rect y=\"0\" fill=\"#ffffff\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(61,41)\"><rect y=\"0\" fill=\"#fdfdfd\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(61,51)\"><rect y=\"0\" fill=\"#f4f4f4\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(61,61)\"><rect y=\"0\" fill=\"#b7b7b7\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(61,71)\"><rect y=\"0\" fill=\"#f2f2f2\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(61,81)\"><rect y=\"0\" fill=\"#f5f5f5\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(61,91)\"><rect y=\"0\" fill=\"#f8f8f8\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(61,101)\"><rect y=\"0\" fill=\"#fcfcfc\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(61,111)\"><rect y=\"0\" fill=\"#ffffff\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(71,1)\"><rect y=\"0\" fill=\"#ffffff\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(71,11)\"><rect y=\"0\" fill=\"#ffffff\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(71,21)\"><rect y=\"0\" fill=\"#ffffff\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(71,31)\"><rect y=\"0\" fill=\"#ffffff\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(71,41)\"><rect y=\"0\" fill=\"#ffffff\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(71,51)\"><rect y=\"0\" fill=\"#ffffff\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(71,61)\"><rect y=\"0\" fill=\"#fdfdfd\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(71,71)\"><rect y=\"0\" fill=\"#fefefe\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(71,81)\"><rect y=\"0\" fill=\"#fefefe\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(71,91)\"><rect y=\"0\" fill=\"#fefefe\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(71,101)\"><rect y=\"0\" fill=\"#ffffff\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><g class=\"heatmapCell\" transform=\"translate(71,111)\"><rect y=\"0\" fill=\"#ffffff\" id=\"heatCell\" width=\"10\" height=\"10\"></rect></g><rect fill=\"none\" stroke=\"#000\" stroke-widtx=\"1px\" x=\"1\" y=\"1\" width=\"79\" height=\"119\"></rect></svg><svg y=\"175\" x=\"509\"><rect x=\"-1\" fill=\"#ffffff\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"0\" fill=\"#fefefe\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"1\" fill=\"#fdfdfd\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"2\" fill=\"#fbfbfb\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"3\" fill=\"#fafafa\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"4\" fill=\"#f9f9f9\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"5\" fill=\"#f8f8f8\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"6\" fill=\"#f7f7f7\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"7\" fill=\"#f5f5f5\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"8\" fill=\"#f4f4f4\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"9\" fill=\"#f3f3f3\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"10\" fill=\"#f2f2f2\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"11\" fill=\"#f0f0f0\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"12\" fill=\"#efefef\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"13\" fill=\"#eeeeee\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"14\" fill=\"#e9e9e9\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"15\" fill=\"#e4e4e4\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"16\" fill=\"#dfdfdf\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"17\" fill=\"#dbdbdb\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"18\" fill=\"#d6d6d6\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"19\" fill=\"#d1d1d1\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"20\" fill=\"#cccccc\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"21\" fill=\"#c7c7c7\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"22\" fill=\"#c2c2c2\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"23\" fill=\"#bdbdbd\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"24\" fill=\"#b9b9b9\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"25\" fill=\"#b4b4b4\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"26\" fill=\"#afafaf\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"27\" fill=\"#aaaaaa\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"28\" fill=\"#9f9f9f\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"29\" fill=\"#949494\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"30\" fill=\"#898989\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"31\" fill=\"#7e7e7e\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"32\" fill=\"#737373\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"33\" fill=\"#686868\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"34\" fill=\"#5e5e5e\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"35\" fill=\"#535353\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"36\" fill=\"#484848\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"37\" fill=\"#3d3d3d\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"38\" fill=\"#323232\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"39\" fill=\"#272727\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"40\" fill=\"#1c1c1c\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"41\" fill=\"#111111\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"42\" fill=\"#101010\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"43\" fill=\"#0f0f0f\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"44\" fill=\"#0d0d0d\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"45\" fill=\"#0c0c0c\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"46\" fill=\"#0b0b0b\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"47\" fill=\"#0a0a0a\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"48\" fill=\"#090909\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"49\" fill=\"#070707\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"50\" fill=\"#060606\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"51\" fill=\"#050505\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"52\" fill=\"#040404\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"53\" fill=\"#020202\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"54\" fill=\"#010101\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"55\" fill=\"#000000\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"56\" fill=\"#000000\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"57\" fill=\"#000000\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"58\" fill=\"#000000\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"59\" fill=\"#000000\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"60\" fill=\"#000000\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"61\" fill=\"#000000\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"62\" fill=\"#000000\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"63\" fill=\"#000000\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"64\" fill=\"#000000\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"65\" fill=\"#000000\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"66\" fill=\"#000000\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"67\" fill=\"#000000\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"68\" fill=\"#000000\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><rect x=\"69\" fill=\"#000000\" width=\"1\" height=\"15\" transform=\"translate(5,0)\"></rect><g class=\"axis\" transform=\"translate(5,15)\"><g style=\"opacity: 1; \" transform=\"translate(14,0)\"><line class=\"tick\" y2=\"0\" x2=\"0\"></line><text y=\"3\" x=\"0\" dy=\".71em\" text-anchor=\"middle\">8,712</text></g><g style=\"opacity: 1; \" transform=\"translate(56,0)\"><line class=\"tick\" y2=\"0\" x2=\"0\"></line><text y=\"3\" x=\"0\" dy=\".71em\" text-anchor=\"middle\">34,820</text></g><path class=\"domain\" d=\"M0,0V0H70V0\"></path></g></svg><svg y=\"284\" x=\"509\"><g class=\"heatmapCell\"><rect x=\"1\" y=\"30\" fill=\"#ffffff\" width=\"79\" height=\"0\"></rect><text x=\"75\" y=\"9\" dy=\"11px\" style=\"font-size: 11px; \" text-anchor=\"end\">Sales</text><polyline points=\"1,1 79,1 79,30 1,30 1,1\"></polyline></g></svg><svg y=\"40\" x=\"456\" id=\"vertLegend\" style=\"opacity: 0.01; \"><rect y=\"-1\" fill=\"#ffffff\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"0\" fill=\"#ffffff\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"1\" fill=\"#fefefe\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"2\" fill=\"#fefefe\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"3\" fill=\"#fefefe\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"4\" fill=\"#fdfdfd\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"5\" fill=\"#fdfdfd\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"6\" fill=\"#fdfdfd\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"7\" fill=\"#fdfdfd\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"8\" fill=\"#fcfcfc\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"9\" fill=\"#fcfcfc\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"10\" fill=\"#fcfcfc\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"11\" fill=\"#fbfbfb\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"12\" fill=\"#fbfbfb\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"13\" fill=\"#fbfbfb\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"14\" fill=\"#fafafa\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"15\" fill=\"#fafafa\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"16\" fill=\"#fafafa\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"17\" fill=\"#f9f9f9\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"18\" fill=\"#f9f9f9\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"19\" fill=\"#f9f9f9\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"20\" fill=\"#f9f9f9\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"21\" fill=\"#f8f8f8\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"22\" fill=\"#f8f8f8\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"23\" fill=\"#f8f8f8\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"24\" fill=\"#f7f7f7\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"25\" fill=\"#f7f7f7\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"26\" fill=\"#f7f7f7\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"27\" fill=\"#f6f6f6\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"28\" fill=\"#f6f6f6\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"29\" fill=\"#f6f6f6\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"30\" fill=\"#f5f5f5\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"31\" fill=\"#f5f5f5\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"32\" fill=\"#f5f5f5\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"33\" fill=\"#f5f5f5\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"34\" fill=\"#f4f4f4\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"35\" fill=\"#f4f4f4\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"36\" fill=\"#f4f4f4\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"37\" fill=\"#f3f3f3\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"38\" fill=\"#f3f3f3\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"39\" fill=\"#f3f3f3\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"40\" fill=\"#f2f2f2\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"41\" fill=\"#f2f2f2\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"42\" fill=\"#f2f2f2\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"43\" fill=\"#f1f1f1\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"44\" fill=\"#f1f1f1\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"45\" fill=\"#f1f1f1\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"46\" fill=\"#f1f1f1\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"47\" fill=\"#f0f0f0\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"48\" fill=\"#f0f0f0\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"49\" fill=\"#f0f0f0\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"50\" fill=\"#efefef\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"51\" fill=\"#efefef\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"52\" fill=\"#efefef\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"53\" fill=\"#eeeeee\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"54\" fill=\"#eeeeee\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"55\" fill=\"#ededed\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"56\" fill=\"#ececec\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"57\" fill=\"#ebebeb\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"58\" fill=\"#e9e9e9\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"59\" fill=\"#e8e8e8\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"60\" fill=\"#e7e7e7\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"61\" fill=\"#e6e6e6\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"62\" fill=\"#e4e4e4\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"63\" fill=\"#e3e3e3\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"64\" fill=\"#e2e2e2\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"65\" fill=\"#e1e1e1\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"66\" fill=\"#dfdfdf\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"67\" fill=\"#dedede\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"68\" fill=\"#dddddd\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"69\" fill=\"#dcdcdc\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"70\" fill=\"#dbdbdb\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"71\" fill=\"#d9d9d9\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"72\" fill=\"#d8d8d8\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"73\" fill=\"#d7d7d7\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"74\" fill=\"#d6d6d6\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"75\" fill=\"#d4d4d4\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"76\" fill=\"#d3d3d3\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"77\" fill=\"#d2d2d2\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"78\" fill=\"#d1d1d1\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"79\" fill=\"#cfcfcf\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"80\" fill=\"#cecece\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"81\" fill=\"#cdcdcd\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"82\" fill=\"#cccccc\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"83\" fill=\"#cbcbcb\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"84\" fill=\"#c9c9c9\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"85\" fill=\"#c8c8c8\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"86\" fill=\"#c7c7c7\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"87\" fill=\"#c6c6c6\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"88\" fill=\"#c4c4c4\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"89\" fill=\"#c3c3c3\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"90\" fill=\"#c2c2c2\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"91\" fill=\"#c1c1c1\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"92\" fill=\"#bfbfbf\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"93\" fill=\"#bebebe\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"94\" fill=\"#bdbdbd\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"95\" fill=\"#bcbcbc\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"96\" fill=\"#bbbbbb\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"97\" fill=\"#b9b9b9\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"98\" fill=\"#b8b8b8\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"99\" fill=\"#b7b7b7\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"100\" fill=\"#b6b6b6\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"101\" fill=\"#b4b4b4\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"102\" fill=\"#b3b3b3\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"103\" fill=\"#b2b2b2\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"104\" fill=\"#b1b1b1\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"105\" fill=\"#afafaf\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"106\" fill=\"#aeaeae\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"107\" fill=\"#adadad\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"108\" fill=\"#acacac\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"109\" fill=\"#aaaaaa\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"110\" fill=\"#a8a8a8\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"111\" fill=\"#a6a6a6\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"112\" fill=\"#a3a3a3\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"113\" fill=\"#a0a0a0\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"114\" fill=\"#9d9d9d\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"115\" fill=\"#9a9a9a\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"116\" fill=\"#989898\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"117\" fill=\"#959595\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"118\" fill=\"#929292\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"119\" fill=\"#8f8f8f\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"120\" fill=\"#8d8d8d\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"121\" fill=\"#8a8a8a\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"122\" fill=\"#878787\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"123\" fill=\"#848484\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"124\" fill=\"#828282\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"125\" fill=\"#7f7f7f\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"126\" fill=\"#7c7c7c\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"127\" fill=\"#797979\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"128\" fill=\"#767676\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"129\" fill=\"#747474\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"130\" fill=\"#717171\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"131\" fill=\"#6e6e6e\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"132\" fill=\"#6b6b6b\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"133\" fill=\"#696969\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"134\" fill=\"#666666\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"135\" fill=\"#636363\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"136\" fill=\"#606060\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"137\" fill=\"#5e5e5e\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"138\" fill=\"#5b5b5b\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"139\" fill=\"#585858\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"140\" fill=\"#555555\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"141\" fill=\"#525252\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"142\" fill=\"#505050\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"143\" fill=\"#4d4d4d\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"144\" fill=\"#4a4a4a\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"145\" fill=\"#474747\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"146\" fill=\"#454545\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"147\" fill=\"#424242\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"148\" fill=\"#3f3f3f\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"149\" fill=\"#3c3c3c\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"150\" fill=\"#393939\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"151\" fill=\"#373737\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"152\" fill=\"#343434\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"153\" fill=\"#313131\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"154\" fill=\"#2e2e2e\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"155\" fill=\"#2c2c2c\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"156\" fill=\"#292929\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"157\" fill=\"#262626\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"158\" fill=\"#232323\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"159\" fill=\"#212121\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"160\" fill=\"#1e1e1e\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"161\" fill=\"#1b1b1b\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"162\" fill=\"#181818\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"163\" fill=\"#151515\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"164\" fill=\"#131313\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"165\" fill=\"#111111\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"166\" fill=\"#111111\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"167\" fill=\"#101010\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"168\" fill=\"#101010\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"169\" fill=\"#101010\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"170\" fill=\"#0f0f0f\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"171\" fill=\"#0f0f0f\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"172\" fill=\"#0f0f0f\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"173\" fill=\"#0e0e0e\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"174\" fill=\"#0e0e0e\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"175\" fill=\"#0e0e0e\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"176\" fill=\"#0d0d0d\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"177\" fill=\"#0d0d0d\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"178\" fill=\"#0d0d0d\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"179\" fill=\"#0d0d0d\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"180\" fill=\"#0c0c0c\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"181\" fill=\"#0c0c0c\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"182\" fill=\"#0c0c0c\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"183\" fill=\"#0b0b0b\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"184\" fill=\"#0b0b0b\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"185\" fill=\"#0b0b0b\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"186\" fill=\"#0a0a0a\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"187\" fill=\"#0a0a0a\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"188\" fill=\"#0a0a0a\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"189\" fill=\"#090909\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"190\" fill=\"#090909\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"191\" fill=\"#090909\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"192\" fill=\"#090909\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"193\" fill=\"#080808\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"194\" fill=\"#080808\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"195\" fill=\"#080808\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"196\" fill=\"#070707\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"197\" fill=\"#070707\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"198\" fill=\"#070707\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"199\" fill=\"#060606\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"200\" fill=\"#060606\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"201\" fill=\"#060606\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"202\" fill=\"#050505\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"203\" fill=\"#050505\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"204\" fill=\"#050505\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"205\" fill=\"#050505\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"206\" fill=\"#040404\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"207\" fill=\"#040404\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"208\" fill=\"#040404\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"209\" fill=\"#030303\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"210\" fill=\"#030303\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"211\" fill=\"#030303\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"212\" fill=\"#020202\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"213\" fill=\"#020202\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"214\" fill=\"#020202\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"215\" fill=\"#010101\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"216\" fill=\"#010101\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"217\" fill=\"#010101\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"218\" fill=\"#010101\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"219\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"220\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"221\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"222\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"223\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"224\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"225\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"226\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"227\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"228\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"229\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"230\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"231\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"232\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"233\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"234\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"235\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"236\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"237\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"238\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"239\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"240\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"241\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"242\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"243\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"244\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"245\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"246\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"247\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"248\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"249\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"250\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"251\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"252\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"253\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"254\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"255\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"256\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"257\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"258\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"259\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"260\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"261\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"262\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"263\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"264\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"265\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"266\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"267\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"268\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"269\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"270\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"271\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"272\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"273\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"274\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><rect y=\"275\" fill=\"#000000\" width=\"15\" height=\"1\" transform=\"translate(5,0)\"></rect><g class=\"axis\" transform=\"translate(22.5,0)\"><g style=\"opacity: 1; \" transform=\"translate(0,66.07142857142857)\"><line class=\"tick\" x2=\"0\" y2=\"0\"></line><text x=\"3\" y=\"0\" dy=\".32em\" text-anchor=\"start\">10,000</text></g><g style=\"opacity: 1; \" transform=\"translate(0,127.2039897039897)\"><line class=\"tick\" x2=\"0\" y2=\"0\"></line><text x=\"3\" y=\"0\" dy=\".32em\" text-anchor=\"start\">20,000</text></g><g style=\"opacity: 1; \" transform=\"translate(0,188.33655083655086)\"><line class=\"tick\" x2=\"0\" y2=\"0\"></line><text x=\"3\" y=\"0\" dy=\".32em\" text-anchor=\"start\">30,000</text></g><g style=\"opacity: 1; \" transform=\"translate(0,249.469111969112)\"><line class=\"tick\" x2=\"0\" y2=\"0\"></line><text x=\"3\" y=\"0\" dy=\".32em\" text-anchor=\"start\">40,000</text></g><path class=\"domain\" d=\"M0,5H0V271H0\"></path></g></svg></g></svg></div>\r\n", | |
| "\r\n" | |
| ], | |
| "output_type": "display_data" | |
| }, | |
| { | |
| "output_type": "pyout", | |
| "prompt_number": 10, | |
| "text": [ | |
| "True" | |
| ] | |
| } | |
| ], | |
| "prompt_number": 10 | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": {}, | |
| "source": [ | |
| "I often work with output from statistical packages and including more information in a cell also comes at little to no cost." | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "collapsed": false, | |
| "input": [ | |
| "d3 = d3object(width=800,\n", | |
| " height=400,\n", | |
| " style='JFTable',\n", | |
| " number=1,\n", | |
| " d3=None,\n", | |
| " title='Example table with d3js',\n", | |
| " desc='An example table created created with d3js with data generated with Python.')\n", | |
| "sRows=[['Long/Short Eq. Hedge',\n", | |
| " 'FoF',\n", | |
| " 'Not L/S nor FoF',\n", | |
| " 'All',\n", | |
| " 'Not FoFs',\n", | |
| "]]\n", | |
| "\n", | |
| "sColumns=[\n", | |
| " ['N',\n", | |
| " 'Initial',\n", | |
| " 'Average',\n", | |
| " 'Incentive',\n", | |
| " 'Management',\n", | |
| " 'Median',\n", | |
| " 'Mean [%]',\n", | |
| " 'Std. dev.',\n", | |
| " 'Skewness',\n", | |
| " 'Kurtosis'\n", | |
| " ],\n", | |
| " [ '',\n", | |
| " None,\n", | |
| " 'AUM [M, USD]',\n", | |
| " None,\n", | |
| " 'Fees [%]',\n", | |
| " None,\n", | |
| " None,\n", | |
| " None,\n", | |
| " None,\n", | |
| " 'Returns'\n", | |
| " ]\n", | |
| " ]\n", | |
| "data=[[3452, 3, 22, 20.0, 1.5, 0.666, 0.656, 3.538, -0.1, 1.0],\n", | |
| " [5791, 7, 22, 10.0, 1.5, 0.502, 0.27, 1.17, -0.9, 1.8],\n", | |
| " [6718, 4, 23, 20.0, 1.5, 0.7, 0.637, 1.448, -0.2, 1.2],\n", | |
| " [15961,5,23, 20.0, 1.5, 0.6, 0.467, 1.467, -0.4, 1.3],\n", | |
| " [10170,4, 23, 20.0, 1.5, 0.69, 0.646, 2.633, -0.1, 1.1],\n", | |
| " ]\n", | |
| "dataAdd=[['', '', '', '', '', '', 0.015, '', '', 0.084],\n", | |
| " ['', '', '', '', '', '', 0.016, '', '', 0.015],\n", | |
| " ['', '', '', '', '', '', 0.024, '', '', 0.162],\n", | |
| " ['', '', '', '', '', '', 0.058, '', '', 0.126],\n", | |
| " ['', '', '', '', '', '', 0.093, '', '', 0.149],\n", | |
| " ]\n", | |
| "dataAdd=[dataAdd,[[i for i in j] for j in dataAdd]]\n", | |
| "d3.precision=2\n", | |
| "data=d3.convertVar(data)\n", | |
| "d3.precision=4\n", | |
| "d3.addSimpleTable( data, \n", | |
| " dataAdd=dataAdd,\n", | |
| " fontSizeCells=[12,10,10],\n", | |
| " pVals=0,\n", | |
| " sRows=sRows,\n", | |
| " sColumns=sColumns,\n", | |
| " sRowsMargins=[5,100,0],\n", | |
| " sColsMargins=[5,20,10],\n", | |
| " spacing=2,\n", | |
| " addBorders=1,\n", | |
| " addOutsideBorders=-1,\n", | |
| " rectWidth=45,\n", | |
| " rectHeight=0 \n", | |
| " )\n", | |
| "html=d3.render(mode=('show','html'))" | |
| ], | |
| "language": "python", | |
| "metadata": {}, | |
| "outputs": [ | |
| { | |
| "html": [ | |
| "<style>\n", | |
| "\n", | |
| "\n", | |
| " .d3Output{\n", | |
| " min-height: 1.2em;\n", | |
| " line-height: 1.2em;\n", | |
| " position: relative;\n", | |
| " font-size: 1em;\n", | |
| " padding: 5px 0;\n", | |
| " \n", | |
| " list-style: none;\n", | |
| " background: #fff;\n", | |
| " color: #000;\n", | |
| " }\n", | |
| " svg{\n", | |
| " color-rendering: optimizeQuality !important;\n", | |
| " shape-rendering: geometricPrecision !important;\n", | |
| " text-rendering: geometricPrecision !important;\n", | |
| " }\n", | |
| " .d3Output.header{\n", | |
| " text-align: center;\n", | |
| " font-weight: bold;\n", | |
| " border-bottom: none;\n", | |
| " font-size: 0.9em;\n", | |
| " \n", | |
| " }\n", | |
| " .d3Output.title{\n", | |
| " text-align: center;\n", | |
| " font-weight: bold;\n", | |
| " border-bottom: none;\n", | |
| " font-size: 1.2em;\n", | |
| " \n", | |
| " }\n", | |
| " .d3Output.description{\n", | |
| " font-size: 0.8em;\n", | |
| " text-align:justify;\n", | |
| " text-justify:inter-word;\n", | |
| " border-bottom: 1px solid #000;\n", | |
| " }\n", | |
| " .d3Output.description.panel{\n", | |
| " text-align: center;\n", | |
| " }\n", | |
| " svg, canvas {\n", | |
| " border-bottom: 1px solid #000;\n", | |
| " display: block;\n", | |
| " margin: 5px 0;\n", | |
| " }\n", | |
| " .d3Output.description.figure{\n", | |
| " border-bottom: none;\n", | |
| " }\n", | |
| " \n", | |
| "\n", | |
| " .heatmapCell path, .heatmapCell line, .heatmapCell polyline, .d3Output polyline {\n", | |
| " fill: none;\n", | |
| " stroke-width: 1px;\n", | |
| " stroke: black;\n", | |
| " shape-rendering: crispEdges !important;\n", | |
| " }\n", | |
| " .heatmapCell text, .heatmapCell rect, .d3Output rect {\n", | |
| " font-size: 1em;\n", | |
| " shape-rendering: crispEdges !important;\n", | |
| " }\n", | |
| " \n", | |
| "#-tag-6864d580-59a9-11e2-a076-00268315e762{shape-rendering: crispEdges !important;}\n", | |
| "</style>\r\n", | |
| "<div class=\"d3Output header\" style=\"width: 800px;\">Table 1</div>\r\n", | |
| "<div class=\"d3Output title\" style=\"width: 800px;\"> Example table with d3js</div>\r\n", | |
| "<div class=\"d3Output description\" style=\"width: 800px\"> An example table created created with d3js with data generated with Python.</div>\r\n", | |
| "<div id=\"id-6864ae6e-59a9-11e2-9c12-00268315e762\" class=\"d3Output\"><svg width=\"800\" height=\"400\" style=\"border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: black; \"><g id=\"svgElementid-6864ae6e-59a9-11e2-9c12-00268315e762-tag-6864d580-59a9-11e2-a076-00268315e762\" transform=\"translate(117.5,61)\"><svg class=\"heatmap\" y=\"0\" x=\"0\" id=\"heatmap\"><g class=\"heatmapCell\" transform=\"translate(110,40)\"><rect y=\"46\" fill=\"#49c8af\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">3452</text><text x=\"40\" y=\"17\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><text x=\"40\" y=\"29\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><polyline points=\"0,0 45,0 45,46 0,46 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(110,88)\"><rect y=\"46\" fill=\"#499eaf\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">5791</text><text x=\"40\" y=\"17\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><text x=\"40\" y=\"29\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><polyline points=\"0,0 45,0 45,46 0,46 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(110,136)\"><rect y=\"46\" fill=\"#548da7\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">6718</text><text x=\"40\" y=\"17\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><text x=\"40\" y=\"29\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><polyline points=\"0,0 45,0 45,46 0,46 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(110,184)\"><rect y=\"46\" fill=\"#210f06\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">15961</text><text x=\"40\" y=\"17\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><text x=\"40\" y=\"29\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><polyline points=\"0,0 45,0 45,46 0,46 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(110,232)\"><rect y=\"46\" fill=\"#694f6b\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">10170</text><text x=\"40\" y=\"17\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><text x=\"40\" y=\"29\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><polyline points=\"0,0 45,0 45,46 0,46 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(157,40)\"><rect y=\"46\" fill=\"#b9fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">3</text><text x=\"40\" y=\"17\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><text x=\"40\" y=\"29\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><polyline points=\"0,0 45,0 45,46 0,46 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(157,88)\"><rect y=\"46\" fill=\"#b9fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">7</text><text x=\"40\" y=\"17\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><text x=\"40\" y=\"29\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><polyline points=\"0,0 45,0 45,46 0,46 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(157,136)\"><rect y=\"46\" fill=\"#b9fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">4</text><text x=\"40\" y=\"17\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><text x=\"40\" y=\"29\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><polyline points=\"0,0 45,0 45,46 0,46 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(157,184)\"><rect y=\"46\" fill=\"#b9fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">5</text><text x=\"40\" y=\"17\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><text x=\"40\" y=\"29\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><polyline points=\"0,0 45,0 45,46 0,46 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(157,232)\"><rect y=\"46\" fill=\"#b9fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">4</text><text x=\"40\" y=\"17\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><text x=\"40\" y=\"29\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><polyline points=\"0,0 45,0 45,46 0,46 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(204,40)\"><rect y=\"46\" fill=\"#b8fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">22</text><text x=\"40\" y=\"17\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><text x=\"40\" y=\"29\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><polyline points=\"0,0 45,0 45,46 0,46 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(204,88)\"><rect y=\"46\" fill=\"#b8fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">22</text><text x=\"40\" y=\"17\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><text x=\"40\" y=\"29\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><polyline points=\"0,0 45,0 45,46 0,46 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(204,136)\"><rect y=\"46\" fill=\"#b8fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">23</text><text x=\"40\" y=\"17\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><text x=\"40\" y=\"29\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><polyline points=\"0,0 45,0 45,46 0,46 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(204,184)\"><rect y=\"46\" fill=\"#b8fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">23</text><text x=\"40\" y=\"17\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><text x=\"40\" y=\"29\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><polyline points=\"0,0 45,0 45,46 0,46 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(204,232)\"><rect y=\"46\" fill=\"#b8fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">23</text><text x=\"40\" y=\"17\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><text x=\"40\" y=\"29\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><polyline points=\"0,0 45,0 45,46 0,46 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(251,40)\"><rect y=\"46\" fill=\"#b8fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">20</text><text x=\"40\" y=\"17\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><text x=\"40\" y=\"29\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><polyline points=\"0,0 45,0 45,46 0,46 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(251,88)\"><rect y=\"46\" fill=\"#b9fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">10</text><text x=\"40\" y=\"17\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><text x=\"40\" y=\"29\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><polyline points=\"0,0 45,0 45,46 0,46 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(251,136)\"><rect y=\"46\" fill=\"#b8fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">20</text><text x=\"40\" y=\"17\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><text x=\"40\" y=\"29\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><polyline points=\"0,0 45,0 45,46 0,46 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(251,184)\"><rect y=\"46\" fill=\"#b8fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">20</text><text x=\"40\" y=\"17\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><text x=\"40\" y=\"29\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><polyline points=\"0,0 45,0 45,46 0,46 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(251,232)\"><rect y=\"46\" fill=\"#b8fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">20</text><text x=\"40\" y=\"17\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><text x=\"40\" y=\"29\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><polyline points=\"0,0 45,0 45,46 0,46 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(298,40)\"><rect y=\"46\" fill=\"#b9fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">1.5</text><text x=\"40\" y=\"17\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><text x=\"40\" y=\"29\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><polyline points=\"0,0 45,0 45,46 0,46 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(298,88)\"><rect y=\"46\" fill=\"#b9fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">1.5</text><text x=\"40\" y=\"17\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><text x=\"40\" y=\"29\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><polyline points=\"0,0 45,0 45,46 0,46 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(298,136)\"><rect y=\"46\" fill=\"#b9fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">1.5</text><text x=\"40\" y=\"17\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><text x=\"40\" y=\"29\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><polyline points=\"0,0 45,0 45,46 0,46 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(298,184)\"><rect y=\"46\" fill=\"#b9fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">1.5</text><text x=\"40\" y=\"17\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><text x=\"40\" y=\"29\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><polyline points=\"0,0 45,0 45,46 0,46 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(298,232)\"><rect y=\"46\" fill=\"#b9fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">1.5</text><text x=\"40\" y=\"17\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><text x=\"40\" y=\"29\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><polyline points=\"0,0 45,0 45,46 0,46 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(345,40)\"><rect y=\"46\" fill=\"#b9fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">0.67</text><text x=\"40\" y=\"17\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><text x=\"40\" y=\"29\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><polyline points=\"0,0 45,0 45,46 0,46 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(345,88)\"><rect y=\"46\" fill=\"#b9fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">0.5</text><text x=\"40\" y=\"17\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><text x=\"40\" y=\"29\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><polyline points=\"0,0 45,0 45,46 0,46 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(345,136)\"><rect y=\"46\" fill=\"#b9fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">0.7</text><text x=\"40\" y=\"17\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><text x=\"40\" y=\"29\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><polyline points=\"0,0 45,0 45,46 0,46 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(345,184)\"><rect y=\"46\" fill=\"#b9fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">0.6</text><text x=\"40\" y=\"17\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><text x=\"40\" y=\"29\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><polyline points=\"0,0 45,0 45,46 0,46 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(345,232)\"><rect y=\"46\" fill=\"#b9fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">0.69</text><text x=\"40\" y=\"17\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><text x=\"40\" y=\"29\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><polyline points=\"0,0 45,0 45,46 0,46 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(392,40)\"><rect y=\"46\" fill=\"#b9fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">0.66</text><text x=\"40\" y=\"17\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\">★★</text><text x=\"40\" y=\"29\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\">0.015</text><polyline points=\"0,0 45,0 45,46 0,46 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(392,88)\"><rect y=\"46\" fill=\"#b9fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">0.27</text><text x=\"40\" y=\"17\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\">★★</text><text x=\"40\" y=\"29\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\">0.016</text><polyline points=\"0,0 45,0 45,46 0,46 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(392,136)\"><rect y=\"46\" fill=\"#b9fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">0.64</text><text x=\"40\" y=\"17\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\">★★</text><text x=\"40\" y=\"29\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\">0.024</text><polyline points=\"0,0 45,0 45,46 0,46 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(392,184)\"><rect y=\"46\" fill=\"#b9fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">0.47</text><text x=\"40\" y=\"17\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\">★</text><text x=\"40\" y=\"29\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\">0.058</text><polyline points=\"0,0 45,0 45,46 0,46 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(392,232)\"><rect y=\"46\" fill=\"#b9fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">0.65</text><text x=\"40\" y=\"17\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\">★</text><text x=\"40\" y=\"29\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\">0.093</text><polyline points=\"0,0 45,0 45,46 0,46 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(439,40)\"><rect y=\"46\" fill=\"#b9fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">3.54</text><text x=\"40\" y=\"17\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><text x=\"40\" y=\"29\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><polyline points=\"0,0 45,0 45,46 0,46 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(439,88)\"><rect y=\"46\" fill=\"#b9fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">1.17</text><text x=\"40\" y=\"17\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><text x=\"40\" y=\"29\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><polyline points=\"0,0 45,0 45,46 0,46 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(439,136)\"><rect y=\"46\" fill=\"#b9fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">1.45</text><text x=\"40\" y=\"17\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><text x=\"40\" y=\"29\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><polyline points=\"0,0 45,0 45,46 0,46 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(439,184)\"><rect y=\"46\" fill=\"#b9fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">1.47</text><text x=\"40\" y=\"17\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><text x=\"40\" y=\"29\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><polyline points=\"0,0 45,0 45,46 0,46 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(439,232)\"><rect y=\"46\" fill=\"#b9fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">2.63</text><text x=\"40\" y=\"17\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><text x=\"40\" y=\"29\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><polyline points=\"0,0 45,0 45,46 0,46 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(486,40)\"><rect y=\"46\" fill=\"#b9fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">-0.1</text><text x=\"40\" y=\"17\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><text x=\"40\" y=\"29\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><polyline points=\"0,0 45,0 45,46 0,46 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(486,88)\"><rect y=\"46\" fill=\"#b9fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">-0.9</text><text x=\"40\" y=\"17\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><text x=\"40\" y=\"29\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><polyline points=\"0,0 45,0 45,46 0,46 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(486,136)\"><rect y=\"46\" fill=\"#b9fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">-0.2</text><text x=\"40\" y=\"17\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><text x=\"40\" y=\"29\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><polyline points=\"0,0 45,0 45,46 0,46 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(486,184)\"><rect y=\"46\" fill=\"#b9fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">-0.4</text><text x=\"40\" y=\"17\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><text x=\"40\" y=\"29\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><polyline points=\"0,0 45,0 45,46 0,46 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(486,232)\"><rect y=\"46\" fill=\"#b9fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">-0.1</text><text x=\"40\" y=\"17\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><text x=\"40\" y=\"29\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><polyline points=\"0,0 45,0 45,46 0,46 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(533,40)\"><rect y=\"46\" fill=\"#b9fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">1</text><text x=\"40\" y=\"17\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\">★</text><text x=\"40\" y=\"29\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\">0.084</text><polyline points=\"0,0 45,0 45,46 0,46 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(533,88)\"><rect y=\"46\" fill=\"#b9fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">1.8</text><text x=\"40\" y=\"17\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\">★★</text><text x=\"40\" y=\"29\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\">0.015</text><polyline points=\"0,0 45,0 45,46 0,46 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(533,136)\"><rect y=\"46\" fill=\"#b9fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">1.2</text><text x=\"40\" y=\"17\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><text x=\"40\" y=\"29\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\">0.162</text><polyline points=\"0,0 45,0 45,46 0,46 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(533,184)\"><rect y=\"46\" fill=\"#b9fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">1.3</text><text x=\"40\" y=\"17\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><text x=\"40\" y=\"29\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\">0.126</text><polyline points=\"0,0 45,0 45,46 0,46 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(533,232)\"><rect y=\"46\" fill=\"#b9fb8a\" id=\"heatCell\" width=\"45\" height=\"0\"></rect><text x=\"40\" y=\"3\" id=\"heatText\" dy=\"12px\" style=\"font-size: 12px; \" text-anchor=\"end\">1.1</text><text x=\"40\" y=\"17\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\"></text><text x=\"40\" y=\"29\" dy=\"10px\" id=\"heatTextAdd\" style=\"font-size: 10px; \" text-anchor=\"end\">0.149</text><polyline points=\"0,0 45,0 45,46 0,46 0,0\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(110,0)\"><text x=\"22.5\" y=\"30\" style=\"font-size: 9px; \" text-anchor=\"middle\">N</text><polyline points=\"1.5,35 43.5,35\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(157,0)\"><text x=\"22.5\" y=\"30\" style=\"font-size: 9px; \" text-anchor=\"middle\">Initial</text><polyline points=\"1.5,35 43.5,35\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(204,0)\"><text x=\"22.5\" y=\"30\" style=\"font-size: 9px; \" text-anchor=\"middle\">Average</text><polyline points=\"1.5,35 43.5,35\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(251,0)\"><text x=\"22.5\" y=\"30\" style=\"font-size: 9px; \" text-anchor=\"middle\">Incentive</text><polyline points=\"1.5,35 43.5,35\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(298,0)\"><text x=\"22.5\" y=\"30\" style=\"font-size: 9px; \" text-anchor=\"middle\">Management</text><polyline points=\"1.5,35 43.5,35\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(345,0)\"><text x=\"22.5\" y=\"30\" style=\"font-size: 9px; \" text-anchor=\"middle\">Median</text><polyline points=\"1.5,35 43.5,35\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(392,0)\"><text x=\"22.5\" y=\"30\" style=\"font-size: 9px; \" text-anchor=\"middle\">Mean [%]</text><polyline points=\"1.5,35 43.5,35\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(439,0)\"><text x=\"22.5\" y=\"30\" style=\"font-size: 9px; \" text-anchor=\"middle\">Std. dev.</text><polyline points=\"1.5,35 43.5,35\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(486,0)\"><text x=\"22.5\" y=\"30\" style=\"font-size: 9px; \" text-anchor=\"middle\">Skewness</text><polyline points=\"1.5,35 43.5,35\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(533,0)\"><text x=\"22.5\" y=\"30\" style=\"font-size: 9px; \" text-anchor=\"middle\">Kurtosis</text><polyline points=\"1.5,35 43.5,35\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(157,0)\"><text x=\"46\" y=\"10\" style=\"font-size: 9px; \" text-anchor=\"middle\">AUM [M, USD]</text><polyline points=\"1.5,15 90.5,15\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(251,0)\"><text x=\"46\" y=\"10\" style=\"font-size: 9px; \" text-anchor=\"middle\">Fees [%]</text><polyline points=\"1.5,15 90.5,15\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(345,0)\"><text x=\"116.5\" y=\"10\" style=\"font-size: 9px; \" text-anchor=\"middle\">Returns</text><polyline points=\"1.5,15 231.5,15\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(0,40)\"><text x=\"100\" y=\"27.5\" style=\"font-size: 9px; \" text-anchor=\"end\">Long/Short Eq. Hedge</text><polyline points=\"105,1.5 105,44.5\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(0,88)\"><text x=\"100\" y=\"27.5\" style=\"font-size: 9px; \" text-anchor=\"end\">FoF</text><polyline points=\"105,1.5 105,44.5\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(0,136)\"><text x=\"100\" y=\"27.5\" style=\"font-size: 9px; \" text-anchor=\"end\">Not L/S nor FoF</text><polyline points=\"105,1.5 105,44.5\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(0,184)\"><text x=\"100\" y=\"27.5\" style=\"font-size: 9px; \" text-anchor=\"end\">All</text><polyline points=\"105,1.5 105,44.5\"></polyline></g><g class=\"heatmapCell\" transform=\"translate(0,232)\"><text x=\"100\" y=\"27.5\" style=\"font-size: 9px; \" text-anchor=\"end\">Not FoFs</text><polyline points=\"105,1.5 105,44.5\"></polyline></g></svg></g></svg></div>\r\n", | |
| "\r\n" | |
| ], | |
| "output_type": "display_data" | |
| } | |
| ], | |
| "prompt_number": 11 | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": {}, | |
| "source": [ | |
| "##Figures\n", | |
| "Of course you can draw nice figures as well!" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "collapsed": false, | |
| "input": [ | |
| "import numpy as np\n", | |
| "d3 = d3object(width=800,\n", | |
| " height=200,\n", | |
| " style='JFFigure',\n", | |
| " number=1,\n", | |
| " d3=None,\n", | |
| " precision=100,\n", | |
| " title='Example figure with d3js',\n", | |
| " desc='Standrad normal distribution')\n", | |
| "\n", | |
| "d3.addVar(\n", | |
| "interpolation1='basis',\n", | |
| "interpolation2='step-before',\n", | |
| "resolution=80,\n", | |
| "domainRange=[-4,4],\n", | |
| "imposeMax=0\n", | |
| ")\n", | |
| "\n", | |
| "d3.addJs('''\n", | |
| " var svg = d3.select(\"#\"+d3ObjId)\n", | |
| " .append(\"svg\")\n", | |
| " .attr(\"width\", width)\n", | |
| " .attr(\"height\", height)\n", | |
| " .append(\"g\").attr(\"id\", \"#\"+d3ObjId+'InnerG')\n", | |
| "\n", | |
| " // A formatter for counts.\n", | |
| " var formatCount = d3.format(\",.0f\");\n", | |
| " \n", | |
| " var margin = {top: 10, right: 30, bottom: 30, left: 30},\n", | |
| " width = width - margin.left - margin.right,\n", | |
| " height = height - margin.top - margin.bottom;\n", | |
| " \n", | |
| " var x = d3.scale.linear()\n", | |
| " //.domain(domainRange)\n", | |
| " .range([0, width]);\n", | |
| " \n", | |
| " // Generate a histogram using twenty uniformly-spaced bins.\n", | |
| " var xAxis = d3.svg.axis()\n", | |
| " .ticks(4)\n", | |
| " .scale(x)\n", | |
| " .orient(\"bottom\");\n", | |
| "\n", | |
| " function appendHistogram(series, domainSeries, height, width, x_offset, y_offset, interpolation){\n", | |
| " var svg2 = svg.append(\"g\")\n", | |
| " y_offset=Math.round(y_offset)\n", | |
| " height=Math.round(height)\n", | |
| " height+=y_offset\n", | |
| " width+=x_offset\n", | |
| "\n", | |
| " x.range([x_offset, width])\n", | |
| " .domain(domainSeries)\n", | |
| "\n", | |
| " var data = d3.layout.histogram()\n", | |
| " .bins(x.ticks(resolution))\n", | |
| " .frequency(0)\n", | |
| " (series);\n", | |
| " \n", | |
| " var seriesMax=d3.max([imposeMax, d3.max(data, function(d) { return d.y; })]);\n", | |
| " var y = d3.scale.linear()\n", | |
| " //.domain([0, d3.max(data, function(d) { return d.y; })])\n", | |
| " .domain([0, seriesMax])\n", | |
| " .range([height, y_offset]);\n", | |
| " \n", | |
| "\n", | |
| " var area = d3.svg.area()\n", | |
| " .interpolate(interpolation)\n", | |
| " .x(function(d) { \n", | |
| " if(interpolation==\"step-before\")\n", | |
| " return x(d.x+d.dx/2)\n", | |
| " return x(d.x); \n", | |
| " })\n", | |
| " .y0(height)\n", | |
| " .y1(function(d) { return d3.max([y(d.y),y(seriesMax)]); });\n", | |
| " \n", | |
| " svg2.append(\"path\")\n", | |
| " .datum(data)\n", | |
| " .attr(\"class\", \"area\")\n", | |
| " .attr(\"d\", area);\n", | |
| " \n", | |
| " svg2.append(\"g\")\n", | |
| " .attr(\"class\", \"axis\")\n", | |
| " .attr(\"transform\", \"translate(0,\" + height + \")\")\n", | |
| " .call(xAxis);\n", | |
| " \n", | |
| " \n", | |
| " }\n", | |
| "\n", | |
| "appendHistogram(data, domainRange, height, width/2-15, 10, 0, interpolation1)\n", | |
| "appendHistogram(data, domainRange, height, width/2-15, width/2+20, 0, interpolation2)\n", | |
| "''')\n", | |
| "\n", | |
| "d3.addCss('''\n", | |
| " .polyline{\n", | |
| " stroke: #000;\n", | |
| " shape-rendering: crispEdges;\n", | |
| " }\n", | |
| " .area{\n", | |
| " shape-rendering: geometricPrecision;\n", | |
| " stroke: #000 !important;\n", | |
| " stroke-width:1 !important;\n", | |
| " fill: #ddd !important;\n", | |
| " }\n", | |
| " \n", | |
| " .axis path, .axis line {\n", | |
| " fill: none;\n", | |
| " stroke: #000;\n", | |
| " stroke-width: 1px;\n", | |
| " color-rendering: optimizeQuality !important;\n", | |
| " shape-rendering: crispEdges !important;\n", | |
| " text-rendering: geometricPrecision !important; \n", | |
| " \n", | |
| " }\n", | |
| "''')" | |
| ], | |
| "language": "python", | |
| "metadata": {}, | |
| "outputs": [], | |
| "prompt_number": 12 | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": {}, | |
| "source": [ | |
| "E.g. dsitribution of standard normal. D3js allows for quick swtiching between histograms and approx. shape of the distribution.\n", | |
| "\n", | |
| "With too few observations:" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "collapsed": false, | |
| "input": [ | |
| "d3.addVar(data=np.random.randn(1000))\n", | |
| "html=d3.render(mode=('show','html'))" | |
| ], | |
| "language": "python", | |
| "metadata": {}, | |
| "outputs": [ | |
| { | |
| "html": [ | |
| "<style>\n", | |
| "\n", | |
| "\n", | |
| " .d3Output{\n", | |
| " min-height: 1.2em;\n", | |
| " line-height: 1.2em;\n", | |
| " position: relative;\n", | |
| " font-size: 1em;\n", | |
| " padding: 5px 0;\n", | |
| " \n", | |
| " list-style: none;\n", | |
| " background: #fff;\n", | |
| " color: #000;\n", | |
| " }\n", | |
| " svg{\n", | |
| " color-rendering: optimizeQuality !important;\n", | |
| " shape-rendering: geometricPrecision !important;\n", | |
| " text-rendering: geometricPrecision !important;\n", | |
| " }\n", | |
| " .d3Output.header{\n", | |
| " text-align: center;\n", | |
| " font-weight: bold;\n", | |
| " border-bottom: none;\n", | |
| " font-size: 0.9em;\n", | |
| " \n", | |
| " }\n", | |
| " .d3Output.title{\n", | |
| " text-align: center;\n", | |
| " font-weight: bold;\n", | |
| " border-bottom: none;\n", | |
| " font-size: 1.2em;\n", | |
| " \n", | |
| " }\n", | |
| " .d3Output.description{\n", | |
| " font-size: 0.8em;\n", | |
| " text-align:justify;\n", | |
| " text-justify:inter-word;\n", | |
| " border-bottom: 1px solid #000;\n", | |
| " }\n", | |
| " .d3Output.description.panel{\n", | |
| " text-align: center;\n", | |
| " }\n", | |
| " svg, canvas {\n", | |
| " border-bottom: 1px solid #000;\n", | |
| " display: block;\n", | |
| " margin: 5px 0;\n", | |
| " }\n", | |
| " .d3Output.description.figure{\n", | |
| " border-bottom: none;\n", | |
| " }\n", | |
| " \n", | |
| "\n", | |
| " .polyline{\n", | |
| " stroke: #000;\n", | |
| " shape-rendering: crispEdges;\n", | |
| " }\n", | |
| " .area{\n", | |
| " shape-rendering: geometricPrecision;\n", | |
| " stroke: #000 !important;\n", | |
| " stroke-width:1 !important;\n", | |
| " fill: #ddd !important;\n", | |
| " }\n", | |
| " \n", | |
| " .axis path, .axis line {\n", | |
| " fill: none;\n", | |
| " stroke: #000;\n", | |
| " stroke-width: 1px;\n", | |
| " color-rendering: optimizeQuality !important;\n", | |
| " shape-rendering: crispEdges !important;\n", | |
| " text-rendering: geometricPrecision !important; \n", | |
| " \n", | |
| " }\n", | |
| "\n", | |
| "</style>\r\n", | |
| "<div id=\"id-69c10a1e-59a9-11e2-b2c4-00268315e762\" class=\"d3Output\"><svg width=\"800\" height=\"200\"><g id=\"#id-69c10a1e-59a9-11e2-b2c4-00268315e762InnerG\"><g><path class=\"area\" d=\"M10,160C10,160,10,160,10.739583333333332,159.99999999999997C11.479166666666668,160,12.958333333333336,160,14.437500000000002,159.99999999999997C15.916666666666671,160,17.39583333333334,160,18.875000000000004,159.99999999999997C20.354166666666668,160,21.83333333333333,160,23.312499999999996,159.99999999999997C24.791666666666657,160,26.27083333333333,160,27.749999999999993,159.99999999999997C29.229166666666664,160,30.70833333333333,160,32.1875,159.99999999999997C33.666666666666664,160,35.14583333333333,160,36.625,158.86524822695034C38.104166666666664,157.73049645390068,39.583333333333336,155.46099290780143,41.0625,155.4609929078014C42.54166666666667,155.46099290780143,44.02083333333333,157.73049645390068,45.49999999999999,158.86524822695034C46.97916666666666,160,48.45833333333332,160,49.937499999999986,159.99999999999997C51.41666666666666,160,52.89583333333333,160,54.375,159.99999999999997C55.85416666666667,160,57.333333333333336,160,58.8125,159.99999999999997C60.29166666666667,160,61.77083333333334,160,63.25000000000001,158.86524822695034C64.72916666666667,157.73049645390068,66.20833333333334,155.46099290780143,67.6875,154.32624113475177C69.16666666666666,153.1914893617021,70.64583333333333,153.1914893617021,72.125,153.19148936170214C73.60416666666666,153.1914893617021,75.08333333333333,153.1914893617021,76.5625,153.19148936170214C78.04166666666666,153.1914893617021,79.52083333333333,153.1914893617021,81,152.05673758865248C82.47916666666667,150.92198581560285,83.95833333333334,148.65248226950354,85.4375,147.5177304964539C86.91666666666667,146.38297872340428,88.39583333333333,146.38297872340428,89.875,147.5177304964539C91.35416666666666,148.65248226950354,92.83333333333333,150.92198581560285,94.31249999999999,150.354609929078C95.79166666666666,149.7872340425532,97.27083333333333,146.38297872340428,98.75,142.97872340425533C100.22916666666666,139.5744680851064,101.70833333333331,136.17021276595744,103.18749999999999,135.60283687943263C104.66666666666666,135.03546099290782,106.14583333333333,137.3049645390071,107.62499999999999,138.43971631205673C109.10416666666666,139.5744680851064,110.58333333333331,139.5744680851064,112.06249999999997,135.60283687943263C113.54166666666664,131.63120567375887,115.02083333333331,123.68794326241135,116.49999999999999,115.74468085106383C117.97916666666666,107.80141843971631,119.45833333333333,99.8581560283688,120.93749999999999,96.45390070921985C122.41666666666666,93.04964539007092,123.89583333333333,94.18439716312056,125.375,99.29078014184398C126.85416666666666,104.39716312056738,128.33333333333331,113.47517730496455,129.8125,112.3404255319149C131.29166666666666,111.20567375886526,132.77083333333331,99.8581560283688,134.25,97.0212765957447C135.72916666666666,94.18439716312056,137.20833333333331,99.8581560283688,138.6875,100.99290780141844C140.16666666666666,102.12765957446808,141.64583333333331,98.72340425531915,143.125,85.67375886524825C144.60416666666666,72.62411347517731,146.08333333333331,49.929078014184405,147.5625,40.28368794326242C149.04166666666666,30.63829787234043,150.52083333333331,34.04255319148937,152,38.01418439716313C153.47916666666666,41.98581560283688,154.95833333333331,46.52482269503546,156.4375,45.95744680851064C157.91666666666666,45.39007092198581,159.39583333333331,39.716312056737586,160.875,36.87943262411347C162.35416666666666,34.04255319148936,163.83333333333331,34.04255319148936,165.31249999999997,36.87943262411347C166.79166666666666,39.716312056737586,168.27083333333331,45.39007092198581,169.75,41.98581560283688C171.22916666666666,38.58156028368794,172.70833333333331,26.099290780141846,174.1875,26.099290780141846C175.66666666666666,26.099290780141846,177.14583333333331,38.58156028368794,178.62499999999997,36.87943262411348C180.10416666666666,35.177304964539,181.58333333333331,19.290780141843957,183.0625,10.780141843971617C184.54166666666666,2.269503546099277,186.02083333333331,1.1347517730496386,187.5,7.943262411347513C188.97916666666666,14.751773049645388,190.45833333333331,29.503546099290777,191.93749999999997,30.63829787234042C193.41666666666663,31.773049645390063,194.89583333333331,19.29078014184396,196.375,17.588652482269495C197.85416666666666,15.886524822695026,199.33333333333331,24.964539007092192,200.8125,30.0709219858156C202.29166666666669,35.177304964539005,203.77083333333334,36.312056737588655,205.25,36.312056737588655C206.72916666666669,36.312056737588655,208.20833333333331,35.177304964539005,209.6875,32.90780141843972C211.16666666666663,30.638297872340424,212.64583333333331,27.23404255319149,214.12499999999994,32.34042553191489C215.60416666666663,37.4468085106383,217.08333333333331,51.06382978723404,218.56249999999997,61.27659574468085C220.04166666666663,71.48936170212767,221.52083333333331,78.29787234042553,223,74.8936170212766C224.47916666666666,71.48936170212767,225.95833333333331,57.87234042553192,227.4375,61.843971631205676C228.91666666666666,65.81560283687944,230.39583333333331,87.3758865248227,231.87499999999997,95.88652482269504C233.35416666666663,104.39716312056738,234.8333333333333,99.8581560283688,236.31249999999994,102.69503546099291C237.79166666666663,105.53191489361703,239.27083333333331,115.74468085106383,240.75,118.01418439716312C242.22916666666666,120.28368794326241,243.70833333333331,114.60992907801419,245.1875,110.0709219858156C246.66666666666666,105.53191489361703,248.14583333333334,102.12765957446808,249.625,103.26241134751774C251.10416666666669,104.39716312056738,252.58333333333334,110.07092198581562,254.0625,115.17730496453902C255.54166666666666,120.28368794326242,257.0208333333333,124.822695035461,258.5,128.22695035460993C259.97916666666663,131.63120567375887,261.4583333333333,133.9007092198582,262.9375,135.03546099290782C264.41666666666663,136.17021276595747,265.8958333333333,136.17021276595747,267.375,135.60283687943266C268.85416666666663,135.03546099290782,270.3333333333333,133.9007092198582,271.8125,135.03546099290782C273.29166666666663,136.17021276595744,274.7708333333333,139.5744680851064,276.25,141.84397163120568C277.72916666666663,144.11347517730496,279.2083333333333,145.24822695035462,280.6875,147.5177304964539C282.16666666666663,149.7872340425532,283.6458333333333,153.1914893617021,285.125,153.75886524822693C286.60416666666663,154.32624113475177,288.0833333333333,152.05673758865248,289.5625,152.05673758865248C291.04166666666663,152.05673758865248,292.5208333333333,154.32624113475177,294,154.89361702127658C295.47916666666663,155.46099290780143,296.9583333333333,154.32624113475177,298.4375,154.32624113475177C299.91666666666663,154.32624113475177,301.3958333333333,155.46099290780143,302.875,156.02836879432624C304.35416666666663,156.59574468085106,305.8333333333333,156.59574468085106,307.3125,157.16312056737587C308.79166666666663,157.73049645390068,310.2708333333333,158.86524822695034,311.75,158.86524822695034C313.22916666666663,158.86524822695034,314.7083333333333,157.73049645390068,316.1875,157.73049645390068C317.66666666666663,157.73049645390068,319.1458333333333,158.86524822695034,320.625,159.43262411347516C322.10416666666663,160,323.5833333333333,160,325.0625,159.43262411347516C326.54166666666663,158.86524822695034,328.0208333333333,157.73049645390068,329.5,157.73049645390068C330.97916666666663,157.73049645390068,332.4583333333333,158.86524822695034,333.9375,159.43262411347516C335.41666666666663,160,336.8958333333333,160,338.375,159.99999999999997C339.85416666666663,160,341.3333333333333,160,342.8125,159.99999999999997C344.29166666666663,160,345.7708333333333,160,347.25,159.99999999999997C348.72916666666663,160,350.2083333333333,160,351.6875,159.99999999999997C353.16666666666663,160,354.6458333333333,160,356.125,159.43262411347516C357.60416666666663,158.86524822695034,359.0833333333333,157.73049645390068,359.8229166666667,157.16312056737587C360.5625,156.59574468085106,360.5625,156.59574468085106,360.5625,156.59574468085106L360.5625,160C360.5625,160,360.5625,160,359.8229166666667,159.99999999999997C359.0833333333333,160,357.60416666666663,160,356.12499999999994,159.99999999999997C354.6458333333333,160,353.16666666666663,160,351.6875,159.99999999999997C350.2083333333333,160,348.72916666666663,160,347.25,159.99999999999997C345.7708333333333,160,344.29166666666663,160,342.81249999999994,159.99999999999997C341.3333333333333,160,339.85416666666663,160,338.375,159.99999999999997C336.8958333333333,160,335.41666666666663,160,333.9375,159.99999999999997C332.4583333333333,160,330.97916666666663,160,329.49999999999994,159.99999999999997C328.0208333333333,160,326.54166666666663,160,325.0625,159.99999999999997C323.5833333333333,160,322.10416666666663,160,320.625,159.99999999999997C319.1458333333333,160,317.66666666666663,160,316.18749999999994,159.99999999999997C314.7083333333333,160,313.22916666666663,160,311.75,159.99999999999997C310.2708333333333,160,308.79166666666663,160,307.3125,159.99999999999997C305.8333333333333,160,304.35416666666663,160,302.875,159.99999999999997C301.3958333333333,160,299.91666666666663,160,298.4375,159.99999999999997C296.9583333333333,160,295.47916666666663,160,294,159.99999999999997C292.5208333333333,160,291.04166666666663,160,289.5625,159.99999999999997C288.0833333333333,160,286.60416666666663,160,285.125,159.99999999999997C283.6458333333333,160,282.16666666666663,160,280.6875,159.99999999999997C279.2083333333333,160,277.72916666666663,160,276.25,159.99999999999997C274.7708333333333,160,273.29166666666663,160,271.8125,159.99999999999997C270.3333333333333,160,268.85416666666663,160,267.375,159.99999999999997C265.8958333333333,160,264.41666666666663,160,262.9375,159.99999999999997C261.4583333333333,160,259.97916666666663,160,258.5,159.99999999999997C257.0208333333333,160,255.54166666666666,160,254.0625,159.99999999999997C252.58333333333334,160,251.10416666666669,160,249.625,159.99999999999997C248.14583333333334,160,246.66666666666666,160,245.1875,159.99999999999997C243.70833333333331,160,242.22916666666666,160,240.74999999999997,159.99999999999997C239.27083333333331,160,237.79166666666663,160,236.31249999999994,159.99999999999997C234.8333333333333,160,233.35416666666663,160,231.87499999999997,159.99999999999997C230.39583333333331,160,228.91666666666666,160,227.43749999999997,159.99999999999997C225.95833333333331,160,224.47916666666666,160,223,159.99999999999997C221.52083333333331,160,220.04166666666663,160,218.56249999999997,159.99999999999997C217.08333333333331,160,215.60416666666663,160,214.12499999999997,159.99999999999997C212.64583333333331,160,211.16666666666663,160,209.6875,159.99999999999997C208.20833333333331,160,206.72916666666669,160,205.25,159.99999999999997C203.77083333333334,160,202.29166666666669,160,200.8125,159.99999999999997C199.33333333333331,160,197.85416666666666,160,196.375,159.99999999999997C194.89583333333331,160,193.41666666666663,160,191.93749999999997,159.99999999999997C190.45833333333331,160,188.97916666666666,160,187.49999999999997,159.99999999999997C186.02083333333331,160,184.54166666666666,160,183.0625,159.99999999999997C181.58333333333331,160,180.10416666666666,160,178.625,159.99999999999997C177.14583333333331,160,175.66666666666666,160,174.1875,159.99999999999997C172.70833333333331,160,171.22916666666666,160,169.75,159.99999999999997C168.27083333333331,160,166.79166666666666,160,165.3125,159.99999999999997C163.83333333333331,160,162.35416666666666,160,160.875,159.99999999999997C159.39583333333331,160,157.91666666666666,160,156.4375,159.99999999999997C154.95833333333331,160,153.47916666666666,160,152,159.99999999999997C150.52083333333331,160,149.04166666666666,160,147.5625,159.99999999999997C146.08333333333331,160,144.60416666666666,160,143.125,159.99999999999997C141.64583333333331,160,140.16666666666666,160,138.6875,159.99999999999997C137.20833333333331,160,135.72916666666666,160,134.25,159.99999999999997C132.77083333333331,160,131.29166666666666,160,129.8125,159.99999999999997C128.33333333333331,160,126.85416666666666,160,125.375,159.99999999999997C123.89583333333333,160,122.41666666666666,160,120.9375,159.99999999999997C119.45833333333333,160,117.97916666666666,160,116.49999999999999,159.99999999999997C115.02083333333331,160,113.54166666666664,160,112.06249999999997,159.99999999999997C110.58333333333331,160,109.10416666666666,160,107.625,159.99999999999997C106.14583333333333,160,104.66666666666666,160,103.18749999999999,159.99999999999997C101.70833333333331,160,100.22916666666666,160,98.75,159.99999999999997C97.27083333333333,160,95.79166666666666,160,94.3125,159.99999999999997C92.83333333333333,160,91.35416666666666,160,89.875,159.99999999999997C88.39583333333333,160,86.91666666666667,160,85.4375,159.99999999999997C83.95833333333334,160,82.47916666666667,160,81.00000000000001,159.99999999999997C79.52083333333333,160,78.04166666666666,160,76.56249999999999,159.99999999999997C75.08333333333333,160,73.60416666666666,160,72.125,159.99999999999997C70.64583333333333,160,69.16666666666666,160,67.6875,159.99999999999997C66.20833333333334,160,64.72916666666667,160,63.25000000000001,159.99999999999997C61.77083333333334,160,60.29166666666667,160,58.8125,159.99999999999997C57.333333333333336,160,55.85416666666667,160,54.375,159.99999999999997C52.89583333333333,160,51.41666666666666,160,49.937499999999986,159.99999999999997C48.45833333333332,160,46.97916666666666,160,45.49999999999999,159.99999999999997C44.02083333333333,160,42.54166666666667,160,41.0625,159.99999999999997C39.583333333333336,160,38.104166666666664,160,36.625,159.99999999999997C35.14583333333333,160,33.666666666666664,160,32.1875,159.99999999999997C30.70833333333333,160,29.229166666666664,160,27.749999999999993,159.99999999999997C26.27083333333333,160,24.791666666666657,160,23.312499999999996,159.99999999999997C21.83333333333333,160,20.354166666666668,160,18.875000000000004,159.99999999999997C17.39583333333334,160,15.916666666666671,160,14.437500000000002,159.99999999999997C12.958333333333336,160,11.479166666666668,160,10.739583333333332,159.99999999999997C10,160,10,160,9.999999999999998,159.99999999999997Z\"></path><g class=\"axis\" transform=\"translate(0,160)\"><g style=\"opacity: 1; \" transform=\"translate(10,0)\"><line class=\"tick\" y2=\"6\" x2=\"0\"></line><text y=\"9\" x=\"0\" dy=\".71em\" text-anchor=\"middle\">-4</text></g><g style=\"opacity: 1; \" transform=\"translate(98.75,0)\"><line class=\"tick\" y2=\"6\" x2=\"0\"></line><text y=\"9\" x=\"0\" dy=\".71em\" text-anchor=\"middle\">-2</text></g><g style=\"opacity: 1; \" transform=\"translate(187.5,0)\"><line class=\"tick\" y2=\"6\" x2=\"0\"></line><text y=\"9\" x=\"0\" dy=\".71em\" text-anchor=\"middle\">0</text></g><g style=\"opacity: 1; \" transform=\"translate(276.25,0)\"><line class=\"tick\" y2=\"6\" x2=\"0\"></line><text y=\"9\" x=\"0\" dy=\".71em\" text-anchor=\"middle\">2</text></g><g style=\"opacity: 1; \" transform=\"translate(365,0)\"><line class=\"tick\" y2=\"6\" x2=\"0\"></line><text y=\"9\" x=\"0\" dy=\".71em\" text-anchor=\"middle\">4</text></g><path class=\"domain\" d=\"M10,6V0H365V6\"></path></g></g><g><path class=\"area\" d=\"M392.21875,160V160H396.65625V160H401.09375V160H405.53125V160H409.96875V160H414.40625V160H418.84375V153.19148936170214H423.28125V160H427.71875V160H432.15625V160H436.59375V160H441.03125V160H445.46875V153.19148936170214H449.90625V153.19148936170214H454.34375V153.19148936170214H458.78125V153.19148936170214H463.21875V146.38297872340428H467.65625V146.38297872340428H472.09375V153.19148936170214H476.53125V142.97872340425533H480.96875V132.76595744680853H485.40625V139.5744680851064H489.84375V139.5744680851064H494.28125V115.74468085106385H498.71875V91.91489361702128H503.15625V95.31914893617022H507.59375V122.55319148936172H512.03125V88.51063829787235H516.46875V105.53191489361703H520.90625V95.31914893617022H525.34375V27.2340425531915H529.78125V37.446808510638306H534.21875V51.06382978723404H538.65625V34.04255319148936H543.09375V34.04255319148936H547.53125V51.06382978723404H551.96875V13.61702127659575H556.40625V51.06382978723404H560.84375V3.404255319148916H565.28125V0H569.71875V44.25531914893617H574.15625V6.808510638297861H578.59375V34.04255319148936H583.03125V37.446808510638306H587.46875V34.04255319148936H591.90625V23.829787234042556H596.34375V64.68085106382979H600.78125V85.10638297872342H605.21875V44.25531914893617H609.65625V108.93617021276597H614.09375V95.31914893617022H618.53125V125.95744680851065H622.96875V108.93617021276597H627.40625V98.72340425531917H631.84375V115.74468085106385H636.28125V129.36170212765958H640.71875V136.17021276595747H645.15625V136.17021276595747H649.59375V132.76595744680853H654.03125V142.97872340425533H658.46875V146.38297872340428H662.90625V156.59574468085106H667.34375V149.7872340425532H671.78125V156.59574468085106H676.21875V153.19148936170214H680.65625V156.59574468085106H685.09375V156.59574468085106H689.53125V160H693.96875V156.59574468085106H698.40625V160H702.84375V160H707.28125V156.59574468085106H711.71875V160H716.15625V160H720.59375V160H725.03125V160H729.46875V160H733.90625V160H738.34375V156.59574468085106H742.78125L742.78125,160H738.34375V160H733.90625V160H729.46875V160H725.03125V160H720.59375V160H716.15625V160H711.71875V160H707.28125V160H702.84375V160H698.40625V160H693.96875V160H689.53125V160H685.09375V160H680.65625V160H676.21875V160H671.78125V160H667.34375V160H662.90625V160H658.46875V160H654.03125V160H649.59375V160H645.15625V160H640.71875V160H636.28125V160H631.84375V160H627.40625V160H622.96875V160H618.53125V160H614.09375V160H609.65625V160H605.21875V160H600.78125V160H596.34375V160H591.90625V160H587.46875V160H583.03125V160H578.59375V160H574.15625V160H569.71875V160H565.28125V160H560.84375V160H556.40625V160H551.96875V160H547.53125V160H543.09375V160H538.65625V160H534.21875V160H529.78125V160H525.34375V160H520.90625V160H516.46875V160H512.03125V160H507.59375V160H503.15625V160H498.71875V160H494.28125V160H489.84375V160H485.40625V160H480.96875V160H476.53125V160H472.09375V160H467.65625V160H463.21875V160H458.78125V160H454.34375V160H449.90625V160H445.46875V160H441.03125V160H436.59375V160H432.15625V160H427.71875V160H423.28125V160H418.84375V160H414.40625V160H409.96875V160H405.53125V160H401.09375V160H396.65625V160H392.21875V160Z\"></path><g class=\"axis\" transform=\"translate(0,160)\"><g style=\"opacity: 1; \" transform=\"translate(390,0)\"><line class=\"tick\" y2=\"6\" x2=\"0\"></line><text y=\"9\" x=\"0\" dy=\".71em\" text-anchor=\"middle\">-4</text></g><g style=\"opacity: 1; \" transform=\"translate(478.75,0)\"><line class=\"tick\" y2=\"6\" x2=\"0\"></line><text y=\"9\" x=\"0\" dy=\".71em\" text-anchor=\"middle\">-2</text></g><g style=\"opacity: 1; \" transform=\"translate(567.5,0)\"><line class=\"tick\" y2=\"6\" x2=\"0\"></line><text y=\"9\" x=\"0\" dy=\".71em\" text-anchor=\"middle\">0</text></g><g style=\"opacity: 1; \" transform=\"translate(656.25,0)\"><line class=\"tick\" y2=\"6\" x2=\"0\"></line><text y=\"9\" x=\"0\" dy=\".71em\" text-anchor=\"middle\">2</text></g><g style=\"opacity: 1; \" transform=\"translate(745,0)\"><line class=\"tick\" y2=\"6\" x2=\"0\"></line><text y=\"9\" x=\"0\" dy=\".71em\" text-anchor=\"middle\">4</text></g><path class=\"domain\" d=\"M390,6V0H745V6\"></path></g></g></g></svg></div>\r\n", | |
| "<div class=\"d3Output description figure\" style=\"width: 800px\">\r\n", | |
| " <b>Figure 1. Example figure with d3js.</b> Standrad normal distribution</div>\r\n", | |
| " \r\n", | |
| "\r\n" | |
| ], | |
| "output_type": "display_data" | |
| } | |
| ], | |
| "prompt_number": 13 | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": {}, | |
| "source": [ | |
| "And with just enough:" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "collapsed": false, | |
| "input": [ | |
| "d3.addVar(data=np.random.randn(300000))\n", | |
| "html=d3.render(mode=('show','html'))" | |
| ], | |
| "language": "python", | |
| "metadata": {}, | |
| "outputs": [ | |
| { | |
| "html": [ | |
| "<style>\n", | |
| "\n", | |
| "\n", | |
| " .d3Output{\n", | |
| " min-height: 1.2em;\n", | |
| " line-height: 1.2em;\n", | |
| " position: relative;\n", | |
| " font-size: 1em;\n", | |
| " padding: 5px 0;\n", | |
| " \n", | |
| " list-style: none;\n", | |
| " background: #fff;\n", | |
| " color: #000;\n", | |
| " }\n", | |
| " svg{\n", | |
| " color-rendering: optimizeQuality !important;\n", | |
| " shape-rendering: geometricPrecision !important;\n", | |
| " text-rendering: geometricPrecision !important;\n", | |
| " }\n", | |
| " .d3Output.header{\n", | |
| " text-align: center;\n", | |
| " font-weight: bold;\n", | |
| " border-bottom: none;\n", | |
| " font-size: 0.9em;\n", | |
| " \n", | |
| " }\n", | |
| " .d3Output.title{\n", | |
| " text-align: center;\n", | |
| " font-weight: bold;\n", | |
| " border-bottom: none;\n", | |
| " font-size: 1.2em;\n", | |
| " \n", | |
| " }\n", | |
| " .d3Output.description{\n", | |
| " font-size: 0.8em;\n", | |
| " text-align:justify;\n", | |
| " text-justify:inter-word;\n", | |
| " border-bottom: 1px solid #000;\n", | |
| " }\n", | |
| " .d3Output.description.panel{\n", | |
| " text-align: center;\n", | |
| " }\n", | |
| " svg, canvas {\n", | |
| " border-bottom: 1px solid #000;\n", | |
| " display: block;\n", | |
| " margin: 5px 0;\n", | |
| " }\n", | |
| " .d3Output.description.figure{\n", | |
| " border-bottom: none;\n", | |
| " }\n", | |
| " \n", | |
| "\n", | |
| " .polyline{\n", | |
| " stroke: #000;\n", | |
| " shape-rendering: crispEdges;\n", | |
| " }\n", | |
| " .area{\n", | |
| " shape-rendering: geometricPrecision;\n", | |
| " stroke: #000 !important;\n", | |
| " stroke-width:1 !important;\n", | |
| " fill: #ddd !important;\n", | |
| " }\n", | |
| " \n", | |
| " .axis path, .axis line {\n", | |
| " fill: none;\n", | |
| " stroke: #000;\n", | |
| " stroke-width: 1px;\n", | |
| " color-rendering: optimizeQuality !important;\n", | |
| " shape-rendering: crispEdges !important;\n", | |
| " text-rendering: geometricPrecision !important; \n", | |
| " \n", | |
| " }\n", | |
| "\n", | |
| "</style>\r\n", | |
| "<div id=\"id-69c10a1e-59a9-11e2-b2c4-00268315e762\" class=\"d3Output\"><svg width=\"800\" height=\"200\"><g id=\"#id-69c10a1e-59a9-11e2-b2c4-00268315e762InnerG\"><g><path class=\"area\" d=\"M10,159.7475712031886C10,159.7475712031886,10,159.7475712031886,10.739583333333332,159.78299980624985C11.479166666666668,159.8184284093111,12.958333333333336,159.8892856154336,14.437500000000002,159.9136427800382C15.916666666666671,159.93799994464283,17.39583333333334,159.91585706772955,18.875000000000004,159.87599988928565C20.354166666666668,159.83614271084173,21.83333333333333,159.7785712308672,23.312499999999996,159.74314262780595C24.791666666666657,159.7077140247447,26.27083333333333,159.69442829859673,27.749999999999993,159.6700711339921C29.229166666666664,159.64571396938751,30.70833333333333,159.61028536632625,32.1875,159.57485676326502C33.666666666666664,159.53942816020376,35.14583333333333,159.50399955714252,36.625,159.4552852279333C38.104166666666664,159.4065708987241,39.583333333333336,159.3445708433669,41.0625,159.2161421572699C42.54166666666667,159.0877134711729,44.02083333333333,158.89285615433602,45.49999999999999,158.74892745439968C46.97916666666666,158.6049987544634,48.45833333333332,158.5119986714276,49.937499999999986,158.37249854687394C51.41666666666666,158.2329984223203,52.89583333333333,158.04699825624874,54.375,157.94071244706498C55.85416666666667,157.83442663788122,57.333333333333336,157.8078551855853,58.8125,157.59085499183516C60.29166666666667,157.373854798085,61.77083333333334,156.96642586288067,63.25000000000001,156.4305682415793C64.72916666666667,155.89471062027795,66.20833333333334,155.23042431287956,67.6875,154.77649533615735C69.16666666666666,154.32256635943511,70.64583333333333,154.07899471338905,72.125,153.72028010739393C73.60416666666666,153.36156550139881,75.08333333333333,152.88770793545464,76.5625,152.2832073957221C78.04166666666666,151.67870685598956,79.52083333333333,150.94356334246862,81,149.9559910321363C82.47916666666667,148.968418721804,83.95833333333334,147.7284176146603,85.4375,146.80727393506783C86.91666666666667,145.88613025547534,88.39583333333333,145.28384400343413,89.875,144.36270032384164C91.35416666666666,143.44155664424915,92.83333333333333,142.20155553710543,94.31249999999999,140.85969719616062C95.79166666666666,139.5178388552158,97.27083333333333,138.07412328046993,98.75,136.53297904730562C100.22916666666666,134.99183481414127,101.70833333333331,133.35326192255852,103.18749999999999,131.5906889202615C104.66666666666666,129.82811591796448,106.14583333333333,127.9415428049532,107.62499999999999,126.09482687038596C109.10416666666666,124.24811093581872,110.58333333333331,122.4412521796955,112.06249999999997,120.1871073099241C113.54166666666664,117.93296244015274,115.02083333333331,115.2315314567332,116.49999999999999,112.38395748568604C117.97916666666666,109.53638351463889,119.45833333333333,106.54266655596413,120.93749999999999,103.74602120181736C122.41666666666666,100.94937584767057,123.89583333333333,98.34980209805177,125.375,95.7457997730498C126.85416666666666,93.14179744804783,128.33333333333331,90.53336654766268,129.8125,87.77657837195852C131.29166666666666,85.01979019625438,132.77083333333331,82.1146447452312,134.25,78.57621301448803C135.72916666666666,75.03778128374488,137.20833333333331,70.86606327328172,138.6875,67.5623460378194C140.16666666666666,64.25862880235708,141.64583333333331,61.822912341895574,143.125,58.63876664176499C144.60416666666666,55.4546209416344,146.08333333333331,51.522046001834745,147.5625,48.03675717568347C149.04166666666666,44.55146834953219,150.52083333333331,41.5134656370293,152,38.64374878906738C153.47916666666666,35.77403194110546,154.95833333333331,33.07260095768452,156.4375,30.579313017248477C157.91666666666666,28.08602507681243,159.39583333333331,25.800880179361286,160.875,23.25444933433335C162.35416666666666,20.70801848930542,163.83333333333331,17.9003016967007,165.31249999999997,15.522156716213747C166.79166666666666,13.14401173572679,168.27083333333331,11.195438567357598,169.75,10.156937640124468C171.22916666666666,9.118436712891338,172.70833333333331,8.990008026794271,174.1875,8.026792881066314C175.66666666666666,7.063577735338356,177.14583333333331,5.265576129979507,178.62499999999997,3.872789172133792C180.10416666666666,2.4800022142880773,181.58333333333331,1.4924299039554965,183.0625,0.9145008165187201C184.54166666666666,0.3365717290819437,186.02083333333331,0.16828586454097186,187.5,0.682000608929215C188.97916666666666,1.195715353317458,190.45833333333331,2.391430706634916,191.93749999999997,3.3590744277455302C193.41666666666663,4.326718148856145,194.89583333333331,5.066290237759915,196.375,5.898862409699484C197.85416666666666,6.731434581639054,199.33333333333331,7.657006836614423,200.8125,9.472722743503908C202.29166666666669,11.288438650393392,203.77083333333334,13.994298209196993,205.25,16.50972902654633C206.72916666666669,19.025159843895665,208.20833333333331,21.350161919790736,209.6875,23.4891638296142C211.16666666666663,25.628165739437662,212.64583333333331,27.581167483189517,214.12499999999994,30.45088433115143C215.60416666666663,33.32060117911334,217.08333333333331,37.10703313128531,218.56249999999997,40.32217885909449C220.04166666666663,43.53732458690368,221.52083333333331,46.18118409035007,223,49.30554402281477C224.47916666666666,52.429903955279485,225.95833333333331,56.034764316762505,227.4375,59.41376733373C228.91666666666666,62.79277035069751,230.39583333333331,65.9459160231495,231.87499999999997,68.86434720032064C233.35416666666663,71.78277837749178,234.8333333333333,74.4664950593821,236.31249999999994,77.61964073183408C237.79166666666663,80.77278640428605,239.27083333333331,84.3953610672997,240.75,87.45329236902455C242.22916666666666,90.51122367074939,243.70833333333331,93.00451161118545,245.1875,95.75465692381502C246.66666666666666,98.5048022364446,248.14583333333334,101.51180492126772,249.625,104.43023609843755C251.10416666666669,107.34866727560735,252.58333333333334,110.17852694512388,254.0625,112.76702925628571C255.54166666666666,115.35553156744754,257.0208333333333,117.70267652025467,258.5,119.83503556700305C259.97916666666663,121.96739461375141,261.4583333333333,123.88496775444102,262.9375,125.73389797669957C264.41666666666663,127.58282819895811,265.8958333333333,129.3631155027856,267.375,131.14561709430455C268.85416666666663,132.9281186858235,270.3333333333333,134.71283456503392,271.8125,136.25176451050694C273.29166666666663,137.79069445597995,274.7708333333333,139.08383846771554,276.25,140.38141105483376C277.72916666666663,141.67898364195202,279.2083333333333,142.9809848044529,280.6875,144.0770572116603C282.16666666666663,145.17312961886768,283.6458333333333,146.06327327078156,285.125,147.11727421185375C286.60416666666663,148.1712751529259,288.0833333333333,149.38913338315632,289.5625,150.2615627335396C291.04166666666663,151.13399208392283,292.5208333333333,151.66099255445891,294,152.1503501342424C295.47916666666663,152.6397077140259,296.9583333333333,153.09142240305678,298.4375,153.58077998284026C299.91666666666663,154.07013756262373,301.3958333333333,154.59713803315978,302.875,155.06213844833866C304.35416666666663,155.5271388635175,305.8333333333333,155.93013922333918,307.3125,156.33978244623486C308.79166666666663,156.74942566913052,310.2708333333333,157.16571175510018,311.75,157.44028342882487C313.22916666666663,157.71485510254954,314.7083333333333,157.84771236402923,316.1875,157.99828392703952C317.66666666666663,158.1488554900498,319.1458333333333,158.31714135459075,320.625,158.4787843560577C322.10416666666663,158.64042735752463,323.5833333333333,158.79542749591758,325.0625,158.8906418666447C326.54166666666663,158.9858562373718,328.0208333333333,159.02128484043305,329.5,159.09435633424687C330.97916666666663,159.16742782806068,332.4583333333333,159.27814221262707,333.9375,159.33792798029293C335.41666666666663,159.3977137479588,336.8958333333333,159.4065708987241,338.375,159.459713803316C339.85416666666663,159.51285670790784,341.3333333333333,159.61028536632628,342.8125,159.6744997093748C344.29166666666663,159.7387140524233,345.7708333333333,159.7697140801019,347.25,159.78299980624988C348.72916666666663,159.7962855323978,350.2083333333333,159.79185695701517,351.6875,159.80735697085444C353.16666666666663,159.82285698469374,354.6458333333333,159.858285587755,356.125,159.858285587755C357.60416666666663,159.858285587755,359.0833333333333,159.82285698469374,359.8229166666667,159.80514268316313C360.5625,159.78742838163248,360.5625,159.78742838163248,360.5625,159.7874283816325L360.5625,160C360.5625,160,360.5625,160,359.8229166666667,159.99999999999997C359.0833333333333,160,357.60416666666663,160,356.12499999999994,159.99999999999997C354.6458333333333,160,353.16666666666663,160,351.6875,159.99999999999997C350.2083333333333,160,348.72916666666663,160,347.25,159.99999999999997C345.7708333333333,160,344.29166666666663,160,342.81249999999994,159.99999999999997C341.3333333333333,160,339.85416666666663,160,338.375,159.99999999999997C336.8958333333333,160,335.41666666666663,160,333.9375,159.99999999999997C332.4583333333333,160,330.97916666666663,160,329.49999999999994,159.99999999999997C328.0208333333333,160,326.54166666666663,160,325.0625,159.99999999999997C323.5833333333333,160,322.10416666666663,160,320.625,159.99999999999997C319.1458333333333,160,317.66666666666663,160,316.18749999999994,159.99999999999997C314.7083333333333,160,313.22916666666663,160,311.75,159.99999999999997C310.2708333333333,160,308.79166666666663,160,307.3125,159.99999999999997C305.8333333333333,160,304.35416666666663,160,302.875,159.99999999999997C301.3958333333333,160,299.91666666666663,160,298.4375,159.99999999999997C296.9583333333333,160,295.47916666666663,160,294,159.99999999999997C292.5208333333333,160,291.04166666666663,160,289.5625,159.99999999999997C288.0833333333333,160,286.60416666666663,160,285.125,159.99999999999997C283.6458333333333,160,282.16666666666663,160,280.6875,159.99999999999997C279.2083333333333,160,277.72916666666663,160,276.25,159.99999999999997C274.7708333333333,160,273.29166666666663,160,271.8125,159.99999999999997C270.3333333333333,160,268.85416666666663,160,267.375,159.99999999999997C265.8958333333333,160,264.41666666666663,160,262.9375,159.99999999999997C261.4583333333333,160,259.97916666666663,160,258.5,159.99999999999997C257.0208333333333,160,255.54166666666666,160,254.0625,159.99999999999997C252.58333333333334,160,251.10416666666669,160,249.625,159.99999999999997C248.14583333333334,160,246.66666666666666,160,245.1875,159.99999999999997C243.70833333333331,160,242.22916666666666,160,240.74999999999997,159.99999999999997C239.27083333333331,160,237.79166666666663,160,236.31249999999994,159.99999999999997C234.8333333333333,160,233.35416666666663,160,231.87499999999997,159.99999999999997C230.39583333333331,160,228.91666666666666,160,227.43749999999997,159.99999999999997C225.95833333333331,160,224.47916666666666,160,223,159.99999999999997C221.52083333333331,160,220.04166666666663,160,218.56249999999997,159.99999999999997C217.08333333333331,160,215.60416666666663,160,214.12499999999997,159.99999999999997C212.64583333333331,160,211.16666666666663,160,209.6875,159.99999999999997C208.20833333333331,160,206.72916666666669,160,205.25,159.99999999999997C203.77083333333334,160,202.29166666666669,160,200.8125,159.99999999999997C199.33333333333331,160,197.85416666666666,160,196.375,159.99999999999997C194.89583333333331,160,193.41666666666663,160,191.93749999999997,159.99999999999997C190.45833333333331,160,188.97916666666666,160,187.49999999999997,159.99999999999997C186.02083333333331,160,184.54166666666666,160,183.0625,159.99999999999997C181.58333333333331,160,180.10416666666666,160,178.625,159.99999999999997C177.14583333333331,160,175.66666666666666,160,174.1875,159.99999999999997C172.70833333333331,160,171.22916666666666,160,169.75,159.99999999999997C168.27083333333331,160,166.79166666666666,160,165.3125,159.99999999999997C163.83333333333331,160,162.35416666666666,160,160.875,159.99999999999997C159.39583333333331,160,157.91666666666666,160,156.4375,159.99999999999997C154.95833333333331,160,153.47916666666666,160,152,159.99999999999997C150.52083333333331,160,149.04166666666666,160,147.5625,159.99999999999997C146.08333333333331,160,144.60416666666666,160,143.125,159.99999999999997C141.64583333333331,160,140.16666666666666,160,138.6875,159.99999999999997C137.20833333333331,160,135.72916666666666,160,134.25,159.99999999999997C132.77083333333331,160,131.29166666666666,160,129.8125,159.99999999999997C128.33333333333331,160,126.85416666666666,160,125.375,159.99999999999997C123.89583333333333,160,122.41666666666666,160,120.9375,159.99999999999997C119.45833333333333,160,117.97916666666666,160,116.49999999999999,159.99999999999997C115.02083333333331,160,113.54166666666664,160,112.06249999999997,159.99999999999997C110.58333333333331,160,109.10416666666666,160,107.625,159.99999999999997C106.14583333333333,160,104.66666666666666,160,103.18749999999999,159.99999999999997C101.70833333333331,160,100.22916666666666,160,98.75,159.99999999999997C97.27083333333333,160,95.79166666666666,160,94.3125,159.99999999999997C92.83333333333333,160,91.35416666666666,160,89.875,159.99999999999997C88.39583333333333,160,86.91666666666667,160,85.4375,159.99999999999997C83.95833333333334,160,82.47916666666667,160,81.00000000000001,159.99999999999997C79.52083333333333,160,78.04166666666666,160,76.56249999999999,159.99999999999997C75.08333333333333,160,73.60416666666666,160,72.125,159.99999999999997C70.64583333333333,160,69.16666666666666,160,67.6875,159.99999999999997C66.20833333333334,160,64.72916666666667,160,63.25000000000001,159.99999999999997C61.77083333333334,160,60.29166666666667,160,58.8125,159.99999999999997C57.333333333333336,160,55.85416666666667,160,54.375,159.99999999999997C52.89583333333333,160,51.41666666666666,160,49.937499999999986,159.99999999999997C48.45833333333332,160,46.97916666666666,160,45.49999999999999,159.99999999999997C44.02083333333333,160,42.54166666666667,160,41.0625,159.99999999999997C39.583333333333336,160,38.104166666666664,160,36.625,159.99999999999997C35.14583333333333,160,33.666666666666664,160,32.1875,159.99999999999997C30.70833333333333,160,29.229166666666664,160,27.749999999999993,159.99999999999997C26.27083333333333,160,24.791666666666657,160,23.312499999999996,159.99999999999997C21.83333333333333,160,20.354166666666668,160,18.875000000000004,159.99999999999997C17.39583333333334,160,15.916666666666671,160,14.437500000000002,159.99999999999997C12.958333333333336,160,11.479166666666668,160,10.739583333333332,159.99999999999997C10,160,10,160,9.999999999999998,159.99999999999997Z\"></path><g class=\"axis\" transform=\"translate(0,160)\"><g style=\"opacity: 1; \" transform=\"translate(10,0)\"><line class=\"tick\" y2=\"6\" x2=\"0\"></line><text y=\"9\" x=\"0\" dy=\".71em\" text-anchor=\"middle\">-4</text></g><g style=\"opacity: 1; \" transform=\"translate(98.75,0)\"><line class=\"tick\" y2=\"6\" x2=\"0\"></line><text y=\"9\" x=\"0\" dy=\".71em\" text-anchor=\"middle\">-2</text></g><g style=\"opacity: 1; \" transform=\"translate(187.5,0)\"><line class=\"tick\" y2=\"6\" x2=\"0\"></line><text y=\"9\" x=\"0\" dy=\".71em\" text-anchor=\"middle\">0</text></g><g style=\"opacity: 1; \" transform=\"translate(276.25,0)\"><line class=\"tick\" y2=\"6\" x2=\"0\"></line><text y=\"9\" x=\"0\" dy=\".71em\" text-anchor=\"middle\">2</text></g><g style=\"opacity: 1; \" transform=\"translate(365,0)\"><line class=\"tick\" y2=\"6\" x2=\"0\"></line><text y=\"9\" x=\"0\" dy=\".71em\" text-anchor=\"middle\">4</text></g><path class=\"domain\" d=\"M10,6V0H365V6\"></path></g></g><g><path class=\"area\" d=\"M392.21875,159.7475712031886V159.9601428215561H396.65625V159.89371419081627H401.09375V159.72099975089267H405.53125V159.68114257244878H409.96875V159.57485676326502H414.40625V159.4685709540813H418.84375V159.28257078800974H423.28125V158.69799883749917H427.71875V158.41899858839184H432.15625V157.8609980901772H436.59375V157.78128373328937H441.03125V156.55899692767633H445.46875V154.5661380054812H449.90625V153.835423067343H454.34375V152.41385036951047H458.78125V150.2084198289477H463.21875V146.48841650751658H467.65625V144.6815577513929H472.09375V140.96155442996172H476.53125V136.63040770572405H480.96875V131.71468903097576H485.40625V126.05496969194195H489.84375V120.63439342357228H494.28125V112.53010047331367H498.71875V103.54894959728938H503.15625V95.75022834843297H507.59375V87.92493564727755H512.03125V79.20949929420803H516.46875V66.69434526281859H520.90625V59.38719588143407H525.34375V47.58947106203509H529.78125V38.47546292452641H534.21875V30.37116997426358H538.65625V23.51573528191014H543.09375V15.092584904095986H547.53125V9.246865398988405H551.96875V8.861579340697205H556.40625V3.467574524620659H560.84375V0.5048575936229156H565.28125V0H569.71875V3.5871460599523743H574.15625V5.805862326663686H578.59375V8.582579091589793H583.03125V16.700157768000594H587.46875V23.675163995685807H591.90625V29.534169226941373H596.34375V40.893465083457286H600.78125V48.825043593796465H605.21875V59.639624678245525H609.65625V69.09906169560148H614.09375V77.15021174127241H618.53125V88.01793573031335H622.96875V95.4977995516215H627.40625V104.51880760609083H631.84375V113.00838661464041H636.28125V120.04982147306181H640.71875V125.80254089513062H645.15625V131.1434028066131H649.59375V136.49755044424435H654.03125V140.37698247945113H658.46875V144.28298596695382H662.90625V146.95341692269548H667.34375V150.60699161338678H671.78125V152.187993024995H676.21875V153.5431370920877H680.65625V155.12413850369583H685.09375V156.3331395831609H689.53125V157.58199784106986H693.96875V157.9805696255089H698.40625V158.48542721913168H702.84375V158.95042763431056H707.28125V159.0567134434943H711.71875V159.3888565971935H716.15625V159.4154280494894H720.59375V159.70771402474472H725.03125V159.8007141077805H729.46875V159.7874283816325H733.90625V159.89371419081627H738.34375V159.7874283816325H742.78125L742.78125,160H738.34375V160H733.90625V160H729.46875V160H725.03125V160H720.59375V160H716.15625V160H711.71875V160H707.28125V160H702.84375V160H698.40625V160H693.96875V160H689.53125V160H685.09375V160H680.65625V160H676.21875V160H671.78125V160H667.34375V160H662.90625V160H658.46875V160H654.03125V160H649.59375V160H645.15625V160H640.71875V160H636.28125V160H631.84375V160H627.40625V160H622.96875V160H618.53125V160H614.09375V160H609.65625V160H605.21875V160H600.78125V160H596.34375V160H591.90625V160H587.46875V160H583.03125V160H578.59375V160H574.15625V160H569.71875V160H565.28125V160H560.84375V160H556.40625V160H551.96875V160H547.53125V160H543.09375V160H538.65625V160H534.21875V160H529.78125V160H525.34375V160H520.90625V160H516.46875V160H512.03125V160H507.59375V160H503.15625V160H498.71875V160H494.28125V160H489.84375V160H485.40625V160H480.96875V160H476.53125V160H472.09375V160H467.65625V160H463.21875V160H458.78125V160H454.34375V160H449.90625V160H445.46875V160H441.03125V160H436.59375V160H432.15625V160H427.71875V160H423.28125V160H418.84375V160H414.40625V160H409.96875V160H405.53125V160H401.09375V160H396.65625V160H392.21875V160Z\"></path><g class=\"axis\" transform=\"translate(0,160)\"><g style=\"opacity: 1; \" transform=\"translate(390,0)\"><line class=\"tick\" y2=\"6\" x2=\"0\"></line><text y=\"9\" x=\"0\" dy=\".71em\" text-anchor=\"middle\">-4</text></g><g style=\"opacity: 1; \" transform=\"translate(478.75,0)\"><line class=\"tick\" y2=\"6\" x2=\"0\"></line><text y=\"9\" x=\"0\" dy=\".71em\" text-anchor=\"middle\">-2</text></g><g style=\"opacity: 1; \" transform=\"translate(567.5,0)\"><line class=\"tick\" y2=\"6\" x2=\"0\"></line><text y=\"9\" x=\"0\" dy=\".71em\" text-anchor=\"middle\">0</text></g><g style=\"opacity: 1; \" transform=\"translate(656.25,0)\"><line class=\"tick\" y2=\"6\" x2=\"0\"></line><text y=\"9\" x=\"0\" dy=\".71em\" text-anchor=\"middle\">2</text></g><g style=\"opacity: 1; \" transform=\"translate(745,0)\"><line class=\"tick\" y2=\"6\" x2=\"0\"></line><text y=\"9\" x=\"0\" dy=\".71em\" text-anchor=\"middle\">4</text></g><path class=\"domain\" d=\"M390,6V0H745V6\"></path></g></g></g></svg></div>\r\n", | |
| "<div class=\"d3Output description figure\" style=\"width: 800px\">\r\n", | |
| " <b>Figure 1. Example figure with d3js.</b> Standrad normal distribution</div>\r\n", | |
| " \r\n", | |
| "\r\n" | |
| ], | |
| "output_type": "display_data" | |
| } | |
| ], | |
| "prompt_number": 14 | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": {}, | |
| "source": [ | |
| "I would like to turn it into a more elaborate tool, sometime in the future..." | |
| ] | |
| } | |
| ], | |
| "metadata": {} | |
| } | |
| ] | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment