31:T806,## Additional Resources There are a TON of resources to help you navigate the wonderful world of Observable Plot. Today we are going for breadth over depth, including a few additional resources that have helped me along my learning journey: - [Observavble Slack Channel](https://observable-community.slack.com/ssb/redirect)- Get in touch with the Observable community online. I've used this as a forum to ask questions when I get stuck, lot of people are ready and willing to help troubleshoot. - [Observable Plot Docs](https://observablehq.com/plot/) - Examples and explanations for all things Observable Plot. Easy to search and navigate by topic. - [Plot Cheatsheets](https://observablehq.com/@observablehq/plot-cheatsheets-layouts) - Downloadable PDF cheatsheet by Mark Freeman with tips on how to use marks, scales, and transforms. Includes helpful details on adjusting layouts and styles. - [Plot from ggplot2](https://observablehq.com/@observablehq/plot-from-ggplot2) - Allison Horst brilliantly summarizes Plot through the lens of a ggplot2 user. This is a nice Rosetta Stone if you're coming from an R tidyverse background. - [Introduction to SQL](https://www.youtube.com/watch?v=5YrNBaapwIw)- Paul Buffa teaches an introductory course showing how you can leverage the power of SQL in Observable Notebooks to make data wrangling easy. - [Data wrangling in Javascript](https://www.youtube.com/watch?v=8vaEcca3iBk) - If you're interested in learning how to whip data into shape with JS, Allison Horst has a great beginner's tutorial. - [#30DayChartChallenge with Deepsha](https://observablehq.com/collection/@deepsha/30-day-chart-challenge)- Deepsha shares here Observable Plot learning journey with a collection of notebooks. NOTE: If you are new to Observable Notebooks and come from an R background - it is important to note these cells do not need to be run sequentially! Observable uses reactive programming which means you the order of the code chunks doesn't matter.32:T422,Plot.plot({ //adjust plot dimensions marginLeft: 120, height: 600, width: 700, //adjust plot labels label: null, //specific for x and y axis labels title: "Audio Feature Correlation", subtitle: "Features created by Spotify. Data for Taylor Swift songs.", caption: "Data from tayloR", //adjust plot style style: {fontFamily: "Roboto", fontSize:"12px"}, //customize x and y axis y: {tickSize:0}, x: {tickSize:0}, //customize legend, colors from color brewer color: { scheme: "PuOr", legend: true, label: "Correlation" }, //layer in marks - pass in as an array [] marks: [ //heatmap tile Plot.cell(correlations, { x: "a", y: "b", fill: "correlation" }), //text for heatmap Plot.text(correlations, { x: "a", y: "b", fontSize: 15, //map using functions to do something additional with data text: d => d.correlation.toFixed(2), // round corr values to 2nd decimal fill: d => (Math.abs(d.correlation) > 0.6 ? "white" : "black") //if then function for text color }) ] })33:T4c2,Plot.plot({ title: "Percentage of Taylor Swift Songs by Key", subtitle: "An example of how to do something more outside of the box...", label: null, width:1200, height:600, x: {ticks:false}, y: {ticks:false}, color: {scheme:"BuPu", legend:true, label: "% of Songs", tickFormat: ".0%" , height:60, width:400, tickSize: 0}, marks: [ Plot.rect(keyboard, { filter: d => d.type === 'white', x1: "pos", x2: d=> d.pos+1, fill: "white", y1:0, y2:1, stroke:"black"}), Plot.rect(keyboard, { filter: d => d.type === 'black', fill : "black", x1: "pos", x2: d=> d.pos+0.6, y1:0.4, y2:1, stroke:"black"}), Plot.dot(keyboard, { x: d => d.type === 'white'? d.pos + 0.5 : d.pos + 0.3, y: d => d.type === 'white'? 0.2 : 0.6, r: 30, stroke: d => d.type === 'white' ? 'black' : 'white', fill: d => get_songs(d.key) }), Plot.text(keyboard,{ x: d=> d.type === 'white' ? d.pos + 0.5 : d.pos + 0.3, y: d=> d.type === 'white' ? 0.2 : 0.6, fill: d=> get_songs(d.key) > 0.1 ? "white" : "black", //fill: d => d.type === 'white' ? 'black' : 'white', text: "key", fontWeight:'bold', fontSize: 24 }) ] }) 34:T471,function getColorFromScale(scale) { var colors = d3.schemeBuPu[7] // Calculate the index of the color in the color ramp based on the scale var index = Math.floor(scale * (colors.length - 1)); // Get the start and end colors from the color ramp var startColor = hexToRgb(colors[index]); var endColor = hexToRgb(colors[index + 1]); // Helper function to convert hex color to RGB function hexToRgb(hex) { var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; hex = hex.replace(shorthandRegex, function (m, r, g, b) { return r + r + g + g + b + b; }); var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); return result ? [ parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16) ] : [255, 255, 255]; // Default to white if invalid hex color } // Calculate the intermediate color based on the scale var color = startColor.map(function (channel, i) { var range = endColor[i] - channel; return Math.round(channel + range * (scale * (colors.length - 1) - index)); }); // Return the color in RGB format return "rgb(" + color.join(",") + ")"; }35:[{"id":"9cc088befcfe066e6b627023cf42d2ea282a75aeb1af4a6b8f7a82f6e579b92ac7f3ab7156b76096e22884bab34fb27d13abab1c6b75cc95a68ecfe7b0de8c68","href":"https://static.observableusercontent.com/files/9cc088befcfe066e6b627023cf42d2ea282a75aeb1af4a6b8f7a82f6e579b92ac7f3ab7156b76096e22884bab34fb27d13abab1c6b75cc95a68ecfe7b0de8c68","name":"tswift_pivoted.csv","type":"text/csv","lastModified":1699485838688.248,"size":82281},{"id":"46eb37fdd71278313c03c7907d5ce26ba5e6224e6c50024691e5f7b259a87c0b07b5869f2dcfcf23ee16669879db4f0828c5caa41bab76e3d45fe8ba5040e25e","href":"https://static.observableusercontent.com/files/46eb37fdd71278313c03c7907d5ce26ba5e6224e6c50024691e5f7b259a87c0b07b5869f2dcfcf23ee16669879db4f0828c5caa41bab76e3d45fe8ba5040e25e","name":"rladies philly.jpeg","type":"image/jpeg","lastModified":1699500647258.98,"size":34340},{"id":"89820f4deb97cc64415739b3cc781ccde6c494b4c3ebc072c0986e1a32434c4549cb8255bf7775ba62922deaa796cdbcdd4e5157707caeb14f0b41efad3d77e6","href":"https://static.observableusercontent.com/files/89820f4deb97cc64415739b3cc781ccde6c494b4c3ebc072c0986e1a32434c4549cb8255bf7775ba62922deaa796cdbcdd4e5157707caeb14f0b41efad3d77e6","name":"taylor_all_songs.csv","type":"text/csv","lastModified":1699299937698.601,"size":51040},{"id":"28171ae0c10ba79b051c36dfa98045e7661ef20b898b8de6a7817147fd52abf489462ab792dc399c18757db5772a9b20550aa73fec829b2290b7796cc0f10b2b","href":"https://static.observableusercontent.com/files/28171ae0c10ba79b051c36dfa98045e7661ef20b898b8de6a7817147fd52abf489462ab792dc399c18757db5772a9b20550aa73fec829b2290b7796cc0f10b2b","name":"big_tech_stock_prices.csv","type":"text/csv","lastModified":1699572335156.098,"size":3217735}] 2f:{"title":"Exploring Taylor Swift Songs with Observable Plot","cells":[{"id":0,"value":"# Exploring Taylor Swift Songs with Observable Plot","pinned":false,"hidden":false,"mode":"md"},{"id":798,"value":"## Overview\nThis notebook is part of a introductory level workshop to Observable Plot hosted by [R-Ladies Philly](https://www.rladiesphilly.org/). It is designed to be beginner friendly - no coding required! Together we will explore how you can work build interactive visualizations with Observable Plot. \n\nAll workshop content stored in this [GitHub repository](https://github.com/tashapiro/intro-observable). This includes [intro slides](https://tashapiro.github.io/intro-observable/presentation/intro-observable.html#/TitleSlide) and example of [Observable + Quarto](https://tashapiro.github.io/intro-observable/dashboard/dashboard.html).","pinned":false,"hidden":false,"mode":"md"},{"id":796,"value":"rladiesPhilly = FileAttachment(\"rladies philly.jpeg\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":504,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":243,"value":"# Building Plots","pinned":false,"hidden":false,"mode":"md"},{"id":245,"value":"## Plot 1: Heatmap Correlation Matrix \nFirst let's get familiar with [marks](https://observablehq.com/plot/features/marks). If you're familiar with R ggplot2, think of marks like geoms. We can layer marks together to create a composite plot.\n\nHere use Observable Plot.cell mark to create a tile effect. Then we use Plot.text to overlay to correlation values. Within each mark, we can bind properties to variables in our data, static values, or functions transforming our data variables.","pinned":false,"hidden":false,"mode":"md"},{"id":137,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"## Plot 2: Interactive Scatter Plot\nNext, let's take a look at how we can create an interactive plot with Observable. Here we're creating a scatter plot with Plot.dot and mapping the x and y attributes to different select inputs.\n\nInputs. You can use Inputs.select to create a dropdown list. Read more about Observable inputs [here](https://observablehq.com/documentation/inputs/overview). To create compound inputs, we can also wrap a bunch of inputs with Inputs.form. \n\nTooltips.. We can add a tooltip hover effect by binding the title attribute in the Plot mark to a variable in our dataset. Other options to check out: Observable recently release an interactive [pointer](https://observablehq.com/plot/interactions/pointer) transform. Mike Freeman also has [Plot Tooltip notebook](https://observablehq.com/@mkfreeman/plot-tooltip) you can import to customize tooltips.","pinned":false,"hidden":false,"mode":"md"},{"id":89,"value":"viewof filters = (\n Inputs.form({ \n selectX : Inputs.select(features, {label:\"Select X\", value:\"energy\"}),\n selectY : Inputs.select(features, {label:\"Select Y\", value:\"acousticness\"}),\n })\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"Plot.plot({\n //plot labels\n title: \"Audio Feature Cross Analysis\",\n subtitle: \"Compare different audio features from Spotify per song.\",\n caption: \"Data from Spotify\",\n //adjust x and y axis. use domain to specify lower and upper limites, remove ticks with tickSize 0\n x: {label: filters.selectX, domain: [0,1], tickSize:0},\n y: {label: filters.selectY, domain: [0,1], tickSize:0},\n //add in grid lines, defaults to false\n grid: true,\n //adjust plot size (pixels)\n width: 1200,\n height: 600,\n //marks similar to ggplot geoms\n marks: [\n Plot.ruleY([0]),\n Plot.dot(songs, {\n //bind x and y to select input dropdown\n x: filters.selectX, \n y: filters.selectY,\n //text that appears on hover\n title: \"track_name\",\n fill: \"#4a1486\",\n stroke: \"white\",\n opacity: 0.9,\n r: 10})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"## Plot 3: More Tricks\n\nFacets.Similar to ggplot2, we can [facet](https://observablehq.com/plot/features/facets) our plots on variables to create multiple plots!\n\nWe can use the fy attribute in our mark to facet by our y axis, or use fx to facet by the x axis. You can even use both if you want to see cross sections for two different variables. Here is an example of a facet showing the distribution of songs by select audio feature.\n\nFiltering. You can use a [filter transform](https://observablehq.com/plot/transforms/filter) to subset data directly in Plot. [Transforms](https://observablehq.com/plot/features/transforms) can make it easier to reshape data. In this example we bind filter to our selectAlbums variable.","pinned":false,"hidden":false,"mode":"md"},{"id":538,"value":"viewof selectAlbums = Inputs.select(albums, {label: \"Albums\", value:albums, multiple:10})","pinned":false,"hidden":false,"mode":"ojs"},{"id":400,"value":"Plot.plot({\n height: 1000,\n width:1200,\n marginLeft:120,\n label: null,\n x: {domain: [0,1]},\n style: {fontSize:\"15px\"},\n title: \"Distribution of Songs by Audio Feature\",\n subtitle: \"Audio features determined by Spotify, scaled from 0 to 1.\",\n grid:true,\n marks: [\n Plot.frame({stroke:\"grey\"}),\n Plot.dot(song_features_subset, \n Plot.dodgeY({x: \"value\", \n //apply filter transform in Plot, filter albums\n filter: t => selectAlbums.includes(t.album_name),\n //center beeswarm in the middle\n anchor:\"middle\", \n //fill color\n fill: \"#4a1486\",\n //tooltip text\n title: \"track_name\",\n r:6, \n //fy to facet on y axis. additional transform to uppercase\n fy: \"feature\"}))\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"## Bonus: We Can Even Create Tables...\n\nThis is not a part of Plot, but is actually an Observable input, Input.table. Here is an example of how we can create and stylize tables.\n\nTo learn more about formatting and customizing tables, take a look at Mike Bostock's notebook [here](https://observablehq.com/@observablehq/input-table).","pinned":false,"hidden":false,"mode":"md"},{"id":346,"value":"viewof sliders = (\n Inputs.form({ \n energy : Inputs.range([0,1], {label:\"Min Energy\", step:0.01}),\n valence : Inputs.range([0,1], {label:\"Min Valence\", step:0.01}),\n acousticness : Inputs.range([0,1], {label:\"Min Acousticness\", step:0.01, value:0})\n })\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"Inputs.table(filtered_songs, {\n //how many rows to display\n rows:18,\n //format table column names\n header: {\n album_name: \"Album Name\",\n track_name: \"Track\",\n liveness: \"Liveness\",\n energy: \"Energy\",\n acousticness: \"Acousticness\",\n valence: \"Valence\"\n },\n //adjust column width \n width: {\n track_name: 250,\n album_name: 200,\n },\n //align columns \n align: {\n liveness: \"center\",\n valence: \"center\",\n energy: \"center\", \n acousticness: \"center\"\n },\n //format with additional functions \n format: {\n liveness: x => heatmap(x,0,1),\n energy: x => heatmap(x,0,1),\n valence: x => heatmap(x,0,1),\n acousticness: x => heatmap(x,0,1)\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":648,"value":"## BONUS: Something More Artsy\n\nAn example of using Plot.rect in a more unconventional way...to build a keyboard.","pinned":false,"hidden":false,"mode":"md"},{"id":618,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":807,"value":"Custom array object with keyboard keys and positions. And a custom function to lookup the key and return songs from our data set.","pinned":false,"hidden":false,"mode":"md"},{"id":684,"value":"function get_songs(key) {\n const data = by_key.filter(d => d.key_name==key)\n\n return data[0].songs\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":629,"value":"keyboard = [\n {key:\"C\", type: \"white\", pos:1},\n {key: \"C#\", type:\"black\", pos:1.7},\n {key:\"D\", type:\"white\", pos:2},\n {key: \"D#\", type:\"black\", pos:2.7},\n {key:\"E\", type:\"white\", pos:3},\n {key:\"F\", type: \"white\", pos:4},\n {key: \"F#\", type:\"black\", pos:4.7},\n {key:\"G\", type:\"white\", pos:5},\n {key: \"G#\", type:\"black\", pos:5.7},\n {key:\"A\", type:\"white\", pos:6},\n {key: \"A#\", type:\"black\", pos:6.7},\n {key:\"B\", type:\"white\", pos:7}\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"# The Data\nWe're using csv files from [TidyTuesday's GitHub repository](https://github.com/rfordatascience/tidytuesday/tree/master/data/2023/2023-10-17<). Provided by the tayloR package.\n\nImporting Data. Use Observable's upload csv file feature to import data and preview data. Obseravble's [DuckDB](https://observablehq.com/documentation/data/databases/database-clients#duckdb) client makes it easy for us to preview data and also query data with SQL.","pinned":false,"hidden":false,"mode":"md"},{"id":809,"value":"Taylor Swift Songs","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"songs = await FileAttachment(\"taylor_all_songs.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":811,"value":"Taylor Swift Songs - Pivoted by Feature
\nLong format data set that we will use for the facetted plot example.","pinned":false,"hidden":false,"mode":"md"},{"id":426,"value":"song_features = await FileAttachment(\"tswift_pivoted.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":177,"value":"# Data Wrangling: Javascript\nWe will not cover data wrangling with JS in this workshop. I highly recommend checking out [Allison's course](https://www.youtube.com/watch?v=8vaEcca3iBk) if you want to learn more about manipulating data. For the purpose of this notebook, I've included some code blocks to help us reshape the data for plotting.","pinned":false,"hidden":false,"mode":"md"},{"id":180,"value":"Audio Feature List.. Create a list of audio features. We'll use this to subset the data and create dynamic plots later.","pinned":false,"hidden":false,"mode":"md"},{"id":86,"value":"features = [\"acousticness\",\"danceability\",\"energy\", \"speechiness\", \"instrumentalness\", \"liveness\", \"valence\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":182,"value":"Album List. Instead of typing in each album, we can get a unique list of albums from the data set using map.","pinned":false,"hidden":false,"mode":"md"},{"id":63,"value":"albums = [...new Set(songs.map(d => d.album_name))].sort()","pinned":true,"hidden":false,"mode":"ojs"},{"id":458,"value":"facet_features = ['valence','danceability','energy']","pinned":true,"hidden":false,"mode":"ojs"},{"id":823,"value":"Subsetting Rows. An example filtering data based on audio feature with our pivoted data set. This is used for our facet chart.","pinned":false,"hidden":false,"mode":"md"},{"id":448,"value":"song_features_subset = song_features.filter(d => facet_features.includes(d.feature))","pinned":true,"hidden":false,"mode":"ojs"},{"id":134,"value":"Create Correlation Matrix.. Create a new data set with correlations among different audio features. This calculation was provided by Observable HQ, thank you Fil for setting up the function for us! You can view the notebook [here](https://observablehq.com/@observablehq/plot-correlation-heatmap). We've also imported the corr function below in an import code chunk.","pinned":false,"hidden":false,"mode":"md"},{"id":131,"value":"correlations = d3.cross(features, features).map(([a, b]) => ({\n a,\n b,\n correlation: corr(Plot.valueof(songs, a), Plot.valueof(songs, b))\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":191,"value":"# Data Wrangling: SQL\nSometimes Javascript data wrangling can be a little verbose. If you're comfortable with SQL, you can also use Observable's DuckDB integration to write SQL queries and plug in Javascript variables to make them dynamic.\n\nIf you're newer to SQL and want to learn, I highly recommend checking out Paul Buffa's [Intro to SQL course](https://www.youtube.com/watch?v=5YrNBaapwIw). Paul walks you through the basics of wrangling data with SQL directly in Observable Notebooks.","pinned":false,"hidden":false,"mode":"md"},{"id":612,"value":"Query 1: Song Count by Key. Example of query using group by to aggregate song count by key.","pinned":false,"hidden":false,"mode":"md"},{"id":869,"value":"","pinned":true,"hidden":false,"mode":"sql","output":"","database":"null"},{"id":594,"value":"SELECT \n key_name\n ,count(*)/263::double as songs\n ,count(case when mode_name='major' then track_name end)/263::double as major_songs\n ,count(case when mode_name='minor' then track_name end)/263::double as minor_songs\nFROM songs\nWHERE key_mode != 'NA'\nGROUP BY 1\nORDER BY 1","pinned":true,"hidden":false,"mode":"sql","output":"by_key","database":"var:songs"},{"id":614,"value":"Query 2: Dynamic Subset. Mix in filters with Javascript variables to make queries dynamic. In the query below we are filtering songs that meet our audio feature parameters we created in our sliders form input.","pinned":false,"hidden":false,"mode":"md"},{"id":267,"value":"SELECT \n track_name\n ,album_name\n ,round(liveness,2) as liveness\n ,round(valence,2) as valence\n ,round(energy,2) as energy\n ,round(acousticness,2) as acousticness\nFROM songs\nWHERE \nvalence >= ${sliders.valence}\nand energy >= ${sliders.energy}\nand acousticness >= ${sliders.acousticness}","pinned":true,"hidden":false,"mode":"sql","output":"filtered_songs","database":"var:songs"},{"id":341,"value":"# Importing Notebooks\nIn Observable Notebook, you can [import](https://observablehq.com/@observablehq/import) functions from other notebooks using import. Here we're importing Fil's notebook to use the corr function. Thank you Fil for helping us do all the math!","pinned":false,"hidden":false,"mode":"md"},{"id":116,"value":"import {corr} from \"@observablehq/plot-correlation-heatmap\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":298,"value":"# Custom Functions (Advanced)\nWe can ignore this section for our intro part. Including to show how we can incorporate functions with tables. The functions below will help us create a heatmap effect with our table input.","pinned":false,"hidden":false,"mode":"md"},{"id":278,"value":"function heatmap(value, minValue, maxValue) {\n // Calculate the color scale based on the value's position\n var scale = (value - minValue) / (maxValue - minValue);\n var color = getColorFromScale(scale);\n\n var fontColor = value > 0.3 ? \"white\" : \"black\";\n\n // Create the output div with the scaled background color\n return htl.html`\n

\n ${value}\n

\n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"# Styling with CSS\nOptional: you can add additional CSS styling using a text/markdown cell with HTML. I used CSS to customize my notebooks - fonts, headers, etc.","pinned":false,"hidden":false,"mode":"md"},{"id":126,"value":"","pinned":true,"hidden":false,"mode":"md"},{"id":921,"value":"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}