31:T4e9,md`Now that we've fetched the file, and parsed it, let's try some visualisations. Here's a simple scatter plot of Walking_% vs Cycling_%. There are a couple of interesting things to note about this visualisation... First, it is *interactive*. You can change the data displayed by selecting a different year from the dropdown box in the cell below. The dropdown is created with a [viewof control](https://observablehq.com/@observablehq/introduction-to-views), which provides a wide range of possibilities, from textboxes to sliders to populate variables to use in visualisations. In this case, the viewof control populates the variable *selectYear* with the set of possible years to filter on. We then use the variable *selectYear* to build a [filter transform](https://observablehq.com/@uwdata/data-transformation) that filters the data set to only show rows (where *datum* refers to a row) that match the selected year. Second, it uses a custom colour scheme, by setting the scale on the *color* encoding channel. Since *Frequency* is a categorical field, we're using one of the predefined categorical colour schemes provided by Vega Lite. Take a look at all the [possible colour schemes](https://vega.github.io/vega/docs/schemes/) in the documentation.`32:T497,md`Here's another approach to [multi-view composition](https://observablehq.com/@uwdata/multi-view-composition). In the previous example, we created multiple views based on facets of data within a single field, *Frequency*. Now let's create two charts with the same code, but based on two *different* fields, *Walking_%* and *Cycling_%*, to show the mean of these fields across the different local authorities, organised by year. Instead of putting the actual field names into the code, we use the term *vl.repeat("column")*; and then define the columns for which to *repeat* the code after encoding the visual channels. By default, these two graphs share a common scale - but since the ranges are so different for the fields *Walking_%* and *Cycling_%*, it makes sense to require the use of separate scales for colour, by using *resolve* to set the graphs to independent colour scales. Values are encoded by *colour*, using a continuous colour scheme, 'reds' from the predefined Vega Lite [colour schemes](https://vega.github.io/vega/docs/schemes/), since the means of *Walking_%* and *Cycling_%* are quantitative fields, and therefore continuous in their representation.`33:T529,md`Finally, here's a complex application of *calculate* in *transform*, to compute new fields for the data set. Most of you will not need to build such complex computations, but this visualisation provides an example of the possibilities that Vega Lite offers. For more, see the [reading](https://observablehq.com/@uwdata/data-transformation). Instead of using the mean to evaluate aggregate measures of *Walking_%* and *Cycling_%*, we compute a new measure which weights different frequencies of walking and cycling differently. We create a new field, *weight*, and give it a value of 4 for the most frequent, "5x per week", 3 for the next most frequent, "3x per week", 2 for "1x per week", and 1 for "1x per month". This is done using a nest set of of *if* statements. *Calculate* can be used to form some fairly complex computations, using the Vega Lite [expressions](https://vega.github.io/vega/docs/expressions/). We then compute two more new fields, *weighted_walking* and *weighted_cycling*, which multiply *Walking_%* and *Cycling_%* by the *weight* to create new aggregate scores that are weighted more for more frequent walking and cycling, and less for less frequent walking and cycling. Finally, we sort the data in descending order, so that the ordering and variations by local authority are made clear.`34:[] 2f:{"title":"Walking and Cycling in London and England","cells":[{"id":0,"value":"md`# Walking and Cycling in London and England\n\n Using data from [Walking and Cycling by Borough](https://data.london.gov.uk/dataset/walking-and-cycling-borough). Note that I'm fetching the CSV file directly from London Datastore, without downloading and attaching the file. For more on how to this, see the notebook on [working with files](https://observablehq.com/@ashwinjm/working-with-files).`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"source_url = \"https://data.london.gov.uk/download/walking-and-cycling-borough/c7ae3969-9d32-40ab-8407-589464030231/Walking-Cycling.csv\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"source_file = await fetch(new URL(source_url))","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"source_text = source_file.text()","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"d3 = require(\"d3-dsv@1\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"import {printTable} from '@uwdata/data-utilities'","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"import {vl} from '@vega/vega-lite-api'","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"wc_data = d3.csvParse(source_text, d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":94,"value":"md`This data set shows the percentage of people who walk or cycle above a certain frequency (organised by year) within local authorities across London, with some additional data across England.\n\nNote that *Frequency* is a nominal field, and it is also *categorical*, in that it has a limited number of categories which repeat across all rows in the data set. *Walking_%* and *Cycling_%* are quantitative fields, which means that they vary continuously across a range. *Year* should be a temporal field, but since the years are represented in an overlapping format (e.g., \"2010/11\"), we'll treat it as an ordinal field.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"printTable(wc_data.slice(0,10))","pinned":true,"hidden":false,"mode":"ojs"},{"id":89,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"vl.markPoint()\n .data(wc_data)\n .transform(vl.filter(\"datum.Year == '\" + selectYear + \"'\"))\n .encode(vl.x().fieldQ(\"Walking_%\"),\n vl.y().fieldQ(\"Cycling_%\"),\n vl.color().fieldN(\"Frequency\").scale({scheme: \"dark2\"}),\n vl.tooltip().fieldN(\"Local Authority\"))\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"viewof selectYear = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":107,"value":"md`Now let's make a stacked area chart. Note that *stack* is set to null, which causes all of the areas to layer on top of each other, instead of stacking up. Try removing the *stack(null)* statement - see what happens? There are more options for stack outlined [in the reading](https://observablehq.com/@uwdata/data-types-graphical-marks-and-visual-encoding-channels).\n\nNote that we're computing the *mean* of *Walking_%* across all local authorities.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"vl.markArea()\n .data(wc_data)\n .encode(vl.x().fieldO(\"Year\"),\n vl.y().mean(\"Walking_%\").stack(null),\n vl.color().fieldN(\"Frequency\"))\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":112,"value":"md`Until now we've been working with area charts that fill the space between a chosen axis and the data point. We can also have areas that fill space between *two* data points, in this case defined by the encoding channels *y* and *y2*, to show the minimum and maximum of *Walking_%* across all local authorities and frequencies for a given year.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"vl.markArea({opacity: 0.4})\n .data(wc_data)\n .encode(vl.x().fieldO(\"Year\"),\n vl.y().min(\"Walking_%\").title(\"Walking %\"),\n vl.y2().max(\"Walking_%\"))\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":114,"value":"md`And now let's use the same data, but render a line chart. Note that we're working with the *mean* of data again, but this time the mean of *Walking_%* across all local authorities, and across all frequencies. It's an attempt - admittedly imperfect - to capture an aggregate representation of *Walking_%* across all of the data for each year. We'll return to this issue again later in this notebook.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"vl.markLine()\n .data(wc_data)\n .encode(vl.x().fieldO(\"Year\"),\n vl.y().mean(\"Walking_%\").title(\"Walking %\"))\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":125,"value":"md`Now let's *layer* the two graphs we just made. It's pretty easy to do this - copy the code for each chart, and assign it to a constant (*minMax* and *avg* in the code below), and then use *vl.layer* to put them on top of each other in a single visualisation.\n\nUntil now, we've worked with making a single visualisation per cell. When you layer multiple visualisations, you need to write the cell as a *code block*, starting with '{', and ending with '}' - and you have to *return* the value that you want for the cell. In this case, we return the rendered layered graphs.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"{\n const minMax = vl.markArea({opacity: 0.4, interpolate: \"monotone\"})\n .data(wc_data)\n .encode(vl.x().fieldO(\"Year\"),\n vl.y().min(\"Walking_%\").title(\"\"),\n vl.y2().max(\"Walking_%\").title(\"\"));\n \n const avg = vl.markLine({interpolate: \"monotone\"})\n .data(wc_data)\n .encode(vl.x().fieldO(\"Year\"),\n vl.y().mean(\"Walking_%\").title(\"Walking %\"));\n \n return vl.layer(minMax, avg).render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":130,"value":"md`Layering can be arbitrarily complex. Here, we've added a third layer which marks points for each local authority on the charts we just made. It's a bit messy as a visualisation, but illustrates the possibilities in this approach. We've set *interpolate* to *monotone* to smooth out the lines.\n\nThe graphs here also show how you can *facet* visualisations to show multiple graphs with the same code, corresponding to different values in a field. In this case, the graphs have been faceted by the *Frequency* field, which works well, since *Frequency* is a categorical field with only 4 possible values.\n\nHere's more information on [faceting and layering](https://observablehq.com/@uwdata/multi-view-composition).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"{\n const minMaxWalk = vl.markArea({opacity: 0.4, interpolate: \"monotone\"})\n .encode(vl.x().fieldO(\"Year\"),\n vl.y().min(\"Walking_%\"),\n vl.y2().max(\"Walking_%\"));\n \n const avgWalk = vl.markLine({interpolate: \"monotone\"})\n .encode(vl.x().fieldO(\"Year\"),\n vl.y().mean(\"Walking_%\").title(\"Walking %\"));\n \n const ptWalk = vl.markCircle({opacity: 0.5})\n .encode(vl.x().fieldO(\"Year\"),\n vl.y().fieldQ(\"Walking_%\"),\n vl.tooltip().fieldN(\"Local Authority\"),\n vl.color().value(\"green\"));\n \n return vl.layer(ptWalk, minMaxWalk, avgWalk)\n .facet({column: vl.field(\"Frequency\")})\n .data(wc_data)\n .render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":135,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"vl.markBar()\n .data(wc_data)\n .encode(vl.y().fieldN(\"Local Authority\"),\n vl.x().fieldO(\"Year\"),\n vl.color().mean(vl.repeat(\"column\")).scale({scheme: \"reds\"}),\n vl.tooltip().mean(vl.repeat(\"column\")))\n .repeat({column: [\"Walking_%\", \"Cycling_%\"]})\n .resolve({scale: {color: 'independent'}})\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":145,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"vl.markBar()\n .data(wc_data)\n .transform(vl.filter(\"datum.Year == '2017/18'\"),\n vl.calculate(\"if(datum.Frequency == '1x per month', 1, if(datum.Frequency == '1x per week', 2, if(datum.Frequency == '3x per week', 3, if(datum.Frequency == '5x per week', 4, 0))))\").as(\"weight\"),\n vl.calculate(\"datum['Walking_%'] * datum.weight\").as(\"weighted_walking\"),\n vl.calculate(\"datum['Cycling_%'] * datum.weight\").as(\"weighted_cycling\"))\n .encode(vl.x().sum(\"weighted_walking\"),\n vl.y().fieldN(\"Local Authority\").sort(vl.field(\"weighted_walking\").order(\"descending\")))\n .render()","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}