2f:T4cb,{ const points = vl.markCircle() .encode( vl.x().fieldQ("proportion_of_women") .sort(vl.field("year").order("ascending")), vl.y().fieldQ("number_of_seats") .sort(vl.field("year").order("ascending")), vl.color().fieldN("party") .scale({ domain: ["CVP", "FDP", "SP", "SVP"], range: ['#D6862B', '#3872B5','#F0554D','#4B8A3E']}), // Note the use of a conditional circle size to highlight 2019: vl.size().if("datum.year === 2019", vl.value(100)).value(30), vl.fillOpacity().value(2), vl.tooltip(["year", "party", "proportion_of_women"]) ) .width(150) .height(150) const lines = points.markLine({ interpolate: "monotone" }) .encode( vl.size().value(1) ) // We can layer points on top of lines using vl.layer(): return vl.layer(points, lines) .facet(vl.field("party")) .data(parties) .transform( vl.groupby(["year", "party"]).pivot("gender").value("elected"), vl.calculate("datum.Frau + datum.Mann").as("number_of_seats"), vl.calculate("(datum.Frau / datum.number_of_seats) * 100").as("proportion_of_women") ) .render({renderer: "SVG"}); }30:T404,md`# Sources - [Vega-Lite official documentation](https://vega.github.io/vega-lite/) ### Notebooks - Jeffrey Heer’s [introduction to vega-lite](https://observablehq.com/@uwdata/introduction-to-vega-lite). - [Observable for Vega-lite](https://observablehq.com/collection/@observablehq/observable-for-vega-lite), a collection of notebooks by Visnu Pitiyanuvath. - [Visualization Curriculum](https://observablehq.com/collection/@uwdata/visualization-curriculum), a collection of notebooks by Jeffrey Heer. ### Related bibliography - _Semiology of Graphics_, Jacques Bertin (1967). - _The Grammar of Graphics_, Leland Wilkinson (1999). - [_A Layered Grammar of Graphics_](https://byrneslab.net/classes/biol607/readings/wickham_layered-grammar.pdf), Hadley Wickham (2010). ### Inspiration Inspiration for the visualization from Hahn+Zimmermann's project [_20 Wochen / 20 Grafiken_](https://hahn-zimmermann.ch/projekte/nationalratswahlen_2019). [Swiss party colors](https://github.com/srfdata/swiss-party-colors) by Benja Zehr `31:[{"id":"a3496fedb8fad56897d31f09a4865f6a66b60d3c19ecad3a358c097d425757314eda7eb70ded929dbff00fbe1a662ddd6e4cdce5b00597a190b32d5b68fff250","href":"https://static.observableusercontent.com/files/a3496fedb8fad56897d31f09a4865f6a66b60d3c19ecad3a358c097d425757314eda7eb70ded929dbff00fbe1a662ddd6e4cdce5b00597a190b32d5b68fff250","name":"CH.csv","type":"text/csv","lastModified":1737476839833.333,"size":396},{"id":"577b03e083630b2e72548519965a2798ce51f8f43f67cf5d4025663a396c29843f026d8b1c8c4a0b5413865585436016c088835422d345bf85e1ab048646550c","href":"https://static.observableusercontent.com/files/577b03e083630b2e72548519965a2798ce51f8f43f67cf5d4025663a396c29843f026d8b1c8c4a0b5413865585436016c088835422d345bf85e1ab048646550c","name":"filter.png","type":"image/png","lastModified":1737476839833.333,"size":80490},{"id":"b17485fa348002f4f73c01174df02c186491e7ab776b0f2b38ac9351efe0b2f87d2b7579567ee6176e63386a6ba49be67d163bf6ff49b91485cdb2c5d6946846","href":"https://static.observableusercontent.com/files/b17485fa348002f4f73c01174df02c186491e7ab776b0f2b38ac9351efe0b2f87d2b7579567ee6176e63386a6ba49be67d163bf6ff49b91485cdb2c5d6946846","name":"aggregate.png","type":"image/png","lastModified":1737476839833.333,"size":85262},{"id":"053960420a9f3aab0296a58c69685221561b9273d2b70d9108425c494241ae3e02ed610b7279fd036b9e16a61dd1bffded2c7db478e4638fb20627bdfa196aee","href":"https://static.observableusercontent.com/files/053960420a9f3aab0296a58c69685221561b9273d2b70d9108425c494241ae3e02ed610b7279fd036b9e16a61dd1bffded2c7db478e4638fb20627bdfa196aee","name":"pivot.png","type":"image/png","lastModified":1737476839833.333,"size":90597},{"id":"bc75be5fb9be5da62a303263bd8ae35d4c6e275c1e4d124c8ca8e7990db8d662ff7ef6deb6177fe6766acd91d9f82d0985851b419c0dbb094991baef2b69ca79","href":"https://static.observableusercontent.com/files/bc75be5fb9be5da62a303263bd8ae35d4c6e275c1e4d124c8ca8e7990db8d662ff7ef6deb6177fe6766acd91d9f82d0985851b419c0dbb094991baef2b69ca79","name":"national_council_elections@1.csv","type":"text/csv","lastModified":1737476839833.333,"size":118597}] 2d:{"title":"Workshop: The Grammar of vega-lite","cells":[{"id":0,"value":"md`# Workshop: The Grammar of vega-lite`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1076,"value":"html`

This notebook is the basis for the Data Visualization Zürich meetup workshop (08.12.2020).

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1095,"value":"md`«Vega-lite is a declarative language for interactive data visualization. Vega-Lite offers a powerful and concise visualization grammar for quickly building a wide range of statistical graphics.» [Introduction to Vega-lite](https://observablehq.com/@uwdata/introduction-to-vega-lite)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1071,"value":"md`## Using Vega-Lite in Observable`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1155,"value":"md`We will use the Vega-Lite JavaScript API, which provides a convenient way to write Vega-Lite specifications in a programmatic way. To use vega-lite, we need to import the library from [this notebook](https://observablehq.com/@vega/vega-lite-api#vl). It exposes a global object \\`vl\\` containing all vega-lite functions. This is what the following cell does:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1146,"value":"import { vl } from \"@vega/vega-lite-api\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"md`## Data, graphical marks, and encoding channels\nLike \\`d3\\`, \\`ggplot\\`, or Tableau, vega-lite implements a grammar of graphics, inspired by works like Jacques Bertin's _Semiology of Graphics_ (1967) or Leland Wilkinson's _Grammar of Graphics_ (1999).\n\nCommon chart names are shortcuts to sets of data dimensions and visual encodings. With vega-lite, we don't use terms like _scatterplot_ or _bar chart_, but we describe the elements that compose a data visualization. The 3 mandatory elements are a **dataset**, a **graphical mark**, and a set of visual **encoding channels**.` \n","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"md`### A dataset\nWe will explore a dataset about the Swiss National Council elected members.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1177,"value":"CH = d3.csvParse(await FileAttachment(\"CH.csv\").text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":222,"value":"printTable(CH.slice(0, 5), undefined, 400)","pinned":false,"hidden":false,"mode":"ojs"},{"id":228,"value":"md`It has 3 dimensions of 3 different types:\n\n| Dimension | Type | Domain |\n| ------------- |-------------| \n| \\`year\\` | \\`temporal\\` / \\`ordinal\\` | \\`[\"1971\", \"1975\", ..., \"2019\"]\\` |\n| \\`gender\\` | \\`nominal\\` | \\`[\"Mann\", \"Frau\"]\\` |\n| \\`elected\\` | \\`quantitative\\` | \\`[0, 200]\\` |\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":369,"value":"md`\\`ordinal\\` = a \\`nominal\\` dimension with a set order, like age groups.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"md`### A graphical mark (circle, area, bar, etc.)\nThe geometrical shape of a data point.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"// Always start a vega-lite chart with \"vl\"\nvl\n // We can then chain vega-lite functions with a dot \".\", \n // starting with the mark:\n .markCircle() // try .markBar() or .markPoint()\n // use the dataset that we defined above:\n .data(CH)\n // invoking .render() draws the plot:\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":263,"value":"md`Since we don't have any encoding channel yet, all data points are stacked up upon each other!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"md`### Encoding channels (x, y, color, latitude, etc.)\nA set of mappings between data dimensions and encoding channels, ie. visual variables of the visualization. As we have 3 dimensions, we can use 3 encoding channels.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":268,"value":"vl.markCircle()\n .data(CH)\n .encode(\n \n // 1. Encode `elected` on the y axis\n vl.y().field(\"elected\").type(\"quantitative\"),\n \n // 2. Encode `year` on the x axis\n vl.x().field(\"year\").type(\"ordinal\"), // type \"ordinal\" can be used here as years are ordered strings.\n \n // 3. Use color to encode the dimension `gender`:\n vl.color().fieldN(\"gender\"), // shortcut for field & type definition: fieldN(\"gender\")\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":295,"value":"md`1. Let's first encode the quantitative dimension \\`elected\\` on the \\`y\\` axis. This generates a visualization already: the distribution of values for the elected parliament members. Data spans from about 10 to about 190. The scale is \\`[0, 200]\\` (the minimum and maximum values of the axis).\nThere seems to be two clusters of data points, one at the bottom, one at the top.\n\n2. Let's add \\`time\\` as the \\`x\\` axis. We now have a time serie, with two points per year.\n\n3. Last, we can use the encoding channel \\`color\\` to differentiate between male and female elected members of the parliament.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":303,"value":"md`In 1967, Jacques Bertin defined 6 visual variables that can be used in addition to the 2 dimensions of the planes to encode data: size, value, texture, color, orentation, and shape. \\`vega-lite\\` adds several others like opacity, stroke-width, text, latitude & longitude, or tooltip. The full list of available encoding channels can be found in [vega-lite documentation](https://vega.github.io/vega-lite/docs/encoding.html).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":452,"value":"md`### Summary \nBecause vega-lite has many useful defaults, we can generate most basic chart types by only defining a dataset, a geometry and a set of visual encoding channels. With few changes, we can generate other chart types. Let's modify our previous chart to create:\n1. A stacked area chart, by using the mark \\`.markArea()\\`.\n2. Two separate bar charts with basic interactivity, using the encoding channels \\`facet\\` and \\`tooltip\\`.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":457,"value":"vl.markArea() // Try using .markArea(), .markLine() or .markBar()\n .data(CH)\n .encode(\n vl.x().fieldO(\"year\"),\n vl.y().fieldQ(\"elected\"),\n vl.color().fieldN(\"gender\"),\n // Try using additional encoding channel:\n // vl.tooltip([\"year\", \"elected\", \"gender\"]),\n // vl.facet().fieldN(\"gender\"),\n //vl.opacity().value(.6)\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1286,"value":"md`## Styling and Exporting\n\n#### View specification\ntitle, width, height\n#### Mark Properties\nline interpolation\n#### Encoding properties\ntitle, axis, scale\n\nScales are functions that transform a domain of data values, like _Frau_ and _Mann_, to a range of visual values like colors. Let's use a color scale to change the colors assigned to male and female members\n#### Rendering engine\nLet's make our chart exportable as SVG, so that it can be further used in a design software.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1305,"value":"vl.markLine({ \n interpolate: \"monotone\" // \"step\" | \"linear\" | \"monotone\" | ...\n })\n .title(\"No gender parity in the Swiss National Council\")\n .width(400)\n .height(200)\n .data(CH)\n .encode(\n vl.x().fieldO(\"year\")\n .title('Year of election'),\n \n vl.y().fieldQ(\"elected\")\n .title('Number of MP in the National Council')\n .axis({ tickCount: 2 }),\n \n vl.color().fieldN(\"gender\")\n .scale({ domain: [\"Frau\", \"Mann\"], range: [\"orange\", \"gray\"] })\n .title(null)\n .legend({ orient: \"top\" }),\n \n vl.strokeWidth().value(3),\n // vl.strokeDash().fieldN(\"gender\")\n )\n .render(\n {renderer: \"SVG\" }\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":551,"value":"md`## Data transformation\nWith Vega-Lite, we can reshape a dataset before visualizing it. It allows to encode dimensions of the data that are not present in the raw dataset.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1698,"value":"md`### Filter`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1704,"value":"html`

\n ${await FileAttachment(\"filter.png\").image()}\n

Data transformation: filter

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1695,"value":"vl.markArea()\n .data(CH)\n\n // Let's focus on the number for women in the Council:\n .transform(\n vl.filter(\"datum.gender === 'Frau' \") \n )\n\n .encode(\n vl.x().fieldO(\"year\"),\n vl.y().fieldQ(\"elected\"),\n vl.color().fieldN(\"gender\")\n .scale({ domain: [\"Frau\", \"Mann\"], range: [\"orange\", \"gray\"] })\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":592,"value":"md`### Aggregate`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1782,"value":"html`

\n ${await FileAttachment(\"aggregate.png\").image()}\n

Data transformation: Aggregate

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":593,"value":"vl.markBar()\n .data(CH)\n .transform(\n vl.groupby(\"gender\").aggregate(\n vl.average(\"elected\").as(\"gender_aggregated\")) // Try median or sum\n )\n .encode(\n vl.x().fieldN(\"gender\"),\n vl.y().fieldQ(\"gender_aggregated\"),\n vl.tooltip([\"gender_aggregated\"]),\n vl.color().fieldN(\"gender\")\n .scale({ domain: [\"Frau\", \"Mann\"], range: [\"orange\", \"gray\"] })\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":823,"value":"md`### Pivot`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1795,"value":"html`

\n ${await FileAttachment(\"pivot.png\").image()}\n

Data transformation: Pivot

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":827,"value":"vl.markPoint({ size: 70, color: \"black\" })\n .data(CH)\n .transform(\n vl.groupby(\"year\")\n .pivot(\"gender\")\n .value(\"elected\")\n )\n .encode(\n // Two new field names added by the transformation\n vl.x().fieldQ(\"Frau\")\n .axis({ titleColor: \"orange\", titleFontSize: 16 }), \n vl.y().fieldQ(\"Mann\")\n .axis({ titleColor: \"gray\", titleFontSize: 16 }),\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":643,"value":"md`## Faceting & Layering`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1835,"value":"md`Let's use a dataset with an addition dimension: political parties.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":755,"value":"printTable(parties.slice(0, 5))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2142,"value":"md`### Small Multiples`","pinned":false,"hidden":false,"mode":"ojs"},{"id":697,"value":"vl.markArea()\n .encode(\n vl.x().fieldN(\"year\"),\n vl.y().fieldQ(\"elected\"),\n vl.color().fieldN(\"gender\")\n .scale({ domain: [\"Frau\", \"Mann\"], range: [\"orange\", \"gray\"] }),\n vl.tooltip([\"year\", \"gender\", \"elected\"])\n ) \n .width(500)\n .height(100)\n\n // We can create small multiples using \"facets\":\n .facet({ row: vl.field(\"party\") })\n\n .data(parties)\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2148,"value":"md`### Connected Scatterplots`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1616,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":1589,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"md`## Appendix: Data Preparation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"md`The source dataset contains the numbers of candidates and elected officials at the Swiss National Council since 1971, by year, gender, canton, and the four major parties (SP, CVP, FDP, SVP). Source: [BFS](https://www.pxweb.bfs.admin.ch/pxweb/fr/px-x-1702020000_103/px-x-1702020000_103/px-x-1702020000_103.px)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"all = d3.csvParse(await FileAttachment(\"national_council_elections@1.csv\").text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"md`These variables are subsets of the source dataset:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":648,"value":"parties = all.filter(d => d.canton === \"Schweiz\").filter(d => d.party !== \"Parteien - Total\").map(d => ({year: d.year, party: d.party, gender: d.gender, elected: d.elected}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":767,"value":"partyColors = ['#F0554D', '#3872B5', '#4B8A3E', '#D6862B'] ","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"md`## Appendix: Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"import { printTable } from '@uwdata/data-utilities'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}