29:null 2a:["$","title",null,{"children":"Exploratory Data Analysis on Observable | 🪦 dis-2024-fall | Observable"}] 2f:[] 2d:{"id":"7b47c65cd418333b","slug":null,"title":"Exploratory Data Analysis on Observable","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2024-09-18T19:01:54.217Z","update_time":"$D2024-09-18T20:14:59.915Z","view_time":null,"first_public_time":"$D2024-09-29T17:06:40.846Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"c9e6070fd9224ac1","login":"dis-2024-fall","name":"🪦 dis-2024-fall","avatar_url":"https://avatars-next.observableusercontent.com/71df23f8dbebe46a8246fa2cd15f75fba2173c7a9264e208f4bd503bf79212c1","tier":"pro_2024"},"version":2341,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"dfeb724a3498841e","login":"grace-colburn","name":"Grace Colburn","avatar_url":"https://avatars-next.observableusercontent.com/1b766446cfe0391e0f17d8a9b87c46562459aabf35b61e827ee52817b7c61956","tier":null}],"members":[{"type":"individual","id":"dfeb724a3498841e","login":"grace-colburn","name":"Grace Colburn","avatar_url":"https://avatars-next.observableusercontent.com/1b766446cfe0391e0f17d8a9b87c46562459aabf35b61e827ee52817b7c61956","tier":null,"role":"editor"},{"type":"team","id":"c9e6070fd9224ac1","login":"dis-2024-fall","name":"🪦 dis-2024-fall","avatar_url":"https://avatars-next.observableusercontent.com/71df23f8dbebe46a8246fa2cd15f75fba2173c7a9264e208f4bd503bf79212c1","tier":"pro_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Exploratory Data Analysis on Observable","cells":[{"id":0,"value":"# Exploratory Data Analysis on Observable\n## Workshop: Feb. 23, 2022","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":986,"value":"This workshop introduces a browser-based data analysis workflow on Observable using [Observable Plot](https://observablehq.com/@observablehq/plot?collection=@observablehq/plot). It covers loading, visualizing, and interacting with data. \n\nEach prompt in the workshop has a corresponding ***Show me*** cell containing the code and expected results:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1018,"value":"showMe(`Plot.dot(sampleData, { x: \"x\", y: \"y\" }).plot({ height: 200 })`, {\n open: true,\n dependencies: { sampleData }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1003,"value":"toc({headers:\"h2\", skip:\"Workshop: Feb. 23, 2022\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"## Loading data\nWe have prepared a database that we can connect to using Observable's [SQL cells](https://observablehq.com/@observablehq/sql-cells). We will explore the [eCommerce Demo Data](https://observablehq.com/@observablehq/ecommerce-analytics-demo-data) and attempt to understand the revenue over time from the various products in the database.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"import { db } from \"@observablehq/ecommerce-analytics-demo-data\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":599,"value":"We have three tables in the database, which we can see using the `db.describe()` function.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":541,"value":"// Describe the tables in the database\ndb.describe()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":557,"value":"Let's look at the `items` table:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":23,"value":"select * from events\nlimit 5","pinned":true,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","output":"","database":"var:db"},{"id":546,"value":"Now let's describe the `events` table by passing the string `'events'` to the `db.describe()` function:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":550,"value":"// type your code here\ndb.describe('events')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2320,"value":"db.describe('events')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":543,"value":"showMe(\"db.describe('events')\", { dependencies: { db }})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1333,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"In the SQL cell below, write a query that selects all purchases from the `events` table (where `type = 'purchase'`)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":30,"value":"-- type your SQL code here\nselect * from events where type = 'purchase'","pinned":true,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","output":"","database":"var:db"},{"id":2325,"value":"select DISTINCT type from events","pinned":true,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","output":"","database":"var:db"},{"id":2186,"value":"select DISTINCT type from events","pinned":true,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","output":"","database":"var:db"},{"id":535,"value":"showMe(`select * from events where type = 'purchase'`, { evaluate: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1338,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":39,"value":"To compute revenue by item, we'll need to join the two tables:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":42,"value":"select * from events \njoin items on events.item_id = items.id \nwhere type = 'purchase' \nLIMIT 5","pinned":true,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","output":"purchases","database":"var:db"},{"id":47,"value":"To understand the popularity and revenue of our items, we will want to join the two tables and group on the name.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":50,"value":"select name, category, brand,\n count(*)::int as count, \n sum(price_in_usd)::int as revenue\nfrom events \njoin items on events.item_id = items.id\nwhere type = 'purchase'\ngroup by name, category, brand\norder by revenue desc","pinned":true,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","output":"items","database":"var:db"},{"id":2141,"value":"// type your code here\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1342,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1659,"value":"## Searching data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1100,"value":"To view the entire dataset, pass the `items` variable to the `Inputs.table` function. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2193,"value":"viewof table = Inputs.table(items, {})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1104,"value":"showMe(`Inputs.table(items)`, { dependencies: { items } })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1349,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2121,"value":"For a summary of the dataset, you can import and use the `SummaryTable` function:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2125,"value":"import {SummaryTable} from \"@observablehq/summary-table\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2137,"value":"Pass the `items` data to the `SummaryTable` function:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2148,"value":"showMe(`SummaryTable(items)`, { dependencies: { items, SummaryTable } })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2331,"value":"","pinned":true,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","output":"","database":"null"},{"id":2195,"value":"SummaryTable(items)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2175,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1115,"value":"If you want to search through the `items`, pass the results from the `Inputs.search` cell below to the `Inputs.table` function (this leverages the concept of [Views](https://observablehq.com/@observablehq/introduction-to-views)):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1121,"value":"// Store the results of a search in a cell called `search`\nviewof search = Inputs.search(items)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2197,"value":"search","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2200,"value":"SummaryTable(search)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1680,"value":"// type your code here\nInputs.table(search)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1126,"value":"showMe(`Inputs.table(search)`, { dependencies: { search } })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1354,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":683,"value":"## Visualizing data\nThe [Observable Plot](https://observablehq.com/collection/@observablehq/plot) library enables rapid data exploration through simple configuration. Here, we'll use it to explore different relationships in our data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":806,"value":"### Revenue v.s. sales","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":65,"value":"To quickly create a scatterplot comparing `count` and `revenue` in `items`, click on the ${getSnippet()} menu on the right and select the scatterplot icon${getScatter()}, replacing the default placeholder code with your own variables of interest","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":373,"value":"// type your code here\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2203,"value":"Plot.plot({\n marginLeft:100,\n marks: [\n Plot.dot(items, {x: \"count\", y: \"revenue\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":665,"value":"showMe(`Plot.plot({\n marks: [\n Plot.dot(items, {\n x: \"count\",\n y: \"revenue\"\n })\n ]\n})`, { dependencies: { items } })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1359,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":710,"value":"A static scatterplot is nice for getting a sense of the relationship between two variables, but wouldn't it be even nicer to see what the items are? With Plot we aren't restricted to chart types, we focus more on using different [Marks](https://observablehq.com/@observablehq/plot-marks?collection=@observablehq/plot).\n\nLet's switch the [dot mark](https://observablehq.com/@observablehq/plot-dot?collection=@observablehq/plot) to a [text mark](https://observablehq.com/@observablehq/plot-text?collection=@observablehq/plot), and specify a `text` channel for each mark:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":375,"value":"// type your code here\nPlot.plot({\n marginLeft: 100,\n marks: [\n Plot.text(items, {\n x: \"count\",\n y: \"revenue\",\n text: \"name\",\n textAnchor: \"end\",\n dx: -5,\n fill: \"category\",\n fontSize: (d) => d.count / 15,\n filter: d=> d.revenue>limit ,\n }),\n Plot.dot(items, { x: \"count\", y: \"revenue\", fill: \"category\"})\n ],\n color: {\n legend: true, \n columns: \"100px\"\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":707,"value":"showMe(`Plot.plot({\n marks: [\n Plot.text(items, {\n x: \"count\",\n y: \"revenue\",\n text: \"name\"\n })\n ]\n})`, { dependencies: { items } })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1366,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":724,"value":"Let's go a bit further and combine the dot and text marks to label our scatterplot. We can also incorporate color by encoding the category to the fill color for the marks:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":756,"value":"// type your code here\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":728,"value":"showMe(`Plot.plot({\n marks: [\n Plot.dot(items, {\n x: \"count\",\n y: \"revenue\",\n fill: \"category\"\n }),\n Plot.text(items, {\n x: \"count\",\n y: \"revenue\",\n text: \"name\",\n fill: \"category\",\n textAnchor: \"end\",\n dx: -10\n })\n ]\n})`, { dependencies: { items } })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1371,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":753,"value":"To reduce overcrowding we can add a `filter` to the text mark, only showing labels above a certain revenue threshold. You can write a filter as a short JavaScript function:\n\n```js\n// A function that returns true if the revenue property is above 7000\nfilter: d => d.revenue > 7000\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":354,"value":"// type your code here\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":749,"value":"showMe(`Plot.plot({\n marks: [\n Plot.dot(items, {\n x: \"count\",\n y: \"revenue\",\n fill: \"category\"\n }),\n Plot.text(items, {\n x: \"count\",\n y: \"revenue\",\n text: \"name\",\n fill: \"category\",\n textAnchor: \"end\",\n dx: -10,\n filter: d => d.revenue > 7000\n })\n ]\n})`, { dependencies: { items } })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1376,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1010,"value":"## Interactive visualization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":69,"value":"Now let's introduce interaction: rather than setting a static cutoff price for the labels, we can tie that value to an [Input](https://observablehq.com/@observablehq/inputs). Using the same snippet menu${getSnippet()}, insert a range slider: ${getRange()}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":399,"value":"// type your code here\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2232,"value":"limit","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2226,"value":"viewof limit = Inputs.range([0, 14000], {\n value: 7000,\n label: \"Minimum Label\",\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2233,"value":"// type your code here\nPlot.plot({\n marginLeft: 100,\n marks: [\n Plot.ruleY([limit]),\n Plot.text(items, {\n x: \"count\",\n y: \"revenue\",\n text: \"name\",\n textAnchor: \"end\",\n dx: -5,\n fill: \"category\",\n fontSize: (d) => d.count / 15,\n filter: d=> d.revenue>limit ,\n }),\n Plot.dot(items, { x: \"count\", y: \"revenue\", fill: \"category\"})\n ],\n color: {\n legend: true, \n columns: \"100px\"\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":758,"value":"showMe(`viewof filterLimit = Inputs.range([0, 13000], {step: 1})`, { evaluate: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1381,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":799,"value":"Now let's make our previous plot dependent on the `filterLimit`, and add an extra [Rule Mark](https://observablehq.com/@observablehq/plot-rule?collection=@observablehq/plot) to annotate where the limit is.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":327,"value":"// type your code here\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":780,"value":"showMe(`Plot.plot({\n marks: [\n Plot.ruleY([filterLimit]),\n Plot.dot(items, {\n x: \"count\",\n y: \"revenue\",\n fill: \"category\",\n text: \"name\"\n }),\n Plot.text(items, {\n filter: (d) => d.revenue > filterLimit,\n x: \"count\",\n y: \"revenue\",\n fill: \"category\",\n text: \"name\",\n dx: -10,\n textAnchor: \"end\"\n })\n ]\n})`, { dependencies: { items, filterLimit: 7000 }})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1391,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":801,"value":"### Revenue by item","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":818,"value":"Create a bar chart showing the revenue for the top 10 items. To create this, you can select a Top 10 Chart ${getTop10()} from the ${getSnippet()} menu:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2244,"value":"viewof numItems = Inputs.range([10, 100], {step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2240,"value":"Plot.plot({\n marginLeft:250,\n marks: [\n Plot.barX(items, {x: \"revenue\", y: \"name\", sort: {y: \"x\", reverse: true, limit: numItems}})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":828,"value":"// type your code here\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":822,"value":"showMe(\n `Plot.plot({\n marks: [\n Plot.barX(items, {\n x: \"revenue\", y: \"name\", \n sort: { y: \"x\", reverse: true, limit: 20 }\n })\n ],\n marginLeft: 250\n})`,\n { dependencies: { items } }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1396,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1195,"value":"To add some interactivity, create an `Inputs.text()` element, change the `fill` for any item that matches the inputted text . For example:\n\n```js\n// Define `highlight` as a viewof an `Inputs.text` element in a separate cell\nfill: d => d.name.includes(highlight)\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2335,"value":"viewof highlight = Inputs.text({label: \"Search in chart\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2256,"value":"Plot.plot({\n marginLeft: 250,\n color:{\n legend:true,\n },\n marks: [\n Plot.barX(items, {\n x: \"revenue\",\n y: \"name\",\n fillOpacity: d => d.name.includes(highlight) ? 1 : .4,\n fill: \"brand\",\n sort: { y: \"x\", reverse: true, limit: numItems }\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1402,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1209,"value":"showMe(\n `Plot.plot({\n marks: [\n Plot.barX(\n items,\n {\n y: \"name\",\n x: \"revenue\",\n fill: (d) => d.name.includes(highlight),\n sort: { y: \"x\", reverse: true, limit: 10 }\n }\n )\n ],\n marginLeft: 250\n})`,\n { dependencies: {items, highlight: \"Black\" }}\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1408,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":834,"value":"Alternatively, you could set the `fill` by brand and include a legend by setting:\n\n```js\n// Include a legend for the color channel\ncolor: { legend: true }\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":80,"value":"// type your code here\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":842,"value":"showMe(\n `Plot.plot({\n marks: [\n Plot.barX(items, {\n x: \"revenue\", y: \"name\", fill: \"brand\", \n sort: { y: \"x\", reverse: true, limit: 20 }\n })\n ],\n color: { legend: true },\n marginLeft: 250\n})`,\n { dependencies: { items } }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1697,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":910,"value":"### Revenue by category","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":918,"value":"To perform a similar analysis by category, copy your first bar chart from above and replace the `{x: \"name\"}` with `{x: \"category\"}` — *note how the values stack by default*.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":928,"value":"showMe(`Plot.plot({\n marks: [\n Plot.barX(items, {\n x: \"revenue\",\n y: \"category\",\n fill: \"category\",\n sort: { y: \"x\", reverse: true, limit: 20 }\n })\n ],\n marginLeft: 150\n})`, { dependencies: { items }})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1330,"value":"// type your code here\nPlot.plot({\n marginLeft: 250,\n color:{\n legend:true,\n },\n marks: [\n Plot.barX(items, {\n x: \"revenue\",\n y: \"category\",\n order: \"brand\",\n fillOpacity: d => d.name.includes(highlight) ? 1 : .4,\n fill: \"brand\",\n sort: { y: \"x\", reverse: true, limit: numItems }\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1663,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1320,"value":"To make this chart interactive, add a `filter` statement to only include selected `brands` ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1309,"value":"// Get the unique list of brands in the dataset for the checkboxes below\nbrandOptions = new Set(items.map(d => d.brand))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1308,"value":"viewof brands = Inputs.checkbox(brandOptions, { value: brandOptions, label: \"Brands to include:\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"// type your code here\n// type your code here\nPlot.plot({\n marginLeft: 250,\n color:{\n legend:true,\n },\n marks: [\n Plot.barX(items, {\n x: \"revenue\",\n filter: d => brands.includes(d.brand),\n y: \"category\",\n order: \"brand\",\n fillOpacity: d => d.name.includes(highlight) ? 1 : .4,\n fill: \"brand\",\n sort: { y: \"x\", reverse: true, limit: numItems }\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1667,"value":"showMe(\n `Plot.plot({\n marks: [\n Plot.barX(items, {\n x: \"revenue\",\n y: \"category\",\n fill: \"brand\",\n order: \"brand\",\n filter: d => brands.includes(d.brand),\n sort: { y: \"x\", reverse: true, limit: 20 }\n })\n ],\n marginLeft: 150\n})`,\n { dependencies: { items, brands } }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1704,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":150,"value":"So it looks like Apparel is far and away the biggest generator of revenue. How much of the total revenue does it account for? To answer this question, use an _accessor_ function to set the `y` attribute, grouping together all Apparel items v.s. everything else. Tip: a [ternary operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) is a concise way to achieve this.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":169,"value":"// type your code here\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":917,"value":"showMe(`Plot.plot({\n marks: [\n Plot.barX(items, {\n x: \"revenue\",\n y: d => d.category == \"Apparel\" ? \"Apparel\" : \"Other\",\n fill: \"category\",\n order: \"category\",\n sort: { y: \"x\", reverse: true, limit: 21 }\n })\n ],\n marginLeft: 50\n})`, { dependencies: { items }})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1709,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1721,"value":"## Visual computations\nA major strength of the Plot library it that it enables data transformations _in the plotting code_. Using [Transforms](https://observablehq.com/@observablehq/plot-transforms?collection=@observablehq/plot), you can aggregate and augment your data at the moment you use it. Because they are so powerful and flexible, it takes a few minutes to get familiar with the syntax: see this [cheatsheet](https://observablehq.com/@observablehq/plot-cheatsheets-transforms?collection=@observablehq/plot-cheatsheets) as a helpful guide.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1751,"value":"```js\n// Draw vertical bars\nPlot.barY(\n data,\n // Group data into categories along the x axis\n Plot.groupX(\n { y: \"count\" }, // compute + display the count of observations in each group\n { x: \"brand\" } // group observations by the `brand`\n )\n)\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1725,"value":"**What is the average revenue by brand?**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1758,"value":"Compute and display a horizontal bar chart of mean revenue by brand","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1762,"value":"// type your code here\nPlot.barY(\n items,\n // Group data into categories along the x axis\n Plot.groupX(\n { y: \"mean\" }, // compute + display the count of observations in each group\n { x: \"brand\", y: \"revenue\"} // group observations by the `brand`\n )\n).plot()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1766,"value":"showMe(\n `Plot.plot({\n marks: [\n Plot.barX(\n items,\n Plot.groupY(\n { x: \"mean\"},\n { x: \"revenue\", y: \"brand\", sort: { y: \"x\", reverse: true } }\n )\n )\n ],\n marginLeft: 100\n})`,\n { dependencies: { items } }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1780,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1784,"value":"What if you aren't just interested in the `mean` by brand, but other summary statistics (e.g., the `min`, `sum`, `max`...)? First, you can create an input using `Inputs.radio`: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1791,"value":"Then, copy and paste the chart from above and replace the `\"mean\"` in the code with the value `reducer`. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1740,"value":"viewof reducer = Inputs.radio([\"mean\", \"min\", \"max\", \"deviation\", \"sum\"], {\n value: \"mean\", \n label: \"Summary statistic (reducer):\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1793,"value":"// type your code here\n// type your code here\nPlot.barY(\n items,\n // Group data into categories along the x axis\n Plot.groupX(\n { y: reducer }, // compute + display the count of observations in each group\n { x: \"brand\", y: \"revenue\"} // group observations by the `brand`\n )\n).plot()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1730,"value":"showMe(\n `Plot.plot({\n marks: [\n Plot.barX(\n items,\n Plot.groupY(\n { x: reducer },\n { x: \"revenue\", y: \"brand\", sort: { y: \"x\", reverse: true } }\n )\n )\n ],\n marginLeft: 100\n})`,\n { dependencies: { items, reducer } }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1806,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1977,"value":"### Moving average of sales\nSales data can be noisy — let's compute a 7 day moving average of sales by brand. First, we can make another query from the database to get the revenue by brand each day:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1989,"value":"select brand, date_trunc('day', date) as day, SUM(price_in_usd)::INT as revenue from events \n left join items on events.item_id = items.id\n where type = 'purchase'\n group by brand, day","pinned":true,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","output":"byDay","database":"var:db"},{"id":2034,"value":"Then, to make a line chart of the 7-day moving average revenue by brand, make a `Plot.line` mark where `Plot.windowY` computes a moving average (see an example [here](https://observablehq.com/@observablehq/plot-cheatsheets-transforms?collection=@observablehq/plot-cheatsheets#cell-1291)).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2300,"value":"viewof windowSize = Inputs.range([1, 20], {value:7, step:1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2038,"value":"// type your code here\nPlot.plot({\n marks: [\n Plot.line(\n byDay,\n Plot.windowY(\n { y: \"mean\", k: windowSize },\n { x: \"day\", y: \"revenue\", stroke: \"brand\" }\n )\n ),\n Plot.dot(\n byDay,\n Plot.windowY(\n { y: \"mean\", k: windowSize },\n { x: \"day\", y: \"revenue\", stroke: \"brand\" }\n )\n ),\n Plot.text(\n byDay,\n Plot.selectMaxY(\n Plot.windowY(\n { y: \"mean\", k: windowSize },\n { x: \"day\", y: \"revenue\", fill: \"brand\", text: d => d3.utcFormat(\"%a, %b %d\")(d.day), dy: -10 }\n )\n )\n )\n ],\n color: {\n legend: true\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2027,"value":"showMe(`Plot.plot({\n marks: [\n Plot.line(\n byDay,\n Plot.windowY(\n { y: \"mean\", k: 7 },\n { x: \"day\", y: \"revenue\", stroke: \"brand\" }\n )\n )\n ]\n})`, {dependencies: {byDay}})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2056,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2060,"value":"Let's say that a 7 day moving average isn't the appropriate granularity: we can easily replace the `k` parameter from the example above with a reference to this Input value.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2064,"value":"viewof k = Inputs.range([1, 30], {\n label: \"Number of days for moving average (K)\",\n value: 7,\n step: 1\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2072,"value":"// type your code here","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2080,"value":"showMe(\n `Plot.plot({\n marks: [\n Plot.line(\n byDay,\n Plot.windowY(\n { y: \"mean\", k },\n { x: \"day\", y: \"revenue\", stroke: \"brand\" }\n )\n )\n ]\n})`,\n { dependencies: { byDay, k } }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2085,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":896,"value":"## A taste of D3\nWe can also use the new updated [D3 Charts](https://observablehq.com/@d3/charts) examples:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":219,"value":"import { Treemap } from \"@d3/treemap\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"tree = Treemap(items, {\n path: (d) => d.category + \"/\" + d.name,\n value: (d) => d?.revenue, // size of each node\n group: (d) => d.category, // for color\n label: (d, n) => d.name + \"\\n\" + numformat(d.revenue) + \"\\n \" + d.category,\n width: width,\n height: 700\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"numformat = d3.format(\",d\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"---\n## Appendix\nWe use [DuckDB](https://observablehq.com/@cmudig/duckdb) to provide a client-side SQL database. See [DuckDB's SQL documentation](https://duckdb.org/docs/sql/introduction).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":527,"value":"import {showMe} from \"@observablehq/show-me\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":997,"value":"import {toc} from \"@nebrius/indented-toc\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1024,"value":"sampleData = d3.range(100).map(d => ({x: Math.random(), y: Math.random()}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2104,"value":"### Icons","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":699,"value":"getSnippet = () => svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1161,"value":"getTop10 = () => svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":713,"value":"getScatter = () => svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":727,"value":"getRange = () =>\n svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2e:"$2d:body"