javascript - PHP square heatmap over Image -

well start of image have display (can anything), , lot of data on area of image rated 1-5

here image of grid have display heat map on

as data this

from_x, from_y, to_x, to_y, score
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 first thing have done sum of single square, looks 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 normalize data value 0-1

{"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 wish color image(grid) colors blue (min) red(max) , need image shows max score best opacity, need opacity lower 0.75.

i score in 0 - 1

var half = parsefloat(1 / 2);  var color = ""; var = 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 = - 0.25; }  color = color.replace('|replace|', opacity);

and result

i wish know how color correct square , correct opacity?

this how should scores visible

this having selected scores 3 , 1

this best score

hope can help

i'm author of js library called heatmap.js , think i've done you're looking for. here's (more or less) how works in heatmap.js:

calculating opacity datapoint

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

if want .75 maximum opacity use multiplier:

final_opacity = relative_score * maximumopacity; // => desired opacity within [0;.75] maximumopacity=.75

color picking

for case i'd suggest sticking simple color picking mechanism used ( <= half use blue in different opacities, > half use red ).

in case you're interested in having smooth color transition between red & blue here's how can it:

draw 1x255 linear gradient colorx colory
read color information each pixel in gradient , store in array

now have array full of colors (you store them [r, g, b]) , can pick 1 based on relative_score:

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

(in heatmap.js it's done on client html5 canvas, done php.)

if need more inspiration, feel free have @ code of heatmap.js

Search This Blog

Ruby Co