Introduction
In this week’s challenge we are going to try to create a chart on rising sea levels where the y-scale of mm will display on screen in physical mm. You can try this with whichever custom visual you like, but the example laid out below will be for the utilisation of the HTML Content Visual.
With CSS, their many absolute and relative units in which to encode length https://www.w3schools.com/cssref/css_units.php
Unless intended for print, it is not generally recommended to utilise absolute units such as mm or px (pixels) as every screen device has different size and resolution. But this week we are going to learn why that is and get inventive about how we can display these scales correctly as possible on screen.
In CSS measurements there are 96pixels per inch (although some of our screens may be higher); which makes 3.779527559055118 pixels per mm; the measurements can also be affected by the available screen space not taken up by OS and our OS screen zoom-level. We can use sites such as https://webbrowsertools.com/screen-size/ to help us determine how to adjust the scale of our charts for our screens.
The challenge will be to create a ruler-style axis with major and minor tick axes at appropriate intervals with a line or area chart overlayed. This is an opportunity to get very creative and perhaps create a time-based animation or mouseover action displaying a horizontal rule for the effect of bobbing along the surface of the water.
Don’t forget to cite your source.
Happy Vizin’
Kez
Requirements
- Obtain the data
- Obtain HTML Content from Appsource
- Create a new DAX measure for the visual
- Create a Ruler-Axis with major ticks at 10mm and minor ticks at 1mm
- Create a line or area graph (HINT : search for SVG sparkline templates)
- Optional : create a linear gradient beneath the line or clippath an image (will need to use the full HTML Content Visual for image instead of HTML Lite)
- Add parameters so end users can adjust the scale according to their screen and browser attributes.
- Optional create a vertical rule and tooltip on mouseover of line (see previous week 30 2024)
- Publish and share
Dataset
This week’s dataset is downloadable from Our World in Data here
Share
After you finish your workout, share on Bluesky or LinkedIn using the hashtags #WOW2025 and #PowerBI, and tag @MMarie, @shan_gsd, @KerryKolosko. Also make sure to fill out the Submission Tracker so that we can count you as a participant this week in order to track our participation throughout the year.
Solution
Coming soon.