function fourSquareChart(dictionary) { let data = dictionary.df.map((item) => {return { x:Number(item.freq_diff_in_std_cons), y:Number(item.freq_diff_in_std_pros), count_2020_pros:Number(item.count_2020_pros), count_2020_cons:Number(item.count_2020_cons), count_2019_pros:Number(item.count_2019_pros), count_2019_cons:Number(item.count_2019_cons), freq_change_to_2019_in_perc_pros:Number(item.freq_change_to_2019_in_perc_pros)*100, freq_change_to_2019_in_perc_cons:Number(item.freq_change_to_2019_in_perc_cons)*100, dist:euclideanDistance(dictionary, item), angle:angleToCenter(dictionary, item), quadrant:quadrant(dictionary, item) }}); data = highlightExtremesPerQuadrant(data); let container_chart = html`

`; hc.chart(container_chart, { credits: { enabled: false }, chart: { type: 'scatter', backgroundColor:'rgba(0,0,0,0)', zoomType: 'none', height: '100%', //height: 500, spacing: [0,0,0,0], margin:[60,60,60,60], style: { fontFamily: 'inherit', width:'100%' } }, plotOptions: { scatter: { marker: { radius: 4, symbol:"circle", fillColor:"darkblue", backgroundColor:'rgba(0,0,0,0)', zIndex: 5, states: { //hover: { // enabled: true, // lineColor: 'rgb(100,100,100)' //} } }, } }, annotations: [ { zIndex: 2, draggable:'', shapes: [ { type: 'path', points: ['1', '2', '5', '4'], fill: "#FFF6DD", strokeWidth: 0 }, { type: 'path', points: ['5', '6', '9', '8'], fill: "#FFF6DD", strokeWidth: 0 }, { type: 'path', points: ['2', '3', '6', '5'], fill: "#E3F1E0", strokeWidth: 0 }, { type: 'path', points: ['4', '5', '8', '7'], fill: "#FCD6D9", strokeWidth: 0 } ], labels: [ { text: "Untapped opportunity", point:'1', verticalAlign:"bottom", align:"left", zIndex: 5, x:0, y:0, backgroundColor:'rgba(255,255,255,0)', borderWidth:0 }, { text: "Champions", point:'3', verticalAlign:"top", align:"left", zIndex: 5, x:0, y:0, backgroundColor:'rgba(255,255,255,0)', borderWidth:0 }, { text: "Peaks & troughs", point:'9', verticalAlign:"top", align:"right", zIndex: 5, x:0, y:0, backgroundColor:'rgba(255,255,255,0)', borderWidth:0 }, { text: "At risk", point:'7', verticalAlign:"bottom", align:"right", zIndex: 5, x:0, y:0, backgroundColor:'rgba(255,255,255,0)', borderWidth:0 }, ] } ], xAxis: { min: dictionary.xRange[0], max: dictionary.xRange[1], gridLineWidth: 0, lineWidth: 0, tickWidth: 0, startOnTick: false, endOnTick: false, title:{text:"Cons Section of Reviews
(Change in Standard Deviations)"} //offset: -15 }, yAxis: { min: dictionary.yRange[0], max: dictionary.yRange[1], gridLineWidth: 0, startOnTick: false, endOnTick: false, title:{text:"Pros Section of Reviews
(Change in Standard Deviations)"} }, title: { text: dictionary.title }, series: [ { name: "Points for drawing sectors", type: "scatter", marker: { enabled: false }, showInLegend: false, data: [ { x: dictionary.xRange[0], y: dictionary.yRange[0], id: "1" }, { x: dictionary.xRange[0], y: dictionary.prosMedian, id: "2" }, { x: dictionary.xRange[0], y: dictionary.yRange[1], id: "3" }, { x: dictionary.consMedian, y: dictionary.yRange[0], id: "4" }, { x: dictionary.consMedian, y: dictionary.prosMedian, id: "5" }, { x: dictionary.consMedian, y: dictionary.yRange[1], id: "6" }, { x: dictionary.xRange[1], y: dictionary.yRange[0], id: "7" }, { x: dictionary.xRange[1], y: dictionary.prosMedian, id: "8" }, { x: dictionary.xRange[1], y: dictionary.yRange[1], id: "9" } ] }, { name: "Changes in Ratings per Organization", showInLegend: false, zIndex: 6, marker: { shape: "cirlce" }, data: data } ], tooltip: { headerFormat: 'Reviews mentioning Culture
', pointFormat: '
Mar-Sep 2019
Pros: {point.count_2019_pros}
Cons: {point.count_2019_cons}
Mar-Sep 2020
Pros: {point.count_2020_pros}
Cons: {point.count_2020_cons}
Frequency Changes
Pros: {point.freq_change_to_2019_in_perc_pros:.1f}%
Cons: {point.freq_change_to_2019_in_perc_cons:.1f}%', //formatter: function() { // return 'The value for ' + point.x + ' is ' + this.y + ', in series '+ // this[2]; //} } }); return html`${container_chart}`; //return container_chart; }