2d:null 2e:["$","title",null,{"children":"Observable + Mechanical Turk Example | Eli Holder | Observable"}] 33:T752,/** * A simple d3 bar chart. */ barChart = ((data, params) => { params = params || {} const title = params['title'] || null const description = params['description'] || null // Note that Observable notebooks have a global 'width' variable that's set to the screen width. I recommend setting a smaller width though since we want this to fit in a mechanical turk HIT window const width = params['width'] || 320 const height = params['height'] || 120 const color = params['color'] || '#1184C4' const margin = ({top: 6, right: 0, bottom: 24, left: 24, spacing: 1}) const x = d3.scaleBand() .domain(data.map(d => d.x)) .rangeRound([margin.left, width - margin.right]); const axisBottom= d3.axisBottom(x) const xAxis = (g) => ( g .attr("transform", `translate(0,${height-margin.bottom})`) .call(axisBottom)) const yMax = d3.max(data.map(d=>d.y)) const yMin = Math.min(0,d3.min(data.map(d=>d.y))) const y = d3.scaleLinear() .domain([yMin,yMax]) .range([height-margin.bottom, margin.top]) const axisLeft = d3.axisLeft(y) const yAxis = (g) => ( g .attr("transform", `translate(${margin.left},${0})`) .call(axisLeft.ticks(5)) // .call(axisLeft.tickValuaes(d3.range(yMin, yMax+1, 1))) .call(axisLeft) ) return html` ${title? (html`

${title}

`):""} ${description? (html`${description}`):""} ` })34:[] 31:{"id":"8500fd0d3ff3a696","slug":"observable-mechanical-turk-guide","title":"Observable + Mechanical Turk Example","thumbnail":"01bbb007c3c189fb0ae533415eba0e55064fb16ba1d67cec774228922236d90b","access_level":"public","create_time":"$D2020-06-26T02:39:32.907Z","update_time":"$D2020-07-02T20:59:28.748Z","view_time":null,"first_public_time":"$D2020-06-29T02:54:15.949Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"58eacf8e202aa99c","login":"elibryan","name":"Eli Holder","avatar_url":"https://avatars-next.observableusercontent.com/f42ede38e59d5fab5318c3a05de38dc47c2f88ee4bd796d32ced88733e2b8d50","tier":"starter_2024"},"version":90,"publish_version":90,"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":0,"collection":null,"type":"notebook","body":{"title":"Observable + Mechanical Turk Example","cells":[{"id":0,"value":"md`# Observable + Mechanical Turk Example\n\nThe Writeup for this is available here: [How to: Crowd-Testing Data Viz with ObservableHQ and Mechanical Turk](#)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"barChart([1,2,3,4,3,5].map((d,i)=>({x:i, y:d})))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"chartVariants= ({\n 'red': (data,params)=>(barChart(data, {...params, color: '#EB4137'})),\n 'green': (data,params)=>(barChart(data, {...params, color: '#8CC432'})),\n 'blue': (data,params)=>(barChart(data, {...params, color: '#1184C4'})),\n})\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"chartVariants['red']([1,2,3,4,3,5].map((d,i)=>({x:i, y:d})))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"data0 = [\"Brownies\", \"Cookies\", \"Cupcakes\", \"Donuts\"].map((treatLabel)=>({x: treatLabel, y: Math.round(Math.random() * 100)}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"import { radio } from \"@meetamit/multiple-choice-inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"viewof chartVariant = radio({\n title: 'Choose Chart',\n description: 'Please choose which chart to evaluate.',\n options: [\n { label: 'Red', value: 'red' },\n { label: 'Green', value: 'green' },\n { label: 'Blue', value: 'blue' },\n ],\n value: 'red'\n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"chart0 = {\n const chartFn = chartVariants[chartVariant]\n return chartFn(data0)}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"gtag = {\n await require(\"https://www.googletagmanager.com/gtag/js?id=UA-19745547-3\").catch(() => {});\n const dataLayer = window.dataLayer = window.dataLayer || [];\n function gtag(){dataLayer.push(arguments);}\n await gtag('js', new Date());\n await gtag('config', 'UA-19745547-3', {'page_path': \"/@elibryan/observable-mechanical-turk-guide\"});\n return function() { dataLayer.push(arguments); };\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"