44:["$","title",null,{"children":"Audible Visualization | Max Lee | Observable"}] 4c:T9e4,chart = { const container = d3.create("div") .attr("id", "chart-container") .attr("aria-label", `Scatterplot showing the average register of popular songs increasing from ${minYear} to 1990 and then decreasing to ${maxYear}`); const svg = container.append("svg") .attr("height", config.height) .attr("width", config.width); const canvas = container.append("canvas") .attr("height", config.height) .attr("width", config.width); const ctx = canvas.node().getContext("2d"); let selected; let audioOff = true; const drawPoint = (d, i) => { const rectInfo = [xScale(d.year), yScale(d.avg_register), config.rectWidth, config.rectHeight]; ctx.clearRect(...rectInfo); ctx.beginPath(); ctx.rect(...rectInfo); ctx.fillStyle = selected === i ? "#02a199" : "#9d0255"; ctx.fill(); }; function getFrequency(dist) { // given int root (e.g. 49 for A4) and dist (e.g. 1 for Bb4) // get the frequency // formula from https://en.wikipedia.org/wiki/Piano_key_frequencies const freqNum = config.audioRoot + dist; return Math.pow(Math.pow(2, 1/12), freqNum - 49) * 440; } function playNote(dist, duration) { const audioCtx = new AudioContext(); var osc = audioCtx.createOscillator(); osc.type = "square"; osc.connect(audioCtx.destination); osc.frequency.value = getFrequency(dist); osc.start(0); setTimeout(() => { osc.stop(); osc.disconnect(audioCtx.destination); }, duration); } function playData() { if (audioOff) { audioOff = false; let pos = 0; const dists = songData .map(row => Math.round((parseFloat(row.avg_register - minRegister) * 7))); const player = setInterval(() => { if (pos >= dists.length || audioOff) { selected = undefined; audioOff = true; setTimeout(() => { songData.forEach((d, i) => {drawPoint(d, i)}); }, 1000); return; } selected = pos; playNote(dists[pos], 1000/4); drawPoint(songData[pos], pos); pos++; }, 1000/4); if (pos >= dists.length) { clearInterval(player); } } } document.getElementById("audible-button").addEventListener("click", playData); songData.forEach((d, i) => {drawPoint(d, i)}); svg.append("g") .attr("class", "axis") .attr("transform", `translate(${config.padLeft},0)`) .call(yAxis); svg.append("g") .attr("class", "axis") .attr("transform", `translate(0, ${config.height - config.padBottom})`) .call(xAxis); return container.node() }4d:[{"id":"da32707c2cec9db807de5215959ed0be92f928eeafce54412f88e481e2bb92af9950e3b7837fee1b44513ab48528d36f165677b19e9af8ee26538df190d6a627","href":"https://static.observableusercontent.com/files/da32707c2cec9db807de5215959ed0be92f928eeafce54412f88e481e2bb92af9950e3b7837fee1b44513ab48528d36f165677b19e9af8ee26538df190d6a627","name":"avg_registers.csv","type":"text/csv","lastModified":1606619653761.529,"size":2059}] 48:{"id":"6bf78ed666941376","slug":"audible-visualization","title":"Audible Visualization","thumbnail":"572559d83dfae278c8bce6eb26e1c6f21595b593d1bf0d2c123de2a477adf2ab","access_level":"public","create_time":"$D2020-11-29T03:02:47.067Z","update_time":"$D2020-11-29T04:58:37.757Z","view_time":null,"first_public_time":"$D2020-11-29T04:56:46.496Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"203ecb96c3cbf31d","login":"maxblee","name":"Max Lee","avatar_url":"https://avatars-next.observableusercontent.com/008cb0992cf50fd97decf605b798cf8b3376b7afac67ce37dc346802a5da918c","tier":"starter_2024","bio":"MA Journalism Student at Stanford","followed_by_you":false,"follows_you":false},"version":141,"publish_version":141,"role":null,"authored":false,"authors":[{"type":"individual","id":"7283edc4b9f71931","login":"maxblee","name":"Max Lee","avatar_url":"https://avatars-next.observableusercontent.com/008cb0992cf50fd97decf605b798cf8b3376b7afac67ce37dc346802a5da918c","tier":null,"bio":"MA Journalism Student at Stanford","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"7283edc4b9f71931","login":"maxblee","name":"Max Lee","avatar_url":"https://avatars-next.observableusercontent.com/008cb0992cf50fd97decf605b798cf8b3376b7afac67ce37dc346802a5da918c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"698b29bf13e42142","slug":"visualization-a-week","title":"Visualization a Week","owner":{"id":"203ecb96c3cbf31d","login":"maxblee","name":"Max Lee"}},"type":"notebook","body":{"titling":"auto","title":"Audible Visualization","cells":[{"id":0,"value":"md`# Audible Visualization\n\nFor this week's visualization, I wanted to explore an idea I came across for making data visualizations more accessible for people with visual disabilities. Specifically, I came across an [article about sonification](https://www.perkinselearning.org/technology/blog/sonification-sounds-meaning-activity), or using sound to convey the meaning of a visualization.\n\nTo explore this concept, I decided to take a story about [the trend of falsetto voices in pop music](https://pudding.cool/2019/08/register/) by the Pudding. The story seemed like the perfect fit to explore this concept (and, bless them, the Pudding published their data and analysis to GitHub and gave them an MIT license).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"html`\n

\n\t

How much falsetto?

\n\t

\n\t\t

Listen to this visualization

\n\t\t

\n\t\t\tBetween 1960 and 1990, the average register of popular songs\n\t\t\tincreased considerably, according to analysis from the Pudding.\n\t\t\tFrom 1990 to the present day, the register has mostly gone down.\n\t\t

\n\t\t

Press the play button to hear a data visualization\n\t\t\tof songs changing \n\t\t\ttheir pitch over time.\n\t\t

\n\t\t\n\t

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"songData = d3.csvParse(await FileAttachment(\"avg_registers.csv\").text())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"minRegister = Math.min(...songData.map(d => parseFloat(d.avg_register)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"yDomain = [7.5, 5]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"minYear = Math.min(...songData.map(d => parseInt(d.year)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"maxYear = Math.max(...songData.map(d => parseInt(d.year)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"xDomain = [minYear, maxYear]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"config = { return {\n padLeft: 50,\n width: width,\n height: 300,\n padTop: 10,\n padBottom: 50,\n padRight: 10,\n audioRoot: 50,\n rectWidth: 13,\n rectHeight: 4\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"xScale = d3.scaleLinear()\n .domain(xDomain)\n .range([config.padLeft, config.width - config.padRight - config.rectWidth])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"yScale = d3.scaleLinear()\n .domain(yDomain)\n .range([config.padTop, config.height - config.padBottom])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"xAxis = d3.axisBottom(xScale)\n .tickFormat(d3.format(\"d\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"yAxis = d3.axisLeft(yScale)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"md`## Imports, etc`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 24:null