Making a simple logic driven website display

I consider myself to be a competent programmer in an engineering capacity, but I am not sure how to proceed with my below question as it is internet related. Even some guidance in the right direction would be greatly appreciated.

PREFACE:

I have Python program running on a Raspberry Pi 3 that is configured as a server. The program returns creates a file (data.txt) each time it runs. The contents of the data.txt file is:

0, 0, 1, 1 ,0
1, 0, 1, 0, 0
0, 1, 1, 1, 1

Keep in mind these 0's and 1's will change every time the python program is executed.

QUESTION

I would like to create a website hosted on the Raspberry Pi that will display the following PNG file:

template.PNG

using the above data.txt file I would then like to place images of red or green circles on top of the blank PNG template:

The logic would simply place a green square on top of template.PNG when a '0' is in the corresponding position in data.txt, or a red square when there is a '1' in the corresponding position in data.txt.

The end result that I want would be a display like this: end result

What would be the most appropriate way to approach this so that it could be displayed on a website for either a computer or a cellphone. I understand that the iPhone does not support java or flash and I would prefer to avoid rendering an image on the server each time the Python program runs, i.e. I would prefer - if possible - to keep it some kind of embedded logic within the web browser. Open to any suggestions :)