Skip to main content link. Accesskey SBanner Product Logo
  • OpenNTF

keithstric.com

  • Home
  • Full Archive
  • Downloads
submit search
BlogSphere dojo Domino Family Fun Holiday How-To Java Linux Lotus Notes LotusPhere Mac Misc Movies OpenSource PHP Projects Reef SnTT Soapbox Technology Website Windows XBlog XPages
  • Full Posts
  • Comments
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012

Full Archive
  • : Chris Toohey
  • : David Leedy
  • : Declan Lynch
  • : John Jardin
  • : Karsten Lehmann
  • : Mark Leusink
  • : Niklas Heidloff
  • : Nathan Freeman
  • : Patrick Kwinten
  • : Per Henrik Lausten
  • : Peter Presnell
  • : Red Pill Development
  • : Stephan Wissel
  • : Tim Tripcony

 

Prominic.NET

 

  • Email: Keith Strickland
  • Facebook: Keith Strickland
  • Bleed Yellow: Keith Strickland
  • LDD: Keith Strickland
  • Resume for Keith Strickland
  • About Me

  • scrollable.nsf
  • mobileevent.nsf
  • fullCalendar.nsf
  • MIMEBean.nsf
  • imgImport.nsf

All Downloads

The opinions and ideas posted on keithstric.com are not necessarily the opinions and ideas of my employer. The solutions, techniques and code provided here are not guaranteed or warranted in any way and are free for you to use at your own risk.


Creative Commons License
keithstric.com is licensed under a Creative Commons Attribution 3.0 Unported License.
Based on a work at www.keithstric.com.


All code samples and downloads are copyright Keith Strickland and licensed under Apache License 2.0

I am honored to be a 2013 IBM ChampionHomekeithstric.com moved back to Prominic

D3.js - Data Driven Documents

Keith Strickland Dec 15, 2012 Tags:JavascriptXPagesD3.js 538 Views 2 Comments

I've recently started playing with a very powerful Javascript library called D3.js. D3 is for visualizing data either in charts, force layout graphs, data plots or whatever you can imagine. I'm not really sure what the point of this post is as I really can't show you yet what we're using it for. But I can show some of the things that it's capable of.  

Let's first look at a Force Directed Layout. These are usually used to show hierarchical data and the way D3 handles them is very cool looking. You can also include labels, pop ups, etc for the nodes on the plot. If you're really interested in this you can find all kinds of examples.

Next up is charts. D3 makes some beautiful charts that are interactive and zoomable. 

  • Zoomable Area Chart
  • Bar Charts
  • ScatterPlot Charts
  • Donut Charts
  • Pie Charts

D3 is also capable of Geo Spatial type visualizations, showing data based on a location and some of these are very cool, with spinning globes and such. I saw one in a video that was generating random plots on the spinning globe but can't seem to find it. One of the best I've seen is the NY Times depiction of the Election Results down to the county level of the entire U.S.

Here are a few other cool visuals

  • Dendrogram
  • The Health and Wealth of Nations
  • Bubble Chart
  • Radial Tree
  • U.S Unemployment By County

D3 excels at animating data in a visually pleasing way. If you have static data, it can represent that, but that's not where it excels. Also, the learning curve is quite steep, well more like a brick wall. The main concept in D3 is you tell it what to do with data as it's made available. One of the speakers I listened to said

If you're looping over data in D3, then you're doing it wrong. 

D3 visualizations are placed on an SVG area and then you place circles, rectangles, images, icons, etc. on that SVG area and define what to do with them when a new one arrives. You don't have to figure out the x,y coordinates yourself, let the platform handle that for you.

If you need to represent data visually then I highly recommend you take a look at D3.js. To get started take a look at their tutorials section. There are many good resources there to get you up and running quickly. While I am certainly no expert on D3 I have recognized that it's very powerful, stable and quick to use. Most of the visualizations I've done only took a day or less and they came out looking quite nice. I will admit  that my first ones looked horrible, but with practice they get nicer and nicer. There also seems to be a fairly active community on StackOverflow if you get stuck.


Post your Comment
Comments (2):

Patrick Kwinten
1 Re: D3.js - Data Driven Documents
On: December 15, 2012 01:13 PM
please provide us with some awesome code exaples

Keith Strickland
2 Re: D3.js - Data Driven Documents
On: December 15, 2012 01:16 PM
As soon as I can I totally plan to. Plus I would like to get a little more proficient with the platform before I do that. I'm still a total newb tweaking other people's examples to fit it into what I'm trying to do.
Powered by XBlog - The XPages Blog Platform


/A55BAC/keithstric.nsf/