2d:null 2e:["$","title",null,{"children":"Situation Lab's Future Thing | Alec Barrett | Observable"}] 33:[] 31:{"id":"a23fbb69c2fdfc9b","slug":"situation-labs-future-thing","title":"Situation Lab's Future Thing","thumbnail":"7d2cd6c91bb7b0369cbc9d35503303afb45b69916a4d30fe816f3a55fa79b2e2","access_level":"public","create_time":"$D2020-07-19T16:42:58.018Z","update_time":"$D2020-07-29T21:44:37.112Z","view_time":null,"first_public_time":"$D2020-07-19T17:12:01.296Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"a22e826d0f3dc150","login":"anbnyc","name":"Alec Barrett","avatar_url":"https://avatars-next.observableusercontent.com/f36768e14bb49782102d13478101b1a5552af4ab66dea95cad1b7e8157bafdff","tier":"starter_2024"},"version":132,"publish_version":132,"role":null,"authored":false,"authors":[{"type":"individual","id":"3efd68de913f5c25","login":"anbnyc","name":"Alec Barrett","avatar_url":"https://avatars-next.observableusercontent.com/f36768e14bb49782102d13478101b1a5552af4ab66dea95cad1b7e8157bafdff","tier":null}],"members":[{"type":"individual","id":"3efd68de913f5c25","login":"anbnyc","name":"Alec Barrett","avatar_url":"https://avatars-next.observableusercontent.com/f36768e14bb49782102d13478101b1a5552af4ab66dea95cad1b7e8157bafdff","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"469c9c32a2765865","slug":"widget","title":"Widgets","owner":{"id":"a22e826d0f3dc150","login":"anbnyc","name":"Alec Barrett"}},"type":"notebook","body":{"title":"Situation Lab's Future Thing","cells":[{"id":0,"value":"md`# Situation Lab's Future Thing`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"md`This is an online adaptation of the game #FutureThing by [@sitlab](https://twitter.com/sitlab). PDF instructions and original cards at [http://situationlab.org](http://situationlab.org/wp-content/uploads/2015/10/FUTURETHING_Print-and-Play.pdf).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"viewof draw = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"html`

\n ${myCards.map(makeCardHtml).join('')}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"myCards.length === 4 ? html`

` : html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"myCards = {\n  draw;\n  if (!this || this.length >= 4){\n    return []\n  }\n  return [...this, pickRandom(cardTypes[this.length])]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"function pickRandom(type){\n  const deck = data.get(type);\n  if (!deck) { return null }\n  return deck[Math.floor(Math.random()*deck.length)]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"cardTypes = Array.from(data.keys())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"data = {\n  const data = await d3.csv('https://cors-anywhere.herokuapp.com/https://docs.google.com/spreadsheets/d/e/2PACX-1vQbA0xwJDjs6z18cdkWNB0ZuEge9fQFbzGPO1eMq2DgQHxpBI-77pxX2pzuHwZWehuTpyI1LV2JF2KG/pub?gid=0&single=true&output=csv');\n  return d3.group(data, d => d.Card)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"d3 = require('d3-fetch', 'd3-array@2')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"makeCardHtml = ({Card, Value, Detail}) => `<div class=\"card\">\n  <div class=\"card_category\">${Card}</div>\n  <div class=\"card_value\">${Value}<span class=\"card_detail\">${Detail ? ` (${Detail})` : ''}</span></div>\n</div>`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"html`<style>\n.card {\n  display: inline-block;\n  min-width: 120px;\n  text-align: center;\n  border: 1px solid black;\n  margin: 5px;\n  padding: 10px;\n  height: 100%;\n}\n\n.card_category {\n  font-size: 12px;\n  text-decoration: underline;\n}\n.card_detail {\n  font-size: 16px;\n  font-style: italic;\n}\n.card_value {\n  font-size: 16px;\n}\ntextarea {\n  width: 300px;\n  height: 200px;\n}\n</style>`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}}
32:"$31:body"
</article></body></html>