Welcome!

Microsoft Cloud Authors: Pat Romanski, Andreas Grabner, Nick Basinger, Kevin Benedict, Liz McMillan

Related Topics: Microsoft Cloud

Microsoft Cloud: Blog Post

How D3 Can Help You Build Effective Data Visualizations

How D3 can help you build effective data visualizations

Data Visualization is the method of consolidating data into one collective, illustrative graphic. Traditionally, data visualization has been used for quantitative work, but ways to represent qualitative work have been shown to be equally powerful. The main goal of data visualization, is to communicate information clearly and effectively through graphical means. That doesn't mean that it needs to look boring to be functional or extremely sophisticated to look beautiful. In order to achieve a balance, both aesthetics and functionality need to go hand in hand. At Logentries, we realize the importance of data visualization and how it can help to communicate information to users of the system.

In my previous post "How to combine D3 with Angular JS" I focused mostly on writing code which combines both D3 and AngularJs, and not so much on the actual D3 part, which is responsible for creating graphs. In this post I will demonstrate how D3 can help to build effective graphical representations of data, and I will give a few tips to use when building them.

A bar chart is one of the most effective graphs for communicating information to a user.One axis of the chart shows the specific categories being compared and the other axis represents a discrete value. Even though a bar chart is a very simple graph, it can be very powerful in communicating the information, but sometimes developers tend to forget their basic characteristics when creating them. In today's world where everything which is developed for websites needs to be made responsive. Graphs are used to represent dynamic data and the graph will need to adapt to how this data can change over time.

For example, based on the browser window the graph will need to be scaled. Not only the bars themselves will need to be resized but also other components of the graph such as scales, labels, titles and bars will all need to be resized.

Sometimes, better visualization of the data can actually be done by taking some of the components out , e.g. if the labels on the bottom axis are starting to overlap, rather than rotating them, we could take them out completely and put them in a tooltip. By doing so, we are still preserving information in a tooltip and we are not cluttering the graph with too much information.

d3 data visualizations

This was all theory, so now lets look at how can we build a graph like that in D3. Personally, when I am writing code in D3 I like to put all separate parts of the code in appropriate methods. This can be very helpful when you come back to the code in the future, or when someone else needs to work on the code.

D3.js-Logo

Some components of the code can be made global, so all of the methods can access it easily; like the main SVG element which we are appending the graph to. Looking at the picture above, we have six methods, each one responsible for a different component of the graph. We will have a closer look at the resize method.

When resizing the graph, we need to set the current width and height to the new width and height. Then we need to remove titles and create them again with new dimensions. The main SVG element will also need to be resized with a new width and height. For the purpose of this example, if the width is less than 600 pixels I remove the x-axis, so that the labels will not overlap, but we also have to remember that if the resizing happens again, and the width is greater than 600, we need to make the axis visible again. We could cleverer about this and calculate if at least one label is greater in size than the width of one column then this means the label will overlap and we would remove the axis.

using d3 for data visualizations

The code below shows how can we handle label overlapping more effectively. We can perform three actions with labels:

  1. If there is enough space for all of the labels, display them all
  2. If there is not enough space for at least one label, check if there is space for rotating the labels
  3. If both options fail, then we can completely hide labels

D3 overlapping

I hope this post has shown the value of D3 in doing this manipulation during resizing of different elements and that there are other steps we can take to be clever in designing and developing graphs.

More Stories By Trevor Parsons

Trevor Parsons is Chief Scientist and Co-founder of Logentries. Trevor has over 10 years experience in enterprise software and, in particular, has specialized in developing enterprise monitoring and performance tools for distributed systems. He is also a research fellow at the Performance Engineering Lab Research Group and was formerly a Scientist at the IBM Center for Advanced Studies. Trevor holds a PhD from University College Dublin, Ireland.

IoT & Smart Cities Stories
The platform combines the strengths of Singtel's extensive, intelligent network capabilities with Microsoft's cloud expertise to create a unique solution that sets new standards for IoT applications," said Mr Diomedes Kastanis, Head of IoT at Singtel. "Our solution provides speed, transparency and flexibility, paving the way for a more pervasive use of IoT to accelerate enterprises' digitalisation efforts. AI-powered intelligent connectivity over Microsoft Azure will be the fastest connected pat...
There are many examples of disruption in consumer space – Uber disrupting the cab industry, Airbnb disrupting the hospitality industry and so on; but have you wondered who is disrupting support and operations? AISERA helps make businesses and customers successful by offering consumer-like user experience for support and operations. We have built the world’s first AI-driven IT / HR / Cloud / Customer Support and Operations solution.
Codete accelerates their clients growth through technological expertise and experience. Codite team works with organizations to meet the challenges that digitalization presents. Their clients include digital start-ups as well as established enterprises in the IT industry. To stay competitive in a highly innovative IT industry, strong R&D departments and bold spin-off initiatives is a must. Codete Data Science and Software Architects teams help corporate clients to stay up to date with the mod...
At CloudEXPO Silicon Valley, June 24-26, 2019, Digital Transformation (DX) is a major focus with expanded DevOpsSUMMIT and FinTechEXPO programs within the DXWorldEXPO agenda. Successful transformation requires a laser focus on being data-driven and on using all the tools available that enable transformation if they plan to survive over the long term. A total of 88% of Fortune 500 companies from a generation ago are now out of business. Only 12% still survive. Similar percentages are found throug...
Druva is the global leader in Cloud Data Protection and Management, delivering the industry's first data management-as-a-service solution that aggregates data from endpoints, servers and cloud applications and leverages the public cloud to offer a single pane of glass to enable data protection, governance and intelligence-dramatically increasing the availability and visibility of business critical information, while reducing the risk, cost and complexity of managing and protecting it. Druva's...
BMC has unmatched experience in IT management, supporting 92 of the Forbes Global 100, and earning recognition as an ITSM Gartner Magic Quadrant Leader for five years running. Our solutions offer speed, agility, and efficiency to tackle business challenges in the areas of service management, automation, operations, and the mainframe.
The Jevons Paradox suggests that when technological advances increase efficiency of a resource, it results in an overall increase in consumption. Writing on the increased use of coal as a result of technological improvements, 19th-century economist William Stanley Jevons found that these improvements led to the development of new ways to utilize coal. In his session at 19th Cloud Expo, Mark Thiele, Chief Strategy Officer for Apcera, compared the Jevons Paradox to modern-day enterprise IT, examin...
With 10 simultaneous tracks, keynotes, general sessions and targeted breakout classes, @CloudEXPO and DXWorldEXPO are two of the most important technology events of the year. Since its launch over eight years ago, @CloudEXPO and DXWorldEXPO have presented a rock star faculty as well as showcased hundreds of sponsors and exhibitors! In this blog post, we provide 7 tips on how, as part of our world-class faculty, you can deliver one of the most popular sessions at our events. But before reading...
DSR is a supplier of project management, consultancy services and IT solutions that increase effectiveness of a company's operations in the production sector. The company combines in-depth knowledge of international companies with expert knowledge utilising IT tools that support manufacturing and distribution processes. DSR ensures optimization and integration of internal processes which is necessary for companies to grow rapidly. The rapid growth is possible thanks, to specialized services an...
At CloudEXPO Silicon Valley, June 24-26, 2019, Digital Transformation (DX) is a major focus with expanded DevOpsSUMMIT and FinTechEXPO programs within the DXWorldEXPO agenda. Successful transformation requires a laser focus on being data-driven and on using all the tools available that enable transformation if they plan to survive over the long term. A total of 88% of Fortune 500 companies from a generation ago are now out of business. Only 12% still survive. Similar percentages are found throug...