31:T872,

# Learning Observable Plot via Altair Between 2018 and 2020 I was actively involved with the Altair community, creating many examples for the documentation and gallery. It was the first time I had used a visualization library inspired by a layered grammar of graphics and it was an eye-opening experience. Learning to use Altair, and understanding the Vega/Vega-Lite projects it is built on, completely changed the way I think about visualization and the creation process. I even made a few YouTube videos on the subject. When Observable Plot was released in May 2021 I was impressed with the beautiful visualizations being created and wanted to make some of my own. Unfortunately, I didn't have the time back then to dive in and learn, but now I do! ### Disclaimers The purpose of this notebook is selfish in nature; I am trying to learn Observable Plot. It is very similar in spirit to the piece Plot & Vega-Lite by Ian Johnson, which I recommend. This notebook is not meant to be a tutorial or explainer, but I wanted to share anyways. My goal here is to take some of the examples from the Altair Example Gallery and recreate them using Observable Plot, as a means of learning. I've decided to include many of the errors and difficulties experienced during the creation process, rather than only keep the final result. I think that sometimes it's important to see the false starts and misunderstandings as they can be informative. I hope you enjoy! 😀 32:T681,# Conclusion Congratulations for making it all the way to the end! 🎉 (Unless you just skipped here 😠) I wanted to conclude by summarizing a few of the thoughts I had while creating this piece: - Learning by parroting examples is the method I have employed here. It's ok, but not always the best way to learn. I feel that now I have a better understanding of what I know and where the gaps are. This will make doing detailed tutorials more fruitful in the future. - I have found when scouring the documentation looking for a solution, I end up finding other nuggets of knowledge that enhance my general understanding. This is not a reliable method for cultivating understanding as it is stochastic but is probably a more realistic model for how/when learning occurs in the wild. - I find myself wanting to do things the "Vega-Way" by including all of my transformations and everything inside the visualization specification, but that pattern does not always translate into using Plot. The slightly different mindset is something I am trying to cultivate and I think I have improved. - Some more advanced and bespoke transformations are not currently implemented in Plot. It is a new project and has lots of new features planned. I can't wait! Plot 1.0 is going to be awesome! I especially want to thank Mike Bostock, Fil, and Ian Johnson for their work on Plot and the excellent examples/tutorials throughout the documentation. Till next time! _- Eitan Lees_33:[{"id":"340eb8ee184efcec05acbcfb6a0ec1c4799aac318568f43a66d22434d54693c42781fc0fb5706c184c2d2d3de94f0138e49a501671eeac97c6ce4f421302d8dc","href":"https://static.observableusercontent.com/files/340eb8ee184efcec05acbcfb6a0ec1c4799aac318568f43a66d22434d54693c42781fc0fb5706c184c2d2d3de94f0138e49a501671eeac97c6ce4f421302d8dc","name":"Altair_Plot.png","type":"image/png","lastModified":1631284141586.65,"size":70568}] 2f:{"title":"Learning Observable Plot via Altair","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":270,"value":"## The Data\n\nBefore we make any plots we need data. Most of the Altair examples utilize the Vega Datasets repository, which can easily be integrated with Observable","pinned":false,"hidden":false,"mode":"md"},{"id":274,"value":"data = (await require('vega-datasets@2'))","pinned":true,"hidden":false,"mode":"ojs"},{"id":281,"value":"With data in hand it's time to make some plots!","pinned":false,"hidden":false,"mode":"md"},{"id":46,"value":"## Bar Charts","pinned":false,"hidden":false,"mode":"md"},{"id":252,"value":"### Bar chart with negatives (reference)\n\nThis wound up being a little more difficult than I initially expected. Let me take you on my journey ...","pinned":false,"hidden":false,"mode":"md"},{"id":290,"value":"Here was my initial attempt:","pinned":false,"hidden":false,"mode":"md"},{"id":303,"value":"usemployment = data['us-employment.csv']()","pinned":true,"hidden":false,"mode":"ojs"},{"id":288,"value":"Plot.barY(usemployment, {x:'month', y:'nonfarm_change'}).plot()","pinned":true,"hidden":false,"mode":"ojs"},{"id":295,"value":"but clearly something is off with the x-axis. At first I thought that my date variable wasn't being converted to the correct type, but that wasn't the problem at all.\n\nAfter a little digging around I found a forum post and an associated notebook outlining the issue I was having and various solutions. \n\nThe problem was that the `Plot.barY` mark creates an ordinal scale by default.\n\nThere were three suggested solutions:\n\n**1. Use the `Plot.barY` mark with adjusted ticks**","pinned":false,"hidden":false,"mode":"md"},{"id":127,"value":"Plot.barY(usemployment, {x:'month', y:'nonfarm_change'}).plot({\n x: {\n ticks: d3.utcYear.range(...d3.extent(usemployment, (d) => d.month)),\n tickFormat: \"%Y\"\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":339,"value":"**2. Use the `Plot.areaY` mark with a step curve**","pinned":false,"hidden":false,"mode":"md"},{"id":208,"value":"Plot.areaY(usemployment, \n {x:'month', y:'nonfarm_change', curve:'step'}).plot()","pinned":true,"hidden":false,"mode":"ojs"},{"id":346,"value":"**3. Use the `Plot.rectY` mark with a `Plot.binX` aggregate.**","pinned":false,"hidden":false,"mode":"md"},{"id":215,"value":"Plot.rectY(usemployment, \n Plot.binX({ y: \"sum\" }, \n { x: \"month\", y: \"nonfarm_change\", thresholds: d3.utcMonth, inset: 0 })\n ).plot()","pinned":true,"hidden":false,"mode":"ojs"},{"id":350,"value":"Now for some color! I thought the `Plot.areaY` version looked nice so I started there by encoding the fill with a conditional statement and setting the color scale but I ran into some trouble. ","pinned":false,"hidden":false,"mode":"md"},{"id":231,"value":"Plot.plot({\n color: {\n domain: [\"positive\", \"negative\"],\n range: [\"steelblue\", \"orange\"]\n },\n marks: [\n Plot.areaY(usemployment, {\n x:'month', \n y:'nonfarm_change', \n curve:'step', \n fill: d => d.nonfarm_change > 0 ? \"positive\" : \"negative\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":356,"value":"There is some unwanted blue showing on top of the orange section. Rather than figuring out what went wrong and trying to fix it, instead, I applied the conditional fill to the other methods to see if they worked. \n\nThe `Plot.rectY` version looked pretty good and probably most closely matched the reference. Still, I felt the dividing lines between the bars looked a little funny, almost too thin. ","pinned":false,"hidden":false,"mode":"md"},{"id":239,"value":"Plot.plot({\n color: {\n domain: [\"positive\", \"negative\"],\n range: [\"steelblue\", \"orange\"]\n },\n marks: [\n Plot.rectY(usemployment, Plot.binX({ y: \"sum\" }, { x: \"month\", y: \"nonfarm_change\", thresholds: d3.utcMonth, inset: 0, fill: d => d.nonfarm_change > 0 ? \"positive\" : \"negative\"}))\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":361,"value":"It was the `Plot.barY` version that I ended up liking the best though. I added a rule at zero as a reference. ","pinned":false,"hidden":false,"mode":"md"},{"id":246,"value":"Plot.plot({\n color: {\n domain: [\"positive\", \"negative\"],\n range: [\"steelblue\", \"orange\"]\n },\n marks: [\n Plot.barY(usemployment, {\n x:'month', \n y:'nonfarm_change', \n fill: d => d.nonfarm_change > 0 ? \"positive\" : \"negative\"\n }), \n Plot.ruleY([0])\n ], \n x: {\n ticks: d3.utcYear.range(...d3.extent(usemployment, (d) => d.month)),\n tickFormat: \"%Y\"\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":365,"value":"I also discovered that if I use the same conditional on the `fill` and `stroke` parameters then I recover a similar look to the `Plot.areaY` mark from earlier.","pinned":false,"hidden":false,"mode":"md"},{"id":265,"value":"Plot.plot({\n color: {\n domain: [\"positive\", \"negative\"],\n range: [\"steelblue\", \"orange\"]\n },\n marks: [\n Plot.barY(usemployment, {\n x:'month', \n y:'nonfarm_change', \n fill: d => d.nonfarm_change > 0 ? \"positive\" : \"negative\", \n stroke: d => d.nonfarm_change > 0 ? \"positive\" : \"negative\"\n }), \n Plot.ruleY([0])\n ], \n x: {\n ticks: d3.utcYear.range(...d3.extent(usemployment, (d) => d.month)),\n tickFormat: \"%Y\"\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":372,"value":"### Grouped Bar Chart (reference)","pinned":false,"hidden":false,"mode":"md"},{"id":408,"value":"Here is my initial attempt:","pinned":false,"hidden":false,"mode":"md"},{"id":702,"value":"barley = data[\"barley.json\"]()","pinned":true,"hidden":false,"mode":"ojs"},{"id":706,"value":"Plot.plot({\n facet: {\n data: barley,\n x: \"site\"\n },\n marks : [\n Plot.barY(barley, Plot.groupX({y: \"mean\"}, {x: \"year\", y: \"yield\", fill:\"year\"}))\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":709,"value":"but I ran into trouble when trying to set the colors explicitly because `year` was not an ordinal variable. To remedy this issue I converted `year` to a string before plotting","pinned":false,"hidden":false,"mode":"md"},{"id":377,"value":"barley_converted = (await data[\"barley.json\"]()).map(d=>({\n year: d['year'].toString(), \n yield: d['yield'], \n site: d['site']\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":379,"value":"Plot.plot({\n facet: {\n data: barley_converted,\n x: \"site\"\n },\n color:{legend:true},\n marks : [\n Plot.barY(barley_converted, Plot.groupX({y: \"mean\"}, {x: \"year\", y: \"yield\", fill:\"year\"}))\n ]\n})\n ","pinned":true,"hidden":false,"mode":"ojs"},{"id":471,"value":"### Layered Bar Chart (reference)\n\nAgain here I had some trouble with the ordinal encoding of dates, but now I know what to do! Here I introduced a parameter `mixBlendMode` which controls how the colors interacted when being layered","pinned":false,"hidden":false,"mode":"md"},{"id":477,"value":"iowa = data['iowa-electricity.csv']()","pinned":true,"hidden":false,"mode":"ojs"},{"id":479,"value":"Plot.plot({\n y: {\n grid: true\n },\n color:{legend:true},\n marks: [\n Plot.barY(iowa, {x: \"year\", y2: \"net_generation\", fill: \"source\", mixBlendMode: \"normal\", fillOpacity:0.7}),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":486,"value":"Plot.plot({\nx: {\n ticks: d3.timeTicks(...d3.extent(iowa, (d) => d.year), d3.utcYear),\n tickFormat: \"%Y\"\n },\n y: {\n grid: true\n },\n color:{legend:true},\n marks: [\n Plot.barY(iowa, {x: \"year\", y2: \"net_generation\", fill: \"source\", mixBlendMode: \"normal\", fillOpacity:0.7}),\n Plot.ruleY([0])\n ]\n})\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":758,"value":"Note the use of `d3.timeTicks` here to create an inclusive range. ","pinned":false,"hidden":false,"mode":"md"},{"id":774,"value":"I wasn't quite sure how to match the opacity in the legend, but that's ok.","pinned":false,"hidden":false,"mode":"md"},{"id":438,"value":"### Trellis Stacked Bar Chart (reference)","pinned":false,"hidden":false,"mode":"md"},{"id":860,"value":"Pretty straight forward, except I needed to add to the left margin so that the labels didn't overlap. I also explicitly ordered the bars to match the reference","pinned":false,"hidden":false,"mode":"md"},{"id":491,"value":"Plot.plot({\n marginLeft: 110,\n facet:{\n data: barley,\n x: \"year\",\n },\n color:{legend:true},\n marks: [\n Plot.barX(barley, {x:\"yield\", y:\"variety\", fill:\"site\", order:\"site\", reverse:'true'})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"## Line Charts","pinned":false,"hidden":false,"mode":"md"},{"id":870,"value":"### Multi Series Line Chart (reference)\n\nFor this example, I couldn't figure out how to change the line style to encode the symbol information. ","pinned":false,"hidden":false,"mode":"md"},{"id":523,"value":"stocks = (await data['stocks.csv']()).map(d=>({\n date: new Date(d['date']), \n price: +d.price, \n symbol: d.symbol\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":525,"value":"Plot.plot({\n color:{legend:true},\n marks:[\n Plot.line(stocks, {x:'date', y:'price', stroke:'symbol'})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":912,"value":"### Filled Step Chart (reference)","pinned":false,"hidden":false,"mode":"md"},{"id":540,"value":"google = stocks.filter(d=>d.symbol==='GOOG')","pinned":true,"hidden":false,"mode":"ojs"},{"id":538,"value":"Plot.plot({\n marks:[\n Plot.line(google, {x:'date', y:'price', curve:'step', stroke:'steelblue', strokeWidth:2}), \n Plot.areaY(google, {x:'date', y:'price', curve:'step', fill:'steelblue', fillOpacity:0.3}),\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":919,"value":"### Slope Chart (reference)","pinned":false,"hidden":false,"mode":"md"},{"id":883,"value":"Plot.plot({\n width:180,\n y:{inset:10},\n color:{legend:true},\n marks : [\n Plot.lineY(barley_converted, Plot.groupX({y: \"median\"}, {x: \"year\", y: \"yield\", stroke:\"site\"})),\n Plot.dotY(barley_converted, Plot.groupX({y: \"median\"}, {x: \"year\", y: \"yield\", fill:\"site\"}))\n ]\n})\n ","pinned":true,"hidden":false,"mode":"ojs"},{"id":974,"value":"### Line Chart with Percent axis (reference)","pinned":false,"hidden":false,"mode":"md"},{"id":1035,"value":"I had to tack on some extra information to the date variable such that the conversion to a date would work correctly","pinned":false,"hidden":false,"mode":"md"},{"id":970,"value":"welders = (await data['jobs.json']()).filter(d=>d.job==='Welder').map(d=>({\n date: new Date(d.year+'-01-01'), perc:+d.perc, sex:d.sex\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":979,"value":"Plot.plot({\n inset:20,\n y:{\n tickFormat: d3.format(\".1%\"), \n grid:true\n },\n color:{legend:true},\n marks:[\n Plot.ruleY([0]),\n Plot.line(welders, {x:\"date\", y:\"perc\", stroke:'sex', strokeWidth:3})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"## Area Charts","pinned":false,"hidden":false,"mode":"md"},{"id":1065,"value":"### Normalized Stacked Area Chart (reference)","pinned":false,"hidden":false,"mode":"md"},{"id":1073,"value":"Plot.plot({\n color:{legend:true},\n marks:[\n Plot.areaY(iowa, Plot.stackY({\n x:'year', \n y:'net_generation', \n z:'source', \n fill:'source',\n offset: \"expand\", \n reverse:true\n }))\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1110,"value":"### Layered Area Chart (reference)","pinned":false,"hidden":false,"mode":"md"},{"id":1107,"value":"Plot.plot({\n marginLeft:50,\n color:{legend:true},\n marks: [\n Plot.areaY(iowa, {\n x: \"year\", y2: \"net_generation\", \n fill: \"source\", mixBlendMode: \"normal\", fillOpacity:0.3}),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1119,"value":"### Trellis Area Chart (reference)","pinned":false,"hidden":false,"mode":"md"},{"id":1124,"value":"Plot.plot({\n grid:true,\n facet:{\n data:iowa, \n y:'source', \n marginRight:100,\n marginLeft:20\n },\n color:{legend:true},\n marks: [\n Plot.areaY(iowa, {\n x: \"year\", y2: \"net_generation\", \n fill: \"source\"}),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1150,"value":"### Streamgraph (reference)\n\nThis is kind of a silly example. There are way too many categories and currently Plot doesn't include the \"category20b\" color scale. ","pinned":false,"hidden":false,"mode":"md"},{"id":576,"value":"unemployment = (await data['unemployment-across-industries.json']()).map(d=>({\n date: new Date(d.date), \n count: d.count, \n series: d.series\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1171,"value":"Plot.plot({\n x: {\n grid: true,\n },\n color:{legend:true},\n marks: [\n Plot.areaY(unemployment, Plot.stackY({offset: \"silhouette\", x: \"date\", y: \"count\", fill: \"series\"}))\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"## Scatter Plots","pinned":false,"hidden":false,"mode":"md"},{"id":1202,"value":"### The Canonical Cars Scatter Plot (references: 1,2,3,4,5,6)\n\nA scatter plot of the `cars` dataset is often the first visualization I try to make when learning to use a new tool. I use it as a sort of benchmark to compare different visualization libraries. \n\nI think this Observable Plot version came out looking really nice!","pinned":false,"hidden":false,"mode":"md"},{"id":1204,"value":"cars = data['cars.json']()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1209,"value":"Plot.plot({\n inset:20,\n color:{legend:true},\n marks:[\n Plot.dot(cars, {\n x:'Horsepower',\n y:'Miles_per_Gallon', \n fill:'Origin', \n r:10, stroke:'black', strokeWidth:1\n })\n ]\n})\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":1181,"value":"### Table Bubble Plot (Github Punch Card) (reference)\n\nThis example is a slightly modified version from the example shown in Plot & Vega-Lite By Ian Johnson","pinned":false,"hidden":false,"mode":"md"},{"id":614,"value":"commits = (await data['github.csv']()).map(d=>({\n time: new Date(d.time), count:+d.count\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":612,"value":"Plot.plot({\n x: {\n inset: 10,\n ticks: 24\n },\n y: {\n type: \"point\",\n tickFormat: Plot.formatWeekday()\n },\n marks: [\n Plot.dot(commits, Plot.group({r: \"sum\", title: \"sum\"}, {\n y: d => d.time.getDay(),\n x: d => d.time.getHours(),\n r: \"count\",\n fill: \"steelblue\"\n }))\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1245,"value":"### Scatter Plot with Rolling Mean (reference)\n\nNote the default window parameters for **anchor** is _middle_ and **reduce** is _mean_.","pinned":false,"hidden":false,"mode":"md"},{"id":1247,"value":"seattle_weather = data['seattle-weather.csv']()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1252,"value":"Plot.plot({\n grid:true,\n marks:[\n Plot.dot(seattle_weather, {x: 'date', y:'temp_max', stroke:'steelblue'}), \n Plot.line(seattle_weather, Plot.windowY({x: \"date\", y: \"temp_max\", k: 15, stroke: \"red\", strokeWidth:3}))\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1271,"value":"### Stripplot (reference)","pinned":false,"hidden":false,"mode":"md"},{"id":1338,"value":"I liked how this one turned out. The only trouble I did have was that I couldn't figure out how to rotate the facet labels, so instead, I modified the data to reduce label size. ","pinned":false,"hidden":false,"mode":"md"},{"id":1277,"value":"movies = (await data['movies.json']()).map(d=>({\n 'Major Genre':String(d['Major Genre']).split('/')[0],\n 'IMDB Rating':d['IMDB Rating'] \n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1279,"value":"Plot.plot({\n width:width,\n x:{\n axis:false\n },\n facet:{\n data:movies, \n x: 'Major Genre', \n },\n marks:[\n Plot.dot(movies, {\n y:'IMDB Rating', \n x:d=>Math.sqrt(-2*Math.log(Math.random()))*Math.cos(2*Math.PI*Math.random()), \n fill:'Major Genre'})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":661,"value":"$32","pinned":false,"hidden":false,"mode":"md"}],"files":"$W33","stdlib":"1","titling":"auto"}