Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Tree Map chart migration from D3 to amchart library 

There were some technical issues in rendering Tree Map with d3 chart library. Namely the chart became unresponsive in case of large data and there were issues with its handling of legends. While migrating tree map to amchart library the overall functionality was maintained.  

 

After migrating tree map to amchart a property has been added to this chart to change the layout of the chart based on the following layout algorithms. Displays hierarchical data as a set of nested rectangles. Use dimensions to define the structure of the treemap and measures to define the size or color of the individual rectangles. Use color and size dimensions correlated in some way with the tree structure to see patterns that would be difficult to spot in other ways. Both the size and color are determined by a value, for example, Sales. The greater the sum of sales for each category, the darker and larger the box.

Migration of Treemap charts from D3 to Amchart 5

From Kyvos 2024.1 onwards, the Treemap charts are migrated from the D3 library to Amchart 5. With this migration, users can now select layouts in Treemap charts within Kyvos Visualization for worksheets. These layouts include Square, Horizontal, Vertical, and Horizontal then Vertical.

  • Square (default layout)-  It divides It divides an area into rectangles whose area is sized based on a set of values, the rectangles being optimized to be as square as possible, with the rectangle sizes determined by a set of values.

  • Horizontal - This layout algorithm divides algorithm slices the horizontal space between items , slicing it in the horizontal direction depending on item value. based on their values.

  • Vertical -This layout algorithm divides algorithm divides the space between items, slicing it in the vertical direction depending on item value. available space vertically based on the value of the items.

  • Horizontal then Vertical - This layout algorithm divides is evident when the dimension is dropped to color and detail shelves. This algorithm divides the space between items , slicing it in horizontal then vertical direction depending on item valueby slicing them horizontally and vertically, depending on the value of the item. This layout is evident when dimension is dropped on both color and detail shelves. Each data point inside the color block visible in the resulting color blocks, where each data point is sliced horizontally and each color block is sliced vertically.

To select layout for Treemap charts, perform the following steps.

  1. From the Toolbox, add a worksheet and then select a semantic model from the list. Similarly, you can also select an existing worksheet.

  2. Ensure that the Design tab is selected.

  3. Select the Treemap chart type from the View Type list.

  4. In the Dimension column, select the dimension and drag and drop it to the required shelf.

  5. In the Measures column, select the measures and drag and drop it to the required shelf. Then, from the Properties in the right-side pane, choose the required layout from the Select Layout list.

    • Square

      Image Added
    • Horizontal

      Image Added
    • Vertical

      Image Added
    • Horizontal then Vertical

      Image Added