Adding Dynamic Backgroundcolor in Treemap Chart in chartjs-chart-treemap plugin in Chart JS | Part 2

Summary

In this tutorial, Chart JS delves into the art of adding dynamic background colors to a treemap chart using the `chartjs-chart-treemap` plugin. Discover how to make sections darker or lighter based on their size, enhancing visual understanding. The video walks through creating a callback function, handling raw data, using JavaScript's Math functions for calculations, and implementing template literals for dynamic color returns. Developers learn how to visually prioritize data segments effectively, leveraging their size to determine the nuances of color.

Highlights

• Dive into callback functions and dynamic coloring in Chart JS, enhancing your treemap charts effectively. 🌈
• Experience the magic of calculated color changes based on data value size, creating visually compelling charts. 🧙‍♂️
• Leverage JavaScript Math functions alongside Chart JS for precise and adaptive coloring techniques. 🧮

Key Takeaways

• Learn how to add dynamic colors to your treemap charts in Chart JS to make data visualization more insightful. 🎨
• Understand the significance of raw data manipulation and callback functions in dynamic UI changes. 🤓
• Master the use of template literals and Math functions in JavaScript for better data-driven designs. 💡

Overview

In this insightful video by Chart JS, we explore adding dynamic colors to treemap charts using the `chartjs-chart-treemap` plugin. A key focus is on altering the intensity of the background color depending on the size of the chart sections, allowing for a clearer visual priority of data. By tweaking the code, one can ensure that larger data values emit a darker shade, enhancing data presentation and understanding.

The process begins with restructuring the data and incorporating a callback function to dynamically assign colors. The tutorial explains how to handle raw data and utilize the context (`CTX`) to customize chart visuals. As it progresses, you'll learn to navigate through JavaScript's logging functions and manage errors effectively, creating a seamless design and functionality integration.

By the end of this tutorial, viewers will have mastered setting up dynamic colors in their treemap charts using advanced JavaScript techniques. Practical coding examples illustrate how to use template literals alongside `Math.log` for creating sleek, data-driven visuals. This empowers developers to design interactive and visually appealing chart interfaces that convey complex data in a straightforward, engaging manner.

Chapters

• 00:00 - 00:30: Introduction to Dynamic Background Color in Treemap Chart The chapter introduces the concept of adding a dynamic background color to a treemap chart. It highlights the current setup where some elements respond to hover actions. The focus is on adjusting the background color such that larger data elements appear darker, which makes logical sense for visual clarity. The chapter sets the stage to explore methods for implementing this background color dynamic, using the existing data structure.
• 00:30 - 01:00: Overview of Data Ordering This chapter, titled 'Overview of Data Ordering,' discusses how a system automatically orders values, specifically from large to small. It begins with an introduction to proper naming conventions, using the example of converting or renaming elements to maintain organization. The main focus is on the automated ordering process, demonstrating how identical values such as 12 are handled irrespective of their initial sequence, ensuring they are sorted correctly. Additionally, there is initial work on altering background colors, though details in this transcript are limited as the description quickly shifts away from the ordering theme.
• 01:00 - 02:00: Implementing Callback Function for Color The chapter outlines the process of implementing a callback function for color. It begins with the introduction of a `callback function` which is designed to handle color processing. The CTX (context) is acquired, followed by the definition of the callback function. This function, referred to as 'color from raw,' is flexible and can be named differently. The purpose of this function is to process color from raw data, which will be explained further in the chapter.
• 02:00 - 03:00: Exploring Context and Default Color Handling The chapter discusses handling of raw data by introducing a function. It involves creating a function to process the raw data and passing a specific argument as a parameter, which in this case is referred to as the 'context'. The process includes using console commands to display the context for verification and debugging purposes.
• 03:00 - 04:00: Understanding Pixel Values and Their Importance The chapter titled 'Understanding Pixel Values and Their Importance' focuses on the technical aspects of pixel color assignment in a dataset context. It explains how objects default to a black color when a function doesn't return a specified color value. The discussion highlights the significance of correctly defining color in functions to avoid default settings that might not be desired. Additionally, the transcript alludes to identifying data types and states like 'data set' and 'undefined mode' which change upon loading data, shedding light on how raw pixel data is processed and displayed under certain conditions.
• 04:00 - 05:00: Explaining Attributes and Values in Context The chapter delves into handling data and understanding attributes and values in certain contexts. Initially, it addresses the need to load datasets and discusses an issue related to animations interfering with raw data recognition. The explanation proceeds to clarify the concept of 'color from raw' referencing the data's color attribute, outlining its implications. The chapter promises to further elaborate on these individual elements, ensuring the reader comprehends their significance before moving ahead, particularly emphasizing the necessary step of obtaining the raw data as a prerequisite.
• 05:00 - 06:00: Using Value and Alpha Calculation for Dynamic Color The chapter discusses the importance of managing error handling by controlling the loading order of components. It emphasizes loading one component before recognizing or loading the next one to avoid automatic errors that halt functionality. The example given shows that saving and refreshing without proper order leads to errors in grabbing CTX and raw data, underlining the significance of correct sequence in dynamic color value calculations.
• 06:00 - 07:00: Creating Return Value with Template Literals The chapter begins with an exploration of how to create return values using template literals. It emphasizes the importance of setting conditions within the code. A specific scenario is discussed where a variable `type` is assigned the value 'data', while a higher-level reference of `type` is 'data set'.

Adding Dynamic Backgroundcolor in Treemap Chart in chartjs-chart-treemap plugin in Chart JS | Part 2 Transcription

• 00:00 - 00:30 in this video we're going to focus on adding a dynamic background color in a tree map chart so so far we have this here and you can see here the Hoover but we want to focus on that what we want to focus is on on the background color you can see here this one supposed to be far more darker compared to this one here that would make sense this should be lighter and the bigger it becomes the darker it becomes as well so let's start to explore how we can do this so far we have here the data and you will notice as well the data here whatever this data
• 00:30 - 01:00 is is basically or this should be even converted let's say we have to name this properly to tree a refresh here so that's the proper term for it by the way but what you will notice here is that it automatically orders its value this is 12 and 12 it doesn't matter the order here it will put them in the right order from big or from large to small so now let's start to work on the background color here so for the background color I'm going to remove this this here all
• 01:00 - 01:30 and we're going to create a functionality in here or basically a call back function and what I want to do here is I want to say in this you're going to grab here the CTX which is basically context and then I'm going to say here a callback functionality that's why you have the arrow we will say a color from raw and what is this what does this mean basically this is a function we can give it any name we want but this is the color from the raw data and I'm going to show you exactly why it
• 01:30 - 02:00 is called raw because it is the raw data so we're going to make this function say a function copy this and put it in here so once we did that we're going to grab here the parameter which was here this argument we put here as a parameter which is exactly the same context so now we have this what I want to do first I want to say your console L just show you what is CTX so if I save this now refresh open up developer text
• 02:00 - 02:30 uh tap and then we have here all the objects you will see here a lot of information here and you notice the color became black and the reason why is because we didn't assign anymore a color it's supposed to get a color from the function but the function has no color as a return value so it becomes a default color which is black but this is very important I'm going to show you two items here that's very important you can see the type equals data set here type equal data set here and the mode is undefined after the second load what will happen is we getting here the raw
• 02:30 - 03:00 data and the type equals data what happens here well basically it loads the data sets first twice and then because because of the animation it loads that and it cannot recognize all of the raw data so you can see your color from raw refers to basically the color from the raw object here with all these values and I'm going to explain them in a bit what they all mean so to get this or before we can do anything we want to get for example the raw we have to first
• 03:00 - 03:30 pass these two loads here because what will happen if we don't do this we get an error so for example I want to grab the CTX and raw. a let's do that one say CTX raw. a save refresh and automatically it triggers an error and stops the entire functionality so we don't want this so that would mean that we need to first let one one thing load before it recognizes the next one so if I save this and ref you can see here how
• 03:30 - 04:00 can we make a condition on it we're going to say here type equals data but if I go up here type will be no let's click here up type will be data set so what I'm going to do here now is an if statement and this if state will say if CTX do type is not equal to data in this case what I want to do is I want to return a color and the color we're going to return is trans
• 04:00 - 04:30 transar so this make sure that this is a a string value save and refresh now we have something working of course it doesn't see it immediately or what happens is it becomes transparent first but after the second load or after the second load it will get the other color and the other colors of course it's not defined so it becomes black again so because it loads so fast we don't notice this so now we can start to work on the whe view part because now if I do here
• 04:30 - 05:00 afterwards let's say here console Lo let's copy that and then we going to say dot I'm going to say here CTX raw do for example V save that refresh we should be able to grab here now the value which is the V the v stands for Value so it is not time to explain all these items so you're not getting confused so what I'm going to do is I'm going to save this refresh and there we are let's go in here click on this so we got all of these values here and let me
• 05:00 - 05:30 just copy all of this and going to break them down so you have understanding what they mean and why they are here so you can see here this all of them so the first one here well I'll skip this one for now and what I'm going to do is let's get the these two these are the most logical ones and it's starting so basically X zero and Y 32 what does that mean it looks here at the starting point of our pixel so an X and Y coordinates
• 05:30 - 06:00 so x0 would be probably exactly in the canvas as you can see here zero on left side and Y 32 because we're going 32 pixels down so this is basically the starting point uh starting point on horizontal level horizontal level and the Y is the starting point on vertical vertical level all right so once we have this the next one would be the height and width so I'm going to cut
• 06:00 - 06:30 out this one here put that in there and let's say width and height the width is with in pixels so from zero to 177 we indicate from here to there and then the height is I guess the same thing height in pixels would indicate we can even double check that from here all the way down and how can we confirm this because
• 06:30 - 07:00 you can see here let me double check here look at the tool tip at the very top you can see 340 is considered the height that's the height and the WID is 681 so if we calculate height minus or plus the pixels of 32 we also get 340 pixels so that means this is all correct all right so now we have that one and then we have eventually uh well the a the a in essence is the amount of pixels which is is the width multiplied by
• 07:00 - 07:30 height that's it so these two values multiply by together will give you this and then finally we have the S and the V although the S stands for the total sum so most likely there is still something where we can add up more items there are some more advanced features for that but it's also the value itself so this this value tend to be identical most of the time because you can see here let's go back here over over you can see three three map chart sales value number 18
• 07:30 - 08:00 and that's basically 18 is this to here all right so now you have understanding of this so what we're going to do now is we're going to grab this or let's see which value can we use well I guess in this case we can use here the uh the V value because that's the comparison of so what I want to do here is I want to say here Conant let's select your value equals CTX raw. V remember that is the
• 08:00 - 08:30 reference to this one here because all the all values so now what I want to do here is the following I going to just use a calculation we can say Here let Alpha value because I want to have the alpha value calculated because we need to eventually figure out how can we dynamically make this lighter or darker depending on the size of our square or the shape of it or of the value value based so we say Alpha will be equal to
• 08:30 - 09:00 and then we're going to use here a formula say one plus and then we're going to say math.log which creates a formula then we grab here value which is this one here or the raw item you do that divide by five then we'll get eventually a value here so if I do here now conso law going say here Alpha save that refresh go here then we should have here
• 09:00 - 09:30 want this and then here we get all of these items here so it starts to look nice so then what I want to do here is starting to put in a return value so we're going to say return value and a return Val we want to use template literals we want to say rgba basically just all of this except for one thing because it's template literals I'm using back Tex so I'm going to copy everything between here put in here this is back Tex by way that's why template RS meaning uh on your
• 09:30 - 10:00 skateboard or at least on your keyboard on your Mac just below the escape button you have the back tick and what I'm going to do here is because it's temp lital we can see a dollar sign to make a value and say Alpha if I save this we should have now all different values but I realize we have always one so maybe we can change this value a little bit in a more proper way or maybe can do reducing this let's
• 10:00 - 10:30 see how that works there we are that looks way better so sorry plus one is of course doesn't make any sense here we have to make sure it is removing the one so what you get then here now is a value dependent on the item so if I would change the value here 25 save refresh you see it becomes more darker nicely so that is basically how you can put in here a color