2e:null 2f:["$","title",null,{"children":"Let's make a visualization for my paper | John Alexis Guerra Gómez | Observable"}] 34:T698,md`|Related resources | | -- | -- | | Setting up Vega-Lite for Observable | | | Vega-Lite API Introduction for Observable | | | From Marks and Channels to Vega-Lite | | | Array operations | | | Nesting / Pivoting | | | Filtering Attributes and Values in Javascript | |`35:[{"id":"5cb7e7a84703018d83dbaf63fd0315ec16ab4f84c9a64eb6ec7bad628e6b98311feea30f3c5a15d07b557b87411e5225bf59f5ff95868b4295e3111b0ca9ebe2","href":"https://static.observableusercontent.com/files/5cb7e7a84703018d83dbaf63fd0315ec16ab4f84c9a64eb6ec7bad628e6b98311feea30f3c5a15d07b557b87411e5225bf59f5ff95868b4295e3111b0ca9ebe2","name":"fifaData.csv.zip","type":"application/zip","lastModified":1635174500835.165,"size":2066129}] 32:{"id":"69dd1667b1aa4ee9","slug":"lets-make-a-visualization-for-my-paper","title":"Let's make a visualization for my paper","thumbnail":"5441a3fbb37bf5b397abf942d50a355a9f2c5be791b3636a126031cae4752ffb","access_level":"public","create_time":"$D2021-10-24T23:48:08.208Z","update_time":"$D2021-10-25T15:52:59.090Z","view_time":null,"first_public_time":"$D2021-10-24T23:48:21.635Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"cd3c1e49fc84d010","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":"starter_2024"},"version":184,"publish_version":184,"role":null,"authored":false,"authors":[{"type":"individual","id":"be0076fec73aa550","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":null}],"members":[{"type":"individual","id":"be0076fec73aa550","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":{"id":"0790790d65d985d4","slug":"observable-ieeevis-tutorial","title":"Observable IEEEVIS Tutorial","owner":{"id":"cd3c1e49fc84d010","login":"john-guerra","name":"John Alexis Guerra Gómez"}},"type":"notebook","body":{"title":"Let's make a visualization for my paper","cells":[{"id":5,"value":"md`# Let's make a visualization for my paper\n_For who:_ You are a researcher who wants to learn how to use observable to wrangle your data into the right format and quickly create meaningful visualizations for it.\n\n10:00 - 10:50\n\n_Objectives:_\n* Quickly create simple visualizations from your data\n* Export your visualizations in SVG and PNG formats\n* Collaborate with your peers with comments, suggestions, forks and more\n* Keep the history of all your changes in pinnable versions\n* Wrangle your data into the right formats for a more advanced visualizations\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"md`\n## Vega-Lite Javascript API\n\nhttps://vega.github.io/vega-lite-api/. Now that you have your data on Observable, how to take the Marks and Channels visualization theory into practice with Vega-Lite API.\n\n\n* Importing\n* Passing data\n* Marks and Channels\n* Exporting to SVG, PNG, Vega-Lite Format\n* Differences between Vega, Vega-Lite and Vega-Lite API for JS\n\nhttps://observablehq.com/@john-guerra/evolucion-coronavirus-en-colombia\nhttps://observablehq.com/collection/@vega/vega-lite-api\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"defaultData = (await FileAttachment(\"fifaData.csv.zip\").zip())\n .file(\"fifaData.csv\")\n .csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"viewof data = dataInput({ value: defaultData })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"Inputs.table(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"navio(data, { attribWidth: 8, height: 400 })\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"attribs = Object.keys(data[0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"quantAttribs = attribs.filter(a => typeof data[0][a] === \"number\" && a.trim() !== \"\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"categoricalAttribs = attribs.filter(\n a => typeof data[0][a] !== \"number\" && a.trim() !== \"\"\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"viewof xAttr = Inputs.select(quantAttribs, {\n label: \"X Attr\",\n value: \"Overall\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"scatterPlot = vl\n .markPoint()\n .data(data)\n .encode(vl.x().fieldQ(xAttr), vl.y().fieldQ(\"Potential\"))\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"// md`\n// ### Here is my chart\n// ${viewof xAttr}\n// ${scatterPlot}\n// `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"viewof histX = Inputs.select(categoricalAttribs, {\n label: \"histogram Y\",\n value: \"Position\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"histogram = vl\n .markBar()\n .data(data)\n .encode(vl.y().fieldN(histX), vl.x().average(\"Overall\"))\n .height(600)\n .render({ renderer: \"SVG\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"md`### Challenge\n\nTry adding an \\`Inputs.select\\`for the y axis\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"import { navio } from \"@john-guerra/navio\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"import { dataInput } from \"@john-guerra/data-input\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"import { vl } from \"@vega/vega-lite-api-v5\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"md`\n\n### Data processing with Arquero.js\nhttps://uwdata.github.io/arquero/. How to use transform your data to make it usable with your intended visualizations.\n\n* Creating data frames\n* Filtering\n* Arquero verbs\n* [Observable's Data Wranger](https://observablehq.com/@observablehq/data-wrangler)\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"viewof df = aq.from(data).view()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"viewof filtered = df\n .select([\"Name\", \"Nationality\", \"Overall\"])\n .filter(d => d.Overall > 90)\n .view()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"import { aq } from \"@uwdata/arquero\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"md`## Observable collaboration\n\n* Private, Published\n* Shared (Runs locally!)\n* Comments, suggestions\n* Collaborative editing\n* Versioning\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"md`_Break_\n10:50 - 11:00\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"