Deneb Workout 06 - Linked Charts with Overview and Detail

Workouts Deneb
1

Difficulty Rating: 2 out of 5

Deneb Workout 06 - Linked Charts with Overview and Detail

Visuals can be linked in Power BI using Deneb/Vega-Lite. A section can be highlighted (selected) in one visual, for example, and a second visual can be filtered by the selection in the first. This workout presents such an example.

Goals
Using the PBIX loaded with the Enterprise DNA Practice Dataset supplied, produce a single Deneb visual with two vertically concatenated component visuals in Power BI that:

General:
• includes a title block with subtitle

Overview:
• includes an area chart with in-visual title
• includes a selection brush for the date range

Detail:
• includes an area chart with in-visual title
• includes a transform block to filter the visual based on the date range selected by the selection brush

Submission
Load the supplied data file into a new Power BI file, create your solution, and reply to this post. Upload a screenshot of your solution along with the Deneb/Vega-Lite JSON code used. Please format your JSON code and blur it or place it in a hidden section.

_eDNA Forum - Format Upload Hide Details Blur Spoiler
_eDNA Forum - Format Upload Hide Details Blur Spoiler1320×456 69.8 KB

Period
This workout will be released on Monday April 24, 2023, will run for 2 weeks, and the author’s solution will be posted on Sunday May 7, 2023.

Greg
Deneb Workout 06 - Data - Enterprise DNA Practice Dataset.pbix (1.7 MB)

1 Like
2

@Greg, Nice exercise. Thank you for planning it.

image
image906×606 53.1 KB 

{
  "title": {
    "anchor": "start",
    "align": "left",
    "offset": 10,
    "color": "black",
    "text": "Deneb Workout 06",
    "font": "Segoe UI",
    "fontSize": 14,
    "fontWeight": "bold",
    "fontStyle": "normal",
    "subtitle": "Linked Charts with Overview and Detail",
    "subtitleFont": "Segoe UI",
    "subtitleFontSize": 12,
    "subtitleFontWeight": "normal",
    "subtitleFontStyle": "italic",
    "subtitleColor": "#605E5C",
    "subtitlePadding": 10
  },
  "data": {"name": "dataset"},
  "vconcat": [
    {
      "description": "TOP",
      "width": 650,
      "height": 200,
      "mark": {"type": "area"},
      "title": {
        "text": "Overview",
        "anchor": "start"
      },
      "encoding": {
        "y": {
          "field": "Total Sales",
          "type": "quantitative"
        },
        "x": {
          "field": "Date",
          "type": "temporal",
          "axis": {"format": "%b"},
          "title": "Date"
        }
      },
      "selection": {
        "brush": {
          "type": "interval",
          "encodings": ["x"]
        }
      }
    },
    {
      "description": "BOTTOM",
      "width": 650,
      "height": 200,
      "transform": [
        {"filter": {"param": "brush"}}
      ],
      "title": {
        "text": "Detail",
        "anchor": "start"
      },
      "mark": {"type": "area"},
      "encoding": {
        "y": {
          "field": "Total Sales",
          "type": "quantitative"
        },
        "x": {
          "field": "Date",
          "type": "temporal",
          "title": "Date"
        }
      }
    }
  ]
}
3

Hello, here is my attempt at this workout!
Thanks a lot for the nice challenge :slight_smile:

image
image1067×514 43.5 KB

Specification

{
“data”: {“name”: “dataset”},
“title”: {
“text”: “Deneb Workout 06”,
“anchor”: “start”,
“align”: “left”,
“font”: “Verdana”,
“fontSize”: 16,
“fontWeight”: “bold”,
“offset”: 10,
“subtitle”: “Linked Charts with Overview and Detail”,
“subtitleFont”: “Verdana”,
“subtitleFontSize”: 12,
“subtitleFontStyle”: “italic”
},
“vconcat”: [
{
“height”: 120,
“width”: 700,
“title”: {
“text”: “Overview”,
“anchor”: “start”
},
“mark”: “area”,
“params”: [
{
“name”: “brush”,
“select”: {
“type”: “interval”,
“encodings”: [“x”]
}
}
],
“encoding”: {
“x”: {
“field”: “Date”,
“type”: “temporal”
},
“y”: {
“field”: “Total Sales”,
“type”: “quantitative”,
“axis”: {
“tickCount”: 3,
“grid”: false
}
}
}
},
{
“height”: 120,
“width”: 700,
“mark”: “area”,
“title”: {
“text”: “Detail”,
“anchor”: “start”
},
“encoding”: {
“x”: {
“field”: “Date”,
“type”: “temporal”,
“scale”: {
“domain”: {“param”: “brush”}
},
“axis”: {“title”: “”}
},
“y”: {
“field”: “Total Sales”,
“type”: “quantitative”
}
}
}
]
}

1 Like
4

Here’s my solution to this workout, where I used several Deneb/Vega-Lite features, including:
General:
• title block complete with subtitle
• used a vconcat block to concatenate 2 specifications vertically for 2 area charts

First Area Chart (Overview):
• used an in-specification title
• used a selection block to create a brush to allow the user to interactively select the X interval of interest

Second Area Chart (Detail):
• used an in-specification title
• used a transform block to filter the records to those selected with the brush

Here’s the code:

{
  "title": {
    "anchor": "start",
    "align": "left",
    "offset": 10,
    "text": "Deneb Workout 06",
    "font": "Verdana",
    "fontSize": 16,
    "fontWeight": "bold",
    "fontStyle": "normal",
    "subtitle": "Linked Charts with Overview and Detail",
    "subtitleFont": "Verdana",
    "subtitleFontSize": 12,
    "subtitleFontWeight": "normal",
    "subtitleFontStyle": "italic"
  },
  "data": {"name": "dataset"},
  "vconcat": [
    {
      "name": "OVERVIEW",
      "width": 1000,
      "height": 200,
      "mark": {
        "type": "area",
        "line": {"color": "#0F4C81"},
        "color": "#0F4C81"
      },
      "title": {
        "text": "Overview",
        "anchor": "start"
      },
      "selection": {
        "brush": {
          "type": "interval",
          "encodings": ["x"]
        }
      },
      "encoding": {
        "x": {
          "field": "Date",
          "type": "temporal"
        },
        "y": {
          "field": "Total Sales",
          "type": "quantitative"
        }
      }
    },
    {
      "name": "DETAIL",
      "width": 1000,
      "height": 250,
      "transform": [
        {"filter": {"param": "brush"}}
      ],
      "mark": {
        "type": "area",
        "line": {"color": "#6086BC"},
        "color": "#6086BC"
      },
      "title": {
        "text": "Detail",
        "anchor": "start"
      },
      "encoding": {
        "x": {
          "field": "Date",
          "type": "temporal"
        },
        "y": {
          "field": "Total Sales",
          "type": "quantitative"
        }
      }
    }
  ]
}

A brush can also be created to use both X and Y values to create an “area” of interest. A 2nd page is included in the PBIX below to showcase such an situation (in this case, using a primary scatter chart and a secondary bar chart).

Congratulations to all who participated, and good luck.
Greg
Deneb Workout 06 - Linked Charts with Overview and Detail.pbix (1.7 MB)

5

This is a sample of interactive multi-view by using selection

Open the Chart in the Vega Editor

In the sample, default values of x-axis are set as below:

{“x”: [{“year”: 2007, “month”: 7}, {“year”: 2009, “month”: 6}]}

I am trying to set “dynamic” default values for the brushed data on the Overview Chart x-axis

I would like to establish a dynamic default date range selection based on a variable date rather than a fixed month.

For instance,

07-2007 → 180 days prior to the current maximum date

06-2009 → the current maximum date

Could you please help me with this?

7

Hi @kiehn.skyla.

It is discouraged to post to solved threads, as many forum members do not review solved posts. It is recommended to start a brand new thread for each new question, and, if it helps, to add a link to any solved post that may provide more information.

@EnterpriseDNA, please split the responses in this solved thread (starting with the post above this) into its own thread.

Nonetheless, AFAIK, Vega-Lite only accepts hard-coded default values for parameters. An idea to try might be to add a “transform” block above the “params” block and calculate the value you’d like to use, then

(Did a quick search online and found this, which may be of some help:

)

Good luck.
Greg

1 Like