25:["$","title",null,{"children":"Interactive data visualizations in JavaScript with Observable Plot [BLANK] | Nistara | Observable"}] 49:[{"id":"484e9a57de3c5c43294cd3b1f9b884034bc26646df9fee83186fcc89768ad6ac351e24e15e1e8a1f435d9e1871ae82263d53076fef0c87bf324a8f9e5db8a0a1","href":"https://static.observableusercontent.com/files/484e9a57de3c5c43294cd3b1f9b884034bc26646df9fee83186fcc89768ad6ac351e24e15e1e8a1f435d9e1871ae82263d53076fef0c87bf324a8f9e5db8a0a1","name":"us_energy.csv","type":"text/csv","lastModified":1679416033213.39,"size":14963}] 29:{"id":"4b27bbfe66135ca4","slug":null,"title":"Interactive data visualizations in JavaScript with Observable Plot [BLANK]","thumbnail":"1fc95cf9435a5855780df97779b772e76c7afe678c3bf11baffedfa4ccdb0afe","access_level":"public","create_time":"$D2023-03-21T16:27:13.213Z","update_time":"$D2023-03-21T17:17:12.341Z","view_time":null,"first_public_time":"$D2023-03-21T16:27:13.213Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"351beb92d13c26ca","login":"nistara","name":"Nistara ","avatar_url":"https://avatars-next.observableusercontent.com/fc6f0d92ec22682a22aa0fff89902c9e4242752fb6d54e4f7ea078da73e3e138","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":949,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"2271af4696480a08","login":"nistara","name":"Nistara ","avatar_url":"https://avatars-next.observableusercontent.com/fc6f0d92ec22682a22aa0fff89902c9e4242752fb6d54e4f7ea078da73e3e138","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"2271af4696480a08","login":"nistara","name":"Nistara ","avatar_url":"https://avatars-next.observableusercontent.com/fc6f0d92ec22682a22aa0fff89902c9e4242752fb6d54e4f7ea078da73e3e138","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Interactive data visualizations in JavaScript with Observable Plot [BLANK]","cells":[{"id":0,"value":"# Interactive data visualizations in JavaScript with Observable Plot [BLANK]\n## USGS CDI Data Viz Webinar, 2023-03-21","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":719,"value":"### Description: \n\nAs we increasingly share information on the web, it can be useful to build interactive data visualizations in JavaScript. Observable Plot, a JavaScript library built on the grammar of graphics, is a user-friendly tool to create and customize data visualizations, then add interactivity - fast. In this workshop, you can follow along to build interactive charts and maps using Observable Plot. In particular, this workshop will highlight how your existing ggplot2 knowledge maps onto Plot and puts you on the fast track to data visualization in JavaScript.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"## Tentative agenda\n\n- 9am - 9:10am: _USGS warm-up and introductions_\n- 9:10am - 9:25am: *[Intro slides](https://docs.google.com/presentation/d/e/2PACX-1vT-V1rUUMu7IHfl0wjuueqOngbc9_Z9ExcSV0hN2VOf41L_jypKU2BiKELMxiOqyBAKT_qg84MXLaKs/pub?start=false&loop=false&delayms=3000) (motivation, Plot intro, from ggplot2 to Plot)*\n- 9:25am - 10:15am: _Code-along Plot activities in an Observable notebook_\n- 10:15am - 10:30am: _Q&A_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"

\n# Code-along activities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":414,"value":"---\n## Activity 1: Bar chart of energy production in 2021","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":439,"value":"The data, previewed below and stored as *energy_production*, are from the [Energy Information Administration](https://www.eia.gov/totalenergy/data/monthly/). We've created a subset containing only production for 2021 in advance (*energy_2021*): ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":646,"value":"energy_2021","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":441,"value":"Let's start by making a bar chart of values, then order them from high to low.\n\nAdd a new JavaScript cell with a horizontal bar chart snippet by clicking the plus symbol (+) just to the bottom left of this line to start Activity 1.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":892,"value":"viewof pickColor = Inputs.color({label: \"Favorite color\", value: \"#3caaa2\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":883,"value":"Plot.plot({\n marks: [\n Plot.barX(energy_2021, {\n x: \"quadrillion_btu\",\n y: \"type\",\n fill: pickColor,\n stroke: \"red\",\n sort: { y: \"x\", reverse: true }\n }),\n Plot.ruleX([0])\n ],\n marginLeft: 150\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":832,"value":"showMe(`Plot.plot({\n marks: [\n Plot.barX(energy_2021, {\n y: \"type\",\n x: \"quadrillion_btu\",\n sort: { y: \"x\", reverse: true },\n fill: \"quadrillion_btu\"\n })\n ],\n marginLeft: 150,\n color: { scheme: \"Reds\" }\n})`, {dependencies: {energy_2021}})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"---\n## Activity 2: Interactive line chart of US annual energy production","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":304,"value":"Now, let's visualize trends in annual US energy production over time. We'll make a multi-series line chart of production (in quadrillion BTU) over time (year) using the *energy_production* data previewed below.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":443,"value":"energy_production = await FileAttachment(\"us_energy.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"energy_production","database":"$undefined"},{"id":579,"value":"### A static line chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":565,"value":"First, we'll make a static chart that includes all energy types and years in the data. \n\n- Click on the gray plus sign (+) in the left margin to open the add cell menu, and start typing in \"line\"\n- Click on the line chart code snippet to insert skeleton code into your notebook\n- Update the data source (energy_production) and x- and y- variable names (\"year\", \"quadrillion_btu\")\n- Add a _stroke_ attribute to change the line color based on \"type\"\n- Add a legend for the color ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":856,"value":"Add a new JavaScript cell below this line to start Activity 2!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":571,"value":"showMe(`Plot.plot({\n marks: [\n Plot.ruleY([0]),\n Plot.lineY(energy_production, {x: \"year\", y: \"quadrillion_btu\", stroke: \"type\"})\n ],\n color: {legend: true},\n x: {tickFormat: \"\"}\n})`, {dependencies: {energy_production}})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":912,"value":"viewof minYear = Inputs.range([1973, 2021], {label: \"Minimum year\", step: 1, value: 1973})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":919,"value":"viewof lineWidth = Inputs.range([1, 5], {label: \"Line Width\", step: 0.5, value: 2})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":904,"value":"Plot.plot({\n marks: [\n Plot.ruleY([0]),\n Plot.lineY(energy_production, {\n x: \"year\",\n y: \"quadrillion_btu\",\n stroke: \"type\",\n strokeWidth: lineWidth\n })\n ],\n color: { legend: true },\n x: { domain: [minYear, 2022] }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"---\n## Activity 3: Where is energy being produced?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":299,"value":"SELECT * FROM \"power_plants\" ","pinned":true,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"us_plants","database":"var:power_plants"},{"id":860,"value":"Add a new JavaScript cell below this line to start Activity 3!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":944,"value":"viewof pickSource = Inputs.radio(us_plants.map(d => d.primary_source), {label: \"Select one\", value: \"solar\", unique: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":923,"value":"Plot.plot({\n projection: \"albers-usa\",\n marks: [\n Plot.geo(states, { fill: \"#ccc\", stroke: \"white\" }),\n Plot.dot(us_plants, {\n x: \"longitude\",\n y: \"latitude\",\n fill: d => d.primary_source == pickSource ? \"red\" : \"grey\",\n opacity: d => d.primary_source == pickSource ? 1 : 0.3,\n r: \"total_capacity\"\n })\n ],\n r: { range: [1, 15] }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":935,"value":"us_plants.map(d => d.primary_source)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":937,"value":"x = 5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":939,"value":"x == 5 ? \"Yeah I'm 5\" : \"Nope, not 5\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":862,"value":"showMe(`Plot.plot({\n projection: \"albers-usa\",\n marks: [\n Plot.geo(states, { stroke: \"#ddd\", fill: \"white\", strokeWidth: 1 }),\n Plot.dot(us_plants, {\n x: \"longitude\",\n y: \"latitude\",\n fill: \"primary_source\",\n r: \"total_capacity\",\n opacity: 0.5\n })\n ],\n r: {domain: d3.extent(us_plants, d => d.total_capacity),\n range: [1, 20]},\n color: {scheme: \"spectral\"}\n})`, {dependencies: {states, us_plants}})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":563,"value":"

\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":731,"value":"In this appendix, we have some pre-imported and pre-prepared data and tools that are used in code-along exercises.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":733,"value":"Import the addTooltips function to create customizable tooltips in Plot charts:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":71,"value":"import {addTooltips} from \"@mkfreeman/plot-tooltip\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":738,"value":"Create a subset of energy_production data containing only values for 2021:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":417,"value":"energy_2021 = energy_production.filter(d => d.year == 2021)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":740,"value":"Import data on US power plants: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":266,"value":"import {power_plants} from \"@observablehq/us-energy-mix-bubble-map-recreation\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":742,"value":"Import spatial data for US states: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":284,"value":"import {states} from \"@observablehq/us-energy-mix-bubble-map-recreation\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":830,"value":"import {showMe} from \"@observablehq/show-me\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 24:null