2e:null 2f:["$","title",null,{"children":"Radical Dots - Simulating Echo Chambers, Polarization and Extreme Belief Formation | Eli Holder | Observable"}] 34:T44f,settings = _.merge(settingsFromURL, { playSpeed: playSpeed, personCount: 100, beliefCount: 10, width: 500, height: 500, dotRadius: 8, separationRadius: 8, initialPosStdDev: initialPosStdDev, // initialPosStdDev: .9, beliefSizeFn: beliefChangeScale, // beliefSizeFn: ()=>0.05, initialBeliefStdDev: initialBeliefStdDev, initialBeliefsRelated: false, speechDistance: speechDistance, // try: .1, .18, .2, .5, 1 // speechDistance: 0.22, // try: .1, .18, .2, .5, 1 includeExtremists: true, chaseTarget: true, enableSpeech: true, enableMovement: true, speakersPerTurn: 20, agreeStepSize: 1, neutralStepSize: 0.1, disagreeStepSize: 1, showSpeechBubbles: true, showBeliefStars: true, showPersonDots: true, showMovingDots: true, selectedColor: "#F58141", unselectedColor: "#777777", speechType: speechType, beliefColorFn: getBeliefsColorCompress // beliefColorFn: () => "#777777" // beliefColorFn: beliefValues => // d3 // .scaleLinear() // .domain([-1, 0, 1]) // .range(["#F58141", "#aaaaaa", "#59589E"])(beliefValues[0]) })35:T4d1,/** * Create a new person */ generatePerson = (id, params) => { const pos = constrainPosition( [ jstat.normal.sample(0.5, params.initialPosStdDev) * params.width, jstat.normal.sample(0.5, params.initialPosStdDev) * params.height ], params ); const baseBeliefs = _.range(Math.ceil(params.beliefCount / 3)).map(() => { // return Math.random() * 2 - 1; return Math.max( -1.0, Math.min(1.0, jstat.normal.sample(0, params.initialBeliefStdDev)) ); }); // Choose how to initiate the belief values let beliefInitFn; if (params.initialBeliefsRelated) { beliefInitFn = i => baseBeliefs[Math.floor(i / 3)]; } else { beliefInitFn = i => Math.max( -1.0, Math.min(1.0, jstat.normal.sample(0, params.initialBeliefStdDev)) ); } let output = { id, pos, targetPos: pos, beliefs: _.range(params.beliefCount).map(i => { return beliefInitFn(i); }) }; // Setup the 2 extremists if (params.includeExtremists) { if (id == 0) { output.beliefs = _.range(params.beliefCount).map(() => -1); } if (id == 1) { output.beliefs = _.range(params.beliefCount).map(() => 1); } } return output; }36:T4da,/** * Make speeakerer talk to listenerr about beliefId * Mutates listenerr */ speakTo = (speaker, listener, beliefId, params) => { const speakerBeliefValue = speaker.beliefs[beliefId]; const listenerBeliefValue = listener.beliefs[beliefId]; let beliefDelta = speakerBeliefValue - listenerBeliefValue; if (Math.abs(beliefDelta) <= 0.000001) return listener; let beliefDirection = Math.sign(beliefDelta); let beliefChange; let stepChange; let beliefChangeAmount = params.beliefSizeFn(Math.abs(listenerBeliefValue)); let stepChangeAmount = 1; if (Math.abs(beliefDelta) <= 0.66) { beliefChange = beliefChangeAmount * beliefDirection; stepChange = params.agreeStepSize; } // Neutral else if (Math.abs(beliefDelta) < 1.32) { beliefChange = beliefChangeAmount * 0.25 * beliefDirection; stepChange = params.neutralStepSize; } // Disagree else { beliefChange = -beliefChangeAmount * beliefDirection; stepChange = -params.disagreeStepSize; } const newListenerBeliefValue = listenerBeliefValue + beliefChange; listener.beliefs[beliefId] = Math.min( Math.max(newListenerBeliefValue, -1.0), 1.0 ); listener.targetPos = moveRelativeTo(listener, speaker, stepChange, params); }37:T62b,/** * Make dots talk to their neighbors * Mutates peopleById */ speechStep = (peopleByID, params) => { let people = _.values(peopleByID); let quadTree = d3 .quadtree() .x(d => d.pos[0]) .y(d => d.pos[1]) .addAll(people); // For each speaker... for (let i = 0; i < params.speakersPerTurn; i++) { // Get a speaker at random const speakerID = Math.floor(Math.random() * params.personCount); const speaker = peopleByID[speakerID]; // Choose a belief to discuss let beliefId; // Random belief speech if (params.speechType == "random") { beliefId = Math.floor(Math.random() * params.beliefCount); } else if (params.speechType == "extreme") { // One of top belief speeches const speakerMaxBeliefMagnitude = _.max(speaker.beliefs.map(Math.abs)); const strongBeliefIDs = speaker.beliefs .map((beliefValue, beliefId) => [beliefId, beliefValue]) .filter( ([beliefId, beliefValue]) => speakerMaxBeliefMagnitude <= Math.abs(beliefValue) ) .map(([beliefId, beliefValue]) => beliefId); beliefId = strongBeliefIDs[Math.floor(Math.random() * strongBeliefIDs.length)]; } // Get the speaker's neighbors const closeNeighbors = quadSearch( quadTree, speaker.pos, params.width * params.speechDistance ); // Speak to each dot that isn't the speakere closeNeighbors.forEach(person => { if (person.id == speaker.id) return; speakTo(peopleByID[speakerID], person, beliefId, params); }); } }38:T83f,/** * Move dots toward their target positions * Mutates peopleById */ moveStep = (peopleById, params) => { // return; let people = _.values(peopleById); let quadTree = d3 .quadtree() .x(d => d.pos[0]) .y(d => d.pos[1]) .addAll(people); //For each person, take a step toward their target position people.forEach(person => { let distToTarget = euclideanDistance(person.pos, person.targetPos); if (distToTarget < params.dotRadius * 2) { return; } let movesToAttempt = [ newRelativePos( person.pos, person.targetPos, // Math.min(distToTarget, params.dotRadius * i) 2 ), ..._.range(4, 2).map(i => newRelativePos( person.pos, person.targetPos, // Math.min(distToTarget, params.dotRadius * i) distToTarget / i ) ) ]; if (params.dotRadius * 5 < distToTarget) { movesToAttempt = [ ...movesToAttempt, ..._.range(1, 3).map(i => newRelAngleStepPos( person.pos, person.targetPos, Math.PI * 0.5, Math.min(distToTarget, 2 * params.dotRadius * i) ) ) // ..._.range(1, 3).map(i => // newRelAngleStepPos( // person.pos, // person.targetPos, // Math.PI * 0.5 * -1, // Math.min(distToTarget, 2 * params.dotRadius * i) // ) // ), // newJitterPos(person.pos, params.dotRadius * .5) ]; } // console.log(movesToAttempt); let newPos = person.pos; for (let i = 0; i < movesToAttempt.length; i++) { let potentialPos = movesToAttempt[i]; let collisions = quadSearch(quadTree, potentialPos, params.dotRadius * 2); if ( collisions.length == 0 || (collisions.length == 1 && collisions[0].id == person.id) ) { newPos = potentialPos; // console.log("new pos"); break; } } quadTree = quadTree.remove(person); person.pos = newPos; quadTree = quadTree.add(person); }); }39:T8aa,/** * Render the beeswarm charts */ renderBeliefDistribution = (peopleById, params) => { // return; const people = _.values(peopleById); const plotWidth = params.plotWidth || 500; const plotHeight = params.plotWidth || 600; const margin = { top: 0, left: 0, right: 0 }; const width = plotWidth + margin.left + margin.right; const height = plotHeight; const lineHeight = 48; const xScale = d3 .scaleLinear() .domain([-1, 1]) .range([0, plotWidth]); let output = svg` ${_.range(params.beliefCount).map((beliefId, i) => { const positions = distroForce .nodes( people.map(p => ({ id: p.id, x: xScale(p.beliefs[beliefId]), y: lineHeight * 0.5 })) ) .tick(50) .nodes(); return svg` ${positions.map((position, index) => { const { fillColor, fillOpacity, strokeColor, strokeOpacity } = getDotStyle(peopleById[position.id], params); return svg` `; })} `; })} `; // _.range(params.beliefCount).forEach(beliefId => { // d3.select(output) // .select("#brush-" + beliefId) // .attr("class", "brush") // .call( // d3.brush().on("end", brushEvent => { // const includedPeople = people.filter(person => { // const beliefValue = person.beliefs[beliefId]; // return ( // xScale.invert(brushEvent.selection[0][0]) <= beliefValue && // beliefValue <= xScale.invert(brushEvent.selection[1][0]) // ); // }); // mutable selectedIds = new Set( // includedPeople.map(person => person.id) // ); // }) // ); // }); return output; }3a:T756,/** * Render all the people as dots */ renderPeople = (peopleById, params) => { const people = _.values(peopleById); const margin = { left: 0, right: 0, top: 0, bottom: 0 }; const plotWidth = params.plotWidth; const plotHeight = params.plotHeight; const height = plotHeight + margin.top + margin.bottom; const output = svg` ${people.map((person, index) => { // Render background stuff return svg` ${params.showSpeechBubbles ? renderSpeechBubble(person, params) : ""} `; })} ${people.map((person, index) => { let personDot = svg`${renderPersonDot(person, params)}`; personDot = Object.assign(personDot, { onclick() { console.log("Foo"); if (selectedIds.has(person.id)) { selectedIds.delete(person.id); mutable selectedIds = selectedIds; } else { mutable selectedIds = selectedIds.add(person.id); } } }); let output = svg` ${params.showPersonDots ? personDot : ""} ${params.showMovingDots ? renderDotMoveLine(person, params) : ""} ${params.showBeliefStars ? renderDotSpokes(person, params) : ""} `; return output; })} `; // d3.select(output) // .select("#brush") // .attr("class", "brush") // .call( // d3.brush().on("end", brushEvent => { // const includedPeople = people.filter(person => { // const pos = person.pos; // return ( // brushEvent.selection[0][0] <= pos[0] && // pos[0] <= brushEvent.selection[1][0] && // brushEvent.selection[0][1] <= pos[1] && // pos[1] <= brushEvent.selection[1][1] // ); // }); // mutable selectedIds = new Set(includedPeople.map(person => person.id)); // }) // ); return output; }3b:[{"id":"4e4d92dbd629cc38438a9708d860e2e79836276e27fe397be3bcd0d14da04081ed163a68900285d16facf65886b6534fb510751f934ede1477bca8c42ed27ce4","href":"https://static.observableusercontent.com/files/4e4d92dbd629cc38438a9708d860e2e79836276e27fe397be3bcd0d14da04081ed163a68900285d16facf65886b6534fb510751f934ede1477bca8c42ed27ce4","name":"image.png","type":"image/png","lastModified":1613494319938.536,"size":691121}] 32:{"id":"87d7fce3479ffbca","slug":"radical-dots-simulator-echo-chambers-polarization-extreme-beliefs","title":"Radical Dots - Simulating Echo Chambers, Polarization and Extreme Belief Formation","thumbnail":"73f6ff6a21fd2d8842b1dda6868773b8fe598d56afd5ae47fdb7254d214c0996","access_level":"public","create_time":"$D2021-02-16T07:14:55.628Z","update_time":"$D2022-01-09T21:09:53.955Z","view_time":null,"first_public_time":"$D2021-02-16T16:47:21.926Z","fork":true,"stars":5,"starred":false,"owner":{"type":"team","id":"58eacf8e202aa99c","login":"elibryan","name":"Eli Holder","avatar_url":"https://avatars-next.observableusercontent.com/f42ede38e59d5fab5318c3a05de38dc47c2f88ee4bd796d32ced88733e2b8d50","tier":"starter_2024"},"version":4460,"publish_version":4460,"role":null,"authored":false,"authors":[{"type":"individual","id":"d17a47a44abf3446","login":"elibryan","name":"Eli Holder","avatar_url":"https://avatars-next.observableusercontent.com/f42ede38e59d5fab5318c3a05de38dc47c2f88ee4bd796d32ced88733e2b8d50","tier":null}],"members":[{"type":"individual","id":"d17a47a44abf3446","login":"elibryan","name":"Eli Holder","avatar_url":"https://avatars-next.observableusercontent.com/f42ede38e59d5fab5318c3a05de38dc47c2f88ee4bd796d32ced88733e2b8d50","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"Radical Dots - Simulating Echo Chambers, Polarization and Extreme Belief Formation","cells":[{"id":0,"value":"md`# Radical Dots - Simulating Echo Chambers, Polarization and Extreme Belief Formation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4345,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4277,"value":"md`A simulation of dots (people) interacting with each other based on the attitude latitudes concept from [Social Judgement Theory](https://en.wikipedia.org/wiki/Social_judgment_theory).\n\nEvery dot below is defined by 10 beliefs, ranging from -1.0 to +1.0 (e.g. -1.0 might mean \"I really dislike cats\" and +1.0 might mean \"I really like cats\") and an x,y position. The \"map\" on the left shows the dots' positions and the stacked beeswarm chart on the right has a row for all 10 beliefs, with every dot positioned in the row based on their belief value for the corresponding belief. .\n\nEvery turn, apply the following rules:\n* Each turn, 1+ random dots \"speak\" to their neighbors about a random belief.\n* Dots that \"agree,\" step closer to the speaker and adjust their attitudes toward the speaker's belief. Dots that are neutral also step closer and adjust their belief toward the speaker's belief.\n* Dots that \"disagree,\" step away from the speaker and adjust their belief away from the speaker's belief.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2171,"value":"md`# The Simulator: 100 People`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4028,"value":"{\n const playButton = Object.assign(\n html``,\n {\n onclick() {\n mutable playing = !playing;\n }\n }\n );\n const resetButton = Object.assign(html``, {\n onclick() {\n mutable reset += 1;\n }\n });\n return html`\n${playButton}\n${resetButton}\n\n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4054,"value":"render = ((peopleById, params) => {\n const plotHeight = params.plotWidth || 600;\n const margin = { top: 40, left: 40, right: 0 };\n const plotWidth = width - margin.left - margin.right;\n const middleSpacing = 40;\n const leftWidth = 2 * (plotWidth / 3) - middleSpacing;\n const rightWidth = 1 * (plotWidth / 3) - 16;\n\n return html` `;\n})(peopleState, settings)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4254,"value":"md`StdDev of Initial Beliefs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4227,"value":"viewof initialBeliefStdDev = Range([0, 2], {\n step: .05,\n value: _.get(settingsFromURL, 'initialBeliefStdDev', .33)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4258,"value":"md`StdDev of Initial Positions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4239,"value":"viewof initialPosStdDev = Range([0, 2], {\n step: .1,\n value: _.get(settingsFromURL, 'initialPosStdDev', .5)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4262,"value":"md`Speech Distance (% Radius)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4243,"value":"viewof speechDistance = Range([0, 1], {\n step: .02,\n value: _.get(settingsFromURL, 'speechDistance', .2)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4267,"value":"md`Speech type. Random = choose beliefs to speak about at random. Extreme is choose from most extreme beliefs.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4245,"value":"viewof speechType = Radio([\"random\", \"extreme\"], {\n value: _.get(settingsFromURL, 'speechType', \"random\")\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4451,"value":"md`Play speed`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4447,"value":"viewof playSpeed = Range([0, 50], {\n step: 5,\n value: _.get(settingsFromURL, 'playSpeed', 5)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4360,"value":"md`Use the following URL to share / bookmark the current settings: [Share URL](${createShareURL(\n html``.href,\n settings\n)})`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4192,"value":"md`# State`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4406,"value":"settingsFromURL = getSettingsFromURL(location.href)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1607,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4122,"value":"people = {\n reset;\n let people = jitterStep(\n _.range(settings.personCount).map(id => generatePerson(id, settings)),\n settings\n ).map(person => ({ ...person, targetPos: person.pos }));\n return people;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"mutable selectedIds = new Set()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1114,"value":"peopleBySelected = _.groupBy(_.values(peopleState), person =>\n selectedIds.has(person.id)\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3942,"value":"peopleState = {\n let peopleById = _.keyBy(people, p => p.id);\n yield peopleById;\n const stepCount = settings.playSpeed;\n\n while (playing) {\n await Promises.delay(100);\n peopleById = _.range(stepCount).reduce(\n acc => runLoop(acc, settings),\n peopleById\n );\n yield peopleById;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4000,"value":"mutable playing = false","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4037,"value":"mutable reset = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4181,"value":"md`# Sim Steps`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2967,"value":"/**\n * Jitter dots until they're not overlapping\n * Mutates people\n */\njitterStep = (people, params) => {\n let quadTree = d3\n .quadtree()\n .x(d => d.pos[0])\n .y(d => d.pos[1])\n .addAll(people);\n\n // If people are overlapping, jitter them\n people.forEach((person, index) => {\n let personPos = person.pos;\n let collisions = quadSearch(quadTree, personPos, params.dotRadius * 2.1);\n\n for (let i = 0; i < 100; i++) {\n if (collisions.length == 1 && collisions[0].id == person.id) {\n break;\n } else {\n personPos = newJitterPos(personPos, params.dotRadius * 0.5);\n }\n collisions = quadSearch(quadTree, personPos, params.dotRadius * 2.1);\n }\n\n if (personPos[0] !== person.pos[0] || personPos[1] !== person.pos[1]) {\n quadTree = quadTree.remove(person);\n person.pos = personPos;\n quadTree = quadTree.add(person);\n }\n });\n\n return people;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"/**\n * Get a person's new position relative to reference\n * Weird?\n */\nmoveRelativeTo = (person, reference, stepSize, params) => {\n let newPosition = newRelativePos(\n person.targetPos,\n params.chaseTarget ? reference.targetPos : reference.pos,\n stepSize\n );\n newPosition = constrainPosition(newPosition, params);\n return newPosition;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":698,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2694,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"/**\n * Main loop for the sim\n * Mutates peopleById\n */\nrunLoop = (peopleById, params) => {\n if (params.enableSpeech) {\n speechStep(peopleById, params);\n }\n if (params.enableMovement) {\n moveStep(peopleById, params);\n }\n\n return peopleById;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2177,"value":"md`# Viz / Renderers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4315,"value":"/**\n * Get common styles for a dot\n */\ngetDotStyle = (person, params) => {\n const colorFn = params.beliefColorFn;\n const isSelected = selectedIds.has(person.id);\n let fillColor = colorFn(person);\n let fillOpacity = 0.4;\n let strokeOpacity = 0;\n if (0 < selectedIds.size) {\n fillColor = params.unselectedColor;\n fillOpacity = 0.05;\n strokeOpacity = 0.5;\n }\n if (selectedIds.has(person.id)) {\n fillColor = params.selectedColor;\n fillOpacity = 0.8;\n strokeOpacity = 0.5;\n }\n\n return { fillColor, strokeColor: fillColor, fillOpacity, strokeOpacity };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4047,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2248,"value":"/**\n * Render a dot\n */\nrenderPersonDot = (person, params) => {\n const { fillColor, fillOpacity, strokeColor, strokeOpacity } = getDotStyle(\n person,\n params\n );\n\n return svg`\n\n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2228,"value":"/**\n * Render the belief spokes / spider legs around a dot\n */\nrenderDotSpokes = (person, params) => {\n return svg`\n\n${person.beliefs.map((beliefValue, beliefId) => {\n const midPoint = [params.dotRadius, params.dotRadius];\n const angle = beliefId * (Math.PI / params.beliefCount) - 0.5 * Math.PI;\n const deltaX = Math.cos(angle) * beliefValue * params.dotRadius * 2;\n const deltaY = Math.sin(angle) * beliefValue * params.dotRadius * 2;\n return svg``;\n})}\n\n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2716,"value":"/**\n * Render the line showing where dot is moving\n */\nrenderDotMoveLine = (person, params) => {\n let fillColor = '#333333';\n let opacity = 0.13;\n\n return svg`\n\n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3909,"value":"/**\n * Render the speech bubble around the dots\n */\nrenderSpeechBubble = (person, params) => {\n return svg``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4051,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4152,"value":"md`# Utils`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1482,"value":"/**\n * For dampening belief changes\n */\nbeliefChangeScale = d3\n .scalePow()\n .exponent(-1.5)\n .clamp(true)\n .domain([0.6, 1])\n .range([.05, 0.0000001])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3635,"value":"/**\n * Turn belief vector into RGB\n */\ngetBeliefsColorCompress = person => {\n const beliefValues = person.beliefs;\n const beliefTo255Scale = d3\n .scaleLinear()\n .domain([-1, 1])\n .range([0, 255]);\n const colorBeliefs = _.chunk(\n beliefValues,\n Math.floor(beliefValues.length / 3)\n )\n .map(_.mean)\n .map(beliefTo255Scale);\n\n return `rgb(${colorBeliefs[0]},${colorBeliefs[1]},${colorBeliefs[2]})`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"/**\n * For laying out dots on the beeswarm charts\n */\ndistroForce = d3\n .forceSimulation()\n .force(\"collide\", d3.forceCollide().radius(4))\n .force('x', d3.forceX().x(d => d.x))\n .force('y', d3.forceY().y(d => d.y))\n .alpha(0.7)\n .alphaDecay(0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4370,"value":"md`### Sharing`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4379,"value":"createShareURL = (currentURL, state) => {\n if (!state) return currentURL;\n const [baseURL, queryString] = currentURL.split(\"?\");\n const sharableSettings = _.entries(settings)\n .filter(([k, v]) => _.isNumber(v) || _.isString(v) || _.isBoolean(v))\n .map(([k]) => k);\n const preparedState = _.pick(settings, sharableSettings);\n const queryParams = new URLSearchParams(queryString);\n queryParams.set(\"state\", btoa(JSON.stringify(preparedState)));\n return baseURL + \"?\" + queryParams.toString();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4376,"value":"getSettingsFromURL = url => {\n if (!url) return {};\n\n const queryParams = new URLSearchParams(url.split(\"?\")[1]);\n\n if (!queryParams.get(\"state\")) return {};\n\n try {\n let output = JSON.parse(atob(queryParams.get(\"state\")));\n return output;\n } catch (ex) {\n return {};\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4154,"value":"md`### Movement / Geometry`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":825,"value":"/**\n * Change a position to be within the circle defined in params\n */\nconstrainPosition = (pos, params) => {\n const maxRadius = Math.min(params.width, params.height) * 0.5 - 10;\n const midPoint = [params.width * 0.5, params.height * 0.5];\n const posDistance = Math.abs(euclideanDistance(pos, midPoint));\n\n if (maxRadius < posDistance) {\n pos = newRelativePos(pos, midPoint, Math.abs(posDistance - maxRadius));\n }\n\n return pos;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1503,"value":"/**\n * Calculate a new position that's that is `stepSize` away from `pos`\n * toward ref\n */\nnewRelativePos = (pos, ref, stepSize) => {\n if (pos[0] === ref[0] && pos[1] === ref[1]) return pos;\n const angle = Math.atan(Math.abs((pos[1] - ref[1]) / (pos[0] - ref[0])));\n const deltaX = Math.cos(angle) * stepSize * Math.sign(ref[0] - pos[0]);\n const deltaY = Math.sin(angle) * stepSize * Math.sign(ref[1] - pos[1]);\n const newX = pos[0] + deltaX;\n const newY = pos[1] + deltaY;\n return [newX, newY];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2787,"value":"/**\n * Calculate a new random position that's that is `stepSize` away from `pos`\n */\nnewJitterPos = (pos, stepSize) => {\n let angle = Math.PI * 2 * Math.random();\n return newAnglePos(pos, angle, stepSize);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3051,"value":"/**\n * Calculate a new position that's that is `stepSize` away from `pos`\n * at angle `angle`, when facing `refPos`\n */\nnewRelAngleStepPos = (pos, refPos, angle, stepSize) => {\n const angleToRef = Math.atan2(pos[1] - refPos[1], pos[0] - refPos[0]);\n return newAnglePos(pos, angleToRef - angle, stepSize);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3050,"value":"/**\n * Calculate a new position that's that is `stepSize` away from `pos`\n * at angle `angle`\n */\nnewAnglePos = (pos, angle, stepSize) => {\n let delta = stepSize;\n const deltaX = Math.cos(angle) * delta;\n const deltaY = Math.sin(angle) * delta;\n\n return [pos[0] + deltaX, pos[1] + deltaY];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"/**\n * Calculate distance between 2 vectors\n */\neuclideanDistance = (vec1, vec2) => {\n const joinedVecs = _.zip(vec1, vec2);\n return Math.sqrt(_.sum(joinedVecs.map(([v1, v2]) => Math.pow(v1 - v2, 2))));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2853,"value":"/**\n * Search a quad tree\n * See: https://github.com/d3/d3-quadtree\n */\nquadSearch = (quadtree, [centerX, centerY], halfWidth) => {\n const xmin = centerX - halfWidth;\n const xmax = centerX + halfWidth;\n const ymin = centerY - halfWidth;\n const ymax = centerY + halfWidth;\n\n const results = [];\n quadtree.visit(function(node, x1, y1, x2, y2) {\n if (!node.length) {\n do {\n var d = node.data;\n if (\n d.pos[0] >= xmin &&\n d.pos[0] < xmax &&\n d.pos[1] >= ymin &&\n d.pos[1] < ymax\n ) {\n results.push(d);\n }\n } while ((node = node.next));\n }\n return x1 >= xmax || y1 >= ymax || x2 < xmin || y2 < ymin;\n });\n return results;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"_ = require(\"https://cdn.jsdelivr.net/npm/lodash@4.17.20/lodash.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1531,"value":"jstat = require(\"https://cdn.jsdelivr.net/npm/jstat@latest/dist/jstat.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3788,"value":"import { Button, Range, Radio } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4285,"value":"gtag = {\n await require(\"https://www.googletagmanager.com/gtag/js?id=UA-19745547-3\").catch(\n () => {}\n );\n const dataLayer = (window.dataLayer = window.dataLayer || []);\n function gtag() {\n dataLayer.push(arguments);\n }\n await gtag('js', new Date());\n await gtag('config', 'UA-19745547-3', {\n page_path: \"/@elibryan/radical-dots\"\n });\n return function() {\n dataLayer.push(arguments);\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3b","stdlib":"1","titling":"auto"}} 33:"$32:body"