31: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 | |`32:[{"id":"5cb7e7a84703018d83dbaf63fd0315ec16ab4f84c9a64eb6ec7bad628e6b98311feea30f3c5a15d07b557b87411e5225bf59f5ff95868b4295e3111b0ca9ebe2","href":"https://static.observableusercontent.com/files/5cb7e7a84703018d83dbaf63fd0315ec16ab4f84c9a64eb6ec7bad628e6b98311feea30f3c5a15d07b557b87411e5225bf59f5ff95868b4295e3111b0ca9ebe2","name":"fifaData.csv.zip","type":"application/zip","lastModified":1635174500835.165,"size":2066129}] 2f:{"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"},{"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"},{"id":31,"value":"defaultData = (await FileAttachment(\"fifaData.csv.zip\").zip())\n .file(\"fifaData.csv\")\n .csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"viewof data = dataInput({ value: defaultData })","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"Inputs.table(data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"navio(data, { attribWidth: 8, height: 400 })\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":98,"value":"attribs = Object.keys(data[0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":115,"value":"quantAttribs = attribs.filter(a => typeof data[0][a] === \"number\" && a.trim() !== \"\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":133,"value":"categoricalAttribs = attribs.filter(\n a => typeof data[0][a] !== \"number\" && a.trim() !== \"\"\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":96,"value":"viewof xAttr = Inputs.select(quantAttribs, {\n label: \"X Attr\",\n value: \"Overall\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":180,"value":"// md`\n// ### Here is my chart\n// ${viewof xAttr}\n// ${scatterPlot}\n// `","pinned":true,"hidden":false,"mode":"ojs"},{"id":140,"value":"viewof histX = Inputs.select(categoricalAttribs, {\n label: \"histogram Y\",\n value: \"Position\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":107,"value":"md`### Challenge\n\nTry adding an \\`Inputs.select\\`for the y axis\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"import { navio } from \"@john-guerra/navio\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"import { dataInput } from \"@john-guerra/data-input\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":57,"value":"import { vl } from \"@vega/vega-lite-api-v5\"","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":160,"value":"viewof df = aq.from(data).view()","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":158,"value":"import { aq } from \"@uwdata/arquero\"","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":22,"value":"md`_Break_\n10:50 - 11:00\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}