Norse Live Attack Map Visualization

norse-map.gif linked from buzzfeed

I was hired by the Norse Corporation to create a visualization that demo'd the rich stream of threat data underlying their IPViking product. I worked with Norse and their initial inspiration to decide on the style of visualization, and how the salient dimensions of time, location, and service could be explored. The result was the improved Live Attack Map.

Building It

The visualization is built using `d3.js` to handle data to code mappings and consistency. It draws to an HTML canvas. I wrote all of the code in HTML, CSS, and javascript, except for the generation of the particle. This approach of using d3 to draw particles to an html canvas was inspired by ArtZub's visualization.

Mouse-over interactions are used to highlight an interesting attribute of the underlying data, particularly threats targeting a country, originating from a country, and made over a particular service.

The sliding tick marks at the bottom left of the screen are my favorite part: they're an attempt to provide a window into timing patterns 10-90s scale. However, at the moment tick marks overlap preventing it from showing more than 1 attack per application "tick".

As part of the contract we decided to not make the initial version responsive to different display sizes, so it does have some issues with tables overlapping.



map.ipviking.com search

<blockquote class="twitter-tweet" data-cards="hidden" lang="en"><p>Watching <a href="http://t.co/ADnPN9ScDa">http://t.co/ADnPN9ScDa</a> much more fun than the world cup :p <a href="http://t.co/T4yKe5iJOs">pic.twitter.com/T4yKe5iJOs</a></p>&mdash; Linda Martin (@Lindoox) <a href="https://twitter.com/Lindoox/statuses/482975092360884224">June 28, 2014</a></blockquote> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet" lang="en"><p>If people are interested in DDoS activity, the dudes at IPViking have a badass map. US getting hammered right now&#10;&#10;<a href="http://t.co/iFCOdqvTHL">http://t.co/iFCOdqvTHL</a></p>&mdash; Trent Farrell (@RiotForo) <a href="https://twitter.com/RiotForo/statuses/494013234169401344">July 29, 2014</a></blockquote>

<blockquote class="twitter-tweet" lang="en"><p>This is insanely compelling viewing: <a href="http://t.co/cXUXhCLkfl">http://t.co/cXUXhCLkfl</a> Live graphical representation of global DDOS attacks.</p>&mdash; Darren Grey (@dgrey0) <a href="https://twitter.com/dgrey0/statuses/496974316840710144">August 6, 2014</a></blockquote> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

Written by