The one with the scatterplot sheet music.

The chart was posted as part of the PowerBI Workout Wednesday 2022  challenge.

  Dataset

The dataset can be found on the Workout Wednesday link above.

Before you continue with the template, please be mindful that I don’t have any music background. The challenge was merely done to see what is possible with Deneb and text layers.

  Additional fields created

I added two rows per song to the Music Notes worksheet.

1. Pitch : SingleBar / Length : 1 / Distance Middle C : 0
2. Pitch : Gcleff / Length : 2 / Distance Middle C : 0

The two records above was also added to the Note Mapping worksheet, and then added a “Scale” field.

MiddleC	Note	Scale
1	C	6.5
1	B	6
1	B-flat	6
1	A	5.5
1	A-flat	5.5
1	G	5
1	G-flat	5
1	F	4.5
1	E	4
1	E-flat	4
1	D	3.5
1	D-flat	3.5
0	C	3
-1	B	2.5
-1	B-flat	2.5
-1	A	2
-1	A-flat	2
-1	G	1.5
-1	G-flat	1.5
-1	F	1
-1	E	0.5
-1	E-Flat	0.5
-1	D	0
-1	D-flat	0
-1	C	-0.5
0	Rest	3
0	SingleBar	3
0	Gcleff	3

I then created a “KEY” column in Power Query to create a unique field to map the notes from the Music Notes to the Note Mapping table.

  Fields used

• Note
• Scale
• Index
• Length

  Specification

This specification can be enhanced with the song lyrics. Add the lyrics to the Music Notes worksheet, next to the corresponding note. Then add the additional text layer for the lyrics.

The specification in a nutshell:

* layer
  * text (𝅘𝅥 note length <= 2)
  * text (𝅗𝅥 note length > 2 and note length <= 5)
  * text (__ for notes that is outside of the staff)
  * text (𝅝 note length > 5)
  * text (𝄀 where the Note = 'SingleBar')
  * text (𝄞 where the Note = 'Gcleff')
  * text (𝄩 where the Note = 'Rest')

The challenge is to get the notes to align to where the “scatterplot” points are. Note that some notes has a different angle, which is possible with the “Angle” attribute to the text mark.

  View chart

Open the Chart in the Vega Editor

  JSON template

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "usermeta": {
    "deneb": {
      "build": "1.2.0.1",
      "metaVersion": 1,
      "provider": "vegaLite",
      "providerVersion": "5.2.0"
    },
    "interactivity": {
      "tooltip": true,
      "contextMenu": true,
      "selection": false,
      "highlight": false,
      "dataPointLimit": 50
    },
    "information": {
      "name": "The one with the scatterplot sheet music.",
      "description": "A scatterplot that generates sheet music",
      "author": "Thys",
      "uuid": "52404676-5a5d-4040-93ee-4b2b5cc2901f",
      "generated": "2022-06-17T15:46:05.120Z"
    },
    "dataset": [
      {
        "key": "__0__",
        "name": "Note",
        "description": "The note description",
        "type": "numeric",
        "kind": "column"
      },
      {
        "key": "__1__",
        "name": "Scale",
        "description": "The scale of the note (Y-axis)",
        "type": "numeric",
        "kind": "measure"
      },
      {
        "key": "__2__",
        "name": "Index",
        "description": "The index of the note (X-axis)",
        "type": "numeric",
        "kind": "column"
      },
      {
        "key": "__3__",
        "name": "Length",
        "description": "The length of the note",
        "type": "numeric",
        "kind": "measure"
      }
    ]
  },
  "config": {
    "autosize": {
      "type": "fit",
      "contains": "padding"
    },
    "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"
    },
    "axis": {
      "ticks": false,
      "grid": false,
      "domain": false,
      "labelColor": "#605E5C",
      "labelFontSize": 12,
      "titleFont": "wf_standard-font, helvetica, arial, sans-serif",
      "titleColor": "#252423",
      "titleFontSize": 16,
      "titleFontWeight": "normal"
    },
    "axisQuantitative": {
      "tickCount": 3,
      "grid": true,
      "gridColor": "#C8C6C4",
      "gridDash": [1, 5],
      "labelFlush": false
    },
    "axisBand": {"tickExtra": true},
    "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"
    },
    "legend": {
      "titleFont": "Segoe UI",
      "titleFontWeight": "bold",
      "titleColor": "#605E5C",
      "labelFont": "Segoe UI",
      "labelFontSize": 13.333333333333332,
      "labelColor": "#605E5C",
      "symbolType": "circle",
      "symbolSize": 75
    }
  },
  "data": {"name": "dataset"},
  "height": {"step": 3},
  "encoding": {
    "x": {
      "field": "__2__",
      "type": "quantitative",
      "axis": null
    },
    "y": {
      "field": "__1__",
      "type": "nominal",
      "title": null,
      "axis": {
        "labels": false,
        "grid": true,
        "values": [1, 2, 3, 4, 5]
      },
      "scale": {
        "domain": [
          7,
          6.5,
          6,
          5.5,
          5,
          4.5,
          4,
          3.5,
          3,
          2.5,
          2,
          1.5,
          1,
          0.5,
          0,
          -0.5
        ]
      },
      "sort": {
        "field": "__1__",
        "order": "descending"
      }
    }
  },
  "layer": [
    {
      "transform": [
        {
          "filter": "datum['__3__'] <= 2 && datum['__0__'] != 'Rest'
            && datum['__0__'] != 'SingleBar' && datum['__0__'] != 'Gcleff'"
        }
      ],
      "mark": {
        "type": "text",
        "size": 30,
        "dy": -4,
        "angle": {
          "expr": "datum['__1__'] > 3 ? 180 : 0"
        }
      },
      "encoding": {
        "text": {"value": "𝅘𝅥"},
        "color": {"value": "black"}
      }
    },
    {
      "transform": [
        {
          "filter": "datum['__3__'] > 2 && datum['__3__'] <= 5 && 
              datum['__0__'] != 'Rest' && datum['__0__'] != 'SingleBar' 
                && datum['__0__'] != 'Gcleff'"
        }
      ],
      "mark": {
        "type": "text",
        "size": 30,
        "dy": -5,
        "angle": {
          "expr": "datum['__1__'] > 3 ? 180 : 0"
        }
      },
      "encoding": {
        "text": {"value": "𝅗𝅥"},
        "color": {"value": "black"}
      }
    },
    {
      "transform": [
        {
          "filter": "datum['__1__'] < 0.5 || datum['__1__'] > 5.5"
        }
      ],
      "mark": {
        "type": "text",
        "size": 20,
        "dy": -7,
        "angle": {
          "expr": "datum['__1__'] > 3 ? 180 : 0"
        }
      },
      "encoding": {
        "text": {"value": "__"},
        "color": {"value": "black"}
      }
    },
    {
      "transform": [
        {
          "filter": "datum['__3__'] > 5 && datum['__0__'] != 'Rest' 
            && datum['__0__'] != 'SingleBar' && datum['__0__'] != 'Gcleff'"
        }
      ],
      "mark": {
        "type": "text",
        "size": 25,
        "dy": -5
      },
      "encoding": {
        "text": {"value": "𝅝"},
        "color": {"value": "black"}
      }
    },
    {
      "transform": [
        {
          "filter": "datum['__0__'] == 'SingleBar'"
        }
      ],
      "mark": {
        "type": "text",
        "dy": 3,
        "size": 35
      },
      "encoding": {
        "text": {"value": "𝄀"},
        "color": {"value": "black"}
      }
    },
    {
      "transform": [
        {
          "filter": "datum['__0__'] == 'Gcleff'"
        }
      ],
      "mark": {
        "type": "text",
        "size": 40
      },
      "encoding": {
        "text": {"value": "𝄞"},
        "color": {"value": "black"}
      }
    },
    {
      "transform": [
        {
          "filter": "datum['__0__'] == 'Rest'"
        }
      ],
      "mark": {
        "type": "text",
        "size": 25
      },
      "encoding": {
        "text": {"value": "𝄩"},
        "color": {"value": "black"}
      }
    }
  ]
}