40:null 41:["$","title",null,{"children":"Markov Chain | HurstDataViz | Observable"}] 47:Tbc8,class Walker{ constructor(element, x, y, position){ this.element = element this.x = x this.y = y this.position = position this.circle = this.element.append('circle') .attr('cx',this.x) .attr('cy',this.y) .attr('r',10) .attr('fill','black') .attr('stroke','black') } async walk(){ while(true){ await this.step(this.position).end() await this.circle.transition().duration(100).attr('r',10).end() }} step(position){ data.push({x:mutable total, ones:mutable ones/mutable total, twos:mutable twos/mutable total, threes: mutable threes/mutable total}) const r = d3.randomUniform()() mutable total += 1 if (this.position == 1){ if (r > .5){ this.position = 1 mutable ones += 1 return this.circle.transition().duration(50).ease(d3.easeLinear).attr('cx',75).attr('cy',75) } else if (r < .5 && r >= 1/3){ this.position = 2 mutable twos += 1 return this.circle.transition().duration(50).ease(d3.easeLinear).attr('cx',525).attr('cy',75) } else if (r < 1/3){ this.position = 3 mutable threes += 1 return this.circle.transition().duration(50).ease(d3.easeLinear).attr('cx',300).attr('cy',225) }} if (this.position == 2){ if (r <= 1/3){ this.position = 1 mutable ones += 1 return this.circle.transition().duration(50).ease(d3.easeLinear).attr('cx',75).attr('cy',75) } else if (r > 1/3 && r < 2/3){ this.position = 2 mutable twos += 1 return this.circle.transition().duration(50).ease(d3.easeLinear).attr('cx',525).attr('cy',75) } else if (r >= 2/3){ this.position = 3 mutable threes += 1 return this.circle.transition().duration(50).ease(d3.easeLinear).attr('cx',300).attr('cy',225) }} else if (this.position == 3){ if (r > 1/3){ this.position = 1 mutable ones += 1 return this.circle.transition().duration(50).ease(d3.easeLinear).attr('cx',75).attr('cy',75) } else if (r > 1/6 && r < 1/3){ this.position = 2 mutable twos += 1 return this.circle.transition().duration(50).ease(d3.easeLinear).attr('cx',525).attr('cy',75) } else if (r < 1/6){ this.position = 3 mutable threes += 1 return this.circle.transition().duration(50).ease(d3.easeLinear).attr('cx',300).attr('cy',225) }} } }48:T46d,class Circles{ constructor(element){ this.element = element this.circle1 = this.element.append('circle') .attr('cx',75) .attr('cy',75) .attr('r',50) .attr('fill','cornflowerblue') .attr('stroke','black') this.circle2 = this.element.append('circle') .attr('cx',525) .attr('cy',75) .attr('r',50) .attr('fill','cornflowerblue') .attr('stroke','black') this.circle3 = this.element.append('circle') .attr('cx',300) .attr('cy',225) .attr('r',50) .attr('fill','cornflowerblue') .attr('stroke','black') } async changeColors(){ while (true){ const odd1 = mutable ones / mutable total this.circle1.attr('fill',colors[odd1.toFixed(1)*10]) const odd2 = mutable twos / mutable total this.circle2.attr('fill',colors[odd2.toFixed(1)*10]) const odd3 = mutable threes / mutable total this.circle3.attr('fill',colors[odd3.toFixed(1)*10]) await this.circle1.transition().duration(10).attr('r',50).end() } } }49:[] 45:{"id":"b20ae267fad36dc6","slug":null,"title":"Markov Chain","thumbnail":"edc0be4201a70129d3c4bcda59a141987eccc14fccaa363c88ecfe566701d8e0","access_level":"public","create_time":"$D2023-05-03T21:34:18.648Z","update_time":"$D2024-04-12T17:17:47.564Z","view_time":null,"first_public_time":"$D2023-11-13T17:26:46.431Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"5f68df9423245122","login":"hurstdataviz","name":"HurstDataViz","avatar_url":"https://avatars-next.observableusercontent.com/788f646c4d0c8b888cb7bdf5efe4ff7087aca94eb855e2af1db2900ff8395d48","tier":"education_2026","bio":"","following":false},"version":352,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"03f7ce48da2af97d","login":"vipndip","name":"vonnie","avatar_url":"https://avatars-next.observableusercontent.com/997a0f51d1dc6891c31148088484a4ed11328c1030ec088a03b60208df8cea87","tier":null,"bio":"I just be coding","following":false}],"members":[{"type":"individual","id":"03f7ce48da2af97d","login":"vipndip","name":"vonnie","avatar_url":"https://avatars-next.observableusercontent.com/997a0f51d1dc6891c31148088484a4ed11328c1030ec088a03b60208df8cea87","tier":null,"role":"editor"},{"type":"team","id":"5f68df9423245122","login":"hurstdataviz","name":"HurstDataViz","avatar_url":"https://avatars-next.observableusercontent.com/788f646c4d0c8b888cb7bdf5efe4ff7087aca94eb855e2af1db2900ff8395d48","tier":"education_2026","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Markov Chain","cells":[{"id":0,"value":"# Markov Chain\n\n[1/2 | 1/3 | 2/3]\n\n[1/3 | 1/3 | 1/6]\n\n[1/6 | 1/3 | 1/6]","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":311,"value":"Tableau10 = swatches(\"Tableau10\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"html`

\n\n

${markov}

${plot}

\n\n\n\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"markov = {\n const container = d3.select(DOM.svg(600,300)).attr('style','border: 1px black solid')\n \n const circles = new Circles(container)\n\n yield container.node()\n const walker = new Walker(container,75,75,1)\n\n \n walker.walk()\n circles.changeColors()\n\n\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"plot = Plot.plot({\n total:total,\n x:{domain:[0,500]},\n y:{grid:true},\n marks: [\n Plot.ruleY([0]),\n Plot.ruleX([0]),\n Plot.lineY(data, {x: \"x\", y: \"ones\", stroke:'#76b7b2'}),\n Plot.lineY(data, {x: \"x\", y: \"twos\",stroke:'red'}),\n Plot.lineY(data, {x: \"x\", y: \"threes\", stroke:'orange'})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"colors = [\"#4e79a7\",\"#f28e2c\",\"#e15759\",\"#76b7b2\",\"#59a14f\",\"#edc949\",\"#af7aa1\",\"#ff9da7\",\"#9c755f\",\"#bab0ab\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"mutable total = 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"mutable ones = 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"mutable twos = 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"mutable threes = 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"data = []","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"function swatches(name) {\n const colors = d3[`scheme${name}`];\n const n = colors.length;\n const dark = d3.lab(colors[0]).l < 50;;\n const canvas = svg`