Learn to make the point: data visualisation strategy

Ruby

Mila Dymnikova

1 talk

#visual-communication

Learn to make the point: data visualisation strategy

by Mila Dymnikova

The video is a presentation by Mila Dymnikova at RubyConf AU 2019, focusing on data visualization strategies. Mila discusses the importance of visual communication in programming and data science, emphasizing that complex concepts can be simplified through effective data visualization. She categorizes visual communication into four types: analytical, status, storytelling, and exploratory, each serving unique purposes in conveying information.

Key points include:
- Importance of Data Visualization: It enhances understanding of complex ideas for both technical and non-technical audiences, making it crucial for sharing work and gaining appreciation.
- Four Types of Visualizations:

- Analytical Visualizations: These include techniques like flow diagrams and UML to visually explain code processes, helping audiences understand system functionalities without overcomplicating diagrams.
- Status Visualizations: Used for monitoring system health, these visualizations provide normality thresholds and alerts for anomalies, often through dashboards displaying multiple graphs, further simplifying data interpretation.
- Storytelling Visualizations: These are infographics that present project journeys, emphasizing successes and challenges, making lengthy documents more engaging and accessible, and tools such as Canva are recommended.
- Exploratory Visualizations: Designed for users to interact with the data, these allow flexible exploration of relationships within complex datasets, similar to a choose-your-own-adventure setup. D3.js is recommended for creating appealing exploratory visualizations while noting its complexity for simpler graphs.

Important examples include using flow charts and dashboards to communicate status and analytical information efficiently. Mila stresses the significance of creating clear visuals and dashboards, ensuring that they maintain focus and communicate effective narratives without overwhelming the viewer.

Concluding remarks highlight that each visualization type has overlapping aspects and encourage the use of data visualizations as a strategic communication tool to share achievements and insights effectively. Mila concludes by offering links to resources on her Twitter, emphasizing the need for effective visual storytelling in programming and data science.

00:00:00.030 Let me guess, your code is awesome, but no one else gets it? You need a data visualization! Complex concepts can easily be explained through visual information. There are four types to choose from: storytelling, status, analytical, and exploratory. I’ll help you find the perfect one. Mila Dymnikova is a data geek who loves data visualizations, especially if they relate to cats. Ruby is still her favorite programming language because of the community and how expressive it is. When she's not coding, you’ll find Mila cruising on an electric skateboard.

00:01:16.159 Hi everyone! I'm Mila. A couple of years ago, I was a Rails developer, and now I'm a data scientist at Optimal Workshop. I've always loved mixing data and art together, so I'm thrilled to talk to you today about data visualizations. Data visualizations allow you to represent your pristine data or ideas visually. The field has gone way beyond simple graphs; nowadays, data visualizations are used to analyze small and large datasets and have become the center of decision-making and conversation.

00:02:02.510 However, this talk is not going to cover how to create all the various types of graphs. There are plenty of online resources, and I'll provide links throughout my slides as well as on the final slide for you. What I really want to focus on today is how you can use data visualizations as a visual communication tool for your work. I've broken down visual communication into four types. Within each type, I'll explain what kind of work you can communicate and how to do so effectively. Some of these types will be most useful for explaining how your code works, but visual communication is helpful for all aspects of a developer's responsibilities.

00:03:08.690 You might be thinking this sounds like a whole lot of extra work; why should you bother? For me, it helps in sharing my work with others. Using various data visualizations, I can communicate complex ideas to both technical and non-technical people in a way that helps them understand my work. This is super important because if you can't effectively explain your work to others, how will they appreciate what you've achieved?

00:03:31.829 People don’t know the value of something until you show it to them. Data visualizations can be a strategic way to drive home the importance and coolness of your work. Visuals can quickly communicate a lot of information in a way that might require an entire lecture on software engineering principles. So, let’s start with analytical visualizations.

00:04:03.150 I often see small projects that have a lot of visual changes, and people get really excited. Visual work is easier to understand, and enthusiasm grows when people grasp the value of what they see. However, sometimes our work is purely in the background without much visual representation. Unless you’re prepared to teach people to read your code, many developers often don’t bother finding a way to explain their work.

00:04:39.060 So, how can we fix this and generate a little more enthusiasm? One way is to use flow diagrams to visually explain how your code works, step by step. Remember UML? It provides a standard way to visualize the design of a software system. There’s a lot of documentation on using the right shapes, arrows, and icons to effectively visualize a wide range of software projects.

00:05:16.050 I’ve picked out just a few examples here, but honestly, there seems to be a UML diagram for everything. Alternatively, you can use a simple flow chart. UML can be hard to understand if your audience is not familiar with its specific visual components. Remember, your goal is to communicate how you built the feature and how you improved the system, not to become a UML artist.

00:05:49.740 So, become an expert box drawer and create your own simple diagrams. You can use tools like Lucidchart or even pen and paper. If you have any suggestions for a good flow diagram, make sure each box has a simple, descriptive label. The boxes themselves should represent a class, method, or step in the process. Use icons or logos instead of words; for example, draw a person for human interaction or use your app's success icon to indicate a successful step.

00:06:24.419 These elements will help make the flow diagram more familiar. Keep it high-level and simple. If you want to show more complicated flows or use it for documentation, then consider using UML standards instead of your own diagram. But seriously, keep it simple! This is a very bad example of a class diagram; please don’t do this.

00:07:00.150 If you commit to not writing spaghetti code, then also commit to not creating spaghetti flow diagrams when presenting your system. With these simple flow diagrams, people will be analyzing the system, trying to understand how it works by looking at the inputs and outputs.

00:07:42.120 Use supporting graphs to illustrate the changes you’ve made in the system. For example, if you've implemented speed improvements or reduced the number of errors, visualizing these metrics alongside your diagram helps showcase the value of your work to your audience.

00:08:30.180 Now, let’s talk about status visualizations. When we have maintenance work or when we're on-call, it’s important to see that everything in the system is normal. Status-type data visualizations allow you to visualize what is normal and quickly spot anything out of the ordinary.

00:09:00.000 Project managers need to drop everything in their sprint when a fire pops up, and your team should understand if something is not quite normal. Visualizations that let you compare or monitor activities over time fall into this category. This could be just one graph or a dashboard filled with supporting graphs.

00:09:59.440 If you have a small collection of graphs, it’s best to divide them into three layers: at the top, include the most important information or metrics, while the bottom should feature graphs that provide supporting details to the graphs above.

00:10:39.060 Keep it simple and ensure the visualizations are straightforward. Avoid pie charts and embrace clean visual data. Position the dashboard where it’s easily visible or share it with interested stakeholders. Colors should be used to highlight important details rather than overwhelm; often, less is more. Stick to about five to nine graphs to prevent the dashboard from feeling cluttered.

00:11:14.220 If the dashboard is well-designed, someone should take about five seconds to find information. If it takes longer, revisit your design: simplify graphs, provide clear labels, and ensure all graphs tell a consistent story. Numerous apps and libraries allow for straightforward dashboard creation.

00:11:58.060 However, while these applications can create almost any type of graph, they are not inherently smart: they might compile misleading visualizations. So, use a chart addition diagram to check if you're using the right graph type for your data.

00:12:24.900 Think carefully about what you want to communicate with your data. Are you comparing items or showing a relationship? Most applications and libraries should support all graph types, so seek inspiration from data visualization guides or articles that explain how to accurately visualize data.

00:13:37.900 Now, let’s move to storytelling with visualizations. Perhaps you’ve completed two projects and even authored reports about them. While documentation is essential, it’s challenging to keep everyone’s focus on lengthy documents when they merely want to know how a project progressed. Reflecting on your project, you may have encountered ups and downs, mistakes, and discoveries. So, share your project story with your team! Make it engaging, discussing challenges and victories. A timeline or infographic may effectively communicate your project’s journey.

00:14:15.860 An infographic can either replace documentation or serve as a 'TL;DR' summary. Infographics guide the reader through your narrative. Including graphics allows you to control how your audience absorbs information. Consider producing a how-to guide or infographic summary that maintains a casual, engaging tone.

00:14:58.370 Utilize images and graphs to support your message and minimize text, making it less burdensome. My favorite tools for creating infographics are Canva and Visme; both offer user-friendly drag-and-drop interfaces and plenty of design resources.

00:15:58.920 If you want to create a lasting impression, think about making your infographic interactive. For example, RT D3 creates interactive infographics that introduce basics of machine learning. Static or interactive designs are both excellent materials for your company’s blog, increasing web traffic.

00:16:17.600 Lastly, let’s discuss exploratory visualizations. When dealing with complex data, it can have many intricate relationships that aren't straightforward. In exploratory projects or systems, create visualizations that allow users to explore at their own pace. These data visualizations can provide users an engaging experience, akin to a choose-your-own-adventure narrative.

00:17:12.760 For example, if your company manages extensive internal customer data, a visualization can allow your coworkers to explore customer interactions with your application. An impressive instance is the Treejack Pine Tree visualization from Optimal Workshop, which showcases the detailed paths participants took when navigating a website and where they landed at the end. This lets researchers analyze participant behavior, identify points of confusion, and discover potential improvements.

00:18:18.150 The critical takeaway here is that exploratory visualizations don’t provide answers. Instead, they allow users to interact with the data and derive their conclusions. Exploratory visualizations demand more effort than the other types I’ve discussed because it’s akin to building a mini-product; you must consider things like browser compatibility and flexible data structures.

00:19:09.430 The user experience design is absolutely vital for these types of visualizations. Understand who will be using your visualization and tailor the information accordingly. Consider agile methodologies, like prototyping and user testing, before finalizing your design. Your design and UX teams can be immensely beneficial during this process.

00:19:31.340 Collaborate with cross-functional teams to create captivating visualizations that inspire and generate meaningful insights. I recommend utilizing D3.js to build these visualizations, as I've found it to produce the most flexible and beautiful outcomes. However, avoid using D3 for simple graphs like bar charts. There are many other charting libraries available that require much less code.

00:19:39.300 So, we’ve gone through the four types of visual communication: analytical, status, storytelling, and exploratory. Each type has a unique strategy for conveying your work.

00:20:00.000 In the analytical realm, we use flow charts to outline processes step-by-step. For status reports, we visually establish norms using dashboards. Storytelling involves infographics to narrate our project journeys, while exploratory visualizations allow users to engage with data or systems interactively.

00:20:54.720 All these types of visual communication have overlapping aspects. You can certainly apply bar charts in different contexts, but what matters is the message you communicate. Consider what you want your team to perceive. This may require integrating elements from various communication types to effectively convey your point. Utilize data visualizations as a tool for visual communication to share your work with others, take pride in your achievements, and aim to visualize them moving forward.

RubyConf AU 2019