25:["$","title",null,{"children":"Vega-Lite Chart Types | Holger Stitz | Observable"}] 49:T473,md`# Vega-Lite Chart Types _Many of these examples are drawn from Vega-Lite’s own [examples gallery](https://vega.github.io/vega-lite/examples). And for a more thorough and formal introduction, be sure to check out University of Washington Interactive Data Lab’s [Data Types, Graphical Marks, and Visual Encoding Channels](https://observablehq.com/@uwdata/data-types-graphical-marks-and-visual-encoding-channels?collection=@uwdata/visualization-curriculum)._ Previously, we looked at how to quickly make a few simple charts with Vega-Lite. We’re going to expand on that with several different types of charts and pick up a few tricks as we go. With Vega-Lite, it’s useful to think less of “chart type” and more of “what ‘mark’ am I trying to make?” where a [mark](https://vega.github.io/vega-lite/docs/mark.html) is the shape you’re drawing with. These marks turn out to be more generic and reusable than you’d think. For example, a circle can be used in a scatter chart, sized differently to create a [bubble chart](https://en.wikipedia.org/wiki/Bubble_chart), or placed at geographical coordinates in a map. `4a:[{"id":"0831a98223e35f74b29fddadaffac097db10bc983dab5a7f1db577dabcd95530fafcd04189daa8521913863bc0c45e9a75d204f9888e28ef0d5ce11a727489e5","href":"https://static.observableusercontent.com/files/0831a98223e35f74b29fddadaffac097db10bc983dab5a7f1db577dabcd95530fafcd04189daa8521913863bc0c45e9a75d204f9888e28ef0d5ce11a727489e5","name":"github.csv","type":"text/csv","lastModified":1642457833882.821,"size":21059},{"id":"23dec0da6db8a58b85078f0cba241b01e98de90f0a38112ef1d7382d79daff167084a2d838fc129186eea15adacd5a9e183cbac018688aa1c6a6c0afb1b15da4","href":"https://static.observableusercontent.com/files/23dec0da6db8a58b85078f0cba241b01e98de90f0a38112ef1d7382d79daff167084a2d838fc129186eea15adacd5a9e183cbac018688aa1c6a6c0afb1b15da4","name":"airports.csv","type":"text/csv","lastModified":1642457833882.821,"size":210365},{"id":"02568b04f00fe2c5569021d177f04078aad7afebbbc79b57d7e3205d30e57414ce913fcd0b98bae26984252242cde4a65d4b0b3d58d4130d714474a7756545e5","href":"https://static.observableusercontent.com/files/02568b04f00fe2c5569021d177f04078aad7afebbbc79b57d7e3205d30e57414ce913fcd0b98bae26984252242cde4a65d4b0b3d58d4130d714474a7756545e5","name":"market-cap.csv","type":"text/csv","lastModified":1642457833882.821,"size":60262},{"id":"15efd91760d0d4e41178e1df9623331b6bf519122ff44ff6837e776471a1d4c58f035eafc13b2c66112dbb79f0a1d4dcea50bbfd2609ac5f79ce74b3b60fb3e5","href":"https://static.observableusercontent.com/files/15efd91760d0d4e41178e1df9623331b6bf519122ff44ff6837e776471a1d4c58f035eafc13b2c66112dbb79f0a1d4dcea50bbfd2609ac5f79ce74b3b60fb3e5","name":"alphabet.csv","type":"text/csv","lastModified":1642457833882.821,"size":275},{"id":"6f8011ba66728271a83cae0f6df7fe12d223ac73e80a79f55a723f86725b9d936ac8a3c242865b0df0839e0f5a5da73d6bcc3a7921b1dc81b8d5fa0d0a680915","href":"https://static.observableusercontent.com/files/6f8011ba66728271a83cae0f6df7fe12d223ac73e80a79f55a723f86725b9d936ac8a3c242865b0df0839e0f5a5da73d6bcc3a7921b1dc81b8d5fa0d0a680915","name":"pwm-weather@1.csv","type":"text/csv","lastModified":1642457833882.821,"size":31922}] 29:{"id":"aa82ef6ee605da57","slug":null,"title":"Vega-Lite Chart Types","thumbnail":"6508df5211111796555f263b98028330f7fcb68d43f6e3dab611e551242094e1","access_level":"public","create_time":"$D2022-01-17T22:17:13.882Z","update_time":"$D2023-01-24T21:58:46.347Z","view_time":null,"first_public_time":"$D2023-01-24T21:58:17.945Z","has_unpublished_edits":null,"fork":{"id":"a9a4b43c00769b31","slug":"vega-lite-chart-types","title":"Vega-Lite Chart Types","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"b64674701dbe64fd","login":"thinkh","name":"Holger Stitz","avatar_url":"https://avatars-next.observableusercontent.com/1b74b09f1ed1ce117943306134846461dafeaeaab7ac62e48a53fb0d1e1b4f25","tier":"starter_2024","bio":"Working as Lead researcher @datavisyn on information visualization in life sciences. Lecturer. Web Developer. ","followed_by_you":false,"follows_you":false},"version":2646,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"63ff338e67435064","login":"thinkh","name":"Holger Stitz","avatar_url":"https://avatars-next.observableusercontent.com/1b74b09f1ed1ce117943306134846461dafeaeaab7ac62e48a53fb0d1e1b4f25","tier":null,"bio":"Working as Lead researcher @datavisyn on information visualization in life sciences. Lecturer. Web Developer. ","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"63ff338e67435064","login":"thinkh","name":"Holger Stitz","avatar_url":"https://avatars-next.observableusercontent.com/1b74b09f1ed1ce117943306134846461dafeaeaab7ac62e48a53fb0d1e1b4f25","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"e1a4a255974727b8","slug":"charting-with-vega-lite","title":"Module B: Charting with Vega-Lite","owner":{"id":"b64674701dbe64fd","login":"thinkh","name":"Holger Stitz"}},"type":"notebook","body":{"titling":"auto","title":"Vega-Lite Chart Types","cells":[{"id":1050,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"md`Type | Examples | Mark / Method\n---|--- | ---\n[Bar](#bars):
Vertical, horizontal, stacked, and grouped bar charts | [${thumbnail(\n simpleBar\n)}](#simpleBar) [${thumbnail(horizontalBar)}](#horizontalBar) [${thumbnail(\n stackedBar\n)}](#stackedBar) [${thumbnail(groupedBar)}](#groupedBar) | \\`markBar\\`\n[Line](#lines):
Line, area, stacked area charts | [${thumbnail(\n line\n)}](#line) [${thumbnail(area)}](#area) | \\`markLine\\`, \\`markArea\\`\n[Scatter](#scatters):
Scatter, bubble, and strip plots | [${thumbnail(\n scatter\n)}](#scatter) [${thumbnail(strip)}](#strip) | \\`markPoint\\`, \\`markTick\\`\n[Table](#tables):
Tabular layouts | [${thumbnail(\n heatmap\n)}](#heatmap) [${thumbnail(punchCard)}](#punchCard) [${thumbnail(\n tableText\n)}](#tableText) | \\`markRect\\`, \\`markText\\`\n[Maps](#maps):
Geographical projections, shapes, choropleths | [${thumbnail(\n geoScatter\n)}](#geoScatter) [${thumbnail(\n geoScatterFeatures\n)}](#geoScatterFeatures) | \\`markGeoshape\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"bars = md`---\n## Bar charts`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"md`### Simple bar chart\n“Simple” refers to the direct, 1:1 mapping between the data and what’s shown in the chart. The bar chart below is a view of the usage frequency of the letters in the English alphabet.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"alphabet = FileAttachment(\"alphabet.csv\").csv() // about file attachments https://observablehq.com/@observablehq/file-attachments","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":589,"value":"alphabet[0] // what a row of data in `alphabet` looks like","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"// about viewof https://observablehq.com/@observablehq/a-brief-introduction-to-viewof\nviewof simpleBar = vl.markBar() // Make a bar chart\n .data(alphabet) // Using the alphabet data\n .encode(\n vl.x().fieldO(\"letter\").sort(vl.fieldQ(\"frequency\").order(\"descending\")), // Letters are ordinal on the x-axis\n vl.y().fieldQ(\"frequency\").axis({ format: \".2%\" }) // Frequency on the y-axis, formatted as percent\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1214,"value":"md`#### markBar()\nChoose bars to visualize our data with [\\`markBar()\\`](https://vega.github.io/vega-lite/docs/bar.html#properties).\n\n${tryIt(`\nChange \\`markBar()\\` to \\`markPoint()\\` for a scatter chart. \nSort the letters by frequency descending. \n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":621,"value":"md`#### .axis({ format: \"%\" })\nOur frequency values are percentages expressed as decimals. We can format the tick labels of the axis by providing a [d3-format specifier](https://github.com/d3/d3-format).\n\n${tryIt(`\nChange the format specifier to \".2%\" for needlessly precise labels. \n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":485,"value":"md`---\n### Horizontal bar chart\nTo achieve a horizontal bar chart, you can swap around the _x_ and _y_ definitions from the previous example.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"viewof horizontalBar = vl.markBar()\n .data(alphabet)\n .encode(\n vl.y().fieldO(\"letter\"),\n vl.x().fieldQ(\"frequency\").axis({ format: \"%\" })\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":533,"value":"md`---\n### Aggregated bar chart\nSo far we’ve been lucky because the data was in the perfect shape to chart directly. More often, we want to chart totals, averages, even standard deviations from the data.\n\nTo see how [_aggregating data_](https://vega.github.io/vega-lite/docs/aggregate.html#ops) works, let’s add another column to our alphabet data to indicate whether the letter is a vowel. Then let’s chart the sum of frequencies of vowels and non-vowels.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"vowels = alphabet.map(d => ({...d, vowel: \"AEIOU\".includes(d.letter)}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"viewof aggregatedBar = vl.markBar()\n .data(vowels)\n .encode(\n vl.x().sum(\"frequency\").axis({ format: \"%\" }),\n vl.y().fieldN(\"vowel\")\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"md`\n#### .sum(\"frequency\")\n\\`sum()\\` is one of several [aggregation functions](https://vega.github.io/vega-lite/docs/aggregate.html#ops). It will automatically group by _all the other_ encoding channels. In this case, it groups by just the _y_ channel of _vowel_.\n\n${tryIt(`\nRemove the \\`y()\\` channel to see the sum of all frequencies (100%). \nChange \\`sum()\\` to \\`average()\\`. \n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1177,"value":"md`#### .fieldN(\"vowel\")\nVowel is _true_ or _false_ so we treat it as nominal and encode it on the _y_-axis.\n\n${tryIt(`\nChange \\`y()\\` to \\`color()\\` for a stacked bar chart (more about stacked bars next). \nChange the field back to \\`\"letter\"\\` to see the original chart (each “sum” is of one letter).\n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"md`---\n### Stacked bar chart\nLet’s look at a more complicated aggregation example which will require more complicated data.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"weather = FileAttachment(\"pwm-weather@1.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1018,"value":"md`This Portland weather data comes from three years of daily observations of minimum and maximum temperatures, an overall condition (fog, rain, snow, or sun), and amount of precipitation from [NOAA’s Global Historical Climatology Network](https://www.ncdc.noaa.gov/data-access/land-based-station-data/land-based-datasets/global-historical-climatology-network-ghcn).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"weather[0] // A sample of the weather data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"md`We’ll attempt a stacked bar chart grouped by month, counting all the days within a month for different conditions. For three years worth of data, each month should have about 90 days total.\n\nPortland seems sunny about half the time year-round, with snow from Nov-Apr.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"viewof stackedBar = vl.markBar()\n .data(weather)\n .encode(\n vl.x().fieldO(\"date\").timeUnit(\"utcmonth\"),\n vl.y().count(), // .stack(\"normalize\").axis({ format: \"%\" }),\n vl.color().fieldN(\"condition\").scale({ range: weatherColors })\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"md`\n#### vl.x().fieldO(\"date\").timeUnit(\"utcmonth\")\n[\\`timeUnit()\\`]() is a way to transform date values on the fly. You can think of it as if we had transformed our source data to include the month for each date. _utcmonth_ parses the string values in the data in UTC and then extracts the month. It’s one of several [supported time units](https://vega.github.io/vega-lite/docs/timeunit.html). Be mindful of when strings are interpreted in [UTC vs. local time](https://vega.github.io/vega-lite/docs/timeunit.html#utc).\n\nNotice we’re using \\`fieldO\\` rather than \\`fieldT\\`. This is because we want to interpret the months as ordinal labels (on a [band scale](https://github.com/d3/d3-scale/blob/master/README.md#band-scales)) rather than as time (for a [time scale](https://github.com/d3/d3-scale/blob/master/README.md#time-scales)).\n\n${tryIt(`\nChange the time unit to \\`\"utcyear\"\\` or \\`\"day\"\\`. \n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1180,"value":"md`#### vl.y().count()\n\\`count()\\` is another aggregation function that counts the number of rows, grouping by the other channels: date (as month) and condition.\n\n${tryIt(`\nNormalize the heights by converting to percentages with \\`.stack(\"normalize\")\\`. \nFormat the newly normalized y-axis as percentages. \n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1182,"value":"md`#### vl.color().fieldN(\"condition\")\nWe want to encode the day’s overall conditions as a color. Since we’re treating the conditions as nominal, Vega-Lite defaults to a categorical color scheme.\n\n${tryIt(`\nChange \\`fieldN\\` to \\`fieldO\\` to default to a sequential color scheme. \nSpecify more natural colors to use by adding \\`.scale({ range: weatherColors })\\`. \nRemove the \\`color()\\` channel to see a non-stacked bar chart by month. \n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"weatherColors = [\"darkgray\", \"steelblue\", \"paleturquoise\", \"gold\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":711,"value":"md`---\n### Grouped bar chart\nInstead of stacking which makes comparison between conditions within a month difficult, we can group bars within a month instead.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"viewof groupedBar = vl.markBar()\n .data(weather)\n .encode(\n vl.row().fieldO(\"date\").timeUnit(\"utcmonth\"),\n vl.y().fieldN(\"condition\").axis({ title: null }),\n vl.x().count(),\n vl.color().fieldN(\"condition\").scale({ range: weatherColors })\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":738,"value":"md`#### .column()\nThis is a new channel that we’ll explore more in [Part 3](layers-facets-concat). For now, you can think of it as an additional way to position horizontally (along with _x_). You can also think of it as a way to repeat the same chart, once per field value.\n\n${tryIt(`\nReplace utcmonth with utcyear to see a comparison of conditions per year. \nSpecify \\`row()\\` instead of \\`column()\\`. \n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1300,"value":"md`#### .axis({ title: null })\nDue to the repetition of the chart, the x-axis gets a bit redundant, plus the condition labels are self-explanatory. You can set the title of the axis or remove it entirely using the \\`title\\` key passed to \\`axis()\\`.\n\n${tryIt(`\nSet the axis title to a string of your choice. \n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"lines = md`---\n## Line charts\n\nHow about visualizing trends? Let’s try charting the market capitalization of some U.S. companies. The data includes symbol, date, and market capitalization.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"marketCap = FileAttachment(\"market-cap.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1170,"value":"marketCap[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"viewof line = vl.markLine()\n //.data(marketCap)\n .data(marketCap.filter(d => new Date(d.date) > new Date(2018, 0, 1)))\n .encode(\n vl.x().fieldT(\"date\"), // date parsing!\n vl.y().fieldQ(\"market cap\").axis({ format: \"$s\" }),\n vl.color().fieldN(\"symbol\") // .sort(vl.max(\"market cap\").order(\"descending\"))\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":758,"value":"md`\n#### markLine()\nWe can draw line charts using [\\`markLine()\\`](https://vega.github.io/vega-lite/docs/line.html#properties). Lines are drawn between data points, sorted by the _x_-axis by default.\n\n${tryIt(`\nPass \\`{ interpolate: \"step\" }\\` to \\`markLine()\\` for a step chart. \nChange the chart type to \\`markPoint()\\` to see individual points. \n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1184,"value":"md`#### fieldT()\nThis is the first time we’ve seen \\`fieldT()\\` in full effect. It’s doing our date parsing for us and without an explicit \\`timeUnit()\\` will choose sane time-based labels.\n\n${tryIt(`\nFilter the date range to post-2018 for more granular axis labels. \nSmooth out the data by aggregating the average market cap by \\`timeUnit(\"yearmonth\")\\`. \n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1314,"value":"md`#### color().fieldN(\"symbol\")\nWe’ve seen this before with the stacked bar chart example, but you’ll notice here the lines share the same y-axis and overlap rather than stacking. This is the implied behavior since overlapping lines remain interpretable (and are normally preferred).\n\nSince the data contains multiple stock symbols, we want to make sure we group by symbol. If we didn’t, we’d end up drawing a criss-cross of lines jumping between different stock symbols.\n\n${tryIt(`\nChange \\`color()\\` to \\`detail()\\` to preserve grouping by symbol, without coloring. \nSort the colors and legend by maximum market cap, making it a bit easier to identify symbols by color. \nRemove the \\`color()\\` / \\`detail()\\` channel to ungroup the lines. \n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1361,"value":"md`---\n### Area chart\n\nArea charts are closely related to line charts, but share the stacking semantics of bar charts. Charting the market capitalizations as an area chart can be accomplished by switching to \\`markArea()\\`.\n\nSince the underlying data contains non-uniform date values that make joining on date difficult, we’ve aggregated the data monthly.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"viewof area = vl.markArea()\n .data(marketCap)\n .encode(\n vl.x().fieldT(\"date\").timeUnit(\"yearmonth\"),\n vl.y().mean(\"market cap\").axis({ format: \"$s\" }),\n vl.color().fieldN(\"symbol\")\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"scatters = md`---\n## Scatter charts\n\nLet’s revisit our Portland weather data. Before aggregating, it’s often helpful to see all of it at once. Let’s draw a point for the maximum temperature per day, colored by condition.\n\nMaybe as expected, it rains somewhat often in Portland until it turns to snow when the maximum temperature for the day drops to around 5°C during the winter months.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"viewof scatter = vl.markPoint()\n .data(weather)\n .encode(\n vl.x().fieldT(\"date\"), // .timeUnit('utcmonthdate'),\n vl.y().fieldQ(\"tmax\"),\n vl.color().fieldN(\"condition\").scale({ range: weatherColors }),\n // vl.shape().fieldN(\"condition\")\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1381,"value":"md`#### markPoint()\n\n[\\`markPoint\\`](https://vega.github.io/vega-lite/docs/point.html) along with [\\`markCircle\\`](https://vega.github.io/vega-lite/docs/circle.html) are good choices for scatter plots. There’s also [\\`markSquare\\`](https://vega.github.io/vega-lite/docs/square.html) if you’re feeling equitable. \\`markPoint\\` can leverage an additional \\`shape()\\` encoding channel if you need it.\n\n${tryIt(`\nAdd a \\`shape()\\` channel to additionally encode condition as different shapes. \nSet the timeUnit to utcmonthdate for a better view of year-over-year trends. \nRemove the \\`y()\\` channel for a one-dimensional view of conditions over time (leading to strip plots below). \n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"md`---\n### Dot/Strip plot\nDot or strip plots are often useful for visualizing the distribution of values along one axis, or across a handful of categories.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"viewof strip = vl.markTick()\n .data(weather)\n .encode(\n vl.x().fieldT(\"date\").timeUnit('utcmonthdate'),\n vl.y().fieldO(\"date\").timeUnit(\"utcyear\"),\n // vl.y().fieldN(\"condition\"),\n vl.color().fieldN(\"condition\").scale({ range: weatherColors }),\n // vl.size().fieldQ(\"tmax\")\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1480,"value":"md`#### markTick()\n[Ticks](https://vega.github.io/vega-lite/docs/tick.html) are one-pixel, short lines. You can change their length with the \\`size()\\` encoding channel.\n\n${tryIt(`\nUse the _y_-axis for condition and preserve grouping by year by encoding utcyear as \\`row()\\`. \nEncode tmax as the tick’s \\`size()\\` to get a sense of temperature. \n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"tables = md`---\n## Table-based charts`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":914,"value":"md`### Heat map\n\nLet’s visualize a literal “heat” map using our weather data, encoding average maximum temperature as color, laying it out slightly calendar-like by month and day.\n\nA nice seasonal variation in temperature!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"viewof heatmap = vl.markRect({tooltip: {\"content\": \"data\"}, clip: true})\n .data(weather)\n .encode(\n vl.y().fieldO(\"date\").timeUnit(\"month\"),\n vl.x().fieldO(\"date\").timeUnit(\"date\"),\n vl.color().average(\"tmax\").scale({ scheme: \"redyellowblue\", reverse: true }),\n vl.size().average(\"precip\")\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1556,"value":"md`#### markRect()\n[\\`markRect()\\`](https://vega.github.io/vega-lite/docs/rect.html) draws rectangles. We can use it to create a heatmap or it can use \\`x2\\` and \\`y2\\` encoding channels to specify more [arbitrary rectangles](https://vega.github.io/vega-lite/docs/rect.html#ranged).\n\n${tryIt(`\nSwitch to \\`markSquare\\` and encode preciptation as size. \n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1528,"value":"md`#### .average(\"tmax\")\nSince we’re working with three years of data, we aggregate them grouped by month and date.\n\n${tryIt(`\nChange \\`average\\` to \\`max\\` to see a “noisier” variation in temperature. \nRemove the aggregation function and use \\`fieldQ\\` to see the last year’s data point. \n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1529,"value":"md`#### .scale({ scheme: \"redyellowblue\", reverse: true })\nAll of [d3-scale-chromatic’s](https://github.com/d3/d3-scale-chromatic) color schemes are [available by name](https://vega.github.io/vega/docs/schemes/#reference). redyellowblue was in the opposite direction for cold to hot, so we choose to reverse it.\n\n${tryIt(`\nPlay with the color scheme, “plasma” maybe? \n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1024,"value":"md`---\n### Table Bubble Plot (GitHub Punch Card)\n\nPretty similar to the heatmap above, instead of rectangles we can use circles with encoded sizes to achieve GitHub‘s old “punch card” visualization.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1043,"value":"commits = FileAttachment(\"github.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1028,"value":"viewof punchCard = vl.markCircle()\n .data(commits)\n .encode(\n vl.y().fieldO(\"time\").timeUnit(\"day\"), // .sort([\"mon\", \"tue\", \"wed\", \"thu\", \"fri\", \"sat\", \"sun\"]),\n vl.x().fieldO(\"time\").timeUnit(\"hours\"),\n vl.size().sum(\"count\") //.scale({ range: [0, 200] })\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1867,"value":"md`#### .size().sum(\"count\")\nWe encode the sum of the count field as the size of each circle. The [\\`size()\\`](https://vega.github.io/vega-lite/docs/encoding.html#mark-prop) encoding channel can be used with many other mark types.\n\n${tryIt(`\nChange the range of sizes used. \nAdd a tooltip for the precise number of commits. \n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1022,"value":"md`---\n### Table\nTables are also a form of visualization that can be readily created with Vega-Lite using \\`markText\\`. Let’s view the condition variable across all of our weather data.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1935,"value":"viewof tableText = vl.markText()\n .data(weather)\n .encode(\n vl.row().fieldO(\"date\").timeUnit(\"utcyear\"),\n vl.y().fieldO(\"date\").timeUnit(\"utcmonth\"),\n vl.x().fieldO(\"date\").timeUnit(\"utcdate\"),\n vl.text().fieldN(\"condition\")\n )\n .width(860)\n .config({axisLeft: {title: null}, header: {title: null}})\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1911,"value":"md`#### .text()\nTo specify the text value, we use the [\\`text()\\`](https://vega.github.io/vega-lite/docs/encoding.html#text-field-def) encoding channel.\n\n${tryIt(`\nDisplay other values like tmin, tmax, or precip. \n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1913,"value":"md`#### .width(860)\nWe can set the chart’s width and height.\n\n${tryIt(`\nSpecify other widths or heights. \n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1996,"value":"md`#### .config({axis: {title: null}, header: {title: null}})\nSince the year and month values are self-explanatory, we decided to remove the explicit axisLeft (_y_) and header (_row_) titles to recover some horizontal space. There are many other configurable tweaks available with [\\`config()\\`](https://vega.github.io/vega-lite/docs/config.html).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"maps = md`---\n## Maps\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":794,"value":"md`### Projected marks\n\nIf your data has latitude and longitude values, we can draw them in any [projection](https://github.com/d3/d3-geo#azimuthal-projections) from [d3-geo](https://github.com/d3/d3-geo). Without landmarks to reference yet, this is of limited utility, but will often yield recognizable geographic trends quickly.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":813,"value":"airports = FileAttachment(\"airports.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2024,"value":"airports[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":779,"value":"viewof geoScatter = vl.markSquare({ size: 3 })\n .data(airports)\n .project(vl.projection(\"albersUsa\")) // \"Albers USA\" includes an inset for Alaska and Hawaiʻi\n // .project(vl.projection(\"orthographic\").rotate([70, -10]))\n .encode(\n vl.longitude().fieldQ(\"longitude\"),\n vl.latitude().fieldQ(\"latitude\"),\n vl.color().fieldN(\"state\").legend(false), // Color by state, but don’t need a legend\n vl.tooltip(\"name\")\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2026,"value":"md`### markCircle({ size: 3 })\nCircles are good for maps too! As are squares or points.\n\n${tryIt(`\nCreate an artful rendering of the states using \\`markLine\\`. \n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2052,"value":"md`#### .project(vl.projection(\"albersUsa\"))\nAll of the [projections](https://github.com/d3/d3-geo#azimuthal-projections) from [d3-geo](https://github.com/d3/d3-geo) are available. We’ve picked albersUsa since our data is of mostly continental U.S. airports, though you’ll notice points in the top left which correspond to outlying U.S. territories.\n\n\\`vl.projection()\\` takes [additional options](https://vega.github.io/vega-lite/docs/projection.html#projection-properties) such as center, scale, or rotation.\n\n${tryIt(`\nSwitch to \"mercator\" or \"equalEarth\" for a global perspective. \nSee what orthographic with rotation looks like. \n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2044,"value":"md`#### vl.longitude(), vl.latitude()\n\nInstead of _x_ and _y_, we map to specific _longitudes_ and _latitudes_. This is a great example of “thinking in marks” over “thinking in chart types.” We’re just drawing circles, but their placement is determined by \"longitude\" and \"latitude\" fields from our data, mapped to the screen through a geographic projection (which you could think of as a [scale](https://github.com/d3/d3-scale)). An analogous process happens when creating a scatter chart with time and temperature dictating the _x_ and _y_ positions.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":811,"value":"md`---\n### Marks with landmass\n\nIncluding recognizable land or water features can be accomplished with [layering](https://vega.github.io/vega-lite/docs/layer.html), which we’ll cover more in-depth in [Part 3](layers-facets-concat).\n\nLet’s look at the same airport data, but with landmass underneath. We can use [\\`markGeoshape()\\`](https://vega.github.io/vega-lite/docs/geoshape.html) to draw [TopoJSON](https://github.com/topojson/topojson) features and then layer our visualization on top.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":841,"value":"viewof geoScatterFeatures = {\n // Landmass for the U.S.\n const landmass = vl.markGeoshape()\n // Get the shape for the U.S. from the us-atlas npm module.\n .data(vl.topojson(\"https://unpkg.com/us-atlas@3/nation-10m.json\").feature(\"nation\"))\n .encode(\n vl.stroke().value(\"lightgray\"),\n vl.color().value(null)\n );\n\n // The previous visualization\n const points = vl.markCircle({ size: 3 })\n .data(airports)\n .encode(\n vl.longitude().fieldQ(\"longitude\"),\n vl.latitude().fieldQ(\"latitude\"),\n vl.color().fieldN(\"state\").legend(false)\n );\n \n // Return a combined view\n return vl\n .layer(landmass, points) // Layer the views together.\n .project(vl.projection(\"albersUSA\"))\n .render();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2126,"value":"md`#### markGeoshape()\n[\\`markGeoshape\\`](https://vega.github.io/vega-lite/docs/geoshape.html) takes [TopoJSON](https://github.com/topojson/topojson) files and draws them in the same projection as our data.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2127,"value":"html`

vl.topojson(\"https://unpkg.com/us-atlas@3/nation-10m.json\").feature(\"nation\")

\nWe provide Vega-Lite with the shapes we want to draw as TopoJSON. Specifically, we’ll use the “nation” feature that’s conveniently distributed in the us-atlas npm module. It also contains counties and states.\n

\n${tryIt(`\nSwap in _states_ or _counties_ for _nation_ for state or county boundaries. \n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2136,"value":"md`#### .stroke().value(\"lightgray\")\nWe set the outline of the polygons to a light gray.\n\n\\`stroke()\\` is similar to \\`color()\\` and [other color-related encoding channels](https://vega.github.io/vega-lite/docs/mark.html#color). All of the encoding channels support setting properties to [constant values](https://vega.github.io/vega-lite/docs/value.html).\n\n${tryIt(`\nPick another boundary color. \n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2153,"value":"md`#### layer()\n[\\`layer()\\`](https://vega.github.io/vega-lite/docs/layer.html) layers multiple views on top of each other, last one on top. By default, all of the scales and axes are shared among all layers.\nWe’ll cover layers in [Part 3](layers-facets-concat).\n\n${tryIt(`\nRemove one of the layers to see them one at a time. \n`)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":773,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":865,"value":"function thumbnail(vegaView) {\n return html`

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"d3 = require(\"d3-fetch@1\", \"d3-array\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"import { vl } from \"@vega/vega-lite-api\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1748,"value":"import { table } from \"@tmcw/tables/2\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":580,"value":"import { tryIt } from \"3c458cfcac4dbda8\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null