Community Server

  • Subscribe to our RSS feed.
  • Twitter
  • StumbleUpon
  • Reddit
  • Facebook
  • Digg

Tuesday, 7 August 2012

D3JS: A new area of dashboarding

Posted on 11:06 by Unknown
D3JS: A new area of dashboarding

Is this the start of a new era for dashboard generation?

What has been happening so far:
Business intelligence software providers: each of them have their own dashboard implementation - if you are lucky, they make use of open standards. Some of these dashboards look quite dated nowadays, they are very restricted in what can be achieved. And there are also some new cool kids on the block which offer fancy visualisation.

If you created your dashboard from scratch using one of the open standards, you would have probably still reached for dedicated charting libraries.

Now working with charting libraries is in the beginning usually quite easy. You define all the attributes and throw the data at it and it will nicely render what you asked for. You get what you want in quite a short amount of time. But then, what happens if you want to move beyond these ‘out-of-the-box’ functionality? Customization is usually the tricky bit.

Now somebody out there had a quite clever idea: Why not get rid of all the restrictions. Let’s start something from scratch which is based on open standards (HTML5), does not use any charting libraries at all and allows you to create everything you ever envisioned. Sounds too good to be true?

Take a piece of paper. Take a pen. Draw something. You can draw anything. Right?
Write some SVG (Scalable Vector Graphic) “code” (or use Inkscape). You can draw anything. Right? [And imagine you can also animate all of this as well]

What’s the limit?

Now if we could only have data drive these drawings (and HTML tags).

You are lucky: You have a new best friend: Data Driven Documents, short D3 (or D3js).

Data Driven Documents:

Provides an API which allows you to dynamically manipulate the DOM structure of your HTML file. This includes any standard HTML (for example a table) as well as SVG. D3 also provides functions to easily create complex SVG elements (paths for pie charts in example). This is just some of it, there’s more covered in their API reference.

Over the last few weeks I went through several examples and tutorials which are available online and I am deeply impressed! Based on these examples I put together a dashboard with a pie, bar and line chart and an HTML table. The end user can click on a piece of the pie chart and the bar and line charts will be updated respectively. The min and max dots of the bar charts will be highlighted automatically. There is also some animation included. It’s a simple demo to illustrate the potential.  My code could be improved further, but I am running out of time:

Click here to see the simple dashboard in action (Modern Web Browsers required)

Charts as well standard text and table elements can be styled centrally by using CSS. In the past, having worked with various dashboard and report technologies, I always disliked it when I had to define global styles for charts separately - and in most of the cases this feature wasn’t even available. Now, D3js and HTML5 make this finally possible! The setup is extremely simple, your only dependency on the server side is the D3js library and on the client side a modern web browser. You can use standard web development tools to create your dashboard. These are just a few of the advantages.

Resources

I strongly recommend checking out the example code and tutorials which are available online, in example on the D3js site. Scott Murray’s tutorial is one of the best tutorials I have come across in recent times. Jump in and enjoy the advantages of D3js!
Email ThisBlogThis!Share to XShare to Facebook
Posted in D3JS, Dashboarding, HTML5, SVG | No comments
Newer Post Older Post Home

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Popular Posts

  • Pentaho Kettle Parameters and Variables: Tips and Tricks
    Pentaho Kettle Parameters and Variables: Tips and Tricks This blog post is not intended to be a formal introduction to using parameters and ...
  • Using Parameters in Pentaho Report Designer
    Using Parameters in Pentaho Report Designer Introduction How to define a parameter Additional info about the new parameter dialog Hidden Par...
  • Pentaho Data Integration: Scheduling and command line arguments
    Pentaho Data Integration (Kettle): Command line arguments and scheduling Tutorial Details Software: PDI/Kettle 4.1 (download here ), MySQL S...
  • Jaspersoft iReport: How to pass a parameter to a sub-dataset
    Jaspersoft iReport: How to pass a parameter to a sub-dataset Let’s say our main report is grouped by continent and the details band holds sa...
  • Using regular expressions with Pentah...
    Using regular expressions with Pentaho Data Integration (Kettle) There are quite some transformations steps that allow you to work with regu...
  • Pentaho Data Integration and Infinidb Series: Bulk Upload
    Pentaho Data Integration and InfiniDB Series: Bulk Upload Introduction Prepare Tables Using mainly Kettle steps Check if file exists Setup I...
  • Pentaho Data Integration: Remote execution with Carte
    Pentaho Data Integration: Remote execution with Carte Tutorial Details Software: PDI/Kettle 4.1 (download  here ), installed on your PC and ...
  • How to create a loop in Pentaho Kettle
    I finished my first ever video tutorial! This video will demonstrate you how easy it is to create a loop in Pentaho Kettle. Enjoy!
  • Metadata Driven ETL and Reporting
    Metadata Driven ETL and Reporting with Pentaho Data Integration and Report Designer Tutorial Details  Software : If PDI Kettle 4.2 GA and PR...
  • Understanding the Pentaho Kettle Dimension Insert/Update Step Null Value Behaviour
    We will be using a very simple sample transformation to test the null value behaviour: We use the Data Grid step to provide some sample dat...

Categories

  • "Bulk Loader"
  • "Bulk Loading"
  • "Hadoop"
  • "Kettle"
  • "Pentaho Book"
  • "Pentaho Data Integration"
  • "Pentaho Kettle"
  • "Pentaho Report Designer MDX MQL JDBC Parameters How To"
  • "Pentaho Report Designer MDX Parameters"
  • "Pentaho Report Designer MQL Parameters"
  • "Pentaho Report Designer Parmaters"
  • "Pentaho Report Designer"
  • "Pentaho Reporting 3.5 for Java Developers"
  • "Pentaho Reporting Book"
  • "Routing"
  • "Schema Workbench"
  • "Testing"
  • "Unicode"
  • "Unit testing"
  • "UTF8"
  • Agile development
  • automated testing
  • Big Data
  • Book Review
  • C-Tools
  • CBF
  • Clustered transformation
  • Command Line Arguments
  • Community Build Framework
  • D3JS
  • Dashboarding
  • Data Integration
  • Data Warehouse
  • Database Change Management
  • Database Version Control
  • Date Dimension
  • DBFit
  • ETL
  • ETLFit
  • Federated database
  • Google Charts
  • Google Visualization API
  • Hadoop
  • HTML5
  • iReport
  • JasperReports
  • JasperSoft
  • JasperStudio
  • Kettle
  • Kimball
  • Loop
  • Master data management
  • Metadata
  • Metedata editor
  • Mondrian
  • multidimensional modeling
  • OLAP
  • Open Source
  • Parameter
  • Parameters
  • Pentaho
  • Pentaho BI Server
  • Pentaho Data Integration
  • Pentaho Data Integration 4 Cookbook
  • Pentaho Kettle
  • Pentaho Metadata Editor Tutorial
  • Pentaho Report Designer
  • PostgreSQL
  • PRD
  • Report Layout
  • REST
  • Routing
  • Saiku
  • Scheduling
  • Slowly Changing Dimension
  • Sqitch
  • SVG
  • Talend
  • Talend MDM
  • Talend Open Studio
  • Tutorial
  • Variable
  • Web service
  • Xactions

Blog Archive

  • ►  2013 (24)
    • ►  December (2)
    • ►  November (3)
    • ►  October (2)
    • ►  September (1)
    • ►  August (3)
    • ►  July (2)
    • ►  June (1)
    • ►  May (2)
    • ►  April (1)
    • ►  March (3)
    • ►  February (1)
    • ►  January (3)
  • ▼  2012 (20)
    • ►  November (3)
    • ►  October (3)
    • ▼  August (1)
      • D3JS: A new area of dashboarding
    • ►  June (1)
    • ►  April (1)
    • ►  March (3)
    • ►  February (5)
    • ►  January (3)
  • ►  2011 (19)
    • ►  November (3)
    • ►  July (2)
    • ►  June (1)
    • ►  May (4)
    • ►  April (2)
    • ►  March (1)
    • ►  February (3)
    • ►  January (3)
  • ►  2010 (17)
    • ►  December (1)
    • ►  November (6)
    • ►  September (1)
    • ►  August (1)
    • ►  June (2)
    • ►  May (1)
    • ►  April (3)
    • ►  February (1)
    • ►  January (1)
  • ►  2009 (18)
    • ►  December (3)
    • ►  November (1)
    • ►  October (5)
    • ►  September (7)
    • ►  July (2)
Powered by Blogger.

About Me

Unknown
View my complete profile