25:["$","title",null,{"children":"Week 2 Tutorial | idil wais | Observable"}] 49:[{"id":"2f887ae1dd276de669e6fdb9fdd11210a164b1950e053d3263ccc44ce4602c7cff44f8365b3776304211c4327917975a2b692e8e379d83d6e3c4557d7b013e43","href":"https://static.observableusercontent.com/files/2f887ae1dd276de669e6fdb9fdd11210a164b1950e053d3263ccc44ce4602c7cff44f8365b3776304211c4327917975a2b692e8e379d83d6e3c4557d7b013e43","name":"test-table - results@3.csv","type":"text/csv","lastModified":1677169834522.984,"size":2704},{"id":"8ac1738c88ced2abf40d06d2bbad09b013b9e9c8d87c2e9eaceba39a338061bc50453665fdb5080a133baa3feb269c462a26e81e8f78dee3d95d899951a94349","href":"https://static.observableusercontent.com/files/8ac1738c88ced2abf40d06d2bbad09b013b9e9c8d87c2e9eaceba39a338061bc50453665fdb5080a133baa3feb269c462a26e81e8f78dee3d95d899951a94349","name":"testTable.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1677169834522.984,"size":17925}] 29:{"id":"2be8de0e899a72cf","slug":null,"title":"Week 2 Tutorial","thumbnail":"daef8fa49df513775d9d684d453e3fc6b69c1f664c7e8be4ee9d396ac9165518","access_level":"public","create_time":"$D2023-02-23T16:30:34.522Z","update_time":"$D2023-02-23T16:30:34.522Z","view_time":null,"first_public_time":"$D2023-02-23T16:30:34.522Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"dff6ae324a90a157","login":"idilwais","name":"idil wais","avatar_url":"https://avatars-next.observableusercontent.com/18c083b550d2a7ffad28ca024b016cb463d064ece1bfbd440c6668d839166a90","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":683,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0c9605c8605db266","login":"idilwais","name":"idil wais","avatar_url":"https://avatars-next.observableusercontent.com/18c083b550d2a7ffad28ca024b016cb463d064ece1bfbd440c6668d839166a90","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"0c9605c8605db266","login":"idilwais","name":"idil wais","avatar_url":"https://avatars-next.observableusercontent.com/18c083b550d2a7ffad28ca024b016cb463d064ece1bfbd440c6668d839166a90","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Week 2 Tutorial","cells":[{"id":0,"value":"# Week 2 Tutorial\n## Design Justice","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"## Using data in a notebook\nFirst, let's attach a spreadsheet to this notebook so we can use the data. \n\n> 1. Download the [${textcolor('sample-data-wk2', 'black')}](https://docs.google.com/spreadsheets/d/1vJTgf-atPeIqvo4mP5GMs3goPyf2jsC6z8rO90_hVoE/edit?usp=sharing) spreadsheet.\n\n> 2. Click on the ${textcolor('paperclip 📎', 'grey')} (top right of this page).\n\n> 3. Make the spreadsheet available by giving it a name:\n\n>>> `sampleCSV = FileAttachment(\"test-table.csv\").csv({ typed: true })`\n\n>> _${textcolor('Tip', 'pink')}: The_ `{ typed: true }` *is saying the data is correctly formatted as text, numbers, dates, etc. It's important to do this if you're using numbers and dates.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"## Tables\n\n### Creating a table with one line of JS\nLet's create a table:\n\n> 1. Create a new ${textcolor('Javascript cell', 'grey')},\n> 2. paste the command below into the cell, and hit the ${textcolor('play', 'grey')} button.\n\n\n>>> ``` javascript\n Inputs.table(sampleCSV) \n // You're instructing the cell to apply \n // inputs.table to the attached csv file sampleCSV\n```\n\n>> _${textcolor('Tip', 'pink')}: Two slashes – like this `//` – indicates a comment._\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"Inputs.table(sampleCSV) // You're instructing the cell to apply inputs.table to the attached csv file sampleCSV","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"Just so you know, Observable can also work with Excel spreadsheets. In the [Appendix](#cell-5), you'll see there's another attachment called [_sampleWorkbook_](#sampleWorkbook) and also another dataset [_sampleSheet_](#sampleSheet). Let's quickly take a look [👇...](#cell-5)\n\nTo use sampleSheet, create a new ${textcolor('Javascript cell', 'grey')} and paste the command below into it.\n\n``` javascript\n Inputs.table(sampleSheet) // You're instructing the cell to apply inputs.table to the attached spreadsheet sampleSheet\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":359,"value":"Inputs.table(sampleSheet) // You're instructing the cell to apply inputs.table to the attached spreadsheet sampleSheet","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"### Customising columns and headers\n\nLet's tidy the table up a bit, removing unwanted columns and renaming the headers.\n\n``` javascript\n Inputs.table(sampleSheet, {\n columns: [\n // Choosing the columns to include in the table\n \"Gender\",\n \"Age\",\n \"Nationality\",\n \"London borough, or town or City in UK\",\n \"Dogs or Cats?\",\n \"Political\",\n \"utc-date\"\n ],\n header: {\n // Changing selected header names\n \"London borough, or town or City in UK\": \"Place\", // Changing \"Place\"\n \"utc-date\": \"Birthday\" // Changing the column header to \"Birthday\"\n },\n format: {\n // Tidying up the date format\n \"utc-date\": (d) => moment(d).format(\"ddd DD MMM YYYY\")\n }\n })\n```\n_${textcolor('Tip', 'pink')}: Working with dates and formats can be tricky. For now, accept that in the [Appendix](#cell-5), we've imported a javascript library called moment.js to help format the date._","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":48,"value":"Inputs.table(sampleSheet, {\n columns: [\n // Choosing the columns to include in the table\n \"Gender\",\n \"Age\",\n \"Nationality\",\n \"London borough, or town or City in UK\",\n \"Dogs or Cats?\",\n \"Political\",\n \"utc-date\"\n ],\n header: {\n // Changing selected header names\n \"London borough, or town or City in UK\": \"Place\", // Changing \"Place\"\n \"utc-date\": \"Birthday\" // Changing the column header to \"Birthday\"\n },\n format: {\n // Tidying up the date format\n \"utc-date\": (d) => moment(d).format(\"ddd DD MMM YYYY\")\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"## Using other observable libraries\n\n_One other thing_: you can import javascript libraries in Observable. For example, add this to the Appendix to use a table library that another Observable user has created:\n\n``` javascript\n import { table } from \"@gampleman/table\" // It doesn't matter where you put this code\n```\n\nBy importing `@gampleman/table`, you have another way to display tables. See a bit more information [here](https://observablehq.com/@gampleman/table), but you can just use the JS code like this:\n\n``` javascript\n table(sampleSheet) // You're applying \"table\" to the attached spreadsheet \"sampleSheet\"\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":76,"value":"table(sampleSheet)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"Again you have some control here so you can customise how the table is presented.\n\n``` javascript\ntable(sampleSheet, {\n limit: 60,\n enableFilter: true, // Great for filtering your data\n enableCSVDownload: true, // This is nice if you want to share your data\n columns: [\n // List all the columns you want to include\n \"Gender\",\n \"Age\",\n \"Nationality\",\n {\n key: \"London borough, or town or City in UK\", // Note the different way you change headers\n name: \"Place\"\n },\n \"Dogs or Cats?\",\n \"Political\",\n {\n key: \"utc-date\",\n name: \"Date\"\n }\n ]\n }\n})\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":79,"value":"table(sampleSheet, {\n limit: 10,\n enableFilter: true,\n enableCSVDownload: true,\n height: 10,\n columns: [\n // List all the columns you want to include\n \"Gender\",\n \"Age\",\n \"Nationality\",\n {\n key: \"London borough, or town or City in UK\",\n name: \"Place\",\n render: (val) => `${val}` // You can render HTML\n },\n \"Dogs or Cats?\",\n \"Political\",\n {\n key: \"utc-date\",\n name: \"Date\",\n formatter: moment().format(\"ddd D MMM 2023 HH:m:s\")\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"table(sampleSheet, {\n style: \"compact\",\n sortable: true,\n columns: {\n // Customise columns\n Gender: {\n title: \"Gender\"\n },\n Age: {\n title: \"Age\"\n },\n Nationality: {\n title: \"Nationality\"\n },\n \"London borough, or town or City in UK\": {\n title: \"Place\",\n formatter: (val) => `${val}` // You can render HTML\n },\n \"utc-date\": {\n title: \"Birthday\",\n formatter: (d) => moment(d).format(\"DD/MM/YY\")\n },\n \"Dogs or Cats?\": {\n title: \"D/C\",\n formatter: (val) =>\n val === \"Cats\"\n ? `${val}`\n : `${val}`\n },\n Birthday: {\n title: \"day/month\",\n formatter: (d) => moment(d).format(\"DD/MM\")\n },\n \"rnd-yr\": {\n title: \"Year\"\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":153,"value":"## Bar Plots\n\nBelow, we're using [Plot.bar()](https://observablehq.com/@observablehq/plot-bar?collection=@observablehq/plot) and [Plot.group()](https://observablehq.com/@observablehq/plot-group?collection=@observablehq/plot) to generate a histogram.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":101,"value":"Plot.plot({\n marks: [\n Plot.barY(sampleCSV, Plot.groupX({ y: \"count\" }, { x: \"Age\" })), // Try replacing Age with Gender or Nationality\n Plot.ruleY([0]) // This draws a line on the Y axis at 0\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":645,"value":"In the code above, try replacing Age with Gender or Nationality","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":610,"value":"In observable, you can generate plots in a more dynamic way using inputs like radio buttons and sliders.\n\nWe're going to create two inputs with their own variable names that we can then use to generate a bar graph plot dynamically.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":267,"value":"viewof catChoice_1 = Inputs.radio(\n [\"Age\", \"Gender\", \"Nationality\", \"Dogs or Cats?\", \"Political\"],\n {\n label: \"Pick a category:\", // The text preceding the radio buttons\n value: \"Age\" // The default choice\n }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"viewof fillChoice = Inputs.radio(\n [\"Age\", \"Gender\", \"Nationality\", \"Dogs or Cats?\", \"Political\"],\n {\n label: \"Bar colours by?:\", // The text preceding the radio buttons\n value: \"Gender\" // The default choice\n }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"Plot.plot({\n marks: [\n Plot.barY(\n sampleCSV,\n Plot.groupX(\n { y: aggSelect_1 },\n {\n x: catChoice_1,\n fill: fillChoice\n //sort: [\"Marxist revolutionary\", \"Left\"]\n }\n )\n ), // Try replacing \"count\" with \"proportion\"\n Plot.ruleY([0])\n ],\n x: {\n tickRotate: -90,\n domain:\n catChoice_1 === \"Political\"\n ? [\n \"Marxist revolutionary\",\n \"Left\",\n \"Centrist\",\n \"Centre-right\",\n \"Right\",\n \"Die-hard capitalist\"\n ]\n : [...new Set(sampleCSV.map((a) => a[catChoice_1]))]\n },\n color: {\n legend: true, // To display a legend\n scheme: \"pastel2\",\n type: \"categorical\"\n }, // space below the chart\n marginBottom: 120,\n width: plotWidth_1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":651,"value":"A couple of other things: We can change the layout, for example changing the `width`. \n\nWe can also change the way the data is aggregated. Right now, we're counting how many times an age group, gender, etc. occur. We can choose to work out the proportions as well. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":633,"value":"viewof plotWidth_1 = Inputs.range([280, 1024], {\n label: \"Plot width\",\n step: 1,\n value: 280\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":655,"value":"viewof aggSelect_1 = Inputs.radio([\"count\", \"proportion\"], {\n value: \"count\",\n label: \"Choose aggregation method:\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":681,"value":"## Other kinds of plots","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":663,"value":"For now, just so you know, there are other kinds of plots.\n\nHere's a simple stack plot.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":133,"value":"Plot.plot({\n color: {\n legend: false, // To display a legend\n scheme: \"pastel2\",\n type: \"categorical\"\n },\n x: {\n percent: true\n },\n marks: [\n Plot.barX(\n sampleCSV,\n Plot.stackX(Plot.groupZ({ x: \"proportion\" }, { fill: catChoice_2 }))\n ),\n Plot.text(\n sampleCSV,\n Plot.stackX(\n Plot.groupZ(\n { x: \"proportion\", text: \"first\" },\n { z: catChoice_2, text: catChoice_2 }\n )\n )\n ),\n Plot.ruleX([0, 1])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":674,"value":"viewof catChoice_2 = Inputs.radio(\n [\"Age\", \"Gender\", \"Nationality\", \"Dogs or Cats?\", \"Political\"],\n {\n label: \"Pick a category:\", // The text preceding the radio buttons\n value: \"Age\" // The default choice\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":679,"value":"Here's a cell plot that plots cells rather than bars.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":241,"value":"Plot.plot({\n height: 300,\n padding: 0,\n y: {\n tickFormat: Plot.formatMonth(\"en\", \"short\")\n },\n marks: [\n Plot.cell(\n sampleCSV,\n Plot.group(\n { fill: \"count\" },\n {\n x: (d) => d[\"utc-date\"].getUTCDate(),\n y: (d) => d[\"utc-date\"].getUTCMonth(),\n inset: 0.5\n }\n )\n )\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"sampleCSV = FileAttachment(\"test-table - results@3.csv\").csv({ typed: true }) // gives name to attached csv file","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"sampleWorkbook = FileAttachment(\"testTable.xlsx\").xlsx({ typed: true }) // gives name to attached workbook","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"sampleSheet = sampleWorkbook.sheet(0, { headers: true }) // creates dataset from first sheet of sampleWorkbook","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":551,"value":"sampleSheetMapped = sampleSheet.map(({ Age }) => ({ Age }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":559,"value":"sampleSheet[0][\"Dogs or Cats?\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"//import { table } from \"@gampleman/table\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"// import { table } from \"@tmcw/tables@513\" // gives us the option to use and format tables","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":502,"value":"import { table } from \"@tmcw/tables\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"moment = require(\"moment\") // we're using moment.js to format times and dates ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"import { textcolor } from \"@observablehq/text-color-annotations-in-markdown\" // lets us highlight text with a specified colour","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 24:null