1. SharePoint Data Visualization
With HighCharts & D3.js

2. About me Daniel Segan Senior Software Engineer @ BlueMetal
Based in NYC
15+ Years Experience
SharePoint, Web / .NET Development, Enterprise Software, BI, Data, Agile Projects
Collaboration, Line-of-Business, Integration
Industries:
Financial Services, Professional Services, Manufacturing, Advertising, Pharmaceutical, Construction, Education, Non Profit

3. The Modern Application Company ™
Modern technology, craftsman quality. We’re an interactive design and technology architecture firm matching the most experienced consultants in the industry to the most challenging business and technical problems facing our clients.
Start with company purpose… key messages in the description of our approach
“BlueMetal was created to bring together a group of high end designers and architects that would craft holistic solutions, blending architecture, innovation, creative design and strategic vision to exactly meet your needs and ensure your success. We started in Boston and 2010 and have grown to xyz employees and offices in Boston, New York and Chicago.”
Craftsmanship
Interactive design & technology architecture firm
Most experienced consultants
Taking on the most challenging business and technical problems our clients face
Examples: Steward call us “their innovation sledge hammer.”
Introduce the four key outcomes or deliverables that we drive as a company:
Business Architecture Alignment
Design Driven Solutions
Architecture is at the Core of What We Deliver
Methodologies help deliver quality & velocity

4. Strategy. Design. Enterprise Architecture.
Devices &
Mobility
Collaboration &
Social
Cloud &
Services
Data &
Analytics
Walk through practices and describe in a high-level how we bring people together from across the practices to deliver those exacting solutions.
“We are able to bring together our competencies across practices to deliver holistic solutions.”

5. Our Clients. Industry Expertise.
Opportunity to discuss incredible portfolio of clients.
Industry expertise across Financial Services and Health & Life Sciences.

6. Cross-Platform Solutions
Our approach aligns business strategy with technical architecture and capabilities for optimum velocity and impact.

7. Goals
Identify some nuances in the data visualization capabilities of the Microsoft BI stack
Describe some scenarios where an alternative approach is desirable
Offer an introduction to a couple of those alternatives

8. Agenda Questions for the audience
Review of the Microsoft SharePoint BI Stack
The Dilemma
Some Alternatives
HighCharts
Demo: HighCharts Examples
D3.js
Demo: Building an animated bar chart with D3
Q&A

9. Questions for you…
What tools are most of you using today for data visualization?
Where do the Microsoft BI tools work the best?
Where have they fallen short?
What kind of BI functionality are your users asking for?
Better looking dashboards?
More functionality?
Richer Mobile Experience?
What level of familiarity do you have with JavaScript?
It’s really not that bad…

10. DISCLAIMER

11. Chart Web Parts
And they’re gone…

12. SQL Server Reporting Services
Originally introduced as an add on to SQL Server 2000
Has come a long way!
Integrates with SharePoint for Deployment / Publishing / Rendering
Supports subscription model
Scalability
Data Caching
Server load balancing and redundancy

13. SSRS: The Good Accessible Development Environment
Skills transfer from Crystal Reports, Access
Flexible Data Sources
Nearly all Databases, XML, Text Files, SharePoint
Join data across data sources
Robust Document Exporting / Printing Support
Word, Excel, PDF, Text, etc.
Built in Pagination
Was designed with printing in mind

14. SSRS Reports are relatively static Chart Layouts
Parameters, Hide/Show sections, Conditional formatting, links between reports
Chart Layouts
Built in charts work for the most standard scenarios, but there is limited flexibility – you can’t simply create a new chart type.
Infrastructure / Licensing
Some companies just don’t set it up or have the licensing to support it

15. SSRS Appearance Front-end Extensibility Great for rows / columns
Charts / Fonts appear pixelated, dated
Front-end Extensibility
JavaScript Hacks – You can do it, but it’s no fun
E.g Same Server URL Issue
Difficult to maintain / debug

16. Excel Services / Excel Web Application
Extremely accessible
Everyone kind of knows how to use Excel
Very easy to quickly deliver a remarkably functional solution
Mature Product
In its current versions (2013 / O365) it really shines.
Extensible
JavaScript Object Mode (JSOM) allows you to interact with workbooks programmatically

17. Excel Services / Excel Web Application
Looks like Excel
Cell based layout / Standard Excel Charts
User Experience
Can sometimes be confusing
Feels canned
Additional Setup
Requires Services
Licensing
Enterprise CAL

18. Power Pivot / Power View
Familiar Tools
Extends Excel, leverages knowledge of Pivot Tables
DAX is similar to Excel functions and expressions
Pivot
Incredibly easy to slice and dice data
Rich Dynamic Display of Data
Modern Looking with some trade-offs

19. Power Pivot / Power View
Complex Setup
A lot of moving parts and a somewhat invasive installation – can’t just set it up on a whim
Silverlight
HTML5 seems to be on it’s way, but no real promises yet from Microsoft – not really an option for mobile users
Refresh
Limited Refresh Schedule
Licensing
Enterprise CAL

20. Power BI O365 Based BI Suite Adds more capabilities HTML5 Rendering
100% Cloud
Uses Power Pivot / Power View
Adds more capabilities
Power Query, Power Map, Integration with HD Insights, Windows Store App
HTML5 Rendering
Nice!
Truly awesome potential
Demos are breathtaking
Rapid release cycle

21. Power BI
Limited to O365
Not sure when if/when features will be available on-prem, Possibly never!
A lot of people are not ready for the cloud

22. The dilemma (hitting that brick wall)
Can’t do what I want
Due to the design of the tool or some technical limitations, I can’t display the data how I would like to…
Quick and Dirty
I am unable to use the standard BI tools because they aren’t set up, I don’t have access, or I don’t have the licensing…
Lame Visuals
The data is right and the report works, but it just doesn’t pop

23. What do we want? Wide Browser Support SharePoint 2010 / 2013 / O365
Flexible Layout
Mobile Friendly
Modern Dynamic Look & Feel
Vector Based
Extensible
Flexible Data Sources
Wide Browser Support
SharePoint 2010 / 2013 / O365
No Obscene Licensing Costs

24. Some alternatives…

25. Some alternatives… Based on JavaScript Dynamic Open Source
Easy to extend functionality
Vast Array of Plugins for both HighCharts and D3.js
Dynamic
Visualizations can have Animations, update display
Open Source
Both options are open source
HighCharts is not free for business use
Active Communities
Easy to find answers to questions / get support
Tons of Sample Code
If you are looking to do something, chances are it or something like it has been done.

26. Getting the data 100% Client Side Approach
We can’t directly query a SQL Database
But we can do other things…

27. Getting the Data Array JSON / JSONP OData TSV / CSV / XML SharePoint
JSOM
SharePoint REST
HTML / DOM
SQL Server
WCF

28. HighCharts Pure JavaScript based charting library Chart Types
line, spline, area, area spline
column, bar, pie, scatter
angular gauges
area range, area spline range, column range,
bubble, box plot
error bars, funnel, waterfall, polar chart types
Charts can be Interactive
Clickable, Hover, Animation

29. TD Ameritrade Windows 8 Store App
Real-time streaming quotes, Charts, Market data, Order status, News
Account information, Balances and positions, Transaction history
PUBLICLY SHAREABLE
Geo: NYC
Project Lead: Szymon Rozga
MAAP project
App store link:

30. HighCharts Licensing Compatibility
Free for non-profits / Free to Developers
Site or Developer Licensing for Commercial / Government
Compatibility
Works on all modern browsers
Support for legacy versions of IE

31. HighCharts – Solution Example

32. Demo: HighCharts Examples32

33. D3.js

34. D3.js

35. D3.js
Open Source
Used extensively by the New York Times for rich / interactive infographics
Developed by Mike Bostock
Based on a long history of other similar work

36. D3.js Prefuse Flare Protovis D3 2005 Java 2007 Action Script/Flash
2009
JavaScript D3
2011

37. D3.js More than just visualization… jQuery D3 AJAX YES Attributes CSS
Dimensions NO
Effects
Events
Manipulation
Selectors
Traversal
Data Binding

38. Demo: D3.js Examples 38

39. D3.js – How does it work D3 is set based
Operations occur on the entire set of object
think SQL
Data is Bound to DOM elements – this is called a join
You define the binding operation and let it happen; there is no for loop
E.g. For every data object, draw a circle
Attributes
Operations can use the attributes of the data
E.g. if the Gender Attribute is Male make the circle blue

40. D3.js – How does it work Get your data
Fetch list items from a SharePoint list in JSON format using REST API
Select DOM nodes you want to work with
Translate the data objects into DOM elements and attributes
Bind your data to DOM elements (Join)
Enter – New data, for which there were no existing elements
[Update – New data joined successfully to a new element]
[Exit – Existing elements, for which there were no new data]
__data__ - Data objects are bound to this Attribute
Key Function – determines the “Primary Key” used in Update / Exit

41. D3.js - SVG
<svg height="210" width="500">   <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" /> </svg>

42. Demo: More D3.js Examples42

43. D3.js - Layouts Bundle Chord Cluster Force Hierarchy Histogram Pack
Partition
Pie
Stack
Tree
Treemap

44. D3.js Important Ideas Scales General Update Pattern
Functions to map input domain to an output domain
General Update Pattern
The  general update pattern is used when a data-join is followed by operations on the enter, update and exit selections in order to actively draw new elements, update existing elements, and remove elements no longer needed.

45. Demo: Building a Bar Chart with D3.js45

46. D3.js – Learning Resources
Main Website:
d3js.org
GitHub
mbostock/d3
Local
General Assembly – Data Visualization Workshop

47. Questions? 47

48. Julie Turner’s Solution & MSDN Article
Info
Daniel Segan
Julie Turner’s Solution & MSDN Article