2c:null 2d:["$","title",null,{"children":"Character-Level Markov Generator Visualizer | Bairui Su | Observable"}] 32:T5db,// Adpated from: https://editor.p5js.org/a2zitp/sketches/xmFyGpU0j class MarkovGenerator { constructor(n, max) { this.ngrams = {}; this.heads = []; this.n = n; this.max = max; } train(corpus) { const {ngrams, heads, n} = this; for (const text of corpus) { heads.push(text.substring(0, n)); for (let i = 0; i < text.length - n; i++) { const gram = text.substring(i, i + n); const next = text.charAt(i + n); ngrams[gram] ??= {}; ngrams[gram][next] ??= 0; ngrams[gram][next] += 1; } } for (const gram of Object.values(ngrams)) { let sum = 0; for (const value of Object.values(gram)) sum += value; for (const key in gram) gram[key] /= sum; } } generate(temperature, seed) { const {ngrams, heads, max, n} = this; const randomArray = d3.randomInt.source(d3.randomLcg(seed))(heads.length); const random = d3.randomUniform.source(d3.randomLcg(seed * 10))(); let context = heads[randomArray()]; let output = context; const steps = [[context]]; for (let i = 0; i < max; i++) { const candidates = ngrams[context]; if (candidates) { const [next, value, adjusted] = weightedSelection(candidates, temperature, random); steps.push([next, adjusted, value, context]) output += next; context = output.substring(output.length - n, output.length); } else { break; } } return {output, steps}; } }33:Tc07,const itp = `Interactive Telecommunications Program Media Lab Design and Technology Program Academy of Media Arts Electronic Integrated Arts Media and Engineering Program Media Design Program Arts and Communication Arts and Media Centre The Center for Integrated Media Institute of Telecommunications and Information Technology Entertainment Technology Center Studio for Creative Inquiry Center for Culture and Communication Computation Arts Program Media Art Histories Program Electronic Visualization Laboratory Institute of Technology Program in Digital Media Integrated Media Arts Program Interaction Design Institute International Academy of Media Arts and Sciences Centre for Electronic Arts Interactive Media Digital Arts Institute for Interactive Media Studies Program in Media Arts and Sciences Visual Arts Program Digital Media Interactive Telecommunications Program Digital Communications and Media Digital Animation and Visualization Art and Technology Program Design and Technology Program Digital Arts Research Laboratory Department of Digital Arts Arts Department Program in Digital Media Department of Interaction Design Digital Studies Program Conceptual Information Arts Laboratory for New Media Art and Technology Studies Program Computer Art Department Art and Technology Program New Media Art, Technology, and Culture Program in Technocultural Studies Digital Art Research Network Program in Arts Computation Engineering Visual Arts Department Arts and Technology Digital Arts and New Media Design Media Arts Department Digital Media Art Arts Technology Center Center for Digital Arts and Experimental Media Program in Interactive Media Time and Interactivity Area within the Department of Art Interdisciplinary Film and Digital Media Program intermedia interdisciplinary technology experimental arts new media humanistic technology International Media Arts Interactive Media Arts Interactive Stuff Antidisciplinary Media Arts Antidisciplinary Arts Interactive Technology Program School for Interactive Technologies Digital Media Program (DMP) Center for Digital Media College of DIgital Innovation Digital Innovation Program Digital Innovation Degree (DID) Department for Digital Innovation (DDI) Department for DIgital Media Innovation (DDMI) Major in Digital Media (MDM) Major in Digital Innovation (MIDI) Creative Technologies Media Art, Design and Entrepreneurship (MADE) Digital Arts, Design, and Innovation (DADI) Creative Code Systems, innovations, art and code (SIAC) Interactive Technologies Program Innovative Technologies Program Imagination and Technologies Program The Center for the Study of the Recently Possible Interactive Technology Platforms Alternative Media Center Design and Technology The School of Practical Surprises Interaction. Technology. People Interace Media Arts Digital Media Electronic Arts Innovative Technologies and Play Integrated Technologies for People Innovation Technology Practices New Media Arts Interactive Media Arts Universal Media Media Ecology Digital Futures Next Big Thing Imaginative Technology Practices`34:[] 30:{"id":"fa04048481460c4e","slug":"character-level-markov-generator-visualizer","title":"Character-Level Markov Generator Visualizer","thumbnail":"efeb32d2cef0efdfb1a7cc0586bbfc18da9c3d1caff172769ba2c61e1844ae9e","access_level":"public","create_time":"$D2026-09-26T21:39:41.925Z","update_time":"$D2026-09-30T14:39:01.843Z","view_time":null,"first_public_time":"$D2026-09-28T21:40:22.327Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"3e931206c18366b5","login":"pearmini","name":"Bairui Su","avatar_url":"https://avatars-next.observableusercontent.com/0c55731913f2096b86eadf187f5e21ae0a951f3c4dd6bbde4bf2a8536c5b6e49","tier":"starter_2024"},"version":446,"publish_version":446,"role":null,"authored":false,"authors":[{"type":"individual","id":"76ec39dbb0bd8e40","login":"pearmini","name":"Bairui SU","avatar_url":"https://avatars-next.observableusercontent.com/0c55731913f2096b86eadf187f5e21ae0a951f3c4dd6bbde4bf2a8536c5b6e49","tier":null}],"members":[{"type":"team","id":"3e931206c18366b5","login":"pearmini","name":"Bairui Su","avatar_url":"https://avatars-next.observableusercontent.com/0c55731913f2096b86eadf187f5e21ae0a951f3c4dd6bbde4bf2a8536c5b6e49","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Character-Level Markov Generator Visualizer","cells":[{"id":1,"value":"# Character-Level Markov Generator Visualizer\n\nDaniel Shiffman showed us his [character-level Markov Generator](https://editor.p5js.org/a2zitp/sketches/xmFyGpU0j) with an n-character context this week. To better understand his implementation and help others to see the generation process, I created this simple visualizer.\n\nYou can copy your own corpus into the textarea to train the model. The default corpus consists of names of interdisciplinary programs and institutions spanning art, media, design, and technology.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"const texts = view(Inputs.textarea({value: itp, rows: 40}))","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"Play with the seed, order, and temperature to shape the output. The same seed reproduces the same sequence. Order controls how many characters the model uses as context. Higher temperatures produce more varied results, while lower temperatures make the output more predictable.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"const seed = view(Inputs.number({label: \"Seed\", value: 31}));\nconst n = view(Inputs.range([1, 10], {label: \"Order\", step: 1, value: 4}));\nconst temperature = view(Inputs.range([0.1, 2], {label: \"Temperature\", step: 0.01, value: 1}));","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"Each stacked bar chart represents one prediction step. The title above the chart shows the current _context_. Each segment represents a possible next character, and its width corresponds to its temperature-adjusted _probability_. The red line marks the _randomly sampled value_. The segment it falls within is selected, highlighted in gray, and appended to the generated text.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"{\n const output = steps.map((d, i) => html`${d[0]}`);\n const plots = steps.slice(1).map(plot);\n display(html`

${output}

${plots}

`);\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"## Animated Version","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"const replay = view(Inputs.button(\"replay\"));","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"{\n replay;\n\n const div = d3.select(html`

`);\n\n div.append(\"p\")\n .selectAll(\"span\")\n .data(steps)\n .join(\"span\")\n .style(\"border\", \"0.5px solid #aaa\")\n .text(d => d[0])\n .style(\"opacity\", 0)\n .transition()\n .delay((d, i) => i * 100)\n .style(\"opacity\", 1)\n\n div.append(\"div\")\n .selectAll(\"span\")\n .data(steps.slice(1))\n .join(\"span\")\n .append(plot)\n .style(\"opacity\", 0)\n .transition()\n .delay((d, i) => i * 100)\n .style(\"opacity\", 1)\n\n display(div.node());\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"## References\n\n- https://editor.p5js.org/a2zitp/sketches/xmFyGpU0j\n- https://www.decontextualize.com/teaching/rwet/n-grams-and-markov-chains/","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"## Appendix A: Implmentation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"const markov = new MarkovGenerator(n, 500);\nmarkov.train(texts.split(\"\\n\"));\ndisplay(markov);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"const {output, steps} = markov.generate(temperature, seed);\ndisplay(steps);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$32","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"// Raise each probability to the power of (1 / temperature)\n// A higher temperature (> 1) will make the probabilities more uniform (more random)\n// A lower temperature (< 1) will amplify the differences, making the selection more deterministic\nfunction weightedSelection(choices, temperature, random) {\n let index = 0;\n let keys = Object.keys(choices);\n let adjustedChoices = {};\n let sum = 0;\n for (const key of keys) {\n adjustedChoices[key] = Math.pow(choices[key], 1 / temperature);\n sum += adjustedChoices[key];\n }\n for (const key of keys) adjustedChoices[key] /= sum;\n let start = random();\n const value = start;\n while (start > 0) {\n let nextChoice = keys[index];\n let probability = adjustedChoices[nextChoice];\n start -= probability;\n index++;\n }\n index--;\n return [keys[index], value, adjustedChoices];\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"## Appendix B: Helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"function plot([key, gram, value, context]) {\n const data = Object.entries(gram).map(([key, value]) => ({key, value}));\n const node = Plot.plot({\n width: 200, height: 30, axis: false,\n marks: [\n Plot.barX(data, {\n fill: d => d.key === key ? \"#eee\" : \"white\",\n x: \"value\",\n stroke: \"black\"\n }),\n Plot.textX(data, Plot.stackX({\n x: \"value\",\n text: d => d.key === \" \" ? \"\" : d.key,\n })),\n Plot.ruleX([value], {stroke:\"red\"}),\n Plot.dotX([value], {stroke:\"red\"})\n ]\n });\n Object.assign(node.style, {display: \"inline\", marginRight: \"10px\"});\n const container = html`

${context}${node}

`\n return container;\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$33","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"2"}} 31:"$30:body"