You should probably cite the source for this chart: https://en.wikipedia.org/wiki/IPA_vowel_chart_with_audio

The license for the sound files also requires attribution, see e.g. https://en.wikipedia.org/wiki/File:Open-mid_front_rounded_vowel.ogg

Thanks, I'll add a caption with the attribution. Should that be sufficient?

Not according to https://wiki.creativecommons.org/wiki/best_practices_for_attribution#This_is_an_incorrect_attribution and https://api.wikimedia.org/wiki/Documentation/Code_samples/Images_and_media#Audio, and unfortunately there are a number of different authors. Following the examples in the first link, an absolute minimum (according to "reasonable effort") would be to mention and link the license, and to refer readers to the info links in the vowel chart for attribution on individual files. (Btw, I'm not trying to make your life difficult. :) Proper attribution can be tricky, and I myself am interested to learn how we can adhere to it for files from Wikipedia.) Luckily you can also fetch all the info dynamically via the file name. I would even recommend to remove all sound file attachments, and just keep a list of the file names. That way you can get both the attribution and the URL in one request, then play the file remotely. This helper fetches metadata and constructs the attribution according to the second link (it also blankly assumes CC-BY-SA 3.0, but I guess that should be OK?). I've designed it to set the file URL as the element's value, so that it can also be used with viewof. async function commonsFile(filename) { const data = await (await fetch(`https://api.wikimedia.org/core/v1/commons/file/File:${filename}`)).json(); const attr = htl.html`<div> <a href="${data.file_description_url}">${data.title}</a><br> by ${data.latest.user.name} | <a href="https://creativecommons.org/licenses/by-sa/3.0/">CC BY-SA 3.0</a> `; attr.value = data.original.url; return attr; } Example: { // Output this variable to show the attribution info. const attribution = await commonsFile('PR-open_back_rounded_vowel.ogg'); // The actual sound file, e.g. playMusic(attribution.value) const fileURL = attribution.value; } viewof example: // cell 1 viewof myfile = commonsFile('PR-open_back_rounded_vowel.ogg') // cell 2 playMusic(myfile)

Nice visual. Suggestion: tweak it so the text stays up right, just like in https://observablehq.com/@martien/svg-maintain-text-orientation. Maybe also make the wheels directly draggable?

Thanks, fixed the text. Do you have any suggestions for learning how to use the drag function? I've been having trouble with it

No personal experience with dragging items. For inspiration, see: • https://observablehq.com/@d3/hello-d3-drag • https://observablehq.com/@fil/drag-to-re-arrange • https://observablehq.com/@d3/circle-dragging-iii

Learn from the best (Fil & MBostock).