2e:null 2f:["$","title",null,{"children":"Pt. 2 Can sound add value to data visualizations? | Justin Gosses | Observable"}] 34:Tc12,viewof chart = { // declaring margin variable let margin = ({top: 50, right: 50, bottom: 50, left: 50}) let width = 900 let height = 700 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})`) .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("time steps")) 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(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:T8e0,function musicTwoVar(mean,range){ if (time % bell_time == 0){ // let synth = new Tone.PolySynth(1, Tone.Synth).toMaster() // let synth = new Tone.PolySynth(3, Tone.Synth).toMaster(); let synth = new Tone.PolySynth(3, Tone.Synth, { "oscillator" : { "type" : "triangle8", "count" : 1, "spread" : 30 }, "envelope": { "attack": 0.1, "decay": 0.5, "sustain": 1.5, "release": 0.7, "attackCurve" : "exponential" }, }).toMaster(); //synth.triggerAttackRelease('C4', 0.5, 0) let detune = -1*(0.8-perc_close_to_max(mean,total_min, selected_max_range))*max_detune synth.set("detune", detune) let length_of = "8n" let ender = "8n" if (range < 0.4){ //synth.triggerAttackRelease(["C4", "E4", "G4"],ender) //synth.triggerRelease(["C4", "E4", "G4"],ender) //synth.triggerAttackRelease(["A4"], length_of,ender) synth.triggerAttackRelease('C4', '8n') } else if (range > 0.4 && range < 0.5){ //synth.triggerAttackRelease(["D4", "F4", "A4"],ender) //synth.triggerAttackRelease(["G4"], length_of,ender) synth.triggerAttackRelease('D4', '8n') } else if (range > 0.5 && range < 0.6){ //synth.triggerAttackRelease(["E4", "G4", "B4"],ender) //synth.triggerAttackRelease(["F4"], length_of,ender) synth.triggerAttackRelease('E4', '8n') } else if (range > 0.6 && range < 0.7){ //synth.triggerAttackRelease(["F4", "A4", "C4"],ender) //synth.triggerAttackRelease(["E4"], length_of,ender,ender) synth.triggerAttackRelease('F4', '8n') } else if (range > 0.7 && range < 1){ //synth.triggerAttackRelease(["G4", "D4", "B4"],ender) //synth.triggerAttackRelease(["D4"], length_of,ender) synth.triggerAttackRelease('G4', '8n') } else if (range > 1){ //synth.triggerAttackRelease(["A4", "C4", "E4"],ender) //synth.triggerAttackRelease(["C4"], length_of,ender) synth.triggerAttackRelease('A4', '8n') } else{ //synth.triggerAttackRelease(["A4", "C4", "E4"],ender) synth.triggerAttackRelease(["C4", "G12",],length_of,ender) //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":"bb67796505ffaa27","slug":"pt-2-can-sound-add-value-to-data-visualizations","title":"Pt. 2 Can sound add value to data visualizations?","thumbnail":"329c374db31022eb6d444afd436dcd7fa7fe881576de1d318225e9b289ae5dd0","access_level":"public","create_time":"$D2018-04-17T04:37:11.379Z","update_time":"$D2018-04-20T03:00:22.697Z","view_time":null,"first_public_time":"$D2018-04-18T06:31:48.002Z","fork":{"id":"4c364621548ed525","slug":"can-sound-add-value-to-data-visualizations","title":"Can sound add value to data visualizations?","owner":{"id":"3168f49a68f07e98","login":"justingosses","name":"Justin Gosses"}},"stars":2,"starred":false,"owner":{"type":"team","id":"3168f49a68f07e98","login":"justingosses","name":"Justin Gosses","avatar_url":"https://avatars-next.observableusercontent.com/eba66f9b9de3134c0c22c453a1d562b450a8cf7f2274c4ed1ff16b7455312520","tier":"starter_2024"},"version":1441,"publish_version":1441,"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":1,"collection":{"id":"b7c4119163229a19","slug":"nasa","title":"NASA (mostly forks so go to original)","owner":{"id":"3168f49a68f07e98","login":"justingosses","name":"Justin Gosses"}},"type":"notebook","body":{"title":"Pt. 2 Can sound add value to data visualizations?","cells":[{"id":0,"value":"md`# Pt. 2 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 to add sound to a scatter plot`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1363,"value":"md `In this version, the sound is called each unit of time, which makes for a different experience and less need to remember sounds. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1440,"value":"md `This is version one, where the play is continuous.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":573,"value":"md `Inspired by the work of @y3l2n here and @mbostock's climate viz This is still in progress but publishing now so I can share & get feedback.`","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":1181,"value":"md `## Questions`","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 visualize 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":1436,"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":1425,"value":"md `Changes the dynamic range of the sounds.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1169,"value":"viewof selected_max_range = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1171,"value":"selected_max_range","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1133,"value":"md `perc_close_to_max() Is a function for how close the brushed points mean is to max value of the entire dataset`","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":1389,"value":"md `max_detune controls the tone.js detune variable`","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":1336,"value":"html `

IMPORTANT: bell_time slider controls how often sound is made

Move to 0, if you want to turn it off!
Move to 1, if you want it to be continuous.
Move towards right, if you want to slow down \"bell tolling\"
Move towards left, if you want to hear it very frequently.

musicTwoVar(mean,range)

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.