2b:null 2c:["$","title",null,{"children":"Lesson 1 | Stu Jordan | Observable"}] 31:T6f4,forChart = { const byProjectAll = d3.group(rawData, d => d.project); const positionCounts = new Map(); Array.from(byProjectAll.keys()).forEach(project => { positionCounts.set(project, d3.rollup(byProjectAll.get(project), v => v.length, d => d.position)) }) //delete projects for which number supporting + number opposing less than threshold Array.from(byProjectAll.keys()).forEach(project => { let numSuppOpp = 0; ['support', 'oppose'].forEach(position => { if (positionCounts.get(project).has(position)) { numSuppOpp = numSuppOpp + positionCounts.get(project).get(position) } }) if (numSuppOpp < minCommentThreshold) { byProjectAll.delete(project); positionCounts.delete(project); } }) //take a random sample of remaining projects. d3.shuffle(Array.from(byProjectAll.keys())).forEach((key,idx) => { if( idx >= sampleSize ){ byProjectAll.delete(key); positionCounts.delete(key); } }) //sort by number opposed var outComments = new Map(); var outCounts = new Array(); Array.from(positionCounts.keys()).sort((a,b) => positionCounts.get(a).get('oppose') - positionCounts.get(b).get('oppose')).forEach( project => { outComments.set(project, byProjectAll.get(project)); outCounts.push({ project: project, support: positionCounts.get(project).has('support') ? positionCounts.get(project).get('support') : 0, oppose: positionCounts.get(project).has('oppose') ? positionCounts.get(project).get('oppose') : 0, neutral: positionCounts.get(project).has('neutral') ? positionCounts.get(project).get('neutral') : 0 }) //outCounts.set(project, positionCounts.get(project)); }) return ({ pcounts: outCounts, pcomments: outComments }); }32:T551,unfolded = { //first get the maximum number of comments on either side across all projects const half = d3.max(Array.from(forChart.pcomments.keys()).map((project,idx) => Math.max(forChart.pcounts[idx].support, forChart.pcounts[idx].oppose))); // half is the number of cells in one-half of the chart. So, if half === 62, then the chart is going to be 62*2 cells across. If we number the cells as 1 through 62*2 from left to right, the positive comments will start at cell 62 and expand from there to the left (61, 60, 59,...), while oppose comments will start at cell 63 and expand from there to the right (63, 64, 65,...) //now iterate through the projects, to construct the unfolded data const uf = new Array(); Array.from(forChart.pcomments.keys()).forEach(project => { let suppSoFar = 0; let oppSoFar = 0; forChart.pcomments.get(project).forEach(comment => { if (comment.position === "oppose"){ uf.push({ project: project, position: 'oppose', reasons: comment.reasons, x: 63 + suppSoFar }); suppSoFar++; } if (comment.position === "support"){ uf.push({ project: project, position: 'support', reasons: comment.reasons, x: 62 - oppSoFar }); oppSoFar++; } }) }) return uf; }33:T622,effortToLikelihood = { let outerDivWidth = 800; let heightRatio = 0.625; let outerDiv = d3 .create("div") .style("width", `${outerDivWidth}px`) .style("height", `${outerDivWidth*heightRatio}px`) .style("position", "relative") function makeLineData(resolution, xMin, xMax, yFunc) { return [...new Array(resolution)].map((el,idx) => ({ x: xMin + idx*(xMax-xMin)/resolution, y: yFunc(xMin + idx*(xMax-xMin)/resolution) })) } let lp = Plot.plot({ marginBottom: 40, marginLeft: 60, y: { domain: [0,1], label: null }, x: { domatin: [0,10], ticks: [...new Array(11)].map((el,idx) => idx), label: null }, grid: true, marks: [ Plot.line(makeLineData(1000,0,10,e => (e/(e+1))), { x: "x", y: "y" }) ] }); let xLabel = MathJax.tex2svg( String.raw`\text{Sum of effort levels $E$}` ); let xAxis = d3.select(lp).select("svg > g[aria-label='x-axis']") xAxis.append('g') .attr('transform', `translate(250,20) scale(1.5)`) .append(() => xLabel.querySelector("svg")); let yLabel = MathJax.tex2svg( String.raw`\text{Likelihood of the favorable outcome $L$}` ) let yAxis = d3.select(lp).select("svg > g[aria-label='y-axis']") yAxis.append('g') .attr('transform', `translate(-50,340) scale(1.5) rotate(270)`) .append(() => yLabel.querySelector("svg")) let set = d3.select(lp).selectAll("svg > g > text").style("font-size", "20px"); return lp; }34:T5a7,eToL = { let outerDivWidth = 800; let heighRatio = 0.625; let outerDiv = d3 .create("div") .style("width", `${outerDivWidth}px`) .style("height", `${outerDivWidth*heighRatio}px`) .style("position", "relative") function makeLineData(resolution, xMin, xMax, yFunc) { return [...new Array(resolution)].map((el,idx) => ({ x: xMin + idx*(xMax-xMin)/resolution, y: yFunc(xMin + idx*(xMax-xMin)/resolution) })) } let lp = Plot.plot({ width: outerDivWidth, height: outerDivWidth*heighRatio, marginBottom: 40, marginLeft: 60, y: { domain: [0,1], label: null }, x: { ticks: [0], label: null }, grid: true, marks: [ Plot.line(makeLineData(1000,0,3,e => (e/(e+1))), { x: "x", y: "y" }) ] }); let xLab = outerDiv .append("div") .style("position", "absolute") .style("left", `${-80 + outerDivWidth/2}px`) .style("bottom", `-20px`) xLab.append(() => tex.block`\text{Sum of the effort levels, $E_i$}`) let yLab = outerDiv .append("div") .style("position", "absolute") .style("left", `${-150}px`) .style("top", `${0.4*outerDivWidth*heighRatio}px`) .style("transform", "rotate(270deg)") yLab.append(() => tex.block`\text{Likelihood of the favorable outcome, $L$}`) outerDiv.append(() => lp) return outerDiv.node(); }35:T831,etoUChart = { let otherEfforts = controls.otherEfforts; let maxEffort = 10; let U = (x,otherEfforts) => 100*(x + otherEfforts)/(x + otherEfforts + 1) - x; let points = [...Array(1000)].map((el,idx) => ({ x: idx*maxEffort/1000, y: U(idx*maxEffort/1000,otherEfforts) })) let lp = Plot.plot({ x: { domain: [0,10], grid: true, label: null, }, y: { domain: [0,100*10/(11)], grid: true, label: null, }, marginLeft: 60, marginBottom: 60, marginRight: 100, marks: [ Plot.line(points, { x: "x", y: "y" }), Plot.ruleX([Math.max(0,9-otherEfforts)], { strokeDasharray: [10,1], strokeWidth: 2, stroke: controls.showMax ? "orange" : null }), Plot.ruleY([0]), Plot.ruleX([0]) ] }) let xLab = MathJax.tex2svg( String.raw`\text{$i$'s effort level $e_i$}` ); d3.select(lp).select("svg > g[aria-label='x-axis']") .append("g") .attr("transform", `translate(300,30) scale(1.5)`) .append(() => xLab.querySelector("svg")) let yLab = MathJax.tex2svg( String.raw`\text{$i$'s utility level}` ) d3.select(lp).select("svg > g[aria-label='y-axis']") .append("g") .attr("transform", `translate(-50,240) scale(1.5) rotate(270)`) .append(() => yLab.querySelector("svg")) if (controls.showMax){ let argMaxLabel1 = MathJax.tex2svg( String.raw`\begin{align*}&\text{Effort level for $i$} \\ &\text{at which $i$'s utility} \\ &\text{is highest}& \end{align*}`, { display: true, } ) let argMaxLabel1x = d3.select(lp).select("svg > g[aria-label='rule'][stroke='orange'] > line").attr("x1") let argMaxLabel1y = 0.5*d3.select(lp).select("svg > g[aria-label='rule'][stroke='orange'] > line").attr("y1") + 0.5*d3.select(lp).select("svg > g[aria-label='rule'][stroke='orange'] > line").attr("y2") d3.select(lp).append("g") .attr('transform', `translate(${Number(argMaxLabel1x)+5},${argMaxLabel1y}) scale(1.5)`) .append(() => argMaxLabel1.querySelector("svg")); } return lp; }36:[{"id":"c6617edea630ec7546d3170923b1b32704975d49bcef070f3081abd02957817b5e3ecabb3f97fa4cfd20f8800d1ac724280fe1d79c31e38a8b501a0737ea56ac","href":"https://static.observableusercontent.com/files/c6617edea630ec7546d3170923b1b32704975d49bcef070f3081abd02957817b5e3ecabb3f97fa4cfd20f8800d1ac724280fe1d79c31e38a8b501a0737ea56ac","name":"all_comments_anon.tab","type":"application/octet-stream","lastModified":1659544238377.508,"size":536834},{"id":"0ac200e52e37b6d67fead9d0a751649f1cee8d538e07328c86dd6e85334bc7e7d4959d201d639af16667fc96bd3f8c24ea5944d19255d5587997d8bfead61fa3","href":"https://static.observableusercontent.com/files/0ac200e52e37b6d67fead9d0a751649f1cee8d538e07328c86dd6e85334bc7e7d4959d201d639af16667fc96bd3f8c24ea5944d19255d5587997d8bfead61fa3","name":"twoPlus.csv","type":"text/csv","lastModified":1659543952484.402,"size":1232}] 2f:{"id":"1b8e8db5aff2b3e2","slug":"lesson-1","title":"Lesson 1","thumbnail":"db42c4b32f47fb8cd600531f66c240bd2469bd864e2626f499bc3b410068305a","access_level":"public","create_time":"$D2022-08-03T16:22:21.640Z","update_time":"$D2022-08-14T19:38:57.828Z","view_time":null,"first_public_time":"$D2022-08-03T16:42:30.119Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"9b15ac6b917c6846","login":"stuvjordan","name":"Stu Jordan","avatar_url":"https://avatars-next.observableusercontent.com/3c96d67cee9a3cdf0a6ae0bf0fbbd6e796b57fc909d9537a1b76f0c29a58112b","tier":"starter_2024"},"version":178,"publish_version":178,"role":null,"authored":false,"authors":[{"type":"individual","id":"e082f7db26946044","login":"stuvjordan","name":"Stu Jordan","avatar_url":"https://avatars-next.observableusercontent.com/3c96d67cee9a3cdf0a6ae0bf0fbbd6e796b57fc909d9537a1b76f0c29a58112b","tier":null}],"members":[{"type":"individual","id":"e082f7db26946044","login":"stuvjordan","name":"Stu Jordan","avatar_url":"https://avatars-next.observableusercontent.com/3c96d67cee9a3cdf0a6ae0bf0fbbd6e796b57fc909d9537a1b76f0c29a58112b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Lesson 1","cells":[{"id":0,"value":"# Lesson 1","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":18,"value":"## Home Values by Metro","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":24,"value":"twoPlus = FileAttachment(\"twoPlus.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"homeValsbyMetro = {\n let final = addTooltips(Plot.plot({\n marginLeft: 80,\n marginBottom: 50,\n inset: 20,\n grid: true,\n height: 600,\n facet: {\n data: twoPlus,\n x: \"NBR\",\n label: \"Number of Bedrooms\",\n insetBottom: 100,\n marginBottom: 50,\n },\n y: {\n label: \"Metro Area Median Home Value\",\n labelAnchor: \"center\",\n tickFormat: '$,f'\n },\n marks: [\n Plot.frame(),\n Plot.dotY(\n twoPlus, \n Plot.dodgeX({\n y: \"MEDIANVAL\", \n fill: \"METRO\", \n r: 10, \n anchor: \"middle\",\n title: (d) => `${d.METRO} \\nMedian value of homes with ${d.NBR} bedrooms: \\$${d3.format(\",\")(d.MEDIANVAL)}`\n })\n )\n ],\n}));\n\nlet selAxisLabels = d3.select(final).selectAll(\"svg > g > text\").style(\"font-size\", \"20px\");\n\nlet selAxisTickLabels = d3.select(final).selectAll(\"svg > g[aria-label='fx-axis'] > g.tick > text\")\n .style(\"font-size\", \"20px\")\n\nreturn final;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":63,"value":"The following is the same chart without the tooltips, but with point-specific information in the svg `title` elements. This can be downloaded and used purely as an svg.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":67,"value":"hVMSVGOnly = {\n let final = Plot.plot({\n marginLeft: 80,\n marginBottom: 50,\n inset: 20,\n grid: true,\n height: 600,\n facet: {\n data: twoPlus,\n x: \"NBR\",\n label: \"Number of Bedrooms\",\n insetBottom: 100,\n marginBottom: 50,\n },\n y: {\n label: \"Metro Area Median Home Value\",\n labelAnchor: \"center\",\n tickFormat: '$,f'\n },\n marks: [\n Plot.frame(),\n Plot.dotY(\n twoPlus, \n Plot.dodgeX({\n y: \"MEDIANVAL\", \n fill: \"METRO\", \n r: 10, \n anchor: \"middle\",\n title: (d) => `${d.METRO} \\nMedian value of homes with ${d.NBR} bedrooms: \\$${d3.format(\",\")(d.MEDIANVAL)}`\n })\n )\n ],\n});\n\nlet selAxisLabels = d3.select(final).selectAll(\"svg > g > text\").style(\"font-size\", \"20px\");\n\nlet selAxisTickLabels = d3.select(final).selectAll(\"svg > g[aria-label='fx-axis'] > g.tick > text\")\n .style(\"font-size\", \"20px\")\n\nreturn final;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":26,"value":"## Construction Permit Public Hearing Comments","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":28,"value":"rawData = FileAttachment(\"all_comments_anon.tab\").tsv({typed: true})\n .then( data => {\n return data.map(comment => ({\n project: `${comment.project}, ${comment.town}`,\n position: comment.position,\n reasons: comment.reasons,\n }))\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":30,"value":"minCommentThreshold = 10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":32,"value":"sampleSize = 30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":34,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":36,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":38,"value":"commentChart = {\n let chart = addTooltips(Plot.plot({\n grid: true,\n y: {\n domain: Array.from(forChart.pcomments.keys()),\n ticks: null,\n label: null,\n },\n color: {\n domain: ['support', 'oppose'],\n range: ['green', 'red']\n },\n x: {\n ticks: null,\n label: null,\n type: \"band\",\n },\n marks: [\n Plot.cell(unfolded, {\n x: \"x\",\n y: \"project\",\n fill: \"position\",\n title: (d) => `${d.position}s ${d.project} \\n reasons: ${d.reasons}`\n }),\n Plot.ruleX([\"62.5\"], {stroke: 'black', strokeWidth: 6})\n ]\n }));\n return chart;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":175,"value":"commentChartMaker = () => {\n let chart = addTooltips(Plot.plot({\n grid: true,\n y: {\n domain: Array.from(forChart.pcomments.keys()),\n ticks: null,\n label: null,\n },\n color: {\n domain: ['support', 'oppose'],\n range: ['green', 'red']\n },\n x: {\n ticks: null,\n label: null,\n type: \"band\",\n },\n marks: [\n Plot.cell(unfolded, {\n x: \"x\",\n y: \"project\",\n fill: \"position\",\n title: (d) => `${d.position}s ${d.project} \\n reasons: ${d.reasons}`\n }),\n Plot.ruleX([\"62.5\"], {stroke: 'black', strokeWidth: 6})\n ]\n }));\n return chart;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":136,"value":"can we display the same thing again?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":167,"value":"commentChart","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":47,"value":"## Effort to Likelihood","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":49,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":77,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":112,"value":"eToL2 = {\nfunction makeLineData(resolution, xMin, xMax, yFunc) { \n return [...new Array(resolution)].map((el,idx) => ({\n x: xMin + idx*(xMax-xMin)/resolution,\n y: yFunc(xMin + idx*(xMax-xMin)/resolution)\n }))\n }\n let lp = Plot.plot({\n marginBottom: 40,\n marginLeft: 60,\n y: {\n domain: [0,1],\n label: null\n },\n x: {\n ticks: [0],\n label: null\n },\n grid: true,\n marks: [\n Plot.line(makeLineData(1000,0,3,e => (e/(e+1))),\n {\n x: \"x\",\n y: \"y\"\n })\n ]\n });\n\n let xLab = htl.svg`\n

\n \n `\n\n return lp;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":118,"value":"## Some Math So we can get the class names","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":120,"value":"tex`\\text{this is some text with a symbol, $U(\\gamma,x)$}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":53,"value":"## Effort to Utility","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":55,"value":"maxOtherEffort = 10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":57,"value":"viewof controls = Inputs.form({\n otherEfforts: Inputs.number([0,maxOtherEffort], {step: 0.1, label: md`Set ${tex`E_{-i}`}`, value: 0}),\n showMax: Inputs.toggle({label: md`Show ${tex`e_i`} at which ${tex`i`}'s utility is highest'`, value: false})\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":59,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":61,"value":"effToUtility = htl.html`\n \n \n .container {\n display: flex;\n }\n .chart {\n flex-grow: 1;\n }\n .controls {\n max-width: 25%;\n }\n \n \n ${viewof controls} \n ${etoUChart} \n \n \n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"## Imports and Utility Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7,"value":"import {addTooltips} from \"@mkfreeman/plot-tooltip\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":45,"value":"MathJax = require('https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js').catch(\n () => window['MathJax']\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":43,"value":"function makeLineData(resolution, xMin, xMax, yFunc) { \n return [...new Array(resolution)].map((el,idx) => ({\n x: xMin + idx*(xMax-xMin)/resolution,\n y: yFunc(xMin + idx*(xMax-xMin)/resolution)\n }))\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 30:"$2f:body"