Circular Heatmap

Peter Cooke has produced an amazing D3 visual.  It was so cool that I couldn’t wait to port it into Dex.  It’s called the Circular Heatmap and Peter’s original work can be found here.

In this blog article, I will show a few images of the visual linked back to live content.  At the end of the article will be a link to a live video showing Dex creating the visual.

First, here is a simple Circular Heatmap, click the image to go to the live version:


And here is a slightly more complicated one.  Clicking it will also take you to live content:


And last but not least, here is a video showing their creation:

Sorry to be so brief, but my wife is patiently waiting for me to go out with friends.

– Pat


About patmartin

I am a coder and Data Visualization/Machine Learning enthusiast.
This entry was posted in General. Bookmark the permalink.

2 Responses to Circular Heatmap

  1. Mahwash says:

    Kindly tell me how to update the data of the heat map without refreshing the page

    Thanks in advance

    • patmartin says:

      In the javascript you would:

      1. Acquire new data from somewhere. This is specific to your program.
      2. heatmap.attr(‘csv’, newData).update();

      Where newData is a CSV structure containing your new data.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s