Heat Map Activity Grid The concept goes by various names essentially you change the visual output of different components to emphasis higher or lower values e g 0 could mean blue while 100 for red or gree Depends on your color scheme could be from white to black The following examples go through a step by step process of developing an activity type grid document body style height 100pt let c document createElement div document body appendChild c c style border 1px solid black c style width 80 c style padding 10px c style margin 10px c style border radius 2px let num 200 for let i 0 i num i let d document createElement div c appendChild d d style display inline block d style border 1px solid black d style width 10px d style height 10px d style padding 0px d style margin 2px d style border radius 1px d style background color white d title item i console log ready document body style height 100pt let c document createElement div document body appendChild c c style border 1px solid black c style width 80 c style padding 10px c style margin 10px c style border radius 2px c style line height 0px function getBlueToRed percent let r percent 50 255 Math floor 255 percent 2 100 255 100 let b percent 50 255 Math floor percent 2 255 100 return rgb r 0 b let num 200 for let i 0 i num i let d document createElement div c appendChild d d style display inline block d style border 1px solid black d style width 10px d style height 10px d style padding 0px d style margin 2px d style border radius 1px d style background color getBlueToRed 100 i num 1 d title item i console log ready document body style height 150pt let c document createElement div document body appendChild c c style border 1px solid black c style width 80 c style padding 10px c style margin 10px c style border radius 2px c style line height 0px function getBlueToRed percent let r percent 50 255 Math floor 255 percent 2 100 255 100 let b percent 50 255 Math floor percent 2 255 100 return rgb r 0 b end getBlueToRed function addblock parent percentage title let d document createElement div parent appendChild d d style display inline block d style border 1px solid black d style width 10px d style height 10px d style padding 0px d style margin 2px d style border radius 1px d style background color getBlueToRed percentage 100 d title title end addblock let num 200 for let i 0 i num i addblock c i num item i display the color sequence range in bottom right let d document createElement div c appendChild d d style border 0 d style padding 0px d style margin 10px d style text align right addblock d 0 0 addblock d 0 25 25 addblock d 0 5 50 addblock d 0 75 75 addblock d 1 0 100 console log ready document body style height 150pt let c document createElement div document body appendChild c c id container c style border 1px solid black c style width 80 c style padding 10px c style margin 10px c style border radius 2px c style line height 0px function getBlueToRed percent let r percent 50 255 Math floor 255 percent 2 100 255 100 let b percent 50 255 Math floor percent 2 255 100 return rgb r 0 b end getBlueToRed function addblock parent percentage title let d document createElement div parent appendChild d d style display inline block d style border 1px solid black d style width 10px d style height 10px d style padding 0px d style margin 2px d style border radius 1px d style background color getBlueToRed percentage 100 d title title end addblock let num 200 for let i 0 i num i addblock c i num item i display the color sequence range in bottom right let d document createElement div c appendChild d d style border 0 d style padding right 10px d style margin 0 d style text align right addblock d 0 0 addblock d 0 25 25 addblock d 0 5 50 addblock d 0 75 75 addblock d 1 0 100 setInterval function let c document getElementById container let n c children length 5 don t include last 5 bottom corner let sel Math floor n Math random c children sel style background color getBlueToRed Math random 100 10 console log ready document body style height 150pt let c document createElement div document body appendChild c c id container c style border 1px solid black c style width 80 c style padding 10px c style margin 10px c style border radius 2px c style vertical alignment middle c style line height 0px c style background color white function getBlueToRed percent let r percent 50 255 Math floor 255 percent 2 100 255 100 let b percent 50 255 Math floor percent 2 255 100 return rgb r 0 b end getBlueToRed function addblock parent percentage title let d document createElement div parent appendChild d d style display inline block d style border 1px solid black d style width 10px d style height 10px d style padding 0px d style margin 1px d style border radius 1px d style background color getBlueToRed percentage 100 d title title end addblock let num 600 for let i 0 i num i addblock c i num item i display the color sequence range in bottom right let d document createElement div c appendChild d d style border 0px d style padding 0px d style margin 10px d style text align right addblock d 0 0 addblock d 0 25 25 addblock d 0 5 50 addblock d 0 75 75 addblock d 1 0 100 setInterval function let c document getElementById container let n c children length 5 don t include last 5 bottom corner let sel Math floor n Math random c children sel style background color getBlueToRed Math random 100 100 console log ready document body style height 150pt let c document createElement div document body appendChild c c id container c style border 1px solid black c style width 80 c style padding 10px c style margin 10px c style border radius 5px c style vertical alignment middle c style line height 0px c style background color white function getBlueToRed percent let r percent 50 255 Math floor 255 percent 2 100 255 100 let b percent 50 255 Math floor percent 2 255 100 return rgb r 0 b end getBlueToRed function addblock parent percentage title let d document createElement div parent appendChild d d style display inline block d style border 1px solid black d style width 10px d style height 10px d style padding 0px d style margin 1px d style border radius 5px d style background color getBlueToRed percentage 100 d title title end addblock let num 600 for let i 0 i num i addblock c i num item i display the color sequence range in bottom right let d document createElement div c appendChild d d style border 0px d style padding 0px d style margin 10px d style margin bottom 0px d style text align right addblock d 0 0 addblock d 0 25 25 addblock d 0 5 50 addblock d 0 75 75 addblock d 1 0 100 setInterval function let c document getElementById container let n c children length 5 don t include last 5 bottom corner let sel Math floor n Math random c children sel style background color getBlueToRed Math random 100 100 console log ready Take it a bit further Make the radius component influenced by the percentage 0 square 100 round document body style height 150pt let c document createElement div document body appendChild c c id container c style border 1px solid black c style width 80 c style padding 10px c style margin 10px c style border radius 5px c style vertical alignment middle c style line height 0px c style background color white function getBlueToRed percent let r percent 50 255 Math floor 255 percent 2 100 255 100 let b percent 50 255 Math floor percent 2 255 100 return rgb r 0 b end getBlueToRed function addblock parent percentage title let d document createElement div parent appendChild d d style display inline block d style border 1px solid black d style width 10px d style height 10px d style padding 0px d style margin 1px d style border radius 5 percentage px d style background color getBlueToRed percentage 100 d title title end addblock let num 600 for let i 0 i num i addblock c i num item i display the color sequence range in bottom right let d document createElement div c appendChild d d style border 0px d style padding 0px d style margin 10px d style margin bottom 0px d style text align right addblock d 0 0 addblock d 0 25 25 addblock d 0 5 50 addblock d 0 75 75 addblock d 1 0 100 setInterval function let c document getElementById container let n c children length 5 don t include last 5 bottom corner let sel Math floor n Math random let newvalue Math random c children sel style background color getBlueToRed newvalue 100 c children sel style border radius 5 newvalue px 100 console log ready It just keeps going You could keep going with the concept adding more graphical options features effects An interesting idea could be to make the example into a game Click the shapes or colors Match shapes but not colors In addition to changing the radius and color maybe change the size as well Option to add referencing grouping elements e g calendar days months
let b percent 50 255 Math floor percent 2 255 100 return rgb r 0 b end getBlueToRed function addblock parent percentage title let d document createElement div parent appendChild d d style display inline block d style border 1px solid black d style width 10px d style height 10px d style padding 0px d style margin 1px d style border radius 1px d style background color getBlueToRed percentage 100 d title title end addblock let num 600 for let i 0 i num i addblock c i num item i display the color sequence range in bottom right let d document createElement div c appendChild d d style border 0px d style padding 0px d style margin 10px d style text align right addblock d 0 0 addblock d 0 25 25 addblock d 0 5 50 addblock d 0 75 75 addblock d 1 0 100 setInterval function let c document getElementById container let n c children length 5 don t include last 5 bottom corner let sel Math floor n Math random c children sel style background color getBlueToRed Math random 100 100 console log ready document body style height 150pt let c document createElement div document body appendChild c c id container c style border 1px solid black c style width 80 c style padding 10px c style margin 10px c style border radius 5px c style vertical alignment middle c style line height 0px c style background color white function getBlueToRed percent let r percent 50 255 Math floor 255 percent 2 100 255 100 let b percent 50 255 Math floor percent 2 255 100 return rgb r 0 b end getBlueToRed function addblock parent percentage title let d document createElement div parent appendChild d d style display inline block d style border 1px solid black d style width 10px d style height 10px d style padding 0px d style margin 1px d style border radius 5px d style background color getBlueToRed percentage 100 d title title end addblock let num 600 for let i 0 i num i addblock c i num item i display the color sequence range in bottom right let d document createElement div c appendChild d d style border 0px d style padding 0px d style margin 10px d style margin bottom 0px d style text align right addblock d 0 0 addblock d 0 25 25 addblock d 0 5 50 addblock d 0 75 75 addblock d 1 0 100 setInterval function let c document getElementById container let n c children length 5 don t include last 5 bottom corner let sel Math floor n Math random c children sel style background color getBlueToRed Math random 100 100 console log ready Take it a bit further Make the radius component influenced by the percentage 0 square 100 round document body style height 150pt let c document createElement div document body appendChild c c id container c style border 1px solid black c style width 80 c style padding 10px c style margin 10px c style border radius 5px c style vertical alignment middle c style line height 0px c style background color white function getBlueToRed percent let r percent 50 255 Math floor 255 percent 2 100 255 100 let b percent 50 255 Math floor percent 2 255 100 return rgb r 0 b end getBlueToRed function addblock parent percentage title let d document createElement div parent appendChild d d style display inline block d style border 1px solid black d style width 10px d style height 10px d style padding 0px d style margin 1px d style border radius 5 percentage px d style background color getBlueToRed percentage 100 d title title end addblock let num 600 for let i 0 i num i addblock c i num item i display the color sequence range in bottom right let d document createElement div c appendChild d d style border 0px d style padding 0px d style margin 10px d style margin bottom 0px d style text align right addblock d 0 0 addblock d 0 25 25 addblock d 0 5 50 addblock d 0 75 75 addblock d 1 0 100 setInterval function let c document getElementById container let n c children length 5 don t include last 5 bottom corner let sel Math floor n Math random let newvalue Math random c children sel style background color getBlueToRed newvalue 100 c children sel style border radius 5 newvalue px 100 console log ready It just keeps going You could keep going with the concept adding more graphical options features effects An interesting idea could be to make the example into a game Click the shapes or colors Match shapes but not colors In addition to changing the radius and color maybe change the size as well Option to add referencing grouping elements e g calendar days months