Vega in Power BI – positioning signals and custom sorting
Hello everyone, I just got a new book, "Before and After", and I’m trying to recreate one of the visuals from it in Power BI using Vega. I’ve run into two challenges: I created a signal called EmploymentTypeMiddle and I want to position it dynamically at the middle of the first bin on the x-axis, regardless of the canvas width. Is this achievable in Vega? How can I sort the Region column in a custom, hard-coded order? I want the bars to appear in this sequence: Americas, Europe, Asia Pacific, Middle East & Africa. Here's my code Any suggestions?
Power BI - Deneb/Vega 6.2.0: Filtering by Day Signal Causes Marks to Disappear
Hi everyone, I am building a real-time schedule visual in Vega. I have a working visual that shows all data, but it breaks when I try to filter for the current day. Data from provided from Power Bi to deneb: - DST_ClockDiffBtwLocationAndLocalOffset:This is a measure. TimeZone Difference. provides the offset of this difference. - From my Power BI table: - ScheduleType - day_num - type -startTime -endTime I have a query named AllSegments that creates a clean, flat table Each day, for each scheduleType, we can have multiple rows. For example: Scheduletype day_num type start_time end_time startTime endTime Production 0 No Production 00:00:00 22:00:00 0 22 Production 0 Normal 22:00:00 23:59:00 22 23.9833333 Production 1 Normal 00:00:00 23:59:00 0 23:9833333 ... SiteOpening 0 No Production 00:00:00 23:59:00 0 23.9833333 SiteOpening 1 Normal 08:30:00 12:30:00 8.5 12.5 SiteOpening 1 Normal 13:30 17:00:00 13.5 17 ... Support 0 No Production 00:00:00 23:59:00 0 23.9833333 Support 1 Normal 08:30:00 12:30:00 8.5 12.5 Support 1 Flexible 13:30:00 17:00:00 13.5 17 The goal is one graph with a 24 hours My working code: { "$schema": "https://vega.github.io/schema/vega/v5.json", "description": "A static visual for Monday with a dynamic real-time clock.", "background": "transparent", "width": 360, "height": 80, "autosize": {"type": "fit", "contains": "padding"}, "signals": [ { "name": "timer", "update": "now()", "on": [{"events": {"type": "timer", "throttle": 1000}, "update": "now()"}] }, { "name": "adjustedTime", "update": "length(data('source')) > 0 ? utcOffset('seconds', timer, data('source')[0].DST_ClockDiffBtwLocationAndLocalOffset) : now()" }, { "name": "currentTime", "update": "hours(adjustedTime) + minutes(adjustedTime) / 60" }, { "name": "adjustedDate", "update": "timeFormat(adjustedTime, '%Y-%m-%d')" } ], "data": [ { "name": "source" }, { "name": "dataset", "source": "source", "transform": [ { "type": "filter", "expr": "datum.ScheduleType == 'SiteOpening' && datum.type != 'No Production' && +datum.day_num == 1" } ] } ], "scales": [ { "name": "xscale", "type": "linear", "domain": [0, 24], "range": "width" } ], "axes": [ { "orient": "bottom", "scale": "xscale", "title": {"signal": "adjustedDate"}, "tickCount": 24, "labelFontSize": 8, "offset": 5 } ], "marks": [ { "type": "rect", "from": {"data": "dataset"}, "encode": { "enter": { "x": {"scale": "xscale", "field": "startTime"}, "x2": {"scale": "xscale", "field": "endTime"}, "y": {"value": 20}, "height": {"value": 30}, "fill": {"value": "lightgray"} } } }, { "type": "rule", "from": {"data": "dataset"}, "encode": { "enter": { "x": {"scale": "xscale", "field": "startTime"}, "y": {"value": 15}, "y2": {"value": 55}, "stroke": {"value": "black"}, "strokeWidth": {"value": 1} } } }, { "type": "symbol", "from": {"data": "dataset"}, "encode": { "enter": { "x": {"scale": "xscale", "field": "startTime"}, "y": {"value": 15}, "shape": {"value": "triangle-down"}, "size": {"value": 40}, "fill": {"value": "black"} } } }, { "type": "symbol", "from": {"data": "dataset"}, "encode": { "enter": { "x": {"scale": "xscale", "field": "endTime"}, "y": {"value": 55}, "shape": {"value": "triangle-up"}, "size": {"value": 40}, "fill": {"value": "black"} } } }, { "type": "rule", "encode": { "update": { "x": {"scale": "xscale", "signal": "currentTime"}, "y": {"value": 10}, "y2": {"value": 60}, "stroke": {"value": "red"}, "strokeWidth": {"value": 2} } } }, { "type": "text", "encode": { "update": { "x": {"scale": "xscale", "signal": "currentTime"}, "y": {"value": 5}, "text": {"signal": "timeFormat(adjustedTime, '%H:%M')"}, "align": {"value": "center"}, "fill": {"value": "red"}, "fontSize": {"value": 10} } } } ] } Now, I want to filter these bars to show only the ones for the current day. I added a signals block for the current time and a filter to my data transform ... Code doesn't work: { "$schema": "https://vega.github.io/schema/vega/v5.json", "description": "A dynamic, real-time visual for Site Opening Hours.", "background": "transparent", "width": 360, "height": 80, "autosize": {"type": "fit", "contains": "padding"}, "signals": [ { "name": "timer", "update": "now()", "on": [{"events": {"type": "timer", "throttle": 1000}, "update": "now()"}] }, { "name": "adjustedTime", "update": "length(data('source')) > 0 ? utcOffset('seconds', timer, data('source')[0].DST_ClockDiffBtwLocationAndLocalOffset) : now()" }, { "name": "currentTime", "update": "hours(adjustedTime) + minutes(adjustedTime) / 60" }, { "name": "adjustedDate", "update": "timeFormat(adjustedTime, '%Y-%m-%d')" }, { "name": "currentDayNum", "update": "day(adjustedTime)" } ], "data": [ { "name": "source" }, { "name": "opening_hours_today", "source": "source", "transform": [ { "type": "filter", "expr": "datum.ScheduleType == 'SiteOpening' && datum.type != 'No Production' && +datum.day_num == currentDayNum" } ] } ], "scales": [ { "name": "xscale", "type": "linear", "domain": [0, 24], "range": "width" } ], "axes": [ { "orient": "bottom", "scale": "xscale", "title": {"signal": "adjustedDate"}, "tickCount": 24, "labelFontSize": 8, "offset": 5 } ], "marks": [ { "type": "rect", "from": {"data": "opening_hours_today"}, "encode": { "enter": { "x": {"scale": "xscale", "field": "startTime"}, "x2": {"scale": "xscale", "field": "endTime"}, "y": {"value": 20}, "height": {"value": 30}, "fill": {"value": "lightgray"} } } }, { "type": "rule", "from": {"data": "opening_hours_today"}, "encode": { "enter": { "x": {"scale": "xscale", "field": "startTime"}, "y": {"value": 15}, "y2": {"value": 55}, "stroke": {"value": "black"}, "strokeWidth": {"value": 1} } } }, { "type": "symbol", "from": {"data": "opening_hours_today"}, "encode": { "enter": { "x": {"scale": "xscale", "field": "startTime"}, "y": {"value": 15}, "shape": {"value": "triangle-down"}, "size": {"value": 40}, "fill": {"value": "black"} } } }, { "type": "symbol", "from": {"data": "opening_hours_today"}, "encode": { "enter": { "x": {"scale": "xscale", "field": "endTime"}, "y": {"value": 55}, "shape": {"value": "triangle-up"}, "size": {"value": 40}, "fill": {"value": "black"} } } }, { "type": "rule", "encode": { "update": { "x": {"scale": "xscale", "signal": "currentTime"}, "y": {"value": 10}, "y2": {"value": 60}, "stroke": {"value": "red"}, "strokeWidth": {"value": 2} } } }, { "type": "text", "encode": { "update": { "x": {"scale": "xscale", "signal": "currentTime"}, "y": {"value": 5}, "text": {"signal": "timeFormat(adjustedTime, '%H:%M')"}, "align": {"value": "center"}, "fill": {"value": "red"}, "fontSize": {"value": 10} } } } ] } the final goal is: - real time current clock (red bar + current hour text) - real time current day. if it is a production day, a blue rect align on the 24 hours, if it is Flexible period, a dark blue rect. if No prod, a gray rect - A second bar to provide info about when the location can have a support - a legend with the different info Thanks a lot for the support you will accept to provide
Bugs in my customized version of a popular gantt chart
Hello Community, I’ve been working on developing a Gantt chart using Madison Giammaria’s giammariam template. It is great already but I had to develop some other custom features so I’ve successfully implemented several functionalities—partly using my own knowledge and partly with AI assistance. However, I’ve now hit a roadblock with three bugs that are preventing the visual from functioning as intended. I’d love any help in resolving them—fixing just one would be a great step forward, but solving all three would be a huge relief! 😊 Bug 1: Expanding/Collapsing Tasks in Bulk I wanted to create a custom bulk expand/collapse button to toggle all tasks at once. However, unlike the original template, if I expand all tasks and then try to collapse just one, it collapses all of them instead of only the selected one. I suspect the issue lies in the hierarchy_initial transformations (lines 2224–2238) in my Vega code, but I haven’t been able to get it working as intended. Bug 2: Horizontal Scrolling, Zooming, and Task Visibility Issues I had to tweak the template to properly display the Today line, as I couldn’t get it working from the original setup. However, my implementation may have introduced unexpected issues. Problem 1: Tasks Not Visible in Default View For example, in the image below, Task 95 (starting on March 19, 2023) should be partially visible, but it isn’t. If I scroll horizontally or zoom out slightly, it suddenly appears. Expanding the task doesn’t reveal the subtasks either. I suspect the issue is related to how the x-axis range is set before and after the min/max task dates. I attempted to configure default views for different task lengths using the configDateStepSizePercentInitial signal (lines 25–28), but that didn’t resolve it. Problem 2: Missing Tasks on Horizontal Scroll If I scroll left (Shift + Mouse Wheel), I expect to see tasks from 2022, but they don’t appear even though they should. This is my biggest issue—if anyone has insights on what might be causing this, I’d be incredibly grateful! Bug 3: Bottom Tasks Not Expandable This issue also exists in the original template: If the last task in the visual reaches the bottom of the canvas, the task is not clickable, preventing expansion. The only workaround is to collapse some other tasks first, but that negatively affects the user experience. I’d really appreciate any advice, guidance, or fixes for these issues. Even just pointing me in the right direction would be incredibly helpful. Sample file: https://www.dropbox.com/scl/fi/dcrciewmls9dj3fqpc4m8/sample_data_tasks.pbix?rlkey=65tjgo587u9991jaj7t4j2y3s&st=r5j7jh0n&dl=0 Thanks in advance, and have a great day! Petr
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. I would appreciate any help or ideas. Here is my Vega code: { "$schema": "https://vega.github.io/schema/vega/v5.json", "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 } } } ] }
advanced cross filtering with deneb and vega - brushed area disappearing when doing cross filter
My report has a deneb vega line chart and a table. I want to filter the table by brushing the chart and then clicking on the brushed area. The idea is to only apply cross filtering when required. PBIX file The filter works partially: (1) brushing on the area works as expected: (2) Then clicking on the brushed area filters the table: However the brushed area disappears. I'd like to keep the brushed area after the click. I've tried different debounce, throttle and consume values for the event - not sure what is causing the brushed area to disappear. { "data": [ { "name": "dataset" } ], "width": 200, "height": 200, "signals": [ { "name": "colour", "value": "blue" }, // brush { "name": "brush", "value": 0, "on": [ { "events": "@main:pointerdown", "update": "[x(), x()]" }, { "events": "[@main:pointerdown, window:pointerup] > window:pointermove!", "update": "[brush[0], clamp(round(x()-brush[0])+brush[0], 0, width)]" }, { "events": { "signal": "delta" }, "update": "clampRange([anchor[0] + delta, anchor[1] + delta], 0, width)" } ] }, // anchor { "name": "anchor", "value": null, "on": [ { "events": "@brush:pointerdown", "update": "slice(brush)" } ] }, // xdown { "name": "xdown", "value": 0, "on": [ { "events": "@brush:pointerdown", "update": "x()" } ] }, // delta { "name": "delta", "value": 0, "on": [ { "events": "[@brush:pointerdown, window:pointerup] > window:pointermove!", "update": "x() - xdown" } ] }, // main_brush { "name": "main_brush", // "push": "outer", "on": [ { "events": { "signal": "brush" }, "update": "span(brush) ? invert('x_scale', brush) : null" } ] }, // cross filter start ------------------------------------------ { "name": "pbiCrossFilterSelection", "value": [], "on": [ // when mark is brushed apply cross filter { "events": { "markname": "brush", "type": "click", "consume": true, "debounce": 100, "throttle": 100 }, "update": "pbiCrossFilterApply(event, \"datum['x'] >= main_brush[0] & datum['x'] <= main_brush[1]\" )" } ] } // cross filter end ------------------------------------------ ], "scales": [ { "name": "x_scale", "range": "width", "padding": 10, "domain": { "data": "dataset", "field": "x" } }, { "name": "y_scale", "range": "height", "padding": 10, "domain": { "data": "dataset", "field": "y" } } ], "axes": [ { "orient": "bottom", "scale": "x_scale" }, { "orient": "left", "scale": "y_scale" } ], "marks": [ { "name": "main", "type": "group", "encode": { "enter": { "x": { "value": 0 }, "y": { "value": 0 }, "height": { "value": 200 }, "width": { "value": 200 }, "fill": { "value": "transparent" } } }, "marks": [ // main line chart { "name": "main_line", "type": "line", "from": { "data": "dataset" }, "encode": { "enter": { "x": { "scale": "x_scale", "field": "x" }, "y": { "scale": "y_scale", "field": "y" } }, "update": { "stroke": { "signal": "colour" } } } }, // brush area mark { "type": "rect", "name": "brush", "encode": { "enter": { "y": { "value": 0 }, "height": { "value": 200 }, "fill": { "value": "#333" }, "fillOpacity": { "value": 0.2 } }, "update": { "x": { "signal": "brush[0]" }, "x2": { "signal": "brush[1]" } } } } ] } ] }
Navigation + Filtering in a custom Deneb Vega visual
Dear reader, I'm a consultant currently working on a Power BI dashboard which has required me to include a custom visualization. For this I used a Gantt Chart template created by David Bacci (see Deneb-Showcase/Gantt Chart at main · PBI-David/Deneb-Showcase · GitHub for the code) The standard template looks as follows: The client is asking me to implement a feature that allows users to select a value in the "Tasks" column, e.g. "Story boarding", and navigate to another page with a tailored view based on this selection. So, for example, one would click on "Story boarding" in the column and the dashboard will then navigate to another tab. And in this tab the visuals will be filtered such that "Task == Story boarding". I have discussed within my team that this is likely impossible, but we wanted to know for sure. An alternative solution is of course also welcome! Unfortunately, an invisible button overlay will not work, because in our case there will be a lot of rows and scrolling will be required. Besides, the visual will be dynamically updated. Thanks a lot in advance! 🙂Power of Deneb-Vega: The US Presidential Election Chart (chart example with JSON code)
After all the struggle with native Power BI visuals (their limitations) Deneb-Vega gives you a real power. Probably for someone who worked with JavaScript from the beginning it’s nothing special, but for a Power BI developer it’s a whole new world inside of Power BI. Highly customizable and interactive world of data visualization. I wanted to build this chart in 2020 during the US elections, but I had no tool (inside of Power BI) and knowledge (Vega) to achieve required conditional formatting and interactivity. Now I can build highly customized and highly interactive charts in Power BI. And what is great, it’s possible to publish the same chart on the web without Power BI. The charts show the elections result, but also allows a user to flip states/districts (by clicking on a gray horizontal bar) to see how different result in this state/district could affect the overall result. The chart could be very useful during the vote counting, when most results are already known, but a few states/districts are still counting the votes. But I have missed the 2020 elections and made the chart 2 years later. Well, soon it will be useful again. Also it’s a great showcase of a good data visualization and a great showcase of Deneb-Vega possibilities. Live Power BI report with the chart: https://powerofbi.org/2022/10/27/us-presidential-elections-chart/ Vega JSON code: https://github.com/avatorl/Deneb-Vega/tree/main/US%20Elections%20Chart
