Revolutionizing Chart Creation for Improved Data Visualization
"Explore a comprehensive overview of the innovative approach to creating interactive charts and visuals by Anders Olsen, focusing on user needs, business requirements, and goals for enhanced data representation and chart accessibility."
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
Interactive charts Learnings Anders Olsen/Designer
Charts on scb.se Charts are and were created mostly as images A lot of Excel based charts Charts are mostly not updated, instead new are created Old charts have old brand colors
Charts on scb.se Rules for design but up to editors and statisticians to implement Low usability Low accessibility No connection to PX Web data
User needs Trustworthy Up to date Easy to understand Use the data Accessible Investigate data
Business need Easy to create Easy to maintain Easy to create good and accessible charts Unified brand experience Editors and statisticians can both create charts
Proof of concept First version created for Sweden in numbers (2015)
Interactive charts for editorial content
Goals Create once Updated when data is updated Improvements in design and usabilityshould benefits all charts Handle both database and Excel data Handle in same system as page content (EpiServer CMS) Make PX Web integrated part of chart experience
Our reasons for chosing Highcharts Novice to medium levelweb developers Easy to understand API Mature framework You get a lot out of the box Easy to handle colour schemes Easy to set generic chart rules
Component for visualizing as tables and charts Chart toolis built as component in CMS Handles 9 diagram types + variants Data in Excel or database Available in selected content types Basic to medium chart complexity Design and accessibility for free when using the component
Stats Re-released autumn 2018 for content type Fast facts Version 1.1 released autumn 2019 1,5 million views per year on pages where we use interactive charts the most 900 000 mobile view per year for the same pages During Corona outbreaksome of these pages have 5-6000 visits per day
Kommuner i Siffror / Statistic on municipalities
Goals Let users compare and view key statistics for municipalities App experience Mobile first Location based Adhere to social media branding and simplified charts Delivery within limited timescope (2 months)
Data API based queries Caching strategy for each municipality
SVG Easy to read and code Control over presentation Control over accessbility Scalable by default Possible to controlanimation in granular way Little need for helper libraries
Links Tabels from Excel and SSD, Charts from SSD https://www.scb.se/hitta-statistik/sverige-i-siffror/manniskorna-i-sverige/fodda-i- sverige/ Line and bar charts https://www.scb.se/hitta-statistik/sverige-i-siffror/manniskorna-i- sverige/skilsmassor-i-sverige/ https://www.scb.se/hitta-statistik/sverige-i-siffror/manniskorna-i-sverige/doda-i- sverige/ Municipality statistics https://kommunsiffror.scb.se/
Editors Editors needs educating in chart design and use of component Workflow needs to be smooth Have to rebuild charts made by statisticians in Excel from SSD data Access restricted to editors only
Development and IT Developer team not stable Team with very broad responsibility Skillgaps in frontend coding No dedicated or dev op for web untilrecently Strategy for web developmentwere for a long time based on EpiServer and old schoollibraries like jquery
Highcharts Expectations on how data is structured that doesn t match own data High entry levelto workwith JSON stat Lack of controlover presentation Hard to override and accomplish specific chart behaviour Have their own view of what accessibilityfor charts should be Closed source, pay for developer accounts Takes a lot of time when developing outside of regular highchart frames
SVG Takes time to code without library support A new API to learn Medium levelfrontend skills probably needed
Design Limitations from tool Limitations in possibilty to implement design Could not design for embedded use Hard to get answers on strategic IT questions which limits design descisions
Business Understand value of benefits of publishing data to database Understand importance of chart work Get a stable workflow around charts Find an acceptable quality for charts No driver for chart strategies
Project Scoped delivery to handle simple charts in first release Second release mostly new chart types and Excel data capabilities Change of priority within project Quality levelfor charts and component not agreed upon. Design and development separate teams on seperate locations Unstable development team
Component based charts Impact of changes has broad reach Control over quality Control over presentation Huge improvement in usability and accesibility Part of CMS editor experience
Saved query and data through API Charts may update on data changes Saved query allows for many output options API allows for flexible queries Allows us to make PX Web part of user experience
Starting up dedicated work groups Design and strategies Development and architecture Will take ownership of quality and strategies for chart work
Statistics on regional level Drive development towards API based charts Compare and view by municipality (released) Statistics that can be viewed on different regional levels Serve as learning for the next step for interactive charts
Next version of interactive charts Will be more strategic tied Based on learnings from this first releases of Epibased component
Contact Anders Olsen, Designer
