{"id":611574,"date":"2019-09-30T11:31:04","date_gmt":"2019-09-30T18:31:04","guid":{"rendered":"https:\/\/www.microsoft.com\/en-us\/research\/?post_type=msr-project&#038;p=611574"},"modified":"2022-09-21T10:39:11","modified_gmt":"2022-09-21T17:39:11","slug":"data-stories-using-animated-transtions","status":"publish","type":"msr-project","link":"https:\/\/www.microsoft.com\/en-us\/research\/project\/data-stories-using-animated-transtions\/","title":{"rendered":"Data Stories using Animated Transtions"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-611661\" src=\"https:\/\/www.microsoft.com\/en-us\/research\/uploads\/prod\/2019\/09\/ustornados_720_200.gif\" alt=\"\" width=\"720\" height=\"720\" \/><\/p>\n<p>This project illustrates how complex data can be visualized using a web browser in both mixed and plain reality to immerse a user in a story and communicate insights. Immersive visualization and storytelling techniques allow insights in complex data to be communicated more effectively.<\/p>\n<p>A browser-based WebGL application maximizes reach across devices and form-factors, from mobile to large-format displays. The web-based approach also allows embedding within existing websites. Fully immersive, mixed-reality experiences are also supported direct from the browser via WebVR.<\/p>\n<p>Visualizations are created using tabular data and a web-based authoring tool. This approach to presenting and sharing findings in data offers an alternative approach to static charts or dynamic dashboards. 3D visualizations are fully supported.<\/p>\n<p>Collaborative experiences across multiple web-browsers are supported. A device can join a visualization session using a simple QR-code or short URL. Control can be given to allow participants to drive the experience. This approach enables an interactive discussion about data.<\/p>\n<div id=\"attachment_611718\" style=\"width: 330px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-611718\" class=\"size-full wp-image-611718\" src=\"https:\/\/www.microsoft.com\/en-us\/research\/uploads\/prod\/2019\/09\/MorphCharts-VR.png\" alt=\"MorphCharts VR\" width=\"320\" height=\"180\" srcset=\"https:\/\/www.microsoft.com\/en-us\/research\/uploads\/prod\/2019\/09\/MorphCharts-VR.png 2560w, https:\/\/www.microsoft.com\/en-us\/research\/uploads\/prod\/2019\/09\/MorphCharts-VR-300x169.png 300w, https:\/\/www.microsoft.com\/en-us\/research\/uploads\/prod\/2019\/09\/MorphCharts-VR-768x432.png 768w, https:\/\/www.microsoft.com\/en-us\/research\/uploads\/prod\/2019\/09\/MorphCharts-VR-1024x576.png 1024w, https:\/\/www.microsoft.com\/en-us\/research\/uploads\/prod\/2019\/09\/MorphCharts-VR-1066x600.png 1066w, https:\/\/www.microsoft.com\/en-us\/research\/uploads\/prod\/2019\/09\/MorphCharts-VR-655x368.png 655w, https:\/\/www.microsoft.com\/en-us\/research\/uploads\/prod\/2019\/09\/MorphCharts-VR-343x193.png 343w, https:\/\/www.microsoft.com\/en-us\/research\/uploads\/prod\/2019\/09\/MorphCharts-VR-640x360.png 640w, https:\/\/www.microsoft.com\/en-us\/research\/uploads\/prod\/2019\/09\/MorphCharts-VR-960x540.png 960w, https:\/\/www.microsoft.com\/en-us\/research\/uploads\/prod\/2019\/09\/MorphCharts-VR-1280x720.png 1280w, https:\/\/www.microsoft.com\/en-us\/research\/uploads\/prod\/2019\/09\/MorphCharts-VR-1920x1080.png 1920w\" sizes=\"(max-width: 320px) 100vw, 320px\" \/><p id=\"caption-attachment-611718\" class=\"wp-caption-text\">Immersive virtual reality experiences.<\/p><\/div>\n<p>The following examples show how animated transitions can be used as part of the storytelling process.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.microsoft.com\/en-us\/research\/uploads\/prod\/2019\/09\/adventureworks.gif\" alt=\"AdventureWorks\" width=\"256\" height=\"256\" \/> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.microsoft.com\/en-us\/research\/uploads\/prod\/2019\/09\/chinacities.gif\" alt=\"Chinese Cities\" width=\"256\" height=\"256\" \/> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.microsoft.com\/en-us\/research\/uploads\/prod\/2019\/09\/flights.gif\" alt=\"Flights\" width=\"256\" height=\"256\" \/> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.microsoft.com\/en-us\/research\/uploads\/prod\/2019\/09\/lesmis.gif\" alt=\"Les Mis\u00e9rables Co-occurence\" width=\"256\" height=\"256\" \/> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.microsoft.com\/en-us\/research\/uploads\/prod\/2019\/09\/opiates.gif\" alt=\"US Opiate Mortality\" width=\"256\" height=\"256\" \/> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.microsoft.com\/en-us\/research\/uploads\/prod\/2019\/09\/simpsons.gif\" alt=\"UC Berkeley Admission\" width=\"256\" height=\"256\" \/> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.microsoft.com\/en-us\/research\/uploads\/prod\/2019\/09\/titanic.gif\" alt=\"Titanic\" width=\"256\" height=\"256\" \/> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.microsoft.com\/en-us\/research\/uploads\/prod\/2019\/09\/ramrod.gif\" alt=\"RAMROD\" width=\"256\" height=\"256\" \/> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.microsoft.com\/en-us\/research\/uploads\/prod\/2019\/09\/laflights.gif\" alt=\"LA Flights\" width=\"256\" height=\"256\" \/> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.microsoft.com\/en-us\/research\/uploads\/prod\/2019\/09\/earthquakes.gif\" alt=\"Earthquakes\" width=\"256\" height=\"256\" \/> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.microsoft.com\/en-us\/research\/uploads\/prod\/2019\/09\/43temp.gif\" alt=\"Building Temperatures\" width=\"256\" height=\"256\" \/> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.microsoft.com\/en-us\/research\/uploads\/prod\/2019\/09\/ustornados.gif\" alt=\"US Tornados\" width=\"256\" height=\"256\" \/> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.microsoft.com\/en-us\/research\/uploads\/prod\/2019\/09\/us2016electioncounty.gif\" alt=\"US 2016 Presidential Election\" width=\"256\" height=\"256\" \/> <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.microsoft.com\/en-us\/research\/uploads\/prod\/2019\/09\/5f9i.gif\" alt=\"Structure of rich-AT DNA 20mer\" width=\"256\" height=\"256\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This project illustrates how complex data can be visualized using a web browser in both mixed and plain reality to immerse a user in a story and communicate insights. Immersive visualization and storytelling techniques allow insights in complex data to be communicated more effectively. A browser-based WebGL application maximizes reach across devices and form-factors, from [&hellip;]<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"msr-url-field":"","msr-podcast-episode":"","msrModifiedDate":"","msrModifiedDateEnabled":false,"ep_exclude_from_search":false,"_classifai_error":"","footnotes":""},"research-area":[13563,13554],"msr-locale":[268875],"msr-impact-theme":[],"msr-pillar":[],"class_list":["post-611574","msr-project","type-msr-project","status-publish","hentry","msr-research-area-data-platform-analytics","msr-research-area-human-computer-interaction","msr-locale-en_us","msr-archive-status-active"],"msr_project_start":"2018-07-01","related-publications":[],"related-downloads":[],"related-videos":[],"related-groups":[],"related-events":[],"related-opportunities":[],"related-posts":[],"related-articles":[],"tab-content":[],"slides":[],"related-researchers":[{"type":"user_nicename","display_name":"Dave Brown","user_id":31502,"people_section":"Section name 0","alias":"dabrown"}],"msr_research_lab":[199565],"msr_impact_theme":[],"_links":{"self":[{"href":"https:\/\/www.microsoft.com\/en-us\/research\/wp-json\/wp\/v2\/msr-project\/611574"}],"collection":[{"href":"https:\/\/www.microsoft.com\/en-us\/research\/wp-json\/wp\/v2\/msr-project"}],"about":[{"href":"https:\/\/www.microsoft.com\/en-us\/research\/wp-json\/wp\/v2\/types\/msr-project"}],"version-history":[{"count":11,"href":"https:\/\/www.microsoft.com\/en-us\/research\/wp-json\/wp\/v2\/msr-project\/611574\/revisions"}],"predecessor-version":[{"id":879537,"href":"https:\/\/www.microsoft.com\/en-us\/research\/wp-json\/wp\/v2\/msr-project\/611574\/revisions\/879537"}],"wp:attachment":[{"href":"https:\/\/www.microsoft.com\/en-us\/research\/wp-json\/wp\/v2\/media?parent=611574"}],"wp:term":[{"taxonomy":"msr-research-area","embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/research\/wp-json\/wp\/v2\/research-area?post=611574"},{"taxonomy":"msr-locale","embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/research\/wp-json\/wp\/v2\/msr-locale?post=611574"},{"taxonomy":"msr-impact-theme","embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/research\/wp-json\/wp\/v2\/msr-impact-theme?post=611574"},{"taxonomy":"msr-pillar","embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/research\/wp-json\/wp\/v2\/msr-pillar?post=611574"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}