PHP square heatmap on top of image

Question

It’s good to start getting an image that I have to display (maybe anything), and I also get a lot of data about which area of ​​the image was rated from 1-5

Here is a grid image, I have to display a heat map on

as for data, I get something like this

• from_X, from_Y, to_X, to_Y, rating
• 878, 1148, 1620, 2093, 1
• 0, 0, 2498, 2025, 3
• 0, 0, 1013, 675, 5
• 675, 2228, 1958, 3105, 1
• 203, 203, 1148, 1080, 3
• 203, 135, 1553, 1350, 4

Now the first thing I did was get the sum of one square, which looks like this

{"0_0":2.6666666666666665,"0_1":2.6666666666666665,"0_2":2.6666666666666665,"0_3":2.6666666666666665,"0_4":2.6666666666666665,"0_5":2.6666666666666665,"0_6":2.6666666666666665,"0_7":2.6666666666666665,"0_8":2.6666666666666665,"0_9":2.6666666666666665,"0_10":1.5,"0_11":1.5,"0_12":1.5,"0_13":1.5,"0_14":1.5,"0_15":1.5,"0_16":1.5,"0_17":1.5,"0_18":1.5,"0_19":1.5,"0_20":1.5,"0_21":1.5,"0_22":1.5,"0_23":1.5,"0_24":1.5,"0_25":1.5,"0_26":1.5,"0_27":1.5,"0_28":1.5,"0_29":1.5,"0_30":0,"0_31":0,"0_32":0,"0_33":0,"0_34":0,"0_35":0,"0_36":0,"0_37":0,"0_38":0,"0_39":0,"0_40":0,"0_41":0,"0_42":0,"0_43":0,"0_44":0,"0_45":0,"0_46":0,"0_47":0,"0_48":0,"1_0":2.6666666666666665,"1_1":2.6666666666666665,"1_2":2.6666666666666665,"1_3":2.6666666666666665,"1_4":2.6666666666666665,"1_5":2.6666666666666665,"1_6":2.6666666666666665,"1_7":2.6666666666666665,"1_8":2.6666666666666665,"1_9":2.6666666666666665,"1_10":1.5,"1_11":1.5,"1_12":1.5,"1_13":1.5,"1_14":1.5,"1_15":1.5,"1_16":1.5,"1_17":1.5,"1_18":1.5,"1_19":1.5,"1_20":1.5,"1_21":1.5,"1_22":1.5,"1_23":1.5,"1_24":1.5,"1_25":1.5,"1_26":1.5,"1_27":1.5,"1_28":1.5,"1_29":1.5,"1_30":0,"1_31":0,"1_32":0,"1_33":0,"1_34":0,"1_35":0,"1_36":0,"1_37":0,"1_38":0,"1_39":0,"1_40":0,"1_41":0,"1_42":0,"1_43":0,"1_44":0,"1_45":0,"1_46":0,"1_47":0,"1_48":0,"2_0":2.6666666666666665,"2_1":2.6666666666666665,"2_2":2.6666666666666665,"2_3":2.6666666666666665,"2_4":2.6666666666666665,"2_5":2.6666666666666665,"2_6":2.6666666666666665,"2_7":2.6666666666666665,"2_8":2.6666666666666665,"2_9":2.6666666666666665,"2_10":1.5,"2_11":1.5,"2_12":1.5,"2_13":1.5,"2_14":1.5,"2_15":1.5,"2_16":1.5,"2_17":1.5,"2_18":1.5,"2_19":1.5,"2_20":1.5,"2_21":1.5,"2_22":1.5,"2_23":1.5,"2_24":1.5,"2_25":1.5,"2_26":1.5,"2_27":1.5,"2_28":1.5,"2_29":1.5,"2_30":0,"2_31":0,"2_32":0,"2_33":0,"2_34":0,"2_35":0,"2_36":0,"2_37":0,"2_38":0,"2_39":0,"2_40":0,"2_41":0,"2_42":0,"2_43":0,"2_44":0,"2_45":0,"2_46":0,"2_47":0,"2_48":0,"3_0":2.6666666666666665,"3_1":2.6666666666666665,"3_2":3,"3_3":3,"3_4":3,"3_5":3,"3_6":3,"3_7":3,"3_8":3,"3_9":3,"3_10":2.5,"3_11":2.5,"3_12":2.5,"3_13":2.5,"3_14":2.5,"3_15":2.5,"3_16":2.3333333333333335,"3_17":2.3333333333333335,"3_18":2.3333333333333335,"3_19":2.3333333333333335,"3_20":1.5,"3_21":1.5,"3_22":1.5,"3_23":1.5,"3_24":1.5,"3_25":1.5,"3_26":1.5,"3_27":1.5,"3_28":1.5,"3_29":1.5,"3_30":0,"3_31":0,"3_32":0,"3_33":0,"3_34":0,"3_35":0,"3_36":0,"3_37":0,"3_38":0,"3_39":0,"3_40":0,"3_41":0,"3_42":0,"3_43":0,"3_44":0,"3_45":0,"3_46":0,"3_47":0,"3_48":0,"4_0":2.6666666666666665,"4_1":2.6666666666666665,"4_2":3,"4_3":3,"4_4":3,"4_5":3,"4_6":3,"4_7":3,"4_8":3,"4_9":3,"4_10":2.5,"4_11":2.5,"4_12":2.5,"4_13":2.5,"4_14":2.5,"4_15":2.5,"4_16":2.3333333333333335,"4_17":2.3333333333333335,"4_18":2.3333333333333335,"4_19":2.3333333333333335,"4_20":1.5,"4_21":1.5,"4_22":1.5,"4_23":1.5,"4_24":1.5,"4_25":1.5,"4_26":1.5,"4_27":1.5,"4_28":1.5,"4_29":1.5,"4_30":0,"4_31":0,"4_32":0,"4_33":0,"4_34":0,"4_35":0,"4_36":0,"4_37":0,"4_38":0,"4_39":0,"4_40":0,"4_41":0,"4_42":0,"4_43":0,"4_44":0,"4_45":0,"4_46":0,"4_47":0,"4_48":0,"5_0":2.6666666666666665,"5_1":2.6666666666666665,"5_2":3,"5_3":3,"5_4":3,"5_5":3,"5_6":3,"5_7":3,"5_8":3,"5_9":3,"5_10":2.5,"5_11":2.5,"5_12":2.5,"5_13":2.5,"5_14":2.5,"5_15":2.5,"5_16":2.3333333333333335,"5_17":2.3333333333333335,"5_18":2.3333333333333335,"5_19":2.3333333333333335,"5_20":1.5,"5_21":1.5,"5_22":1.5,"5_23":1.5,"5_24":1.5,"5_25":1.5,"5_26":1.5,"5_27":1.5,"5_28":1.5,"5_29":1.5,"5_30":0,"5_31":0,"5_32":0,"5_33":0,"5_34":0,"5_35":0,"5_36":0,"5_37":0,"5_38":0,"5_39":0,"5_40":0,"5_41":0,"5_42":0,"5_43":0,"5_44":0,"5_45":0,"5_46":0,"5_47":0,"5_48":0,"6_0":2.6666666666666665,"6_1":2.6666666666666665,"6_2":3,"6_3":3,"6_4":3,"6_5":3,"6_6":3,"6_7":3,"6_8":3,"6_9":3,"6_10":2.5,"6_11":2.5,"6_12":2.5,"6_13":2.5,"6_14":2.5,"6_15":2.5,"6_16":2.3333333333333335,"6_17":2.3333333333333335,"6_18":2.3333333333333335,"6_19":2.3333333333333335,"6_20":1.5,"6_21":1.5,"6_22":1.5,"6_23":1.5,"6_24":1.5,"6_25":1.5,"6_26":1.5,"6_27":1.5,"6_28":1.5,"6_29":1.5,"6_30":0,"6_31":0,"6_32":0,"6_33":0,"6_34":0,"6_35":0,"6_36":0,"6_37":0,"6_38":0,"6_39":0,"6_40":0,"6_41":0,"6_42":0,"6_43":0,"6_44":0,"6_45":0,"6_46":0,"6_47":0,"6_48":0,"7_0":2.6666666666666665,"7_1":2.6666666666666665,"7_2":3,"7_3":3,"7_4":3,"7_5":3,"7_6":3,"7_7":3,"7_8":3,"7_9":3,"7_10":2.5,"7_11":2.5,"7_12":2.5,"7_13":2.5,"7_14":2.5,"7_15":2.5,"7_16":2.3333333333333335,"7_17":2.3333333333333335,"7_18":2.3333333333333335,"7_19":2.3333333333333335,"7_20":1.5,"7_21":1.5,"7_22":1.5,"7_23":1.5,"7_24":1.5,"7_25":1.5,"7_26":1.5,"7_27":1.5,"7_28":1.5,"7_29":1.5,"7_30":0,"7_31":0,"7_32":0,"7_33":0,"7_34":0,"7_35":0,"7_36":0,"7_37":0,"7_38":0,"7_39":0,"7_40":0,"7_41":0,"7_42":0,"7_43":0,"7_44":0,"7_45":0,"7_46":0,"7_47":0,"7_48":0,"8_0":2.6666666666666665,"8_1":2.6666666666666665,"8_2":3,"8_3":3,"8_4":3,"8_5":3,"8_6":3,"8_7":3,"8_8":3,"8_9":3,"8_10":2.5,"8_11":2.5,"8_12":2.5,"8_13":2.5,"8_14":2.5,"8_15":2.5,"8_16":2.3333333333333335,"8_17":2.3333333333333335,"8_18":2.3333333333333335,"8_19":2.3333333333333335,"8_20":1.5,"8_21":1.5,"8_22":1.5,"8_23":1.5,"8_24":1.5,"8_25":1.5,"8_26":1.5,"8_27":1.5,"8_28":1.5,"8_29":1.5,"8_30":0,"8_31":0,"8_32":0,"8_33":0,"8_34":0,"8_35":0,"8_36":0,"8_37":0,"8_38":0,"8_39":0,"8_40":0,"8_41":0,"8_42":0,"8_43":0,"8_44":0,"8_45":0,"8_46":0,"8_47":0,"8_48":0,"9_0":2.6666666666666665,"9_1":2.6666666666666665,"9_2":3,"9_3":3,"9_4":3,"9_5":3,"9_6":3,"9_7":3,"9_8":3,"9_9":3,"9_10":2.5,"9_11":2.5,"9_12":2.5,"9_13":2.5,"9_14":2.5,"9_15":2.5,"9_16":2.3333333333333335,"9_17":2.3333333333333335,"9_18":2.3333333333333335,"9_19":2.3333333333333335,"9_20":1.5,"9_21":1.5,"9_22":1.5,"9_23":1.5,"9_24":1.5,"9_25":1.5,"9_26":1.5,"9_27":1.5,"9_28":1.5,"9_29":1.5,"9_30":0,"9_31":0,"9_32":0,"9_33":0,"9_34":0,"9_35":0,"9_36":0,"9_37":0,"9_38":0,"9_39":0,"9_40":0,"9_41":0,"9_42":0,"9_43":0,"9_44":0,"9_45":0,"9_46":0,"9_47":0,"9_48":0,"10_0":2.6666666666666665,"10_1":2.6666666666666665,"10_2":3,"10_3":3,"10_4":3,"10_5":3,"10_6":3,"10_7":3,"10_8":3,"10_9":3,"10_10":2.5,"10_11":2.5,"10_12":2.5,"10_13":2.5,"10_14":2.5,"10_15":2.5,"10_16":2.3333333333333335,"10_17":2.3333333333333335,"10_18":2.3333333333333335,"10_19":2.3333333333333335,"10_20":1.5,"10_21":1.5,"10_22":1.5,"10_23":1.5,"10_24":1.5,"10_25":1.5,"10_26":1.5,"10_27":1.5,"10_28":1.5,"10_29":1.5,"10_30":0,"10_31":0,"10_32":0,"10_33":0.5,"10_34":0.5,"10_35":0.5,"10_36":0.5,"10_37":0.5,"10_38":0.5,"10_39":0.5,"10_40":0.5,"10_41":0.5,"10_42":0.5,"10_43":0.5,"10_44":0.5,"10_45":0.5,"10_46":0,"10_47":0,"10_48":0} 

the next step that I am doing is normalizing the data, so I get a value from 0-1, like this

 {"0_0":0.8888888888888888,"0_1":0.8888888888888888,"0_2":0.8888888888888888,"0_3":0.8888888888888888,"0_4":0.8888888888888888,"0_5":0.8888888888888888,"0_6":0.8888888888888888,"0_7":0.8888888888888888,"0_8":0.8888888888888888,"0_9":0.8888888888888888,"0_10":0.5,"0_11":0.5,"0_12":0.5,"0_13":0.5,"0_14":0.5,"0_15":0.5,"0_16":0.5,"0_17":0.5,"0_18":0.5,"0_19":0.5,"0_20":0.5,"0_21":0.5,"0_22":0.5,"0_23":0.5,"0_24":0.5,"0_25":0.5,"0_26":0.5,"0_27":0.5,"0_28":0.5,"0_29":0.5,"0_30":0,"0_31":0,"0_32":0,"0_33":0,"0_34":0,"0_35":0,"0_36":0,"0_37":0,"0_38":0,"0_39":0,"0_40":0,"0_41":0,"0_42":0,"0_43":0,"0_44":0,"0_45":0,"0_46":0,"0_47":0,"0_48":0,"1_0":0.8888888888888888,"1_1":0.8888888888888888,"1_2":0.8888888888888888,"1_3":0.8888888888888888,"1_4":0.8888888888888888,"1_5":0.8888888888888888,"1_6":0.8888888888888888,"1_7":0.8888888888888888,"1_8":0.8888888888888888,"1_9":0.8888888888888888,"1_10":0.5,"1_11":0.5,"1_12":0.5,"1_13":0.5,"1_14":0.5,"1_15":0.5,"1_16":0.5,"1_17":0.5,"1_18":0.5,"1_19":0.5,"1_20":0.5,"1_21":0.5,"1_22":0.5,"1_23":0.5,"1_24":0.5,"1_25":0.5,"1_26":0.5,"1_27":0.5,"1_28":0.5,"1_29":0.5,"1_30":0,"1_31":0,"1_32":0,"1_33":0,"1_34":0,"1_35":0,"1_36":0,"1_37":0,"1_38":0,"1_39":0,"1_40":0,"1_41":0,"1_42":0,"1_43":0,"1_44":0,"1_45":0,"1_46":0,"1_47":0,"1_48":0,"2_0":0.8888888888888888,"2_1":0.8888888888888888,"2_2":0.8888888888888888,"2_3":0.8888888888888888,"2_4":0.8888888888888888,"2_5":0.8888888888888888,"2_6":0.8888888888888888,"2_7":0.8888888888888888,"2_8":0.8888888888888888,"2_9":0.8888888888888888,"2_10":0.5,"2_11":0.5,"2_12":0.5,"2_13":0.5,"2_14":0.5,"2_15":0.5,"2_16":0.5,"2_17":0.5,"2_18":0.5,"2_19":0.5,"2_20":0.5,"2_21":0.5,"2_22":0.5,"2_23":0.5,"2_24":0.5,"2_25":0.5,"2_26":0.5,"2_27":0.5,"2_28":0.5,"2_29":0.5,"2_30":0,"2_31":0,"2_32":0,"2_33":0,"2_34":0,"2_35":0,"2_36":0,"2_37":0,"2_38":0,"2_39":0,"2_40":0,"2_41":0,"2_42":0,"2_43":0,"2_44":0,"2_45":0,"2_46":0,"2_47":0,"2_48":0,"3_0":0.8888888888888888,"3_1":0.8888888888888888,"3_2":1,"3_3":1,"3_4":1,"3_5":1,"3_6":1,"3_7":1,"3_8":1,"3_9":1,"3_10":0.8333333333333334,"3_11":0.8333333333333334,"3_12":0.8333333333333334,"3_13":0.8333333333333334,"3_14":0.8333333333333334,"3_15":0.8333333333333334,"3_16":0.7777777777777778,"3_17":0.7777777777777778,"3_18":0.7777777777777778,"3_19":0.7777777777777778,"3_20":0.5,"3_21":0.5,"3_22":0.5,"3_23":0.5,"3_24":0.5,"3_25":0.5,"3_26":0.5,"3_27":0.5,"3_28":0.5,"3_29":0.5,"3_30":0,"3_31":0,"3_32":0,"3_33":0,"3_34":0,"3_35":0,"3_36":0,"3_37":0,"3_38":0,"3_39":0,"3_40":0,"3_41":0,"3_42":0,"3_43":0,"3_44":0,"3_45":0,"3_46":0,"3_47":0,"3_48":0,"4_0":0.8888888888888888,"4_1":0.8888888888888888,"4_2":1,"4_3":1,"4_4":1,"4_5":1,"4_6":1,"4_7":1,"4_8":1,"4_9":1,"4_10":0.8333333333333334,"4_11":0.8333333333333334,"4_12":0.8333333333333334,"4_13":0.8333333333333334,"4_14":0.8333333333333334,"4_15":0.8333333333333334,"4_16":0.7777777777777778,"4_17":0.7777777777777778,"4_18":0.7777777777777778,"4_19":0.7777777777777778,"4_20":0.5,"4_21":0.5,"4_22":0.5,"4_23":0.5,"4_24":0.5,"4_25":0.5,"4_26":0.5,"4_27":0.5,"4_28":0.5,"4_29":0.5,"4_30":0,"4_31":0,"4_32":0,"4_33":0,"4_34":0,"4_35":0,"4_36":0,"4_37":0,"4_38":0,"4_39":0,"4_40":0,"4_41":0,"4_42":0,"4_43":0,"4_44":0,"4_45":0,"4_46":0,"4_47":0,"4_48":0,"5_0":0.8888888888888888,"5_1":0.8888888888888888,"5_2":1,"5_3":1,"5_4":1,"5_5":1,"5_6":1,"5_7":1,"5_8":1,"5_9":1,"5_10":0.8333333333333334,"5_11":0.8333333333333334,"5_12":0.8333333333333334,"5_13":0.8333333333333334,"5_14":0.8333333333333334,"5_15":0.8333333333333334,"5_16":0.7777777777777778,"5_17":0.7777777777777778,"5_18":0.7777777777777778,"5_19":0.7777777777777778,"5_20":0.5,"5_21":0.5,"5_22":0.5,"5_23":0.5,"5_24":0.5,"5_25":0.5,"5_26":0.5,"5_27":0.5,"5_28":0.5,"5_29":0.5,"5_30":0,"5_31":0,"5_32":0,"5_33":0,"5_34":0,"5_35":0,"5_36":0,"5_37":0,"5_38":0,"5_39":0,"5_40":0,"5_41":0,"5_42":0,"5_43":0,"5_44":0,"5_45":0,"5_46":0,"5_47":0,"5_48":0,"6_0":0.8888888888888888,"6_1":0.8888888888888888,"6_2":1,"6_3":1,"6_4":1,"6_5":1,"6_6":1,"6_7":1,"6_8":1,"6_9":1,"6_10":0.8333333333333334,"6_11":0.8333333333333334,"6_12":0.8333333333333334,"6_13":0.8333333333333334,"6_14":0.8333333333333334,"6_15":0.8333333333333334,"6_16":0.7777777777777778,"6_17":0.7777777777777778,"6_18":0.7777777777777778,"6_19":0.7777777777777778,"6_20":0.5,"6_21":0.5,"6_22":0.5,"6_23":0.5,"6_24":0.5,"6_25":0.5,"6_26":0.5,"6_27":0.5,"6_28":0.5,"6_29":0.5,"6_30":0,"6_31":0,"6_32":0,"6_33":0,"6_34":0,"6_35":0,"6_36":0,"6_37":0,"6_38":0,"6_39":0,"6_40":0,"6_41":0,"6_42":0,"6_43":0,"6_44":0,"6_45":0,"6_46":0,"6_47":0,"6_48":0,"7_0":0.8888888888888888,"7_1":0.8888888888888888,"7_2":1,"7_3":1,"7_4":1,"7_5":1,"7_6":1,"7_7":1,"7_8":1,"7_9":1,"7_10":0.8333333333333334,"7_11":0.8333333333333334,"7_12":0.8333333333333334,"7_13":0.8333333333333334,"7_14":0.8333333333333334,"7_15":0.8333333333333334,"7_16":0.7777777777777778,"7_17":0.7777777777777778,"7_18":0.7777777777777778,"7_19":0.7777777777777778,"7_20":0.5,"7_21":0.5,"7_22":0.5,"7_23":0.5,"7_24":0.5,"7_25":0.5,"7_26":0.5,"7_27":0.5,"7_28":0.5,"7_29":0.5,"7_30":0,"7_31":0,"7_32":0,"7_33":0,"7_34":0,"7_35":0,"7_36":0,"7_37":0,"7_38":0,"7_39":0,"7_40":0,"7_41":0,"7_42":0,"7_43":0,"7_44":0,"7_45":0,"7_46":0,"7_47":0,"7_48":0,"8_0":0.8888888888888888,"8_1":0.8888888888888888,"8_2":1,"8_3":1,"8_4":1,"8_5":1,"8_6":1,"8_7":1,"8_8":1,"8_9":1,"8_10":0.8333333333333334,"8_11":0.8333333333333334,"8_12":0.8333333333333334,"8_13":0.8333333333333334,"8_14":0.8333333333333334,"8_15":0.8333333333333334,"8_16":0.7777777777777778,"8_17":0.7777777777777778,"8_18":0.7777777777777778,"8_19":0.7777777777777778,"8_20":0.5,"8_21":0.5,"8_22":0.5,"8_23":0.5,"8_24":0.5,"8_25":0.5,"8_26":0.5,"8_27":0.5,"8_28":0.5,"8_29":0.5,"8_30":0,"8_31":0,"8_32":0,"8_33":0,"8_34":0,"8_35":0,"8_36":0,"8_37":0,"8_38":0,"8_39":0,"8_40":0,"8_41":0,"8_42":0,"8_43":0,"8_44":0,"8_45":0,"8_46":0,"8_47":0,"8_48":0,"9_0":0.8888888888888888,"9_1":0.8888888888888888,"9_2":1,"9_3":1,"9_4":1,"9_5":1,"9_6":1,"9_7":1,"9_8":1,"9_9":1,"9_10":0.8333333333333334,"9_11":0.8333333333333334,"9_12":0.8333333333333334,"9_13":0.8333333333333334,"9_14":0.8333333333333334,"9_15":0.8333333333333334,"9_16":0.7777777777777778,"9_17":0.7777777777777778,"9_18":0.7777777777777778,"9_19":0.7777777777777778,"9_20":0.5,"9_21":0.5,"9_22":0.5,"9_23":0.5,"9_24":0.5,"9_25":0.5,"9_26":0.5,"9_27":0.5,"9_28":0.5,"9_29":0.5,"9_30":0,"9_31":0,"9_32":0,"9_33":0,"9_34":0,"9_35":0,"9_36":0,"9_37":0,"9_38":0,"9_39":0,"9_40":0,"9_41":0,"9_42":0,"9_43":0,"9_44":0,"9_45":0,"9_46":0,"9_47":0,"9_48":0,"10_0":0.8888888888888888,"10_1":0.8888888888888888,"10_2":1,"10_3":1,"10_4":1,"10_5":1,"10_6":1,"10_7":1,"10_8":1,"10_9":1,"10_10":0.8333333333333334,"10_11":0.8333333333333334,"10_12":0.8333333333333334,"10_13":0.8333333333333334,"10_14":0.8333333333333334,"10_15":0.8333333333333334,"10_16":0.7777777777777778,"10_17":0.7777777777777778,"10_18":0.7777777777777778,"10_19":0.7777777777777778,"10_20":0.5,"10_21":0.5,"10_22":0.5,"10_23":0.5,"10_24":0.5,"10_25":0.5,"10_26":0.5,"10_27":0.5,"10_28":0.5,"10_29":0.5,"10_30":0,"10_31":0,"10_32":0,"10_33":0.16666666666666666,"10_34":0.16666666666666666,"10_35":0.16666666666666666,"10_36":0.16666666666666666,"10_37":0.16666666666666666,"10_38":0.16666666666666666,"10_39":0.16666666666666666,"10_40":0.16666666666666666,"10_41":0.16666666666666666,"10_42":0.16666666666666666,"10_43":0.16666666666666666,"10_44":0.16666666666666666,"10_45":0.16666666666666666,"10_46":0,"10_47":0,"10_48":0} 

Now I want to color the image (grid) from colors from blue (min) to red (max.), And I will need to get a good image where it shows the maximum rating with better opacity, and an opacity below 0.75 will also be required.

I get a score from 0 to 1

 var half = parseFloat(1 / 2); var color = ""; var a = parseFloat(score).toFixed(4); var opacity = a; if(score <= half){ color = colors[0]; opacity = parseFloat(1 - a) - 0.25; }else{ color = colors[colors.length -1]; opacity = a - 0.25; } color = color.replace('|REPLACE|', opacity); 

And my result is

I want to know how to colorize the correct square and get the correct opacity?

Here's how it should look with all visible ratings

This is only with selected points 3 and 1

This is only the best result.

Hope anyone can help

Answer 1

I am the author of a JS library called heatmap.js, and I think I did exactly what you are looking for. Here (more or less) how it works in heatmap.js:

Opacity calculation for datapoint

 relative_score = (value-min) / (max-min); // => your opacity ( within [0;1] ) 

if you want .75, since maximum opacity uses it as a multiplier:

 final_opacity = relative_score * maximumOpacity; // => the desired opacity within [0;.75] where maximumOpacity=.75 

Color selection

In your case, I would advise you to stick to the simple color selection mechanism that you used (all and = half will use blue in different opacities, half will use red).

If you are interested in a smooth color transition between red and blue here, how can you do this:

• draw a linear gradient of 1x255 from colorX to colorY
• read color information for each pixel in the gradient and store it in an array

now you have an array full of colors (you can save them as [r, g, b]) and you can choose one based on your relative_score:

 color_index = Math.min(relative_score * 255) the_color_you_want = colors[color_index]; 

(In heatmap.js, all this is done on the client with an HTML5 canvas, but this can also be done using PHP.)

If you need more inspiration, feel free to take a look at heatmap.js code