33:[] 30:{"title":"Why Develop a Gender Survey Backed by a Stateless Notebook?","cells":[{"id":0,"value":"md`# Why Develop a Gender Survey Backed by a Stateless Notebook?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":545,"value":"md`\n---\n\n**NOTE:** The application period for this assignment is closed. \n\n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":506,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs"},{"id":507,"value":"md`\n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"md`\n\n**tl;dr**\n\nI've posted a call for Expressions of Interest to lead development of a serverless questionnaire survey on ObservableHQ. The contract is for 2.5 'person-months' [55 days] to be utilized between now and latest 31 December 2020 for a total of just about 15,000 USD. You can read more and apply at:\nhttps://selfservice.adb.org/OA_HTML/adb/xxcrs/jsp/ADBCsrnFwd.jsp?sel=161359\n**Application deadline is \t24-Jul-2020.**\n\n----\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":284,"value":"md`\n## Context:
Why I am Opening this Call for Expressions of Interest\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"md`\nI've had this thing where I've been trying / hoping to use Observable to help me manage 'live' data^{[[1]](https://talk.observablehq.com/t/if-observable-authenticates-via-github-can-i-easily-write-to-it/2139)}—like the data I would typically store in a spreadsheet\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`\nI am often using data attribute fields that are relatively fixed, but the values change from time to time as I refine and correct data, or as data changes.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"md`\nLet's say, for instance, that I am working with several companies and wish to record information about these companies' gender profiles. Typically, I'd store the raw information for each company in a spreadsheet, rather, a simple \\`.CSV\\` file.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"md`\nTo work with these data in Observable, I have to load them into the notebook. I can do this in a few ways, such as uploading the \\`.CSV\\` file as a [file attachment](https://observablehq.com/@observablehq/file-attachments), \nwhich is helpful for sharing the source material of small data sets that aren't otherwise publicly hosted. I can also reference a hosted data source, which is helpful for independently controlling the data (allowing linked visualizations to automatically update when the data source changes).
\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"md`\nFor the purposes of this discussion, I'll use \\`d3.csv\\` to access an [S3](https://aws.amazon.com/s3/)-hosted data source.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs"},{"id":265,"value":"gender_data = d3.csv(`https://s3.amazonaws.com/data.viz/gesi_survey/gender-example-table.csv`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":83,"value":"md`\nAnd now I can render it out using a helpful \\`table\\` function from [@tmcw](https://observablehq.com/@tmcw).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"import {table} from \"@tmcw/tables/2\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"table(gender_data, { title: \"Gender Data\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":45,"value":"md`\nSo far, so good.\n\nOr not really?! Currently, I can only really render stored data. Is this enough? \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":377,"value":"md`\nObservable is great because it allows me to easily import inputs that will let me manipulate source data. This is heplful especially if I need to correct a visualization on the fly—for instance, if I wanted to override the values in a pie chart:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"import {number} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"data = [\n {name: gender_data[0][\"Data Label\"], value: value1},\n {name: gender_data[1][\"Data Label\"], value: value2},\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"viewof value1 = number({value: Number(gender_data[0][\"Value\"]), title: gender_data[0][\"Data Label\"], submit: false})","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"viewof value2 = number({value: Number(gender_data[1][\"Value\"]),title: gender_data[1][\"Data Label\"], submit: false})","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"chart = {\n const arcs = pie(data);\n\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [-width / 2, -height / 2, width, height]);\n\n svg.selectAll(\"path\")\n .data(arcs)\n .join(\"path\")\n .attr(\"fill\", d => color(d.data.name))\n .attr(\"d\", arc)\n .append(\"title\")\n .text(d => `${d.data.name}: ${d.data.value.toLocaleString()}`);\n\n svg.append(\"g\")\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 12)\n .attr(\"text-anchor\", \"middle\")\n .selectAll(\"text\")\n .data(arcs)\n .join(\"text\")\n .attr(\"transform\", d => `translate(${arc.centroid(d)})`)\n .call(text => text.append(\"tspan\")\n .attr(\"y\", \"-0.4em\")\n .attr(\"font-weight\", \"bold\")\n .text(d => d.data.name))\n .call(text => text.filter(d => (d.endAngle - d.startAngle) > 0.25).append(\"tspan\")\n .attr(\"x\", 0)\n .attr(\"y\", \"0.7em\")\n .attr(\"fill-opacity\", 0.7)\n .text(d => d.data.value.toLocaleString()));\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":468,"value":"md`\nMy override buttons above work, but the changes aren't persistent because the data is only being overwritten in my browser—changes are not being made to the actual data source. Refreshing the page will reset the values.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":" md`\nSo what if I wish to make these changes persistent? That is, what if I wanted to use Observable as a content management interface of sorts, via which I can allow anyone with access to a notebook to effect changes in a given dataset?\n\nIs it possible to use Observable to manage or update live data?\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"md`\nAs it turns out, it is! 😃\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"md`\nIn his [Introduction to Serverless Notebooks](https://observablehq.com/@observablehq/introduction-to-serverless-notebooks), Mike Bostock provides a step-by-step guide for creating a notebook with data stored on an [AWS DynamoDB](https://aws.amazon.com/dynamodb/) back end that updates a click counter each time a button is pushed—a measure that is stored outside the notebook and updated each time that an action (the button click) occurs within the notebook. Excellent! \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":433,"value":"import {increment, count} from \"03a777f085211a22\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":436,"value":"count","pinned":false,"hidden":false,"mode":"ojs"},{"id":438,"value":"html`

${Object.assign(html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":456,"value":"data_dynamic = [\n {name: \"Counter Value\", value: count},\n {name: \"Fixed\", value: 15},\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":453,"value":"chart_dynamic = {\n const arcs = pie(data_dynamic);\n\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [-width / 2, -height / 2, width, height]);\n\n svg.selectAll(\"path\")\n .data(arcs)\n .join(\"path\")\n .attr(\"fill\", d => color(d.data.name))\n .attr(\"d\", arc)\n .append(\"title\")\n .text(d => `${d.data.name}: ${d.data.value.toLocaleString()}`);\n\n svg.append(\"g\")\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 12)\n .attr(\"text-anchor\", \"middle\")\n .selectAll(\"text\")\n .data(arcs)\n .join(\"text\")\n .attr(\"transform\", d => `translate(${arc.centroid(d)})`)\n .call(text => text.append(\"tspan\")\n .attr(\"y\", \"-0.4em\")\n .attr(\"font-weight\", \"bold\")\n .text(d => d.data.name))\n .call(text => text.filter(d => (d.endAngle - d.startAngle) > 0.25).append(\"tspan\")\n .attr(\"x\", 0)\n .attr(\"y\", \"0.7em\")\n .attr(\"fill-opacity\", 0.7)\n .text(d => d.data.value.toLocaleString()));\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":472,"value":"md`\nNote that the changes effected by the 'Click me!' button are persistent: you will see the same thing if you refresh the page, and you can watch the values change from different computers, phones, etc. This is because, via Observable, we've effected a change to the actual data source.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"md`\nOf course, I've wandered pretty far down the train of thought leading me to believe that serverless notebooks will provide the persistent data storage solution that I am after. What does this have to do with the title of this notebook (creating a gender survey)? Let me start to close the loop...\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"md`\nBasically, a survey is just one means of gathering information from people. It's helpful and interesting in some cases because the questions being asked are (relatively) fixed, and because the information gathered is intended to feed into (usually) rather specific outputs, such as charts, graphs, tables, etc.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"md`\nSurveys can also be fun, interesting, and informative to the extent that they are or are not completed by users. For example, I developed a gender survey that is intended to collect a general yes/no answer, and from there to gather some more detailed information from respondents, like so:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"import {checkbox, radio, textarea} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"viewof borrower_GESI_commitment = radio({\n title: \"Does your company have a policy or commitment to promote gender equality and women's empowerment?\",\n description: '',\n options: [\"No\", \"Yes\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"html_switch_borrower_GESI_commitment_view = html`\n${html_switch_borrower_GESI_commitment}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"md`\nBut what if the person visiting this page doesn't click the second-tier answer? The great thing about severless notebooks is their capacity to record _every_ user input, as well as to record when changes are made to each.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"md`\nAdapting Mike's serverless notebook tutorial and combining it with custom forms, we can record each user inputs' changed value.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":256,"value":"md`\nMore importantly (for me, at least) is that changes to the hosted information are persistent and will stay 'as is' until the next time that a user comes along and changes the input values (against which there are several ways for introducing protections from edits by unauthorized users).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"md`\nEven better is that you don't have to expose the Observable notebook for this to work: you can instead [embed](https://observablehq.com/@observablehq/downloading-and-embedding-notebooks) elements of the notebook [into an HTML page](https://aaronkyle.github.io/concept/ui-design/sandbox/survey-form-view.html)—offering tremendous flexibility in terms of styles, layouts, etc.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":236,"value":"md`\nOf course, there are several additional security considerations that one would want to keep in mind for this sort of set-up. I won't get into them all now; just flagging the issue.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":310,"value":"md`\n## Assignment:
Developing a Survey Backed by a Stateless Notebook\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"md`\nSo much for the why; now let's get on to the 'how'. And this is where YOU come in!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"md`\nI've just opened a [call for Expression of Interests](https://selfservice.adb.org/OA_HTML/adb/xxcrs/jsp/ADBCsrnFwd.jsp?sel=161359) to get some help in building out this idea. There are a few parts to it. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":326,"value":"md`\n### Objective and Purpose\n\t\nThe purpose of this assignment is \n\n1. to improve a survey data collection tool written in JavaScript and hosted on ObserveableHQ by re- factoring the code to accept inputs from a JSON-formatted data file hosted as an S3 bucket object;\n2. to ensure that edits to a front-end HTML view of this notebook are captured and version-controlled through S3; and \n3. to create a 'configuration utility' in ObservableHQ that generates all necessary AWS configurations to redeploy the survey for different users in a manner similar to [Introduction to Serverless Notebooks](https://observablehq.com/@observablehq/introduction-to-serverless-notebooks); noting options for addressing IAM authenticion for HTML pages (e.g. through use of some sort of [key](https://observablehq.com/@observablehq/api-keys) or [secret](https://observablehq.com/@observablehq/secrets)), providing Lambda configurations for all questions, etc.). \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":328,"value":"md`\n### Scope of Work\n\t\nThe Consultant will be responsible for providing necessary support to refine and finalize JavaScript \nprogramming of a survey data-collection tool that communicated to an AWS-backed ‘severless’ data \nmanagement architecture.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":336,"value":"md`\n### Detailed Tasks and/or Expected Output\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":410,"value":"md`\n\n#### Project Familiarization\n\n *\tLearn current publication workflow\n *\tLearn about [ObservableHQ](https://observablehq.com/) and its [runtime and standard library](https://github.com/observablehq)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":415,"value":"md`\n#### Re-writing JavaScript Question Functions\n *\tReview question functions and current UI concept, noting desired user selection behaviors\n *\tRe-factor as for rapid question component generation\n - Some inspiration in this process: [Conditional Form](https://observablehq.com/@mbostock/conditional-form): [Mike Bostock](https://observablehq.com/@mbostock), [Combined And Custom Forms](https://observablehq.com/@mootari/combined-and-custom-forms) and [Limiting the Number of Checkbox Choices](https://observablehq.com/@mootari/checkbox-max) by [Fabian Iwand](https://observablehq.com/@mootari)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"md`\n#### Writing AWS Configurations & Generator\n *\tRefer to [this model for serverless notebooks](https://observablehq.com/@observablehq/introduction-to-serverless-notebooks)\n *\tFor each survey question / input, write an AWS Lambda function that stores data on both/either AWS \n DynamoDB or AWS S3 (preferred)\n *\tDesign a generator / deployment framework to replicate AWS Lambda configurations for each new survey \n [generator can be written in Observable]\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"md`\n#### HTML/CSS Styling\n *\tIn a combination of JavaScript and CSS [minimal CSS, based on [Tachyons](https://tachyons.io)] help to stylize the UI layout of a stand-alone HTML file that renders out notebook cells.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":339,"value":"md`\n### Deliverables\n\n* Re-factored survey questionnaire JavaScript code, capable of being driven by \\`*.json\\` database of \ninput fields \n* AWS Lambda configuration for S3-backed persistent and serverless notebook for defined survey questions\n* Configuration generator with user-defined/guided inputs using ObservableHQ\n* CSS styling of HTML viewing frame using Tachyons CSS \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":344,"value":"md`\n### Qualification Requirements\n\nApplicants must be from an [ADB member country](https://www.adb.org/about/members).\n\nThe successful candidate will be an expert in JavaScript and capable of writing secure AWS API Gateway \nand Lambda configurations to AWS data stores (tbd. Ideally S3, otherwise AWS DynamoDB).\n\nKey qualifications (in order of preference):\n*\tDegree in computer science or equivalent professional experience\n*\tMastery of JavaScript; experience with [D3.js](https://d3js.org/) for data visualization preferred\n*\tExperience with the following Amazon Web Services:\n -\tLambda: https://aws.amazon.com/lambda/)\n -\tAPI Gateway: https://aws.amazon.com/api-gateway/\n -\tS3: https://aws.amazon.com/s3/\n -\tDynamoDB: https://aws.amazon.com/dynamodb/\n -\tDocumentDB: https://aws.amazon.com/documentdb/\n*\tKnowledge of CSS and willingness to work with Tachyons: https://tachyons.io/\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":192,"value":"md`\n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"md`\n**Appendix**\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":503,"value":"import { toc } from \"@aaronkyle/toc\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"html_switch_borrower_GESI_commitment = {\n let result;\n if (borrower_GESI_commitment === \"Yes\") {\n result = viewof borrower_GESI_commitment_yes;\n }\n else if (borrower_GESI_commitment === \"No\") {\n result = viewof borrower_GESI_commitment_no;\n }\n else if (borrower_GESI_commitment === \"\") {\n result =\"\";\n }\n else {\n result = \"\";\n }\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"viewof borrower_GESI_commitment_no = Object.assign(radio({\n title: 'If no:',\n description: 'Please select the statement that best describes the current situation at in your organization.',\n options: [\n {value: 1, label: \"Promoting GEWE is outside of the company's area of concern and interest.\"},\n {value: 2, label: \"We are interested to learn and assess if our company can consider formulating this policy or statement.\"},\n {value: 3, label: \"We have acknowledged the relevance of GEWE in our company's thrust and operations and will formulate or define the policy or statement within the year or next year.\"}\n ]\n}), {value: Promise.resolve(0)})","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"viewof borrower_GESI_commitment_yes = Object.assign(checkbox({\n title: 'If yes:',\n description: 'Please select the statement that best describes the current situation at in your organization.',\n options: [\n {value: 4, label: \"Gender equality is part of our vision, mission, and values statement\"},\n {value: 4, label: \"Gender equality is reflected in our human resource planning, recruitment and selection proceess.\"},\n {value: 4, label: \"We promote gender equality throug training and development, employee relations, and compensation and rewards\"},\n {value: 5, label: \"All of the above\"},\n]\n}), {value: Promise.resolve(0)})","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"pie = d3.pie()\n .padAngle(0.005)\n .sort(null)\n .value(d => d.value)","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"arc = {\n const radius = Math.min(width, height) / 2;\n return d3.arc().innerRadius(radius * 0.67).outerRadius(radius - 1);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"color = d3.scaleOrdinal()\n .domain(data.map(d => d.name))\n .range(d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), data.length).reverse())","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"height = Math.min(width, 500)","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}