2b:null 2c:["$","title",null,{"children":"Audible Data Visualization | Jose Jimenez | Observable"}] 31:T5c2,create_chart = (source_data) => { let count_chart = vl.markLine() .data(source_data) .width(500) .encode( vl.x().fieldT('date'), vl.y().fieldQ('count').axis({title: "Students Self Reporting as Positive"}), vl.size(vl.value(6)), vl.color(vl.value('black')) ) let percent_chart = vl.markBar() .data(source_data) .encode( vl.x().fieldT('date'), vl.y().fieldQ('percent').axis({title: "Percent of Student Population (32,535)"}), vl.size(vl.value(25)), vl.opacity(vl.value(1)), vl.color(vl.value('#FFCD00')), vl.tooltip([vl.fieldT('date'), vl.fieldQ('count'),vl.fieldQ('percent'), vl.fieldQ('daily_rate')]) ) let rate_chart = vl.markTrail().title('Average Daily Rate since previous report') .data(source_data) .width(500) .encode( vl.x().fieldT('date'), vl.y().fieldQ('daily_rate'), vl.size().fieldQ('daily_rate'), vl.tooltip([vl.fieldT('date'), vl.fieldQ('count'),vl.fieldQ('percent'), vl.fieldQ('daily_rate')]) ) let rate_text = vl.markText({yOffset: vl.fieldQ('yoffset')}) .data(source_data) .transform([ vl.calculate('-15').as('yoffset'), vl.calculate('random() * -10 +3').as('xoffset') ]) .encode( vl.x().fieldT('date'), vl.y().fieldQ('daily_rate'), vl.text().fieldQ('daily_rate'), ) let rates = vl.layer(rate_chart, rate_text) let comp_chart = vl.layer(percent_chart,count_chart).title("UI Self-Reported Covid Student Cases").resolve({scale: {y: 'independent'}}) return vl.vconcat(rates) }32:[] 2f:{"id":"b59d2c34f19f6365","slug":"audible-data-visualization","title":"Audible Data Visualization","thumbnail":"340175327e73e9f6266a026e3e804243190bb7a38cdf2459d13449922e583643","access_level":"public","create_time":"$D2021-01-04T16:32:48.560Z","update_time":"$D2021-01-04T17:06:18.874Z","view_time":null,"first_public_time":"$D2021-01-04T17:03:51.422Z","fork":true,"stars":2,"starred":false,"owner":{"type":"team","id":"11eff763c21b0530","login":"jjimenez","name":"Jose Jimenez","avatar_url":"https://avatars-next.observableusercontent.com/5d28ac3054c420a200dcd8a0bd3367e2263d2f168c4aa5eaa0c89640622d6088","tier":"starter_2024"},"version":827,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"214adfe1a708eb31","login":"jjimenez","name":"Jose Jimenez","avatar_url":"https://avatars-next.observableusercontent.com/5d28ac3054c420a200dcd8a0bd3367e2263d2f168c4aa5eaa0c89640622d6088","tier":null}],"members":[{"type":"individual","id":"214adfe1a708eb31","login":"jjimenez","name":"Jose Jimenez","avatar_url":"https://avatars-next.observableusercontent.com/5d28ac3054c420a200dcd8a0bd3367e2263d2f168c4aa5eaa0c89640622d6088","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Audible Data Visualization","cells":[{"id":0,"value":"md`# Audible Data Visualization`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":774,"value":"md`## This is based on a sample of data related to Positive Covid Tests`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":662,"value":"html`

Daily Rate of Positive Tests

The chart below shows the daily rate of positive tests over time

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":701,"value":"sample_with_tab = {\n let rendered = c3({\n data: c3_data,\n axis: {\n x: {\n type: 'timeseries',\n tick: {\n format: '%m-%d-%Y'\n }\n }\n }\n });\n let svg = rendered.getElementsByTagName('svg')\n let title = document.createElement('title')\n title.id = 'svg_with_title_id'\n title.innerText ='Daily Rate of Positive Tests'\n let desc = document.createElement('desc')\n desc.id = 'svg_with_title_desc_id'\n desc.innerText = 'The chart below shows the daily rate of positive tests over time'\n svg[0].prepend(desc)\n svg[0].prepend(title)\n svg[0] .tabIndex = 0\n svg[0].setAttribute('aria-labelledby','svg_with_title_id svg_with_title_desc_id')\n let circle_group = rendered.getElementsByTagName('circle')\n for (var x = 0; x < circle_group.length; x++) {\n circle_group[x].tabIndex = 0;\n circle_group[x].setAttribute('aria-label',`On ${c3_data_dates[x]} the positive test rate was ${c3_data_rates[x]}`)\n }\n return rendered\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":551,"value":"md`## An audio representation of the graph`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":515,"value":"viewof button = html`

${Object.assign(html`

Click the button below to play a representation of the daily average rate since the previous report. A higher tone indicates a higher daily rate and a lower tone indicates a lower rate. The range of rates is from ${min_recent} to ${max_recent} over the last four weeks.

Please be aware that the notes played can be loud and both high and low, so set your sound settings accordingly. Start with lower volume and increase to a comfortable level.

Daily Rate of Positive Tests

Data Sonification