I have been tinkering quite a bit with new database and development frameworks. Recently I decided to beef up my knowledge of data visualization as it’s a very hot topic and the ultimate way to make your data understood.
R is an incredibly popular option which can be as simple or as complex as you want it to be, showing incredibly detailed charts, tables, and more. However, I wanted to find something which was 100% web based and interactive, as this is the easiest way to really show your data visualization creations to the masses and put it to best use in dashboards or other sites.
So, enter D3.js. This incredible package is built in JavaScript with interactive components similar to jQuery but adding the drawing, math, and tweening capabilities necessary to build highly complex data visualizations. Anything that can be made with paths, shapes, and colors is possible as you can see on their example page. Personal favorites are the Streamgraph, Cubism, and concept network browser.
But in honor of Pi Day and due to its hierarchical capabilities, I decided to go with an interactive Sunburst. A Sunburst chart is a data visualization method similar to a pie or donut chart but with additional layers for child data. In the case of my tinkering, I decided to create one which includes:
- Oracle Schemas
- Object Types
- Objects
Each of these components is represented along with its respective size in MB. Even cooler, you can click on a component to drill down into it and click the center of the circle to zoom out. All of this was accomplished with no Flash, and it is tested on Chrome, Firefox, Safari, Internet Explorer, and iOS. Chrome and Safari definitely handle it best, but the other browsers appear to work fine. However, if you are reading this from a news aggregator like Oracle Base or OraNA you may need to click over to my actual site or use the full page demo link below.
The original D3.js example on Sunburst charts can be found here. I also took concepts from this page for zooming. The JSON supplying the data was created using the Alexandria PL/SQL Library which includes SQL to JSON capabilities. Alternatively you can use CSV, TSV, and XML to populate D3.js charts. It is worth noting that a decent amount of JavaScript knowledge is needed to really grasp what the code is doing. D3.js makes heavy use of attribute chaining like jQuery which is powerful but sometimes difficult to read and understand.
If you don’t see the example below then there may be a compatibility issue I’m not aware of; please post it in the comments! You can also try my full page demo which may work better for you. You can also view source on the full page demo to see everything I did to make it come together, or just click here.
Be sure to hover over different areas on the chart (labels show underneath) and click around! You can always click the center circle to zoom out.
Sunburst Data Visualization