docs: updated simple worked example

docs/getting-started/simple-worked-example.md

@@ -11,12 +11,12 @@ In the following pages, we'll create a simple bar chart, using the visual, some
 <iframe
   width="100%"
   height="486"
-  src="https://app.powerbi.com/view?r=eyJrIjoiNGI4MWQ4OTgtMjUzNi00ODlmLWFjMjItMzQ5NjA1YjZmMzcwIiwidCI6IjUzYmJlMGQ3LTU0NzItNGQ0NS04NGY0LWJiNzJiYjFjMjI4OSJ9"
+  src="https://app.powerbi.com/view?r=eyJrIjoiOWFmYjVmZDktMjNlNC00MTNhLThjYTEtNmYwYjIwZWUzODNiIiwidCI6IjUzYmJlMGQ3LTU0NzItNGQ0NS04NGY0LWJiNzJiYjFjMjI4OSJ9"
   frameborder="0"
   allowFullScreen="true"
 ></iframe>
 
-&nbsp;&nbsp;&nbsp;&nbsp;_[Download this workbook](/pbix/Deneb-Simple-Vega-Lite-Bar-Chart-Example-1.2.0.pbix)_
+&nbsp;&nbsp;&nbsp;&nbsp;_[Download this workbook](/pbix/Deneb-Simple-Vega-Lite-Bar-Chart-Example-1.6.0.pbix)_
 
 ## Our Starting Data
 
@@ -35,9 +35,7 @@ Try to think about the dataset you wish to add to a Deneb visual in terms of how
 ## Adding the Visual
 
 :::info No Visual in your Report?
-
 If you need assistance with this, refer to the [Getting Started](getting-started) page.
-
 :::
 
 Once you have added Deneb to your report, you should see it in the _Visualizations_ pane, eg.:
@@ -56,6 +54,10 @@ We'll now add the `[City]` column and `[Mean Temperature]` measure to Deneb's **
 
 At this point, we need to create a specification, which is required to instruct Vega-Lite (or Vega) how your visualization should be rendered.
 
+:::info Dataset requirements
+There is a limitation with custom visuals where at least one measure needs to be present in the visual dataset for it to be able to persist properties back to the report for retrieval later on.
+:::
+
 ## Opening the Visual Editor
 
 We can now open the Visual Editor by selecting the visual header (...) and then _Edit_, e.g.:
@@ -74,7 +76,7 @@ If you accidentally dismiss the dialog, or it doesn't show, you can bring it up
 
 Using Vega or Vega-Lite requires a specification to be written using JSON. You can either select the **\[empty]** template to begin editing with a bare-minimum specification with the dataset bound to it, or use a predefined template.
 
-Let's choose the **Simple Bar Chart** template by clicking on it. Note that we now get some additional details about the template, as well as some required placeholders:
+Let's choose **Create using...** > **Vega-Lite** > **Interactive bar chart** template by clicking on it. Note that we now get some additional details about the template, as well as some required placeholders:
 
 ![Selecting a pre-defined template allows you to assign columns or measures from the Values data role to placeholders](./img/bar-chart-template-initial.png "Selecting a pre-defined template allows you to assign columns or measures from the Values data role to placeholders.")
 
@@ -186,88 +188,99 @@ We also have some other stuff going on in the editor's **Config** tab, thanks to
 
 ## Reviewing Generated Config
 
-In our editor's **Config** tab, we'll have the following [Vega-Lite JSON configuration](http://vega.github.io/vega-lite/docs/config.html). There's a lot going on here, and the intention is to provide you with a more "feature-complete" set of config so that you can see how things can look with a fleshed-out set of properties (and this is based on the [`powerbi` vega theme](https://vega.github.io/vega-themes/?theme=powerbi)). You don't need to worry too much about this for the moment.
+In our editor's **Config** tab, we currently have an empty JSON object:
 
 ```json title="Generated Config" showLineNumbers
+{}
+```
+
+Config is there for you to be able to apply specific cosmetic attributes to things in your specification, without having everything tightly-coupled. You can do this in your specification if you like, but abstracting as much as you can into this editor allows you to make cosmetic changes more easily. It's very versatile and you can read more about it for each language in more detail on each documentation site ([Vega](https://vega.github.io/vega/docs/config/) | [Vega-Lite](https://vega.github.io/vega-lite/docs/config.html)).
+
+One thing that's handy for Power BI - due to the ability to dynamically size visuals - is [automatic sizing for simpler (single or layered) views](http://vega.github.io/vega-lite/docs/size.html#autosize) - and this is automatically applied for you without needing to specify it.
+
+By default, this template doesn't apply any config, so that you can learn what the defaults look like and build from there. Power BI does not always have sensible defaults for a lot of their core chart types, so you can learn a lot about what is available and how much you can customize by experimenting with this.
+
+## Intial Config for Our Visual
+
+We will make some changes to this config so that we can see how we might go about making a design look "at home" with the Power BI defaults. Modify the JSON as follows and click the **Apply** (▶️) button (or pressing [Ctrl + Enter]):
+
+```json title=Updated Initial Config showLineNumbers
 {
   "view": { "stroke": "transparent" },
-  "font": "Segoe UI",
-  "arc": {},
-  "area": {
-    "line": true,
-    "opacity": 0.6
-  },
-  "bar": {},
-  "line": {
-    "strokeWidth": 3,
-    "strokeCap": "round",
-    "strokeJoin": "round"
-  },
-  "path": {},
-  "point": { "filled": true, "size": 75 },
-  "rect": {},
-  "shape": {},
-  "symbol": {
-    "strokeWidth": 1.5,
-    "size": 50
-  },
-  "text": {
-    "font": "Segoe UI",
-    "fontSize": 12,
-    "fill": "#605E5C"
-  },
+  "font": "Segoe UI, wf_segoe-ui_normal, helvetica, arial, sans-serif",
   "axis": {
-    "ticks": false,
-    "grid": false,
     "domain": false,
     "labelColor": "#605E5C",
     "labelFontSize": 12,
-    "titleFont": "wf_standard-font, helvetica, arial, sans-serif",
+    "ticks": false,
+    "titleFont": "din",
     "titleColor": "#252423",
     "titleFontSize": 16,
     "titleFontWeight": "normal"
   },
-  "axisQuantitative": {
-    "tickCount": 3,
-    "grid": true,
+  "axisX": {
     "gridColor": "#C8C6C4",
     "gridDash": [1, 5],
-    "labelFlush": false
-  },
-  "axisX": { "labelPadding": 5 },
-  "axisY": { "labelPadding": 10 },
-  "header": {
-    "titleFont": "wf_standard-font, helvetica, arial, sans-serif",
-    "titleFontSize": 16,
-    "titleColor": "#252423",
-    "labelFont": "Segoe UI",
-    "labelFontSize": 13.333333333333332,
-    "labelColor": "#605E5C"
+    "labelFlush": false,
+    "labelPadding": 5,
+    "tickCount": 3
   },
-  "legend": {
-    "titleFont": "Segoe UI",
-    "titleFontWeight": "bold",
-    "titleColor": "#605E5C",
-    "labelFont": "Segoe UI",
-    "labelFontSize": 13.333333333333332,
-    "labelColor": "#605E5C",
-    "symbolType": "circle",
-    "symbolSize": 75
+  "axisY": {
+    "grid": false,
+    "labelPadding": 10
   }
 }
 ```
 
-Config is a nice feature of the Vega languages that provides us with the ability to style and set out the cosmetic elements of our visual design away from the main "logic" (which we have in the **Specification** tab). One thing that's handy for Power BI - due to the ability to dynamically size visuals - is [automatic sizing for simpler (single or layered) views](http://vega.github.io/vega-lite/docs/size.html#autosize) - and this is automatically applied for you without needing to specify it.
+Our visual will update with these cosmetic changes:
+
+![config-inital-changes](img/config-inital-changes.png "Once we have applied our inital config, the visual updates to show the costmetic changes.")
+
+A brief summary of what this has done to our visual:
+
+- We've removed the border (stroke) from around our plot area.
+- We've set the general font to use Segoe UI. Note that here we have added [fallback options](https://www.w3schools.com/css/css_font_fallbacks.asp) for non-Windows devices.
+- We've made a generic configuration for both axes to:
+  - Remove the domain (origin) line.
+  - Set the color and font size of the axis labels.
+  - Remove the tick markers.
+  - Update the title to use the DIN font, and style it accordingly.
+- We have styled the x-axis as follows:
+  - We have modified the color and style (dash) of the gridlines.
+  - We have modified the distance (padding) of the labels from the domain, and made the start and end labels sit central to their grid line, rather than flush to them.
+  - We have specified a reduced density of the ticks, which will also affect the labels.
+- The y-axis has the following changes:
+  - We have turned off the grid lines.
+  - We have increased the padding of the labels from the domain line (slightly larger than the x-axis)
+
+:::info Extended Config Option for New Templates
+If you want a more fully-featured config that matches Power BI more generically, you can create a new specification using the inbuilt **[empty (with Power BI theming)]** template, which uses the [`powerbi` vega theme](https://vega.github.io/vega-themes/?theme=powerbi).
+:::
 
-You can include your config in the specification's JSON at the top-level if you like, but the intention here is to separate the cosmetic aspects of the visual away from its logical ones, so we have a separate tab in the editor for this for those who wish to adopt this approach.
+## Further Bar Styling
 
-You can extend the config significantly to customize many parts of your visual, so it's worth diving into the [documentation for this](http://vega.github.io/vega-lite/docs/config.html) when you're ready.
+Let's make one more change, so that our bars look a little different to the conventional bar chart. After the closing brace on line 24, add the following:
 
-:::info That's a Lot of JSON!
-The configuration applied above is significantly more than our simple chart needs, but we've prepared this so that the template visuals look "at home" in Power BI, and to give you a jumping-off point for your own ideas. You are free to remove or customize this as much as you like to achieve the visual design you are looking for.
-:::
+```json
+{
+  ...
+  "bar": {
+    "color": "#605E5C",
+    "cornerRadiusTopRight": 10,
+    "cornerRadiusBottomRight": 10
+  }
+}
+```
+
+Again, let's apply our changes and see the results. Your visual should update as follows:
 
-## Tooltips
+![After applying changes to the config, the bar each bar has rounded corners and a different fill color.](./img/config-applied.png "After applying changes to the config, the bar each bar has rounded corners and a different fill color.")
+
+## Interactivity Review
+
+There are some features of the specification and settings that allow the visual to be interactive with others in the report. Interactivity is a more advanced topic, but the goal of this example is to show you the art of the possible. It's worth reading up on the interactivity features and understanding the quirks of Power BI and how Deneb tries to bridge these gaps (available in the sidebar), but a short overview of these features and how they are applied in our example are as follows:
+
+### Tooltips
 
 Our template enables tooltips by default, so we can hover over a data point in our visual and this will display a default tooltip, e.g.:
 
@@ -281,7 +294,7 @@ If we were to set up a tooltip page that included one of the columns from our vi
 Note that report page tooltips will only work if your data point hasn't been transformed or mutated from the row context passed-into your visual's dataset. In the cases where data points cannot be reconciled back to the data model, the visual will display a default tooltip instead. Please refer to the [Interactivity Features](interactivity-overview) or [Tooltips](interactivity-tooltips) pages for further details.
 :::
 
-## Cross-Highlighting
+### Cross-Highlighting
 
 Creators often have their visuals enabled for cross-highlighting, which means that if another visual is clicked, then other visuals will adjust their display to show the highlighted values in context with their original ones.
 
@@ -325,7 +338,7 @@ Creators often have their visuals enabled for cross-highlighting, which means th
 It normally might be a bit much for a simple walkthrough, but it's likely that you're heare because you want to build your own visual that looks and feels at home in Power BI. Cross-highlighting is a part of this journey, so we want to give you a simple way in to this. You can read in more detail in the [Interactivity Features](interactivity-overview) or [Cross-Highlighting](interactivity-highlight) pages for further details.
 :::
 
-## Cross-Filtering
+### Cross-Filtering
 
 Many Power BI visuals allow you to cross-filter others by clicking (or Ctrl-clicking data points). We can also do this with Deneb, but there are elements of user experience that we need to consider: most Power BI visuals will dim or fade the un-selected data points so that our users understand what is happening between our visual and others.
 
@@ -358,35 +371,11 @@ Deneb uses a special field called `__selected__` to track the status of each row
 Note that much like report page tooltips, Cross-Filtering will only work well if your data point hasn't been transformed or mutated from the row context passed-into your visual's dataset. In the cases where data points cannot be reconciled back to the data model, this may not work as intended. You also need to manage the visual effects of your selected and un-selected marks. Please refer to the [Interactivity Features](interactivity-overview) or [Cross-Filtering (Selection)](interactivity-selection) pages for further details.
 :::
 
-## Adding Further Config
-
-The config that's present in the loaded template should already make the chart look quite at home in our report, but we'll make some small changes to the bar mark we're using. Update the `bar` property (on line 13) as follows:
-
-```json showLineNumbers
-  "bar": {
-    "color": "#605E5C",
-    "cornerRadiusTopRight": 10,
-    "cornerRadiusBottomRight": 10
-  },
-```
-
-We can apply our changes by clicking the **Apply** command, or pressing **\[ Ctrl + Enter ]**:
-
-![The Apply command will persist changes and update your specification](./img/apply-command.png "The Apply command will persist changes and update your specification.")
-
-:::info Auto-Apply
-Note that the **Auto-Apply** command can be used to ensure changes are applied as you type rather than manually, although this isn't recommended for complex specifications or ones that use a large number of data points.
-:::
-
-Once we've applied the changes, our visual updates as follows:
-
-![After applying changes to the config, the bar each bar has rounded corners and a different fill color.](./img/config-applied.png "After applying changes to the config, the bar each bar has rounded corners and a different fill color.")
-
 ## Viewing the Finished Product
 
 When you're finished, click on _Back to report_ to bring you back out of focus mode and to the report canvas. Our visual will now be 'regular sized', thanks to the `autosize` configuration we applied earlier on:
 
-![Returning to the report shows our visual specification "regular-sized".](./img/regular-sized-bar.png "Returning to the report shows our visual specification "regular-sized".")
+![regular-sized-bar](img/regular-sized-bar.png "Returning to the report shows our visual specification in place.")
 
 ## Where Next?