DZone
Web Dev Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > Data Visualization with Web Standards

Data Visualization with Web Standards

Andrew Trice user avatar by
Andrew Trice
·
May. 03, 12 · Web Dev Zone · Interview
Like (0)
Save
Tweet
6.78K Views

Join the DZone community and get the full member experience.

Join For Free

i recently spoke at the 360|flex conference in devner, co on “data visualization with web standards”.  this presentation was focused upon techniques for presenting data in an easily-consumable visual manner using only html, css and javascript.  below you can view my presentation slides and a brief summary.

  • web-standards-data-viz.pdf

basically, there are 5 general ways to visualize data using web-standards techniques – here is a brief overview with pros & cons:


<img>

you can embed images using the html <img> that have server-rendered data visualizations. this is nothing new… they are very basic, but will certainly work.

  • not interactive
  • requires online & round-trip to server
  • no “wow” factor – let’s face it, they are boring
  • example: google image charts

html5 <canvas>

you can use the html5 <canvas> element to programmatically render content based upon data in-memory using javascript. the html5 canvas provides you with an api for rendering graphical content via moveto or lineto instructions, or by setting individual pixel values manually.  learn more about the html5 canvas from the mdn tutorials .

  • can be interactive
  • dynamic – client side rendering with javascript
  • hardware accelerated on some platforms
  • can work offline
  • works in newer browsers: http://caniuse.com/#search=canvas

demos:

  • rgraph – open source charting library using html5 <canvas>
    • examples
  • “one million points” scatter plot – let the page load, then use the mouse to click and drag regions to “drill into”.   this is a live visualization that shows a scatter plot with a histogram for massive data sets by manipulating individual pixels.
    • demo with 50,000 data points
    • demo with 1,000,000 data points
    • source code
  • “lil doodle” ios app .  this is not data visualization, just shows you programmatic drawing using html5 canvas.

vector graphics (svg)

vector graphics can be used to create visual content in web experiences.

  • client or server-side rendering
  • can be static or dynamic
  • can be scripted with js
  • can be manipulated via html dom
  • works in newer browsers (but not on android 2.x and earlier): http://caniuse.com/#search=svg

demos:

  • “ us census browser ” – multi-platform phonegap application showing enterprise-class data visualization using web standards techniques.
  • d3.js data visualization framework
  • raphael.js data visualization framework
  • highcharts data visualization libarary
  • sencha touch charts
  • kendo ui dataviz

html dom elements

visualizations like simple bar or column charts can be created purely with html structures and creative use of css styles to control position, visual presentation, etc… you can use css positioning to control x/y placement, and percentage-based width/height to display relative values based upon a range of data.   for example, the following bar chart/table is created purely using html div containers with css styles.


webgl

webgl is on the “bleeding edge” of interactive graphics & data visualization across the web. webgl enables hardware-accelerated 3d graphics inside the browser experience. technically, it is not a standard, and there is varied and/or incomplete support across different browsers ( http://caniuse.com/#search=webgl ).  there is also considerable debate whether it ever will be a standard; however there are some incredible samples out on the web worth mentioning:

  • webgl globe
  • global temperature anomalies
  • realtime color histogram

feel free to leave a comment with any questions.
enjoy!

Data visualization

Published at DZone with permission of Andrew Trice, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Augmented Analytics: The Future of Business Intelligence
  • Refactoring Java Application: Object-Oriented And Functional Approaches
  • AMI and Snapshot Management Using AWS Lambda
  • Creating a Spring Boot Project With Eclipse and Maven

Comments

Web Dev Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo