Tag Archives: data vizualization

DataVizDC Meetup: Images, Resources & Audio Recording

Last night I had the opportunity to give a presentation on Data Visualization With Web Standards to the DataVizDC meetup group. First of all, I’d like to thank the meetup group for hosting the event, and thank you to everyone who attended – It was a great event thanks to the excitement and energy brought by each of you. I promised to post a video recording, but unfortunately the video feed didn’t turn out (due to an error on my part).  Luckily, I was able to save the audio feed, which you can listen to here:

You can access my presentation slides at the links below.  Just use the “space” key to advance each slide.

You can also view all the associated resources from the presentation at:

Here are just a few images from the event, and you can find more presentation details below:

001 photo-1 photo-2 photo-3

Key Takeaways

Here are links to the Adobe HTML resources I mentioned at the beginning of the presentation.

Here is a direct link to the simple interactive data experience that was created using Adobe Edge Animate (also available for download in the Edge Animate Showcase):

Edge Animate Data Sample

Visualization Techniques

<img>

You can embed images using the html <img> element 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

Gun Violence Visualization – Please, let’s not discuss the politics.

HTML5 Canvas Scatterplot with Histogram (50K data points)

HTML5 Canvas Chart – Asteroids Analysis

HTML5 Canvas – Three.js 3D Chart


Scalable Vector Graphics (SVG)

SVG is a declarative XML-based markup language that is used to create vector graphics content, and can be used to create visual content inside of 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

SVG – James Bond Visualization

SVG – Sankey Diagrams

SVG – Connected Scatterplots

SVG – Bullet Charts


HTML DOM Elements

Visualizations such as interactive maps, or simple 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 w/ Arms Trading Data

WebGL – New Google Maps

WebGL – World Population

WebGL – Sample Visualization (could be used for molecule structure)


Interactive Coding

I also put together several interactive/editable samples for demonstrating basic visualization techniques.  You can preview all of these samples on my Data Visualization Collection on Codepen.io.

Interactive Coding in the Browser on CodePen.io

Interactive Coding in the Browser on CodePen.io

Enjoy!

Video: Data Visualization With Web Standards

Last week I had the opportunity to present “Data Visualization With Web Standards” to the Data Visualization New York Meetup group.  There was a great turnout, and thanks to everyone who attended.  I’d like to especially thank Christian Lilley and Paul Trowbridge for organizing the event.

My presentation focused on the fundamental techniques of visualizing data within HTML/JS experiences.  You can view my presentation in its entirety below.  Slides and bullet points are below the fold…

Entire meetup video available here.

My slides are available below.  Just press the space bar to advance to the next “slide”.

data_viz

Key Points

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:


Scalable Vector Graphics (SVG)

SVG is a declarative XML-based markup language that is used to create vector graphics content, and can be used to create visual content inside of 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:


HTML DOM Elements

Visualizations like interactive maps, or simple 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.

Samples:


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:

Feel free to leave a comment with any questions.
Enjoy!

Data Visualization with Web Standards

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.

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:


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:


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:

Feel free to leave a comment with any questions.
Enjoy!