BI Trends

How to Enhance Your Dashboards with a D3 Visualization

By Logi Analytics
Share on LinkedIn Tweet about this on Twitter Share on Facebook

Adding a D3 visualization to your analytics is a great way to make your data visualizations pop.

What is D3? Data-Driven Documents (D3.js) is an open source Javascript library designed to manipulate data and tell a compelling visual story on a web browser. It is built on open standards such as HTML5, SVG, and CSS, giving developers full control over the user interactions and the resulting data viz.

Why the Hype?

What makes a D3 visualization exciting is that it binds data directly to the Document Object Model (DOM) and gives you the tools to manage changing streams of data. By manipulating the data stream and applying it to Scalable Vector Graphics (SVG)—or to HTML for simpler visuals—D3 creates powerful interactive and dynamic visual components on the browser. It also allows for code reuse through a diverse collection of components and plugins.

Can I Extend My Logi Analytics Visuals with D3?

Logi Analytics provides a flexible framework to integrate with third-party data visualization tools such as a D3 data visualization. Logi Info, our embedded analytics platform, comes with pre-built advanced charting, heat maps, gauges, GIS maps, and other data visualizations to minimize the need for custom coding.

In certain cases, your specific requirements may extend beyond Logi’s out-of-the-box functionality. When such a need arises, our open web architecture gives you an unmatched flexibility to customize your visuals. Logi is built for white labeling, so for end users the experience will be complete seamless: They won’t be able to tell which components are Logi and which are custom.

D3 in Action

We designed an interactive chart using a D3 visualization within our Logi Analytics framework, which you can see in the insurance dashboard in our Visual Gallery. Users can adjust the parameters to explore sample demographics for the insurance industry.

D3 visualization of Logi

How Does Logi Analytics Framework Support D3?

Logi Info allows developers to take advantage of scripting objects and functions in their Logi applications. Developers can use the Include Script element in Report Definition to specify a third-party script library like D3.js and configure their attributes. This definition allows for reuse as well, since custom external libraries can be shared and reused in different Logi applications.

How would I tie data in Logi Analytics to integrate into D3 visualization charts?

To tie live data into the visuals, a developer would use Data Definition in Logi Info Applications. Data Definition allows the developer to retrieve data from different data sources, manipulate it, and then make it available as a JSON data stream. The developer would then use D3 to consume the JSON data stream and create the visual output.

What should I keep in mind when considering D3?

  • Code from Scratch: D3 does not come with a set of pre-built data visualizations. It aims to be low-level and flexible, which means a lot of coding from scratch. Some of the functionality that you would get with Logi’s standard visuals will not be extended automatically to your custom visual. For instance, when the data is refreshed, our standard charts would automatically update. This is a functionality you will have to program manually for your custom chart.
  • Communication with other Logi components: You must have a clear understanding of the interactions between components between components, especially if your visual is interacting with other Logi objects on the page.
  • Cross-Browser Testing: A D3 visualization only works with modern browsers, so make sure to do a lot of cross-browser testing.

Is Logi Analytics looking to offer more visuals built in D3?

Yes! Logi Analytics is starting to offer more support for D3, which will be fully loaded with our functionality.

In the meantime, check out Logi’s current visual gallery to see a range of interactive, real-world data visualization examples from different industries.


Originally published January 6, 2017; updated on July 5th, 2019

About the Author

Logi Analytics is the leader in embedded analytics. We help team put business intelligence at the core of their organizations and products.