31:T458,

Microsoft Reactor Hackathon

July 22, 2022 • New York City

Introducing Observable, from [@pstuffa](https://observablehq.com/@pstuffa) and [@wiederkehra](https://observablehq.com/@wiederkehra)
Find our presentation [here](https://docs.google.com/presentation/d/1f1OzYK0c56p3JyoDGLTPW58E2UoDmxQlowrjveNdb4Q/edit?usp=sharing) or peep [here](https://observablehq.com/product?utm_medium=event&utm_campaign=msft_hack&utm_source=partner_event) to learn more about Observable Illustrations by [Virginia Poltrack](https://observablehq.com/@virginiapoltrack)
ObservableIsBuiltForExploringAndSharingInsights!
32:[{"id":"7307489185a31abd9f7b5fdb09a979791db53ae15b45b55d61b5287c61f23333f4d684692fed03205a346b2df26003bdeed00a0bbcbcb50ad9bdcad2dc97bcc8","href":"https://static.observableusercontent.com/files/7307489185a31abd9f7b5fdb09a979791db53ae15b45b55d61b5287c61f23333f4d684692fed03205a346b2df26003bdeed00a0bbcbcb50ad9bdcad2dc97bcc8","name":"datasets.png","type":"image/png","lastModified":1658354847985.436,"size":35690},{"id":"3c91f80c1fbe68f8996e8bb7c9a1509b0e97285dfebc45745b93172adee2892d50565bf1e25083329f62b5b480ed51da50f930732461817b9f53257ea10c9817","href":"https://static.observableusercontent.com/files/3c91f80c1fbe68f8996e8bb7c9a1509b0e97285dfebc45745b93172adee2892d50565bf1e25083329f62b5b480ed51da50f930732461817b9f53257ea10c9817","name":"Map_v2.png","type":"image/png","lastModified":1658353897203.681,"size":153912},{"id":"d89f9f167acff1ce9d40a58ee3bb05f65a72a6c24d849707071f80f1f2c41993783d16a80a392fae6478e537b1d406bed6c528b3d71f83b95d17caf0f0925bc4","href":"https://static.observableusercontent.com/files/d89f9f167acff1ce9d40a58ee3bb05f65a72a6c24d849707071f80f1f2c41993783d16a80a392fae6478e537b1d406bed6c528b3d71f83b95d17caf0f0925bc4","name":"together.png","type":"image/png","lastModified":1658372209539.564,"size":80636},{"id":"bcb8a4656fd0fd39827f5c721e7e960ba0c83f755f4ab82647d601953ba8da08ab7348f3ab879b6316d49b7c3bd560c656a374c8ef7c35fa8f51cb669e16af6e","href":"https://static.observableusercontent.com/files/bcb8a4656fd0fd39827f5c721e7e960ba0c83f755f4ab82647d601953ba8da08ab7348f3ab879b6316d49b7c3bd560c656a374c8ef7c35fa8f51cb669e16af6e","name":"MetroCard@1.png","type":"image/png","lastModified":1658426622931.764,"size":189302},{"id":"3868f66607c41e3a44b448dab107ff8932b834483942092049bdb72514bf36c495bf677720834485e089ebd89761122861ff6b0368be5bb6ad6b2804b58ec1c3","href":"https://static.observableusercontent.com/files/3868f66607c41e3a44b448dab107ff8932b834483942092049bdb72514bf36c495bf677720834485e089ebd89761122861ff6b0368be5bb6ad6b2804b58ec1c3","name":"OysterCard.png","type":"image/png","lastModified":1658427424112.177,"size":172480},{"id":"9c3abc417de2b58466dc1bfb2e39e537b55336363c40d9ba37dfd3d87afc3236f5cf14fd3d06dab07ce76a0aa2133fad4477dac04f5f400efed2997ce0d32338","href":"https://static.observableusercontent.com/files/9c3abc417de2b58466dc1bfb2e39e537b55336363c40d9ba37dfd3d87afc3236f5cf14fd3d06dab07ce76a0aa2133fad4477dac04f5f400efed2997ce0d32338","name":"London.png","type":"image/png","lastModified":1658427270096.705,"size":145006},{"id":"79c76a1ec61a6a0bcf436704b67b8337ed0aeaab0851c8c3513d9f04ea1c03a2d8c1118fb569f8b7c6607e87e016765a0ba04c03898e27a432328059ea6c6c54","href":"https://static.observableusercontent.com/files/79c76a1ec61a6a0bcf436704b67b8337ed0aeaab0851c8c3513d9f04ea1c03a2d8c1118fb569f8b7c6607e87e016765a0ba04c03898e27a432328059ea6c6c54","name":"subway@2.png","type":"image/png","lastModified":1658427185207.06,"size":254861},{"id":"75572c6d6197bd9f4fc12325a82e1f4fcab38d25321671a2fae69dd9c7e563227d250060d6e04b95e9e8638d1694d14a326f39fc85635f6e3ea519be3dc6ea1d","href":"https://static.observableusercontent.com/files/75572c6d6197bd9f4fc12325a82e1f4fcab38d25321671a2fae69dd9c7e563227d250060d6e04b95e9e8638d1694d14a326f39fc85635f6e3ea519be3dc6ea1d","name":"MTA_Daily_Ridership_Data__Beginning_2020.csv","type":"text/csv","lastModified":1658256408842.922,"size":73659},{"id":"d2306ae4d5a109a6fed17fce37729eba3aa56a0f320112bad03e14bf49617093a901e84dfabd0555301f34ef3dcc246e07540f13432023cb2e2a6128b2304700","href":"https://static.observableusercontent.com/files/d2306ae4d5a109a6fed17fce37729eba3aa56a0f320112bad03e14bf49617093a901e84dfabd0555301f34ef3dcc246e07540f13432023cb2e2a6128b2304700","name":"google_activity_by_London_Borough.csv","type":"text/csv","lastModified":1658318772142.255,"size":1559357}] 2f:{"title":"Microsoft Reactor Hackathon","cells":[{"id":693,"value":"
Microsoft Reactor Hackathon","pinned":false,"hidden":false,"mode":"md"},{"id":687,"value":"
\n \n\n
","pinned":false,"hidden":false,"mode":"html"},{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":706,"value":"**Welcome!** \n
We built out this notebook to give you a little glimpse in how you can use Observable for analyzing and visualizing your data. Sharing and collaboration on the platform is frictionless – perfect for a hackathon 🚀","pinned":false,"hidden":false,"mode":"md"},{"id":557,"value":"
\n \n
","pinned":false,"hidden":false,"mode":"html"},{"id":5,"value":"
Adding Your Data
\n
\n
There are several ways to bring data into Observable, depending on your workflow! Let's look at how we can do it with our MTA ridership data.\n
ObservableIsBuiltForExploringAndSharingInsights!
","pinned":false,"hidden":false,"mode":"md"},{"id":305,"value":"
Loading New York data
\n","pinned":false,"hidden":false,"mode":"md"},{"id":300,"value":"We're using the MTA Daily Ridership data in the examples below. You can download it [here](https://data.ny.gov/Transportation/MTA-Daily-Ridership-Data-Beginning-2020/vxuj-8kew). Next, you want to get it into the notebook, which you can do in several ways. Three of those ways are: \n- **From Excel**: You can connect directly to an online Excel file in your Microsoft Teams account. Neat, because the data in the notebook will update when the original file does! \n- **Attaching the downloaded file**:","pinned":false,"hidden":false,"mode":"md"},{"id":21,"value":"mtaDailyRidership = FileAttachment(\"MTA_Daily_Ridership_Data__Beginning_2020.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":130,"value":"
Manipulating the data
","pinned":false,"hidden":false,"mode":"md"},{"id":147,"value":"import {DuckDBClient} from \"@cmudig/duckdb\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"database = DuckDBClient.of({ mtaDailyRidership })","pinned":true,"hidden":false,"mode":"ojs"},{"id":938,"value":"Just pop your data into a Data Table Cell:","pinned":false,"hidden":false,"mode":"html"},{"id":466,"value":"inspectTable = database","pinned":true,"hidden":false,"mode":"ojs"},{"id":936,"value":"Or try a SQL Cell!","pinned":false,"hidden":false,"mode":"html"},{"id":157,"value":"SELECT make_date(array_slice(\"Date\", 7, 11)::int, \n array_slice(\"Date\", 0, 2)::int, \n array_slice(\"Date\", 4, 5)::int)\tas \"Date\"\n , array_slice(\"Date\", 4, 5) as \"Day\"\n , array_slice(\"Date\", 0, 2) as \"Month\"\n , array_slice(\"Date\", 7, 11) as \"Year\"\n , \"Subways: Total Estimated Ridership\" as metric\n FROM mtaDailyRidership","pinned":true,"hidden":false,"mode":"sql","output":"mtaRidershipDB","database":"var:database"},{"id":682,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":527,"value":"
\n \n
","pinned":false,"hidden":false,"mode":"html"},{"id":40,"value":"
Visualizing Your Data
\n
\n
Now that your data is in and you've got ideas, let's look at how we can harness the Plot API to dig into ridership since the beginning of 2020.\n
ObservableHelpsYouExploreAnalyzeAndVisualizeDataInNotebooks!
","pinned":false,"hidden":false,"mode":"md"},{"id":562,"value":"
MTA ridership still hasn't returned to pre-pandemic levels
\nEstimated ridership, 2020-July 2022","pinned":false,"hidden":false,"mode":"md"},{"id":167,"value":"Plot.plot({\n width,\n y: {\n type: 'linear'\n },\n marks: [\n Plot.ruleY([0]),\n Plot.lineY(mtaRidershipDB, {x: \"Date\", y: \"metric\", stroke: \"blue\"})\n ],\n marginLeft: 60,\n height: 500\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"### Moving Averages and Inter-Quartile Ranges (IQR)\n\nYou can use Plot to run moving averages on your data and quickly visualization. If you want to work with the raw data, you can write custom functions to add any metric.","pinned":false,"hidden":false,"mode":"md"},{"id":487,"value":"#### Moving Average with Plot\n\nCreating a moving average with Plot is easy with [window functions](https://observablehq.com/@observablehq/plot-window). Simply add the window function to whatever Plot mark you're using (here, a Plot.lineY), and specify the moving average amount (here, in days) as the k value. movingAvgN refers to the value of the slider that's below.\n\n```js\n Plot.windowY({x: \"Date\", y: \"metric\", k: movingAvgN, reduce: \"mean\", stroke: 'blue'})\n```","pinned":false,"hidden":false,"mode":"md"},{"id":174,"value":"viewof movingAvgN = Inputs.range([1, 100], {label: \"N for Moving Average\", step: 1, value: 7})","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"Plot.plot({\n width,\n y: {\n type: 'linear'\n },\n marks: [\n Plot.ruleY([0]),\n Plot.lineY(mtaRidershipDB, {x: \"Date\", y: \"metric\", stroke: '#ccc', strokeWidth: .75}),\n Plot.lineY(mtaRidershipDB, Plot.windowY({x: \"Date\", y: \"metric\", k: movingAvgN, reduce: \"mean\", stroke: '#4B74D5'}))\n ],\n marginLeft: 100\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":503,"value":"#### Inter-Quartile Range with Plot","pinned":false,"hidden":false,"mode":"md"},{"id":197,"value":"viewof movingAvgNForIQR = Inputs.range([1, 100], {label: \"N for Moving Average\", step: 1, value: 14})","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"Plot.plot({\n width,\n y: {\n type: 'linear'\n },\n marks: [\n Plot.ruleY([0]),\n \n Plot.areaY(\n mtaRidershipDB,\n Plot.map(\n {\n y1: Plot.window({ k: movingAvgNForIQR, reduce: 'min' }),\n y2: Plot.window({ k: movingAvgNForIQR, reduce: 'max' })\n },\n {\n x: \"Date\",\n y: \"metric\",\n fill: \"#ccc\",\n fillOpacity: .25\n }\n )\n ),\n \n Plot.areaY(\n mtaRidershipDB,\n Plot.map(\n {\n y1: Plot.window({ k: movingAvgNForIQR, reduce: 'p25' }),\n y2: Plot.window({ k: movingAvgNForIQR, reduce: 'p75' })\n },\n {\n x: \"Date\",\n y: \"metric\",\n curve: \"basis\",\n fill: \"#4B74D5\",\n fillOpacity: .25\n }\n )\n ),\n \n Plot.lineY(mtaRidershipDB, Plot.windowY({\n x: \"Date\", \n y: \"metric\", \n k: movingAvgNForIQR, \n reduce: \"mean\"\n }))\n ],\n marginLeft: 100\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":667,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":717,"value":"
\n \n
","pinned":false,"hidden":false,"mode":"html"},{"id":623,"value":"
Building Your Metrics
\n
\n
You can add custom metrics to your dataset, which can then be used for any analysis or visualization within any platform (like PowerBI!)\n
ObservableIsGreatForCollaboratingOnDataAnalysisProjects!
","pinned":false,"hidden":false,"mode":"md"},{"id":205,"value":"function movingIQR(values, N) {\n const means = new Array(values.length).fill(NaN);\n let i = 0;\n for (let n = values.length; i < n; ++i) {\n // Filter values for just those that compute the moving average\n // This includes filter those below the N threshold, which happens at the beginning and end of the dataset.\n if(i >= N - 1) {\n const meanObject = {};\n // Then we run the mean of values that fall within the range \n meanObject.avg = d3.mean(values.filter((e, f) => f > (i - N) && f <= i))\n meanObject.min = d3.min(values.filter((e, f) => f > (i - N) && f <= i))\n meanObject.max = d3.max(values.filter((e, f) => f > (i - N) && f <= i))\n meanObject.first = d3.quantile(values.filter((e, f) => f > (i - N) && f <= i), .25)\n meanObject.third = d3.quantile(values.filter((e, f) => f > (i - N) && f <= i), .75)\n\n means[i] = meanObject\n }\n }\n return means;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":207,"value":"function movingAverage(values, N) {\n let i = 0;\n let sum = 0;\n const means = new Float64Array(values.length).fill(NaN);\n for (let n = Math.min(N - 1, values.length); i < n; ++i) {\n sum += values[i];\n }\n for (let n = values.length; i < n; ++i) {\n sum += values[i];\n means[i] = sum / N;\n sum -= values[i - N + 1];\n }\n return means;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":209,"value":"subwayRidershipValues = mtaRidershipDB.map(d => +d[\"Subways: Total Estimated Ridership\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":215,"value":"movingAverages = movingAverage(subwayRidershipValues, 20)","pinned":true,"hidden":false,"mode":"ojs"},{"id":217,"value":"movingIQRs = movingIQR(subwayRidershipValues, 20)","pinned":true,"hidden":false,"mode":"ojs"},{"id":213,"value":"enhancedMTA = mtaDailyRidership.map((d,i) => {\n return {\n ...d,\n movingAvg: movingAverages[i],\n movingIQR: movingIQRs[i]\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":255,"value":"---\n## Seasonality Index\n\nWhile this typically applies to months or quarter, we could apply this for day of week to better filter out the weekday vs weekend noise. For this, we'll want to create an index for each day of the week, and use that to adjust our results. ","pinned":false,"hidden":false,"mode":"md"},{"id":258,"value":"formatDayOfWeek = d3.timeFormat('%A')","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"days = Array.from(new Set(mtaRidershipDB.map(d => d.Date).sort(d3.ascending).map(d => formatDayOfWeek(d))))","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"formatWeeks = d3.timeFormat('%W/%y')","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"weeks = Array.from(new Set(mtaRidershipDB.map(d => d.Date).sort(d3.ascending).map(d => formatWeeks(d))))","pinned":false,"hidden":false,"mode":"ojs"},{"id":267,"value":"dayIndexes = {\n const returnObject = {}\n const dayMeans = [];\n days.forEach(day => {\n const dayOfWeekValues = mtaRidershipDB.filter(d => formatDayOfWeek(d.Date) === day);\n const dayOfWeekMean = d3.mean(dayOfWeekValues.map(d => d['metric']));\n dayMeans.push(dayOfWeekMean)\n })\n\n const overallAverage = d3.mean(dayMeans)\n\n days.forEach((day, i) => {\n returnObject[day] = dayMeans[i] / overallAverage;\n })\n\n return returnObject\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":269,"value":"seasonallyAdjustedMTA = mtaRidershipDB.map(d => {\n const day = formatDayOfWeek(d.Date)\n const index = dayIndexes[day]\n return {\n ...d,\n seasonality: d['metric'] / index \n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"Plot.plot({\n width,\n marks: [\n Plot.ruleY([0]),\n Plot.lineY(seasonallyAdjustedMTA, {x: \"Date\", y: \"metric\", stroke: '#ccc', strokeWidth: .75}),\n Plot.lineY(seasonallyAdjustedMTA, {x: \"Date\", y: \"seasonality\", stroke: '#4B74D5'})\n ],\n marginLeft: 60\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":280,"value":"### NYC Hurricanes\n\nExtreme weather events could impact subway ridership. I've added here some data from [Wikipedia](https://en.wikipedia.org/wiki/List_of_New_York_hurricanes#2020%E2%80%93present) on NYC Hurricanes.","pinned":false,"hidden":false,"mode":"md"},{"id":521,"value":"parseDate = d3.utcParse('%m/%d/%Y')","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"nycHurricanes = [\n {name: 'Tropical Storm Fay', date: '07/10/2020'},\n {name: 'Tropical Storm Isaias', date: '08/04/2020'},\n {name: 'Hurricane Laura', date: '08/31/2020'},\n {name: 'Hurricane Delta', date: '10/12/2020'},\n {name: 'Hurricane Zeta', date: '10/28/2020'},\n {name: 'Hurricane Eta', date: '11/13/2020'},\n {name: 'Hurricane Elsa', date: '07/09/2021'},\n {name: 'Tropical Storm Fred', date: '08/18/2021'},\n {name: 'Hurricane Henri', date: '08/22/2021'},\n {name: 'Hurricane Ida', date: '09/01/2021'},\n {name: 'Hurricane Larry', date: '09/06/2021'},\n {name: 'Tropical Storm Wanda', date: '10/26/2021'},\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":851,"value":"USholidays = [\n {name: 'Thanksgiving', date: '11/25/2021'},\n {name: 'Halloween', date: '10/31/2021'},\n {name: 'Christmas', date: '12/25/2020'},\n {name: 'Christmas Eve', date: '12/24/2020'},\n {name: 'Christmas', date: '12/25/2021'},\n {name: 'Christmas Eve', date: '12/24/2021'},\n {name: 'Labor Day', date: '09/06/2021'},\n {name: 'Labor Day', date: '09/07/2020'},\n {name: 'New Years Eve', date: '12/31/2020'},\n {name: 'New Years Day', date: '01/01/2021'},\n {name: 'New Years Eve', date: '12/31/2021'},\n {name: 'New Years Day', date: '01/01/2022'},\n {name: 'Memorial Day', date: '05/25/2020'},\n {name: 'Memorial Day', date: '05/31/2021'},\n {name: 'Memorial Day', date: '05/30/2022'},\n {name: 'July 4th', date: '07/04/2020'},\n {name: 'July 4th', date: '07/04/2021'},\n {name: 'July 4th', date: '07/04/2022'},\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":285,"value":"Plot.plot({\n width,\n marks: [\n Plot.ruleY([0]),\n Plot.dotX(nycHurricanes, {\n x: d => parseDate(d.date),\n y: 0,\n r: 5,\n fill: \"#E8C655\",\n stroke: \"white\"\n }),\n Plot.dotX(USholidays, {\n x: d => parseDate(d.date),\n y: 0,\n r: 5,\n fill: \"#BC2E2E\",\n stroke: \"white\"\n }),\n Plot.lineY(seasonallyAdjustedMTA, {x: 'Date', y: \"metric\", stroke: '#ccc', strokeWidth: .75}),\n Plot.lineY(seasonallyAdjustedMTA, {x: 'Date', y: \"seasonality\", stroke: '#4B74D5'})\n ],\n marginLeft: 60\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":203,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":841,"value":"
\n \n\n
","pinned":false,"hidden":false,"mode":"html"},{"id":757,"value":"
Loading London data
\n","pinned":false,"hidden":false,"mode":"md"},{"id":754,"value":"We're going to quickly pop in [data collected by Google](https://data.london.gov.uk/dataset/google-mobility-by-borough), shared by users of Android smartphones. The data compares the time and duration of visits to locations to the median values on the same day of the week in the five weeks starting on January 3, 2020.","pinned":false,"hidden":false,"mode":"md"},{"id":416,"value":"ldnGoogleActivity = FileAttachment(\"google_activity_by_London_Borough.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":797,"value":"### Five most populous London boroughs:\n1. Kensington and Chelsea\n2. Kingston upon Thames\n3. Hammersmith and Fulham\n4. Richmond upon Thames\n5. Sutton","pinned":false,"hidden":false,"mode":"md"},{"id":800,"value":"// These are the most populous boroughs according to the 2019 pop est. on Wikipedia: https://en.wikipedia.org/wiki/List_of_London_boroughs\npopulousLondon = ldnGoogleActivity.filter(d => d.area_name === \"Barnet\" || d.area_name === \"Croydon\" || d.area_name === \"Newham\" || d.area_name === \"Ealing\" || d.area_name === \"Enfield\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":783,"value":"// London data is d first, then m, y\nparseLdnDate = d3.utcParse('%d/%m/%Y')","pinned":true,"hidden":false,"mode":"ojs"},{"id":843,"value":"
\n \n
","pinned":false,"hidden":false,"mode":"html"},{"id":887,"value":"
Rise and fall of London stations
\nEstimated ridership, 2020-July 2022","pinned":false,"hidden":false,"mode":"html"},{"id":762,"value":"Plot.plot({\n grid: true,\n width,\n facet: {\n data: populousLondon,\n y: \"area_name\",\n marginRight: 50,\n label: null,\n },\n x: {\n axis: \"top\"\n },\n y: {\n label: \"Transit station change (in %) ↑\"\n },\n marks: [\n Plot.line(populousLondon,\n { \n x: d => parseLdnDate(d.date),\n y: \"transit_stations_percent_change_from_baseline\", \n stroke: \"#BC2E2E\"\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":737,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":721,"value":"
\n \n
","pinned":false,"hidden":false,"mode":"html"},{"id":723,"value":"
Observable 💙 Microsoft
\n
\n
There are multiple ways you can connect Observable to the Microsoft suite of tools. Here are a couple ways to connect the two ecosystems:\n
ThereAreManyWaysToMakeObservableWorkInYourAnalysisEcosystem!
","pinned":false,"hidden":false,"mode":"html"},{"id":423,"value":"
\n1. **Add Excel data to Observable**\n * [How To: Attach XLSX files as a file attachment](https://observablehq.com/@observablehq/xlsx?collection=@observablehq/data-loading-interactivity)\n * [How To: Connect files directly via your Microsoft Teams account](https://observablehq.com/@observablehq/cloud-files?collection=@observablehq/working-with-data)\n3. **Connect directly to any Azure Postgres or MySQL instance**\n * [How To: Connect a database](https://observablehq.com/@observablehq/databases?collection=@observablehq/data-loading-interactivity)\n5. **Create custom D3 or Plot charts then embed** in a PowerBI Dashboard\n * [How To: Render D3 charts in PowerBI](https://community.powerbi.com/t5/Custom-Visuals-Development/How-to-render-d3-charts-in-Power-BI-currently/m-p/2343219)","pinned":false,"hidden":false,"mode":"md"}],"files":"$W32","stdlib":"1","titling":"auto"}