{"id":884,"date":"2016-02-02T13:12:41","date_gmt":"2016-02-02T21:12:41","guid":{"rendered":"http:\/\/raffy.ch\/blog\/?p=884"},"modified":"2016-02-09T07:13:48","modified_gmt":"2016-02-09T15:13:48","slug":"dashboards-lets-talk-about-graph-widgets","status":"publish","type":"post","link":"https:\/\/raffy.ch\/blog\/2016\/02\/02\/dashboards-lets-talk-about-graph-widgets\/","title":{"rendered":"Dashboards &#8211; Let&#8217;s Talk About Graph Widgets"},"content":{"rendered":"<p>Recently I have been getting a number of questions about <a href=\"http:\/\/raffy.ch\/blog\/2015\/03\/29\/security-dashboards-where-to-start\/\">dashboards<\/a>. I have written about them before (<a href=\"http:\/\/raffy.ch\/blog\/2015\/03\/29\/security-dashboards-where-to-start\/\">here<\/a> and <a href=\"http:\/\/raffy.ch\/blog\/2015\/01\/15\/dashboards-in-the-security-opartions-center-soc\/\">here<\/a>). Given all the questions and a couple of recent consulting gigs where I built dashboards for different companies and purposes, I wanna share some simple learnings.<\/p>\n<p>There are many different types of visualizations you can put on a dashboard: line charts, pie charts (or not), bar charts, <a href=\"https:\/\/en.wikipedia.org\/wiki\/Bullet_graph\">bullet graphs<\/a>, <a href=\"https:\/\/en.wikipedia.org\/wiki\/Sparkline\">spark lines<\/a>, maybe even treemaps. Keep in mind though that often a table is the best way to communicate your data.<\/p>\n<p>Aside from tables, I have been using Netflix&#8217;s <a href=\"https:\/\/github.com\/Netflix\/Hystrix\">Hystrix<\/a> visualizations more and more.<\/p>\n<p><center><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/raffy.ch\/blog\/wp-content\/uploads\/2016\/02\/hystrics_graph.png\" alt=\"hystrics_graph\" width=\"279\" height=\"173\" class=\"size-full wp-image-887\" \/><\/center><\/p>\n<p>I really like them for dashboards for the following reasons:<\/p>\n<ul>\n<li>Adopt well to different scales (just like sparklines).<\/li>\n<li>Have multiple cognitive layers:\n<ul>\n<li>If you have a larger dashboard, you can look at the different layers individually: The dots communicate the overall state, the solid line the progression over time, and the details can be shown as text for the curious mind.<\/li>\n<li>Mimic a traffic light methodology but without wasting space. Simple red, yellow, green circles are used to communicate the overall status.<\/li>\n<li>Include a time-series aspect to not only communicate the current state, but the development over time. Great to spot trends and get historic comparison.<\/li>\n<li>We can show the same metric from a previous time period (the dotted line). Again, great for comparison and baselining.<\/li>\n<li>Individual data points can be added as text.<\/li>\n<\/ul>\n<\/li>\n<li>Don&#8217;t need absolute scales to make sense. The size of the circles can be used to communicate proportions.<\/li>\n<li>We can easily show causality (the heartbleed line), just like <a href=\"http:\/\/www.edwardtufte.com\/tufte\/\">Edward Tufte<\/a> has taught us.<\/li>\n<\/ul>\n<p>Here is a quick simplified mockup of a dashboard that uses multiple charts of this type. As a bonus I included a bullet graph that can be used, for example, for benchmarking.<\/p>\n<p><center><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/raffy.ch\/blog\/wp-content\/uploads\/2016\/02\/hystrix1.png\" alt=\"hystrix\" width=\"500\" height=\"318\" class=\"size-full wp-image-901\" srcset=\"https:\/\/raffy.ch\/blog\/wp-content\/uploads\/2016\/02\/hystrix1.png 500w, https:\/\/raffy.ch\/blog\/wp-content\/uploads\/2016\/02\/hystrix1-300x191.png 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/center><\/p>\n<p>There is obviously more that goes into the design of a dashboard and the one shown here is really just a super raw starting point. The main challenge is always to determine the right security metrics that bubble up into the graphs. Turns out that&#8217;s generally really hard.<\/p>\n<p>If this is the kind of thing you are interested in? Visualization for security, big data, security analytics, join me at BlackHat US in August, where I will be teaching the <b><a href=\"http:\/\/bit.ly\/1SIs8oi\">Visual Analytics Workshop<\/a><\/b>. Sign up today!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Recently I have been getting a number of questions about dashboards. I have written about them before (here and here). Given all the questions and a couple of recent consulting gigs where I built dashboards for different companies and purposes, I wanna share some simple learnings. There are many different types of visualizations you can [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-884","post","type-post","status-publish","format-standard","hentry","category-visualization"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/raffy.ch\/blog\/wp-json\/wp\/v2\/posts\/884","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/raffy.ch\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/raffy.ch\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/raffy.ch\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/raffy.ch\/blog\/wp-json\/wp\/v2\/comments?post=884"}],"version-history":[{"count":21,"href":"https:\/\/raffy.ch\/blog\/wp-json\/wp\/v2\/posts\/884\/revisions"}],"predecessor-version":[{"id":912,"href":"https:\/\/raffy.ch\/blog\/wp-json\/wp\/v2\/posts\/884\/revisions\/912"}],"wp:attachment":[{"href":"https:\/\/raffy.ch\/blog\/wp-json\/wp\/v2\/media?parent=884"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/raffy.ch\/blog\/wp-json\/wp\/v2\/categories?post=884"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/raffy.ch\/blog\/wp-json\/wp\/v2\/tags?post=884"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}