DEV Community

Alexander Karlsson for Qlik Branch

Posted on • Originally published at branch-blog.qlik.com

7 4

Qlik ❤ D3

Chances are that if you have seen a piece of data visualization on the web you have come across D3. It’s heavily used by organizations like The New York Times to produce wonderful graphics that engage their readers and enhances their stories.

TL;DR Together with Qlik you can create very lean data visualizations using D3, letting D3 bind the data to the DOM and draw visualizations. Letting Qlik perform the heavy lifting in terms of data manipulation and a reactive data flow, abstraction away data state management from D3.

d3 example on GitHub

Sample project: https://github.com/mindspank/d3-blogpost-example


Ironically, while you can create wonderful data visualizations using D3 it is not a data visualization library. It has no bar chart or line chart methods. Instead it focuses on binding data to the DOM and performing manipulations of the document based on data. The data binding paired with additional components such as layout algorithms and components such as scales and axis makes it a perfect library for general purpose data visualization.

Where D3 suffers is when you have many visualizations on the page that you want to keep in sync, manipulating larger data sets and having to fetch the full data sets to calculate a proper scale.

// Looks familiar?
d3.scaleLinear()
    .range([height, 0])
    .domain([0, d3.max(data, function(d) { return d.value; })]);
Enter fullscreen mode Exit fullscreen mode

Qlik to the rescue!

Luckily the Qlik Associative Engine is a blazingly fast in-memory computation engine that provides tons of useful metadata around your data geared towards building visualization components.

By letting Qlik take care of the data computation you can omit heavy data wrangling on the client and push those calculations onto the server, leaving you with very lean front-end code that focuses on what D3 does best; binding data to the DOM and outputting a visualization representation of that data.

To cherry pick a few nuggets that Qlik gives you out of the box:

  • Minimum and maximum values for calculations for scale inputs
  • Glyph counts for the longest dimensional value for label widths
  • Data reduction for “glanceable” visualizations
  • Server-side configurable sorting and formatting

Most of the points above D3 handles quite fine, however for larger datasets it’s quite taxing on the browser to crunch all those numbers.

However, for me personally, the biggest win is that I can write code that is readable, neat and doesn’t mutate my data.

API Trace View

How I Cut 22.3 Seconds Off an API Call with Sentry

Struggling with slow API calls? Dan Mindru walks through how he used Sentry's new Trace View feature to shave off 22.3 seconds from an API call.

Get a practical walkthrough of how to identify bottlenecks, split tasks into multiple parallel tasks, identify slow AI model calls, and more.

Read more →

Top comments (0)

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay