30:T64f,timeSeries = [ [new Date("2018-01-02"), 170.160004], [new Date("2018-01-03"), 172.529999], [new Date("2018-01-04"), 172.539993], [new Date("2018-01-05"), 173.440002], [new Date("2018-01-08"), 174.350006], [new Date("2018-01-09"), 174.550003], [new Date("2018-01-10"), 173.160004], [new Date("2018-01-11"), 174.589996], [new Date("2018-01-12"), 176.179993], [new Date("2018-01-16"), 177.899994], [new Date("2018-01-17"), 176.149994], [new Date("2018-01-18"), 179.369995], [new Date("2018-01-19"), 178.610001], [new Date("2018-01-22"), 177.300003], [new Date("2018-01-23"), 177.300003], [new Date("2018-01-24"), 177.250000], [new Date("2018-01-25"), 174.509995], [new Date("2018-01-26"), 172.000000], [new Date("2018-01-29"), 170.160004], [new Date("2018-01-30"), 165.529999], [new Date("2018-01-31"), 166.869995], [new Date("2018-02-01"), 167.169998], [new Date("2018-02-02"), 166.000000], [new Date("2018-02-05"), 159.100006], [new Date("2018-02-06"), 154.830002], [new Date("2018-02-07"), 163.089996], [new Date("2018-02-08"), 160.289993], [new Date("2018-02-09"), 157.070007], [new Date("2018-02-12"), 158.500000], [new Date("2018-02-13"), 161.949997], [new Date("2018-02-14"), 163.039993], [new Date("2018-02-15"), 169.789993], [new Date("2018-02-16"), 172.360001], [new Date("2018-02-20"), 172.050003], [new Date("2018-02-21"), 172.830002], [new Date("2018-02-22"), 171.800003], [new Date("2018-02-23"), 173.669998], [new Date("2018-02-26"), 176.350006], [new Date("2018-02-27"), 179.100006], [new Date("2018-02-28"), 179.259995] ]31:[] 2e:{"title":"Shorthand / Observable Plot","cells":[{"id":0,"value":"

Shorthand / Observable Plot

Observable Plot › Shorthand · API

\n\n# Plot: Shorthand\n\nWe designed [Observable Plot](/@observablehq/plot)’s API to be succinct so that when you want to visualize data, you can do it quickly and without struggling to remember Plot’s API.","pinned":false,"hidden":false,"mode":"md"},{"id":173,"value":"This notebook showcases Plot’s “shorthand” syntax where no options are specified—only data. To use this shorthand, the data must have a specific structure: either a one-dimensional array of values [*v₀*, *v₁*, *v₂*, …] or a two-dimensional array of tuples [[*x₀*, *y₀*], [*x₁*, *y₁*], [*x₂*, *y₂*], …].","pinned":false,"hidden":false,"mode":"md"},{"id":179,"value":"Let’s start with the one-dimensional form: an array of numbers.","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"numbers = [\n 170.16, 172.53, 172.54, 173.44, 174.35, 174.55, 173.16, 174.59, 176.18, 177.90, \n 176.15, 179.37, 178.61, 177.30, 177.30, 177.25, 174.51, 172.00, 170.16, 165.53,\n 166.87, 167.17, 166.00, 159.10, 154.83, 163.09, 160.29, 157.07, 158.50, 161.95,\n 163.04, 169.79, 172.36, 172.05, 172.83, 171.80, 173.67, 176.35, 179.10, 179.26\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":183,"value":"These numbers represent the daily opening price of Apple stock starting on January 1, 2018. For a simple line chart, we can pass the data to [Plot.lineY](/@observablehq/plot-line) to construct a *line* mark, and then call *line*.plot.","pinned":false,"hidden":false,"mode":"md"},{"id":22,"value":"Plot.lineY(numbers).plot()","pinned":true,"hidden":false,"mode":"ojs"},{"id":219,"value":"The *y*-axis above represents price in U.S. dollars. The *x*-axis represents the index of the data: the first value ${numbers[0]} is shown at *x* = 0, the second value ${numbers[1]} at *x* = 1, and so on. In other words, *x* represents the number of (trading) days since January 1, 2018. It’d be nicer to have an *x*-axis that shows dates here, but it’s still convenient to see the trend in stock price quickly.","pinned":false,"hidden":false,"mode":"md"},{"id":237,"value":"If we pass the numbers to [Plot.areaY](/@observablehq/plot-area) instead, we’ll get a simple area chart with a baseline implicitly at *y* = 0.","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"Plot.areaY(numbers, {}).plot()","pinned":true,"hidden":false,"mode":"ojs"},{"id":323,"value":"Similarly if we use [Plot.rectY](/@observablehq/plot-rect), we’ll get a series of vertical bars. This implicitly uses the [*interval* transform](/@observablehq/plot-interval) such that the first rect spans from *x* = 0 to *x* = 1, the second from *x* = 1 to *x* = 2, and so on, with a horizontal inset to separate adjacent rects.","pinned":false,"hidden":false,"mode":"md"},{"id":321,"value":"Plot.rectY(numbers).plot()","pinned":true,"hidden":false,"mode":"ojs"},{"id":331,"value":"[Plot.barY](/@observablehq/plot-bar) produces a visually similar result but with different semantics: *x* is now ordinal (a *band* scale) rather than quantitative (*linear*). An ordinal axis labels every tick, which appear at the middle of each bar rather than between rects.","pinned":false,"hidden":false,"mode":"md"},{"id":41,"value":"Plot.barY(numbers).plot()","pinned":true,"hidden":false,"mode":"ojs"},{"id":353,"value":"Like Plot.barY, [Plot.cellX](/@observablehq/plot-cell) implies that *x* is ordinal. But now instead of a *y* channel the numeric value is encoded as the *fill* color. The default quantitative color scheme is *turbo*; higher values are reddish, and lower values blueish.","pinned":false,"hidden":false,"mode":"md"},{"id":58,"value":"Plot.cellX(numbers).plot()","pinned":true,"hidden":false,"mode":"ojs"},{"id":364,"value":"If we don’t care about the order of our data and we instead just want to look at the one-dimensional distribution of values, we can use [Plot.dotX](/@observablehq/plot-dot).","pinned":false,"hidden":false,"mode":"md"},{"id":67,"value":"Plot.dotX(numbers).plot()","pinned":true,"hidden":false,"mode":"ojs"},{"id":422,"value":"Alternatively, we can use [Plot.ruleX](/@observablehq/plot-rule) to draw a vertical rule at each value. In this case, Plot.ruleX behaves identically to [Plot.tickX](/@observablehq/plot-tick). (If there *were* a *y* channel, then Plot.tickX would imply that *y* is ordinal whereas Plot.ruleX would imply that *y* is quantitative.) It is common to use the rule shorthand to annotate special *x* or *y* values in plots, such as *y* = 0, in conjunction with other marks.","pinned":false,"hidden":false,"mode":"md"},{"id":69,"value":"Plot.ruleX(numbers).plot()","pinned":true,"hidden":false,"mode":"ojs"},{"id":71,"value":"Plot.tickX(numbers).plot()","pinned":true,"hidden":false,"mode":"ojs"},{"id":433,"value":"We could even use [Plot.vectorX](/@observablehq/plot-vector) here to draw little up-pointing arrows. (Typically the vector mark is used in conjunction with the *rotate* and *length* options to control the direction and magnitude of each vector.)","pinned":false,"hidden":false,"mode":"md"},{"id":85,"value":"Plot.vectorX(numbers).plot()","pinned":true,"hidden":false,"mode":"ojs"},{"id":442,"value":"While not particularly readable due to occlusion, we can use [Plot.textX](/@observablehq/plot-text) to draw a label at each value, too.","pinned":false,"hidden":false,"mode":"md"},{"id":382,"value":"Plot.textX(numbers).plot()","pinned":true,"hidden":false,"mode":"ojs"},{"id":450,"value":"For a more formal method of summarizing a one-dimensional distribution, we can use [Plot.boxX](/@observablehq/plot-box) to create a horizontal boxplot. The gray band represents the interquartile range; the black whiskers show the extrema (not including outliers); and the thick black stroke represents the median; any outliers (none in this dataset) are drawn as dots.","pinned":false,"hidden":false,"mode":"md"},{"id":45,"value":"Plot.boxX(numbers).plot()","pinned":true,"hidden":false,"mode":"ojs"},{"id":463,"value":"Some of Plot’s transforms support shorthand syntax, too. For example, we can use Plot.rectY with [Plot.binX](/@observablehq/plot-bin) to generate a histogram—another common way to visualize a one-dimensional distribution.","pinned":false,"hidden":false,"mode":"md"},{"id":87,"value":"Plot.rectY(numbers, Plot.binX()).plot()","pinned":true,"hidden":false,"mode":"ojs"},{"id":531,"value":"Similarly [Plot.groupX](/@observablehq/plot-group) can be used to group and count ordinal data, such as the frequency of bases in a random DNA sequence.","pinned":false,"hidden":false,"mode":"md"},{"id":528,"value":"gene = \"AAAAGAGTGAAGATGCTGGAGACGAGTGAAGCATTCACTTTAGGGAAAGCGAGGCAAGAGCGTTTCAGAAGACGAAACCTGGTAGGTGCACTCACCACAG\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":525,"value":"Plot.barY(gene, Plot.groupX()).plot()","pinned":true,"hidden":false,"mode":"ojs"},{"id":472,"value":"Now let’s switch to a two-dimensional array of tuples [[*x₀*, *y₀*], [*x₁*, *y₁*], [*x₂*, *y₂*], …]. The *x*-values here are times (Date instances at UTC midnight); the *y*-values again are the daily opening price of Apple stock.","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":478,"value":"If we pass this to Plot.line (*not* Plot.lineY as before), we’ll get another line chart, but now the *x*-axis shows the date rather than the zero-based index. Also, the *x*-values are no longer uniformly spaced, as there are gaps on the weekends and holidays when the markets are closed.","pinned":false,"hidden":false,"mode":"md"},{"id":32,"value":"Plot.line(timeSeries).plot()","pinned":true,"hidden":false,"mode":"ojs"},{"id":487,"value":"Similarly Plot.area will produce the equivalent area chart, again with an implicit baseline at *y* = 0.","pinned":false,"hidden":false,"mode":"md"},{"id":34,"value":"Plot.area(timeSeries).plot()","pinned":true,"hidden":false,"mode":"ojs"},{"id":604,"value":"There’s currently no two-dimensional shorthand for rect or bar, though you can use these marks to display time series data with options.","pinned":false,"hidden":false,"mode":"md"},{"id":492,"value":"Plot.dot will produce a scatterplot…","pinned":false,"hidden":false,"mode":"md"},{"id":38,"value":"Plot.dot(timeSeries).plot()","pinned":true,"hidden":false,"mode":"ojs"},{"id":508,"value":"As will Plot.vector…","pinned":false,"hidden":false,"mode":"md"},{"id":83,"value":"Plot.vector(timeSeries).plot()","pinned":true,"hidden":false,"mode":"ojs"},{"id":497,"value":"Plot.text also produces a scatterplot with labels showing the zero-based index of the data. Perhaps not very useful, but it at least shows the data’s order.","pinned":false,"hidden":false,"mode":"md"},{"id":81,"value":"Plot.text(timeSeries).plot()","pinned":true,"hidden":false,"mode":"ojs"},{"id":514,"value":"Plot.cell also supports two-dimensional shorthand. As we saw above, Plot.cell implies that *x* and *y* are ordinal, so we shouldn’t pass temporal (dates) and quantitative (numbers) data; here’s a matrix diagram that shows which pairs exist in the dataset. You might use this, for example, to visualize who reviewed whose code.","pinned":false,"hidden":false,"mode":"md"},{"id":124,"value":"matrix = [\n [\"Jacob\", \"Olivia\"],\n [\"Mia\", \"Noah\"],\n [\"Noah\", \"Ava\"],\n [\"Ava\", \"Mason\"],\n [\"Olivia\", \"Noah\"],\n [\"Jacob\", \"Emma\"],\n [\"Ava\", \"Noah\"],\n [\"Noah\", \"Jacob\"],\n [\"Olivia\", \"Ava\"],\n [\"Mason\", \"Emma\"],\n [\"Jacob\", \"Mia\"],\n [\"Mia\", \"Jacob\"],\n [\"Emma\", \"Jacob\"]\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"Plot.cell(matrix).plot()","pinned":true,"hidden":false,"mode":"ojs"},{"id":77,"value":"Plot has a few marks that don’t currently provide meaningful shorthand. The [arrow](/@observablehq/plot-arrow) and [link](/@observablehq/plot-link) marks both require a start (*x1*, *y1*) and end (*x2*, *y2*) point; and the [image](/@observablehq/plot-image) mark requires a source URL (*src*).","pinned":false,"hidden":false,"mode":"md"},{"id":563,"value":"This concludes our tour of Plot shorthand. While none of these charts are particularly groundbreaking, we hope you find this shorthand convenient the next time you want a quick look at some data. And if the shorthand view is useful, you can then enhance it by adding options!","pinned":false,"hidden":false,"mode":"md"},{"id":650,"value":"Next","pinned":false,"hidden":false,"mode":"md"}],"files":"$W31","stdlib":"1","titling":"auto"}