2f:null 30:["$","title",null,{"children":"I want to make a rich, interactive, multi faceted visualization, and share it. | John Alexis Guerra Gómez | Observable"}] 35:Ta0b, md` |Related resources | | -- | -- | | Vega-Lite API Custom Charts | | | Marks and Channels with Vega-Lite | | | Donut chart with Vega-Lite API | | | Temporal Visualizations with Vega-Lite API | | | Node Link Network Visualizations with Vega-Lite and D3 | | | Trees with Vega-Lite API | | | Maps with Vega-Lite API | | | Animations with Vega-Lite API | | | Faceting into multiple views with Vega-Lite API | | _Break_ 11:50 - 12:00 `36:[{"id":"49cdf644dd1079c0fc14c64ea07feb92c2b728b186c9fe8483c2f3f632daebb6a91f3fd5d188f4972466f3d5f52d46ff4a5f7c90381147c24676cc4bc0e56ce2","href":"https://static.observableusercontent.com/files/49cdf644dd1079c0fc14c64ea07feb92c2b728b186c9fe8483c2f3f632daebb6a91f3fd5d188f4972466f3d5f52d46ff4a5f7c90381147c24676cc4bc0e56ce2","name":"fifaData.csv","type":"text/csv","lastModified":1635178134262.35,"size":9140113}] 33:{"id":"609c25656d0e4ba9","slug":"i-want-to-make-a-rich-interactive-multi-faceted-visualizati","title":"I want to make a rich, interactive, multi faceted visualization, and share it.","thumbnail":"7c08167fd2826085b448a9f50028641a5b5e15e006ebc243461aa63282adc825","access_level":"public","create_time":"$D2021-10-25T00:01:24.165Z","update_time":"$D2024-04-04T20:41:38.605Z","view_time":null,"first_public_time":"$D2021-10-25T00:01:32.897Z","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":179,"publish_version":179,"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":4,"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":"I want to make a rich, interactive, multi faceted visualization, and share it.","cells":[{"id":5,"value":"md`# I want to make a rich, interactive, multi faceted visualization, and share it.\n\n\n_For who:_ Visualization researcher who wants to explore visually their data, and share it to the world.\n\n_11:00 - 11:50_\n\n\n_Objectives:_\n* Create multi view visualizations\n* Coordinate those multiple views with brush and linking\n* Summarize, explore and navigate your data\n* Collaborative explore your data\n* Comment, suggest, fork\n* Keep the provenance of your explorations with notebook versions\n\nAdvanced Vega-Lite, how to use the interactive charts in vega-lite and use them to interact with other cells in your notebook.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"md`## Vega-Lite API Faceting`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"data = FileAttachment(\"fifaData.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"Inputs.table(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"{\n const base = vl\n .markBar()\n .encode(vl.y().fieldN(\"Position\"), vl.x().count())\n .height(200)\n .width(200);\n\n return vl\n .concat(base, base.encode(vl.y().fieldN(\"Nationality\")))\n .data(data)\n .render();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"{\n const histGenerator = (attr) =>\n vl\n .markBar()\n .encode(vl.y().fieldN(attr), vl.x().count())\n .height(200)\n .width(200);\n\n \n return vl\n .concat(\n histGenerator(\"Position\"),\n histGenerator(\"Nationality\"),\n histGenerator(\"Preferred Foot\")\n )\n .columns(2)\n .data(data)\n .render();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"{\n const histGenerator = (attr) =>\n vl\n .markBar({ tooltip: true })\n .encode(vl.y().fieldN(attr), vl.x().count())\n .height(200)\n .width(200);\n\n const columns = [\"Position\", \"Nationality\", \"Preferred Foot\"];\n return vl\n .concat(...columns.map((a) => histGenerator(a)))\n .columns(2)\n .data(data)\n .render();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"{\n const scatGenerator = (x, y) =>\n vl\n .markPoint({ tooltip: true })\n .encode(\n vl.y().fieldQ(y),\n vl.x().fieldQ(x),\n vl.tooltip([\"Name\", \"Overall\", \"Potential\"])\n )\n .height(100)\n .width(100);\n\n return vl\n .concat(\n scatGenerator(\"Overall\", \"Overall\"),\n scatGenerator(\"Potential\", \"Overall\"),\n scatGenerator(\"Finishing\", \"Overall\"),\n\n scatGenerator(\"Overall\", \"Potential\"),\n scatGenerator(\"Potential\", \"Potential\"),\n scatGenerator(\"Finishing\", \"Potential\"),\n\n scatGenerator(\"Overall\", \"Finishing\"),\n scatGenerator(\"Potential\", \"Finishing\"),\n scatGenerator(\"Finishing\", \"Finishing\")\n )\n .columns(3)\n .data(data)\n .render();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"import { vl } from \"@vega/vega-lite-api-v5\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"md`## Vega-Lite API Layering`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"{\n const base = vl\n .markCircle({ tooltip: true, opacity: 0.3, size: 10 })\n .encode(\n vl.x().fieldQ(\"Overall\").scale({ zero: false }),\n vl.y().fieldQ(\"Finishing\").scale({ zero: false }),\n vl.color().fieldN(\"Preferred Foot\")\n );\n\n return base.data(data).render();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"{\n const base = vl\n .markCircle({ tooltip: true, opacity: 0.1, size: 10 })\n .encode(\n vl.x().fieldQ(\"Overall\").scale({ zero: false }),\n vl.y().fieldQ(\"Finishing\").scale({ zero: false }),\n vl.color().fieldN(\"Preferred Foot\"),\n vl\n .facet()\n .fieldN(\"Position\")\n .columns(Math.floor((width * 0.7) / 100))\n )\n .width(100)\n .height(100);\n\n return base.data(data).render();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"{\n const base = vl\n .markBar()\n .encode(vl.y().fieldN(\"Position\"), vl.x().count())\n .height(300);\n\n return vl\n .layer(\n base.encode(\n vl\n .color()\n .if(\"datum.Position == 'LB'\", vl.value(\"firebrick\"))\n .value(\"steelblue\")\n ),\n base\n .markText({ align: \"left\", dx: 3, fontSize: 8 })\n .encode(vl.text().count())\n // base.markRule().encode(vl.x().value(800))\n )\n .data(data)\n .render();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"md`## Vega-Lite API Interactions`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"viewof myAwesomeChart = {\n const brush = vl.selectInterval();\n\n const base = vl\n .markBar({ tooltip: true })\n .select(brush)\n .encode(\n vl.y().fieldN(\"Position\"),\n vl.x().count(),\n vl.color().if(brush, vl.value(\"steelblue\")).value(\"#777\")\n )\n .height(200)\n .width(200);\n\n const scatterBase = vl\n .markPoint({ opacity: 0.01 })\n .encode(\n vl.x().fieldQ(\"Overall\"),\n vl.y().fieldQ(\"Finishing\"),\n vl.color().value(\"#777\")\n );\n\n const scatterLayered = vl.layer(\n scatterBase,\n scatterBase\n .markPoint({ opacity: 0.3 })\n .transform(vl.filter(brush))\n .encode(vl.color().value(\"steelblue\"))\n );\n\n return vl.concat(base, scatterLayered).data(data).render();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"vegaDataViewer(myAwesomeChart)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"import {vegaDataViewer} from \"@john-guerra/vega-data-viewer\"\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"vegaCrossfilter(data.slice(0, 1100), [\"Position\", \"Overall\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"import { vegaCrossfilter } from \"@john-guerra/vega-crossfilter\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"brushable = {\n const brush = vl.selectInterval();\n\n const base = vl\n .markBar({ tooltip: true })\n .select(brush)\n .encode(\n vl.y().fieldN(\"Position\"),\n vl.x().count(),\n vl.color().if(brush, vl.value(\"steelblue\")).value(\"#777\")\n )\n .height(200)\n .width(200);\n\n const scatterBase = vl\n .markPoint({ opacity: 0.01 })\n .encode(\n vl.x().fieldQ(\"Overall\"),\n vl.y().fieldQ(\"Finishing\"),\n vl.color().value(\"#777\")\n );\n\n const scatterLayered = vl.layer(\n scatterBase,\n scatterBase\n .markPoint({ opacity: 0.3 })\n .transform(vl.filter(brush))\n .encode(vl.color().value(\"steelblue\"))\n );\n\n return vl.concat(base, scatterLayered).data(data).toSpec();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"viewof selectedElements = vegaSelected(brushable)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"selectedElements","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"import { vegaSelected } from \"@john-guerra/vega-selected\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"md`## Notebook versioning`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 34:"$33:body"