2e:null 2f:["$","title",null,{"children":"Can sound add value to data visualizations? | Justin Gosses | Observable"}] 34:Tea2,viewof chart = { // declaring margin variable let margin = ({top: 50, right: 50, bottom: 50, left: 50}) let width = 900 let height = 700 let x2 = d3.scaleTime() .domain(d3.extent(data_orig, d => d.date)) .range([margin.left, width - margin.right]) let xAxis2 = g => g .attr("transform", `translate(0,${height - margin.bottom-10})`) .call(d3.axisBottom(x2).ticks(width / 80)) .call(g => g.select(".domain").remove() .call(g=> g.append("text") .attr("fill", "#000") .attr("x", (width/2)+6) .attr("y", margin.top-50) .attr("dy", "0.32em") .attr("text-anchor", "start") .attr("font-weight", "bold") .text("Date"))) function brushed() { let extent = d3.event.selection.map(x.invert, x); let dot_selected = dot.classed("selected", function(d) { return extent[0] <= d[0] && d[0] <= extent[1]; }); svg.property("value", d3.selectAll(".selected").data() ).dispatch("input"); } function brushcentered() { let dx = x(1) - x(0), // Use a fixed width when recentering. cx = d3.mouse(this)[0], x0 = cx - dx / 2, x1 = cx + dx / 2; d3.select(this.parentNode).call(brush.move, x1 > width ? [width - dx, width] : x0 < 0 ? [0, dx] : [x0, x1]); } const svg = d3.select(DOM.svg(width, height)).property("value", []);; let g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")") const x = d3.scaleLinear() .domain([0, 1600]) .range([width*1/9, width*5/6]); const y = d3.scaleLinear() .domain([-1, 1.8]) .range([height, -height/5]); let brush = d3.brushX() .extent([[10, -2* height], [width, height]]) .on("start brush", brushed) let dot = g.append("g") .attr("fill-opacity", 0.2) .attr("stroke", "#000") .attr("stroke-opacity", 0.2) .selectAll("circle") .data(data) .enter().append("circle") .attr("transform", function(d) { return "translate(" + x(d[0]) + "," + y(d[1]) + ")"; }) .attr("r", 3.5) .attr("r", 2.5); let xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom+15})`) .call(d3.axisBottom(x).ticks(width / 80)) .call(g => g.select(".domain").remove()) .call(g=> g.append("text") .attr("fill", "#000") .attr("x", (width/2)-6) .attr("y", margin.top-20) .attr("dy", "0.32em") .attr("text-anchor", "start") .attr("font-weight", "bold") .text("Year [above] & data point # [below] ")) let yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(null, "+")) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line") .filter(d => d === 0) .clone() .attr("x2", width - margin.right - margin.left) .attr("stroke", "#ccc")) .call(g => g.append("text") .attr("fill", "#000") .attr("x", 5) .attr("y", margin.top) .attr("dy", "0.32em") .attr("text-anchor", "start") .attr("font-weight", "bold") .text("Temperature Anomaly (°C)")) svg.append("g") .call(xAxis); svg.append("g") .call(xAxis2); svg.append("g") .call(yAxis); g.append("g") .call(brush) .call(brush.move, [3, 5].map(x)) .selectAll(".overlay") .each(function(d) { d.type = "selection"; }) // Treat overlay interaction as move. .on("mousedown touchstart", brushcentered); // Recenter before brushing. g.append("g") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x)); //svg.node() return svg.node(); //return [[0.2,0.2],[0.2,0.2],[0.2,0.2],[0.2,0.4],[0.2,0.4],[0.2,0.9],[0.2,0.1]] }35:T4d7,function musicTwoVar(mean,range){ let synth = new Tone.PolySynth(1, Tone.Synth).toMaster() let note = "16n" let detune = -1*(0.8-perc_close_to_max(mean,total_min, selected_max_range))*max_detune synth.set("detune", detune) if (range < 0.4){ // synth.triggerAttackRelease(["C4", "E4", "G4"], "4n") synth.triggerAttackRelease(["A4"], note) } else if (range > 0.4 && range < 0.5){ // synth.triggerAttackRelease(["D4", "F4", "A4"], "4n") synth.triggerAttackRelease(["G4"], note) } else if (range > 0.5 && range < 0.6){ // synth.triggerAttackRelease(["E4", "G4", "B4"], "4n") synth.triggerAttackRelease(["F4"], note) } else if (range > 0.6 && range < 0.7){ // synth.triggerAttackRelease(["F4", "A4", "C4"], "4n") synth.triggerAttackRelease(["E4"], note) } else if (range > 0.7 && range < 1){ // synth.triggerAttackRelease(["G4", "D4", "B4"], "4n") synth.triggerAttackRelease(["D4"], note) } else if (range > 1){ //synth.triggerAttackRelease(["A4", "C4", "E4"], "4n") synth.triggerAttackRelease(["C4"], note) } else{ synth.triggerAttackRelease(["A4", "G12",],"4n") //synth.triggerAttackRelease() } }36:T45b,LICENSE = "mit" /* Copyright (c) 2018 by Justin Gosses https://github.com/justingosses Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */37:[] 32:{"id":"4c364621548ed525","slug":"can-sound-add-value-to-data-visualizations","title":"Can sound add value to data visualizations?","thumbnail":"5da3653c3056d633d411f012eee9c8aa9d42513b8fc21a5f84e19fca5e3cf694","access_level":"public","create_time":"$D2018-04-15T19:12:35.277Z","update_time":"$D2018-08-17T03:03:47.646Z","view_time":null,"first_public_time":"$D2018-04-15T20:53:14.536Z","has_unpublished_edits":null,"fork":true,"stars":6,"starred":false,"owner":{"type":"team","id":"3168f49a68f07e98","login":"justingosses","name":"Justin Gosses","avatar_url":"https://avatars-next.observableusercontent.com/eba66f9b9de3134c0c22c453a1d562b450a8cf7f2274c4ed1ff16b7455312520","tier":"starter_2024"},"version":1339,"publish_version":1339,"role":null,"authored":false,"authors":[{"type":"individual","id":"44bc5e36abcab180","login":"justingosses","name":"Justin Gosses","avatar_url":"https://avatars-next.observableusercontent.com/eba66f9b9de3134c0c22c453a1d562b450a8cf7f2274c4ed1ff16b7455312520","tier":null}],"members":[{"type":"individual","id":"44bc5e36abcab180","login":"justingosses","name":"Justin Gosses","avatar_url":"https://avatars-next.observableusercontent.com/eba66f9b9de3134c0c22c453a1d562b450a8cf7f2274c4ed1ff16b7455312520","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"title":"Can sound add value to data visualizations?","cells":[{"id":0,"value":"md`# Can sound add value to data visualizations?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":833,"value":"md `### Experimenting with climate data, d3.js & tone.js`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":609,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1277,"value":"md `Based on [How 2016 Became Earth’s Hottest Year on Record](https://www.nytimes.com/interactive/2017/01/18/science/earth/2016-hottest-year-on-record.html).\n\nSource: [NASA Goddard Institute for Space Studies](https://data.giss.nasa.gov/gistemp/)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1274,"value":"md `Inspired by the work of @y3l2n here and @mbostock's original climate viz. This is still a work in progress.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1262,"value":"md `NOTE: It doesn't work well on mobile browsers, so try to experience on desktop`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1267,"value":"md `Version 2 with non-continuous sound triggering is here`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1281,"value":"md `_______________________________________`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1181,"value":"md `## Questions about this type of sound + visual data experience`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1184,"value":"html `

Can we listen to statistics of a dataset?
Does that give us anything different, new, or additional than what we would otherwise do with visual only representation?
Is it just an extra channel?
If so, what are the situations where one more channel is super useful?
Would this be useful for people without good vision
Does perceiving data in this way change how we process it in unexpected ways?

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":816,"value":"md `_______________________________________`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":433,"value":"md `## Stats from brushed portion of Chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"chart","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"max = Math.max.apply(Math,chart.map(function(o){return o[1];}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"min = Math.min.apply(Math,chart.map(function(o){return o[1];}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"function find_mean(array) {\n let sums = 0\n let average = 0\n\n for (var i = 0; i < array.length; i++) {\n sums += array[i][1];\n }\n\n average = sums / array.length;\n return average;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"mean = find_mean(chart)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1022,"value":"range = max - min","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1077,"value":"md `## Stats from all temperature data given to chart, not just brushed portion`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1103,"value":"total_max = Math.max.apply(null, tempOnlyData)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1109,"value":"total_min = Math.min.apply(null, tempOnlyData)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1112,"value":"total_range = Math.abs(total_min - total_max)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1133,"value":"md `perc_close_to_max A function for how close mean is to max value`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1130,"value":"perc_close_to_max = function (mean,min_temp,max_temp_range){\n if (min_temp < 0 && mean < 0){\n return (min_temp - mean) / max_temp_range\n }\n else if (min_temp < 0 && mean >= 0){\n return (-min_temp + mean) / max_temp_range\n }\n else if (min_temp > 0 && mean >= 0){\n /// 2 5 10 \n // 0 5 12\n return (min_temp + mean) / max_temp_range\n }\n else {return (min_temp + mean) / max_temp_range}\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"md `## Functions that use stats above to direct how to call tone.js functions for music`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1298,"value":"md `A scaler that works with mean variable`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1301,"value":"viewof selected_max_range = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1304,"value":"selected_max_range","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1307,"value":"md `A scaler for the detune variable used by the tone.js synth`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1125,"value":"viewof max_detune = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1178,"value":"max_detune","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1309,"value":"md `The main \"music\" function that takes in the mean and range of the brushed part of the chart and creates a tone.js synth based on those two variables.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":896,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1236,"value":"md `#### The line below is reevaluated any time mean or range changes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":905,"value":"musicTwoVar(mean,range)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":536,"value":"md `## Code to generate data for the Chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1090,"value":"tempOnlyData = tempOnly(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1085,"value":"function tempOnly (data){\n let temp_only_array = [];\n for (let eachRow in data){\n temp_only_array.push(data[eachRow][1])\n }\n return temp_only_array\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":735,"value":"data = turnJSONintoArray(data_orig)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":732,"value":"function turnJSONintoArray(a_json){\nlet a_array = []\n for (let eachRow in a_json){\n //a_array.push([a_json[eachRow].date,a_json[eachRow].value])\n a_array.push([parseInt(eachRow),a_json[eachRow].value])\n }\n return a_array\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":588,"value":"data_orig = {\n const data = [];\n // https://data.giss.nasa.gov/gistemp/tabledata_v3/GLB.Ts+dSST.csv\n await d3.csv(\"https://gist.githubusercontent.com/JustinGOSSES/96ae79d501c361bee63f389f20291b6d/raw/7d9252666ec38ae07bdd23dc1a04bafcc037d086/dSST.csv\", (d, i, columns) => {\n for (let i = 1; i < 13; ++i) {\n data.push({\n date: new Date(d.Year, i - 1, 1),\n value: +d[columns[i]]\n });\n }\n });\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":539,"value":"md `## Import D3.js and Tone.js and Jstat.js`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"//d3 = require(\"d3@4\")\nd3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"Tone = require(\"tone\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1155,"value":"md `This isn't using jstat now, but it could easily in future as a way to sonify more stats on any given scatter plot`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":850,"value":"jStat = require('jstat@1.7.1/dist/jstat.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1254,"value":"md `## How to use`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1250,"value":"html `

Some cells will show errors on first load. Ignore them. Those errors will go away when you activate brush
Activate brush by clicking on the chart, releasing the mouse but keep your cursor in same position.
Wait for bi-directional arrow to appear,then hold click down and drag to left or right. This will expand the brush in size. Release when wanted size is reached
Now click on center of brush, hold down click, and move to either size. Brush will move with cursor and sent inputs to brush to function to create sounds.
There will be weird clicking noises. I don't know what those are caused by yet, but will hopefully get rid of them at some point.
I haven't tried this with over scatter plot datasets, but ideally it could be relatively generalizable.
If the sound gets very crackly, restart the webpage sessions.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":584,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 33:"$32:body"