32: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 `33:[{"id":"49cdf644dd1079c0fc14c64ea07feb92c2b728b186c9fe8483c2f3f632daebb6a91f3fd5d188f4972466f3d5f52d46ff4a5f7c90381147c24676cc4bc0e56ce2","href":"https://static.observableusercontent.com/files/49cdf644dd1079c0fc14c64ea07feb92c2b728b186c9fe8483c2f3f632daebb6a91f3fd5d188f4972466f3d5f52d46ff4a5f7c90381147c24676cc4bc0e56ce2","name":"fifaData.csv","type":"text/csv","lastModified":1635178134262.35,"size":9140113}] 30:{"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"},{"id":7,"value":"md`## Vega-Lite API Faceting`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"data = FileAttachment(\"fifaData.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"Inputs.table(data)","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"id":25,"value":"import { vl } from \"@vega/vega-lite-api-v5\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"md`## Vega-Lite API Layering`","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":10,"value":"md`## Vega-Lite API Interactions`","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":152,"value":"vegaDataViewer(myAwesomeChart)","pinned":true,"hidden":false,"mode":"ojs"},{"id":150,"value":"import {vegaDataViewer} from \"@john-guerra/vega-data-viewer\"\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":156,"value":"vegaCrossfilter(data.slice(0, 1100), [\"Position\", \"Overall\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":154,"value":"import { vegaCrossfilter } from \"@john-guerra/vega-crossfilter\"","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":164,"value":"viewof selectedElements = vegaSelected(brushable)","pinned":true,"hidden":false,"mode":"ojs"},{"id":176,"value":"selectedElements","pinned":true,"hidden":false,"mode":"ojs"},{"id":162,"value":"import { vegaSelected } from \"@john-guerra/vega-selected\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"md`## Notebook versioning`","pinned":true,"hidden":false,"mode":"ojs"},{"id":0,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}