2d:null 2e:["$","title",null,{"children":"Communicating between cells | drlynb | Observable"}] 33:T59b,md `I can define a signal listener to extract selected items and add it to the barchart. This cell returns the selected set from the above view. ### Mutable variables So the thing to notice here is HOW I am passing signals between cells. Instead of using the \`Generators.observe()\` approach of explicitly throwing a signal event between reactive cells, I am setting a mutable variable called \`\`\`type\`\`\` . Mutable variables break the scope of a single cell. You can think of a mutable variable as a global variable that you can set anywhere in your workbook. If you only want to reference the value of the variable, you just use its name; if you want to change the variable, you preface it with the \`mutable\` keyword. Mutable variables are described in more detail in https://observablehq.com/@observablehq/introduction-to-mutable-state.
By using \`mutable\`, we can control the timing of when a downstream cell should be re-evaluated, by only setting its value at the appropriate moment. This can help cells share values without creating circular dependencies, and also prevent cells from updating more often than is needed — while allowing any cells that depend on them to continue receiving reactive updates as normal. The big disadvantage of using \`mutable\` is that global variables can be DANGEROUS so use with care. You are in essence breaking one of the important behaviours of \`Observable\`.`34:[] 31:{"id":"6d42f8bb34cfa6e6","slug":"communicating-between-cells","title":"Communicating between cells","thumbnail":"d8ad4d0749949d3601d4f8cfcf1c9f56c4877926ffa0a72e03589c58836947e9","access_level":"public","create_time":"$D2019-11-21T18:50:15.329Z","update_time":"$D2019-12-17T21:07:06.509Z","view_time":null,"first_public_time":"$D2019-11-22T19:47:15.658Z","fork":{"id":"e377600d1d24bd9c","slug":"mutable","title":"Introduction to mutable state","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":4,"starred":false,"owner":{"type":"team","id":"4a0762a387ec748f","login":"drlynb","name":"","avatar_url":"https://avatars-next.observableusercontent.com/dd242441d5e4ed40bfe5b09336f04460a3a4974825e2a9cb9088ade14a49fc15","tier":"starter_2024"},"version":358,"publish_version":358,"role":null,"authored":false,"authors":[{"type":"individual","id":"90a5d909f6de8793","login":"drlynb","name":"","avatar_url":"https://avatars-next.observableusercontent.com/dd242441d5e4ed40bfe5b09336f04460a3a4974825e2a9cb9088ade14a49fc15","tier":null}],"members":[{"type":"individual","id":"90a5d909f6de8793","login":"drlynb","name":"","avatar_url":"https://avatars-next.observableusercontent.com/dd242441d5e4ed40bfe5b09336f04460a3a4974825e2a9cb9088ade14a49fc15","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Communicating between cells","cells":[{"id":149,"value":"md`# Communicating between cells\n\n[Observable notebooks are made of cells.](/@observablehq/introduction-to-notebooks) Each cell is defined by a bit of code (just click on the left margin!) and will react to updates in any other cells it references. This reactive state is very powerful but means we need to do some extra work to manage how the output of cells can be leveraged and re-evaluated between cells.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"md `For example, here is a cell that summarizes the results of the Vancouver crime data set and returns the view.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"viewof crimesTotal=embed({\n data: {values: vanCrime2},\n width: 200,\n mark: \"bar\",\n selection: {\n barSelection: {fields: [\"Offense\"], on: \"click\", type: \"multi\"}\n },\n encoding: {\n y:{field: \"Offense\", type: \"nominal\"},\n x:{aggregate: \"count\", field: \"*\", type: \"quantitative\"},\n color:{ field: \"Offense\", type:\"nominal\",\"scale\": {\"scheme\": \"dark2\"}}\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"crimesTotal.addSignalListener(\"barSelection\", function(name, value) {\n if (value == null)\n mutable type = null\n else\n mutable type = value.Offense\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"mutable type=null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"md `Note that this returns an empty set if nothing is selected. So we have to set a condition where this will return the full set if the selection is empty. I have utility functions ( \\`\\`\\`isEmpty(), getFieldVals\$array,name of field\$\\`\\`\\`\\ ) defined at the end of this workbook that tests for this based on a set of unique values extracted from a dataset. We can use this to change the results of the returned set.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"offenseSelected = {\n if(isEmpty(type))\n {\n return mutable type = offenseNames\n }\n return type\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"md `make a table here`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"md `So now what can we do with this set of selections? Let's see if we can define another view and filter on that view back and forth. We need to decide if one filter replaces another; intersects with another (only values that meet both criteria show; or adds to another (anything in either set matching the criteria shows. (I don't like the last because it is misleading.) So i am going to have to write a function that actually defines the output of the combined signals /variable settings so that everything that depends on that variable is appropriately updated.\n
\nGoing to try this with a scatter plot that maps count of records against population count and goes to the detail of neighbourhood. If I want to make this work properly I am going to need to ensure a consistent colour scheme.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"viewof splot = embed(\n{\n data: {values: vanCrime2},\n \"transform\": [{\n \"lookup\": \"NEIGHBOURHOOD\",\n \"from\": {\n \"data\": {values: populations},\n \"key\": \"Area\",\n \"fields\": [\"Population\"]\n }\n },\n {\n filter: {field: \"Offense\", oneOf: offenseSelected}\n } //filter by our click selection\n //We need to tell vega-lite how to parse the dates we pass it for filtering using\n //our brush selection below\n ],\n width: 500,\n mark: \"point\",\n encoding: {\n y:{ \n field: \"Population\", \n type: \"quantitative\",\n \"axis\": {\"title\": \"Population\"}\n },\n x:{\n aggregate: \"count\", \n field: \"Offense\", \n type: \"quantitative\",\n \"axis\": {\"title\": \"Number of crimes\"}\n },\n color:{ field: \"Offense\", type:\"nominal\",\"scale\": {\"scheme\": \"category10\"}},\n \"detail\": {\"field\": \"NEIGHBOURHOOD\",\"type\": \"nominal\"}\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"md`By using \\`mutable\\`, we can control the timing of when a downstream cell should be re-evaluated, by only setting its value at the appropriate moment. This can help cells share values without creating circular dependencies, and also prevent cells from updating more often than is needed — while allowing any cells that depend on them to continue receiving reactive updates as normal.\n\nFor a more practical example, let’s build a little animation, running at 60 frames per second, that shows a ball bouncing off the walls, along with a value that tells us which of the four walls it has most recently hit.\n\nFirst, in the normal reactive style, using [viewof](/@observablehq/a-brief-introduction-to-viewof):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"w = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"md`You can see that the \\`reactiveWalls\\` cell above is updating 60 times a second — every time the ball moves — even though its value isn't changing nearly that often.\n\nAs an alternative, using \\`mutable\\`:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"mutable wall = null","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"md`*Mutable values can be referenced either reactively, or non-reactively, as appropriate.* To use the current value of a mutable without creating a dependency, use \\`mutable x\\`; to depend on it for re-evaluation, just use \\`x\\`.\n\nFor example: The blue ball most recently hit the **${wall}** wall.\n\nMutable cells aren't the default in Observable notebooks, and you probably shouldn’t reach for them as the first tool in your toolbox. But when you have independent looping cells that need to coordinate state, or you have a downstream cell in your notebook that ought to update at a different frequency than its inputs — they can really be quite useful.\n\nAs a final example, here are two cells maintaining internal state while reading from a shared, mutable value:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"dashboard = html` \n \n \n \n \n

${viewof crimesTotal}

${viewof splot}

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"mutable speed = 0.02","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"speedControl = {\n var input = DOM.range(0, 0.1);\n input.value = mutable speed;\n input.oninput = () => mutable speed = input.valueAsNumber;\n return input;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"md`*Thanks for the perpetual motion machine, [ClipArt ETC](http://etc.usf.edu/clipart/11300/11348/perpetual_11348.htm).*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"md`**Addendum:** For a more complex example of multiple mutable cells controlling a single, complex graphic, see Paul Chaikin’s [Interactive Particle System](https://observablehq.com/@pamacha/interactive-particle-system).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"md `## Data, Libraries and Functions`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"embed = require(\"vega-embed@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"function isEmpty(obj) { \n for (var prop in obj) { \n return false; \n } \n return true; \n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"function getNames(arr)\n{\n let unique = [...new Set(arr.map(name => name.Offense))];\n return(unique);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"function getFieldVals(arr,field)\n{\n let unique = [...new Set(arr.map(name =>name[field]))];\n var names = {[field]:unique};\n return(names);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"offenses = getNames(vanCrime2);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"md `A generalized tool to extract unique values from an array of objects`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"offenseNames = getNames(vanCrime2,'Offense');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"vanCrime = d3.json(\"https://www.sfu.ca/~lyn/data/Urban/vpdcrimeJune2016.json\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"vanCrime2 = d3.csv(\"https://www.sfu.ca/~lyn/data/Urban/2016vpdcrimeVanJune.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"vanPop = \n d3.csv(\"https://www.sfu.ca/~lyn/data/VanPop2011.csv\", function(d) {\n return {\n Area: d.Area,\n Age: d.Age,\n Gender : d.Gender,\n Population: +d.Population\n };\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"nnames=getFieldVals(vanPop,['Area']);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"md `Add the population of the area to the crime data just for ease, as this worknook is about sending signals back and forth and not about data manipulation.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"crimepop = populations","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"import {populations} from \"@drlynb/vancouver-mapping-again\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"