Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

A new Data Days event is coming soon! This time we’re going bigger than ever. Fabric, Power BI, SQL, AI and more. Don't miss out.

Reply
shoooouse
New Member

Deneb grid

I want to create a grid that should display images in base64 format from my table. The idea is that the spaces (and therefore the images) should grow as I filter the data, always filling the canvas with images (so if I select just one image, the canvas is basically one image. If I filter by a group of 100 images, the code should split the canvas evenly across 100 cells).
Currently I have a grid where I can display images. If I don't filter, it looks fine, but not all images are displayed. (see 1. screenshot) If I filter for a group with many images, it works, the size of the images grows and there are fewer cells, but it seems to keep the space of the filtered out image. (see 2. screenshot) When I filter for a group with only a few images, it stops working and I get a blank canvas again.
I can't figure out what the problem is, as it works to some extent, but not completely.

shoooouse_1-1735227994575.png

 

shoooouse_0-1735227931605.png

 


I would appreciate any help or ideas.

Here is my Vega code: 

{
  "width": 1100,
  "height": 600,
  "data": [
    {
      "name": "dataset",
      "format": {"type": "json"},
      "url": "data:dataset"  // Load filtered data from Power BI
    }
  ],
  "signals": [
    {
      "name": "filteredDatasetLength",
      "update": "data('dataset').length"  // Track the length of the filtered dataset
    },
    {
      "name": "gridSize",
      "update": "filteredDatasetLength > 0 ? ceil(sqrt(filteredDatasetLength)) : 0"  // Grid size adjusts based on available data
    },
    {
      "name": "cellSize",
      "update": "filteredDatasetLength > 0 ? ceil((width - 20) / gridSize) : 0"  // Dynamic cell size based on grid size
    }
  ],
  "marks": [
    {
      "type": "image",
      "from": {"data": "dataset"},
      "encode": {
        "enter": {
          "url": {"field": "Base64:"},  // Use the Base64 column for images
          "x": {
            "signal": "cellSize * (datum.Index % gridSize) + 10"  // Dynamic calculation of X position based on index and grid size
          },
          "y": {
            "signal": "cellSize * floor(datum.Index / gridSize) + 10"  // Dynamic calculation of Y position based on index and grid size
          },
          "width": {"signal": "cellSize - 5"},  // Image width adjusted to fit in grid
          "height": {"signal": "cellSize - 5"}  // Image height adjusted to fit in grid
        }
      }
    }
  ]
}



 

1 REPLY 1
lbendlin
Super User
Super User

How do you plan to arrange the images? 16:9 ?  or more something like a network graph where the items arrange around in a fluid fashion?

Helpful resources

Announcements
May Power BI Update Carousel

Power BI Monthly Update - May 2026

Check out the May 2026 Power BI update to learn about new features.

Fabric SQL PBI Data Days

Data Days 2026 coming soon!

Sign up to receive a private message when registration opens and key events begin.

New to Fabric survey Carousel

New to Fabric Survey

If you have recently started exploring Fabric, we'd love to hear how it's going. Your feedback can help with product improvements.

Power BI DataViz World Championships carousel

Power BI DataViz World Championships - June 2026

A new Power BI DataViz World Championship is coming this June! Don't miss out on submitting your entry.

Top Solution Authors
Top Kudoed Authors