30:[{"id":"ea49c479fcac9cba031521069332caba185b01c89a71f3af01f05229c5965051b08144f012bc7a2afbb9b09009dcdd6760c00ead78562c761b2465a670cfa730","href":"https://static.observableusercontent.com/files/ea49c479fcac9cba031521069332caba185b01c89a71f3af01f05229c5965051b08144f012bc7a2afbb9b09009dcdd6760c00ead78562c761b2465a670cfa730","name":"world_bank_data (1).csv","type":"text/csv","lastModified":1666978507287.484,"size":606010},{"id":"d1601a187e93c62277b0ee2d6c6614c4847a696e172b982b1e5a5f5a6792e51b875aa4bc732f24019196530fe89ee585f2b8e252f4df521d5476b891582ff541","href":"https://static.observableusercontent.com/files/d1601a187e93c62277b0ee2d6c6614c4847a696e172b982b1e5a5f5a6792e51b875aa4bc732f24019196530fe89ee585f2b8e252f4df521d5476b891582ff541","name":"country_codes (1).csv","type":"text/csv","lastModified":1666978515209.214,"size":2224}] 2e:{"title":"Observable: a companion visualization tool for your data analysis","cells":[{"id":0,"value":"# Observable: a companion visualization tool for your data analysis\n## R in Pharma Workshop, Oct. 28 2022 - completed version!\n[Workshop Slides](https://docs.google.com/presentation/d/1nRAo8QB-3fOSNoyfPsM_HuURhYeFYKwnDPLD3F8h3hY/edit?usp=sharing)\n\n**Data:** [World Bank Development Indicators](https://databank.worldbank.org/source/world-development-indicators)","pinned":false,"hidden":false,"mode":"md"},{"id":15,"value":"---\n## Notebook Essentials","pinned":false,"hidden":false,"mode":"md"},{"id":341,"value":"CODE TOGETHER : Chart and Observable basics","pinned":false,"hidden":false,"mode":"md"},{"id":1193,"value":"

Wow, you can write HTML? awesome

","pinned":false,"hidden":false,"mode":"html"},{"id":917,"value":"viewof selectedDogs = Inputs.table(dogs)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1211,"value":"selectedDogs","pinned":true,"hidden":false,"mode":"ojs"},{"id":872,"value":"Click the **+** icon and search for _Bar Chart_ to create a bar chart of our dog's ages","pinned":false,"hidden":false,"mode":"md"},{"id":864,"value":"// Here's some sample data about our dogs\n// This is a code cell, where I\"m writing my code! Output is ^^ up there ^^\ndogs = [\n { name: \"Aida\", age: 2, weight: 64 },\n { name: \"Teddydog\", age: 6, weight: 50 },\n { name: \"Sira\", age: 4, weight: 5.25 },\n { name: \"Sadie\", age: 3, weight: 22 },\n { name: \"Mila\", age: 4, weight: 19 }\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1206,"value":"viewof selection = Inputs.radio([\"age\", \"weight\"], {\n label: \"Select one\",\n value: \"age\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1228,"value":"Below, we are comparing the dogs' **${selection}**.","pinned":false,"hidden":false,"mode":"md"},{"id":1204,"value":"Plot.plot({\n // initialze you plot\n marks: [\n // geometries that you want to add to the plot (visual encodings of the data)\n Plot.barY(dogs, {\n // barY of the data\n x: \"name\", // x axis\n y: selection, // y axis\n sort: { x: \"y\", reverse: true }\n }),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1225,"value":"Plot.plot({\n // initialze you plot\n marks: [\n // geometries that you want to add to the plot (visual encodings of the data)\n Plot.barY(dogs, {\n // barY of the data\n x: \"name\", // x axis\n y: selection, // y axis\n sort: { x: \"y\", reverse: true }\n }),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":875,"value":"ACTIVITY: Create a scatter plot of dog age (x) vs. dog weight.","pinned":false,"hidden":false,"mode":"html"},{"id":1258,"value":"viewof marginRight = Inputs.range([0, 100], { label: \"Amount\", step: 1 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1232,"value":"Plot.plot({\n marks: [\n Plot.dot(dogs, {\n x: \"age\",\n y: \"weight\",\n fill: \"weight\",\n r: 4\n // r: (d) => (d.name === \"Aida\" ? 100 : 1) // jk , jk\n }),\n Plot.text(dogs, {\n x: \"age\",\n y: \"weight\",\n fill: \"weight\",\n text: \"name\",\n textAnchor: \"start\",\n dx: 5\n })\n ],\n marginRight: marginRight\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1241,"value":"1 === \"1\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1262,"value":"wb_data = FileAttachment(\"world_bank_data (1).csv\").csv({\n typed: true\n}) // guess column types","pinned":true,"hidden":false,"mode":"ojs"},{"id":1265,"value":"Inputs.table(wb_data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1267,"value":"data_2019 = wb_data.filter((row) => row.year === 2019)","pinned":true,"hidden":false,"mode":"ojs"},{"id":948,"value":"CODE TOGETHER: Insert the attached world bank data. Take a look using `Inputs.table()`. Then, create a subset that only contains values for 2019. ","pinned":false,"hidden":false,"mode":"md"},{"id":42,"value":"---\n## ggplot2 → Plot for interactivity","pinned":false,"hidden":false,"mode":"md"},{"id":481,"value":"### Meet [Plot](https://observablehq.com/@observablehq/plot)","pinned":false,"hidden":false,"mode":"md"},{"id":92,"value":"- [Side-by-side comparison of ggplot2 and Plot essentials](https://observablehq.com/@observablehq/ggplot2-plot-highlight)\n- [Plot cheatsheets](https://observablehq.com/@observablehq/plot-cheatsheets)","pinned":false,"hidden":false,"mode":"md"},{"id":335,"value":"CODE TOGETHER: Make a histogram of life expectancy using 2019 data (`data_2019`), with fill color dependent on region. ","pinned":false,"hidden":false,"mode":"md"},{"id":1272,"value":"Plot.plot({\n width,\n grid: true,\n height: 500,\n fx: {\n padding: 0,\n domain: [\n \"High income\",\n \"Upper middle income\",\n \"Lower middle income\",\n \"Low income\"\n ]\n },\n marks: [\n Plot.frame({ stroke: \"#d3d3d3\" }),\n Plot.rectY(\n data_2019,\n Plot.binX({ y: \"count\" }, { x: \"life\", fill: \"region\" })\n ),\n Plot.ruleY([0])\n ],\n color: {\n legend: true\n },\n facet: {\n data: data_2019,\n y: \"region\",\n x: \"income_group\",\n marginRight: 150,\n label: null,\n padding: null\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":224,"value":"CODE TOGETHER: Create a customized scatterplot of gdp (x) and life (y) in 2019. Update the point fill color by \"region\" and set the radius to the population. We'll also update the x-axis to a log scale. ","pinned":false,"hidden":false,"mode":"md"},{"id":1295,"value":"Plot.plot({\n marks: [\n Plot.dot(data_2019, {\n x: \"gdp\",\n y: \"life\",\n fill: \"region\",\n r: \"population\"\n })\n ],\n x: { type: \"log\" },\n color: {\n legend: true,\n scheme: \"viridis\"\n // range: [\"yellow\", \"blue\"]\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":485,"value":"---\n## Observable Input for nimble interactive visualization","pinned":false,"hidden":false,"mode":"md"},{"id":675,"value":"CODE TOGETHER: Create a range input that spans all years in the full `wb_data` dataset. Then, create a reactive subset of `wb_data` that only contains values where year is less than or equal to the slider value. Finally, create a scatterplot of gdp (x) versus life (y) showing the filtered data.","pinned":false,"hidden":false,"mode":"md"},{"id":1319,"value":"viewof maxYear = Inputs.range(\n d3.extent(wb_data, (d) => d.year),\n { label: \"Max Year\", step: 1, value: d3.min(wb_data, (d) => d.year) }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1321,"value":"filteredData = wb_data.filter((d) => d.year <= maxYear)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1316,"value":"scatterChart = addTooltips(\n Plot.plot({\n width,\n facet: {\n data: filteredData,\n x: \"region\"\n },\n marks: [\n Plot.dot(filteredData, {\n x: \"gdp\",\n y: \"life\",\n fill: \"country\",\n title: \"country\",\n opacity: \"year\",\n r: \"population\"\n })\n ],\n x: { type: \"log\", domain: d3.extent(wb_data, (d) => d.gdp) },\n y: { type: \"log\", domain: d3.extent(wb_data, (d) => d.life) },\n color: {\n // legend: true,\n scheme: \"viridis\"\n // range: [\"yellow\", \"red\"]\n }\n })\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":686,"value":"**ACTIVITY:** Duplicate the histogram above, and add a radio button input that allows you to change which variable (\"life\", \"co2\", or \"gdp\") appears in the histogram. ","pinned":false,"hidden":false,"mode":"md"},{"id":1404,"value":"viewof histVar = Inputs.radio([\"life\", \"co2\", \"gdp\"], {\n label: \"Select variable for histogram\",\n value: \"life\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1402,"value":"Plot.plot({\n width,\n grid: true,\n height: 500,\n y: {\n type: histVar === \"life\" ? \"linear\" : \"symlog\"\n },\n fx: {\n padding: 0,\n domain: [\n \"High income\",\n \"Upper middle income\",\n \"Lower middle income\",\n \"Low income\"\n ]\n },\n marks: [\n Plot.frame({ stroke: \"#d3d3d3\" }),\n Plot.rectY(\n data_2019,\n Plot.binX({ y: \"count\" }, { x: histVar, fill: \"region\" })\n ),\n Plot.ruleY([0])\n ],\n color: {\n legend: true\n },\n facet: {\n data: data_2019,\n y: \"region\",\n x: \"income_group\",\n marginRight: 150,\n label: null,\n padding: null\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":710,"value":"**BONUS ACTIVITY:** Create a horizontal bar plot that shows the top 10 CO2 emitting countries (with country on the y-axis, co2 on the x-axis) for any year in the data, connected to a slider for year. **Hint:** for sorting and only keeping the top 10, you can add the following within the same brackets where you assign variables: `sort: {y: \"x\", reverse: true, limit: 10}`.","pinned":false,"hidden":false,"mode":"md"},{"id":1421,"value":"viewof selectedYear = Inputs.range(\n d3.extent(wb_data, (d) => d.year),\n { label: \"Selected Year\", step: 1, value: d3.min(wb_data, (d) => d.year) }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1425,"value":"barRaceSub = wb_data.filter((d) => d.year === selectedYear)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1413,"value":"addTooltips(Plot.plot(plotConfig))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1461,"value":"plotConfig = ({\n marks: [\n Plot.barX(barRaceSub, {\n x: \"co2\",\n y: \"country\",\n title: (d) =>\n `${d.country}\\n emitted ${d3.format(\",\")(d.co2)} tons of C02`,\n stroke: \"red\",\n sort: { y: \"x\", reverse: true, limit: 10 }\n }),\n Plot.ruleX([0])\n ],\n marginLeft: 350\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":746,"value":"### Tooltips","pinned":false,"hidden":false,"mode":"md"},{"id":766,"value":"In this notebook, we've imported Mike's `addTooltips` function from his [Plot tooltip](https://observablehq.com/@mkfreeman/plot-tooltip) notebook. Add tooltips to any Plot by: \n- Wrapping it in `addTooltips()`,\n- then adding a `title` channel to specify what's in the tooltip. ","pinned":false,"hidden":false,"mode":"md"},{"id":44,"value":"---\n## Share visualizations","pinned":false,"hidden":false,"mode":"md"},{"id":989,"value":"CODE TOGETHER: Pick a chart above and facet it (then download it, and/or embed it!)","pinned":false,"hidden":false,"mode":"md"},{"id":46,"value":"---\n## Advanced techniques and next steps","pinned":false,"hidden":false,"mode":"md"},{"id":1467,"value":"db = DuckDBClient.of({\n wb_data,\n codes: FileAttachment(\"country_codes (1).csv\")\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1497,"value":"plotData = db","pinned":true,"hidden":false,"mode":"ojs"},{"id":1502,"value":"Plot.plot({\n marks: [Plot.dot(plotData, { x: \"population\", y: \"life\" })]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1473,"value":"db","pinned":true,"hidden":false,"mode":"ojs"},{"id":1507,"value":"viewof sqlyear = Inputs.range(\n d3.extent(wb_data, (d) => d.year),\n { step: 1 }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1466,"value":"SELECT * FROM wb_data LEFT JOIN codes on wb_data.country_code = codes.country_code WHERE year = ${sqlyear}","pinned":true,"hidden":false,"mode":"sql","output":"mapData","database":"var:db"},{"id":1492,"value":"viewof mapVar = Inputs.radio([\"life\", \"gdp\", \"co2\", \"population\"], {\n label: \"Select one\",\n value: \"life\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1482,"value":"chart = Choropleth(mapData, {\n id: (d) => +d.id, // country name, e.g. Zimbabwe\n value: (d) => +d[mapVar],\n range: d3.interpolateYlGnBu,\n features: countries,\n featureId: (d) => +d.id, // i.e., not ISO 3166-1 numeric\n borders: countrymesh,\n projection: d3.geoEqualEarth(),\n width\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":992,"value":"import { DuckDBClient } from \"@cmudig/duckdb-client\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":996,"value":"import { Choropleth, countries, countrymesh } from \"@d3/world-choropleth\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":236,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":764,"value":"import { addTooltips } from \"@mkfreeman/plot-tooltip\";","pinned":true,"hidden":false,"mode":"ojs"},{"id":1347,"value":"viewof maxYear2 = Inputs.range(\n d3.extent(wb_data, (d) => d.year), // array [min, max],\n { label: \"Max Year\", step: 1, value: d3.min(wb_data, (d) => d.year) }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1351,"value":"d3.min(wb_data, (d) => d.year) ","pinned":true,"hidden":false,"mode":"ojs"},{"id":1342,"value":"## Facet Grid","pinned":false,"hidden":false,"mode":"md"},{"id":1344,"value":"Plot.plot({\n facet: {\n data: wb_data,\n x: (d) => countryNames.indexOf(d.country) % 8,\n y: (d, i) => Math.floor(countryNames.indexOf(d.country) / 8)\n },\n fx: {\n ticks: null\n },\n fy: {\n ticks: null\n },\n marks: [\n Plot.rectY(wb_data, Plot.binX({ y: \"sum\" }, { x: \"year\", y: \"gdp\" })),\n Plot.text(\n wb_data,\n Plot.selectMinX({\n x: \"year\",\n y: 0,\n text: (d) => d.country.slice(0, 20),\n textAnchor: \"start\",\n dy: 10\n })\n )\n ],\n width\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1360,"value":"countryNames = [...new Set(wb_data.map((d) => d.country))]","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}