Dashboarding: Data Analysis

Dashboarding: The Developers’ Role in Data Analysis @ InfoQ
by Seth Juarez on Dec 06, 2014

Visual display 
of
the most important information needed to achieve
one or more objectiveswhich
fits entirely on a single computer screenso it can be
monitored at a glance

Categorizing dashboards:

• strategic – long term decisions
• analytical – intermediate decisions, interactive, explorative
• operational – Immediate decisions

12 mistakes:

• too big
• missing context
• excessive detail
• deficient measure
• inappropriate visualization
• meaningless variety
• poorly designed visualization
• large lie factor
• poor arrangement
• bad highlighting
• chartjunk
• unattractive display

Simplicity works best

• reduce non-data pixels (data-ink ratio)
• eliminate all unnecessary non-data pixels
• de-emphasize and regularize the non-data pixels that remain

highlight appropriately

• pre-attentive attributes of visual p
• – color – hue / intensity (HSL)
• – position – x, y location
• – form – orientation, line length, line
• shape, added marks, enclosure
• – motion – Me! Me!

Information Dashboard Design: Displaying Data for At-a-Glance Monitoring: Stephen Few: 8601200921

Edward Tufte: Books - The Visual Display of Quantitative Information

Amazon.com: The Visual Display of Quantitative Information (8580001045689): Edward R. Tufte: Books

Business Dashboard Fundamentals – Pluralsight Training

AngularJS + SVG = Radian, (without D3.js)

Radian - Home
"Radian is an open source JavaScript library that makes it easy to embed plots in HTML documents. It is being developed as part of OpenBrain’s BayesHive project."

Replacing (most of) d3.js with pure SVG + AngularJS

<svg ng-attr-height="{{graph.height}}" ng-attr-width="{{graph.width}}"> <circle ng-repeat="circle in circles" ng-attr-cx="{{circle.x}}" ng-attr-cy="{{circle.y}}" ng-attr-r= "{{circle.r}}"> </circle> </svg>

$scope.circles = [ {'x': 15, 'y': 20, 'r':30}, {'x': 35, 'y': 60, 'r':20}, {'x': 55, 'y': 10, 'r':40}, ]

Using pure AngularJS + SVG to create the Resin.io logo

Web Components, Polymer

WebComponents.org
a place to discuss and evolve web component best-practices
Welcome - Polymer
Web Components usher in a new era of web development based on encapsulated and interoperable custom elements that extend HTML itself. Built atop these new standards, Polymer makes it easier and faster to create anything from a button to a complete application across desktop, mobile, and beyond.

Introduction to Web Components @ W3C

A Guide to Web Components | CSS-Tricks

Web Components: A Tectonic Shift for Web Development — Google I/O 2013

Building Reusable D3.js Elements with Polymer - Safari Blog

Home – Component Kitchen

Printable Wall Calendar

basic-calendar-month – Component Kitchen
<basic-calendar-month></basic-calendar-month>

basic-web-components.github.io/components/basic-calendar-month/

Small form factor for IoT?

Major computing platforms:

• PC: Intel
• Mobile: ARM
• IoT: ?

Smaller does not always mean slower or more affordable... but often it is. 

Expected scale of IoT could justify another platform shift, in HW and SW...

Small form factor - Wikipedia, the free encyclopedia


Next Unit of Computing - Wikipedia, the free encyclopedia
Amazon.com: intel nuc: Electronics

OptiPlex 9020 Micro PC Desktop | Dell

Edison Getting Started Guide - Windows | Intel Communities

D3.js API reference

D3.js is a powerful library, not a framework, so it requires careful using of available APIs.
In fact it also requires solid knowledge of SVG and CSS, in addition to JavaScript.

API Reference · mbostock/d3 Wiki

Time Formatting · mbostock/d3 Wiki

It would be useful to have a standardized way for higher-level reusable modules,
to avoid re-inventing standard visual elements, something like c3.js but general-purpose...
Maybe with web components?

Data Visualization Libraries Based on D3.JS - Mike McDearmon







D3 Tutorial Table of Contents | DashingD3js.com