31:[] 2f:{"title":"First Observable Notebook 2019","cells":[{"id":0,"value":"md`# First Observable Notebook 2019\n\nThis is the script for a three-hour, hands-on class [scheduled](https://www.ire.org/events-and-training/event/3433/4109/) to be taught on March 7, 2019, at the National Institute of Computer-Assisted Reporting conference in Newport Beach, California.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"globe","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"md`The idea for the class was developed after the 2018 NICAR conference in Chicago where Jeremy Bowers and Ryan Pitts entered a bet about the future performance of baseball star Ichiro Suzuki. Ben Welsh developed his [first Observable notebook](https://observablehq.com/@palewire/the-ichiro-bet) to track the outcome of the wager, which sparked a conversation that led to this course.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":333,"value":"md`## What we will make`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"md`Using nothing but their web browser, students will sketch, refine and publish a graphic like one that [appeared](https://www.nytimes.com/interactive/2018/08/22/opinion/trump-cohen-mueller-investigation.html) in The New York Times.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"md`[![Trump's growing obsession](https://gist.githubusercontent.com/palewire/bacf1cb7743ce55ff39f47c8cf8bffa8/raw/81946e5316a7ef56fa715742f731ca7eb3cc8c77/nytimes-example.png)](https://www.nytimes.com/interactive/2018/08/22/opinion/trump-cohen-mueller-investigation.html)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"md`Along the way, they will see how Observable’s groundbreaking approach to coding can help them be more creative, ambitious and efficient. They will learn each of the following concepts:\n\n* Creating an Observable account\n* The basic features of the Observable toolbar\n* Creating and executing JavaScript and Markdown code cells\n* How the reactive programming system influences the relationship between cells\n* Features of ES5 and ES6 like the arrow function and template literals\n* Importing features from other notebooks\n* Inspecting JSON data\n* Creating reactive inputs with viewof\n* Manipulating JSON data with reactive inputs\n* Forking notebooks\n* Manipulating d3 charts with reactive inputs\n* Downloading d3 charts as SVG and PNG for publication`","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"md`Combining all those techniques will allow students to create [an interactive version](https://observablehq.com/@palewire/interactive-line-chart-of-trump-tweets) of the New York Times chart that runs right here on Observable.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"md`![What we'll make](https://gist.githubusercontent.com/palewire/bacf1cb7743ce55ff39f47c8cf8bffa8/raw/605bbf60218d966f0c1eb7efb03ba77e984d197d/final-chart.gif)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"md`Those same features have been put to use elsewhere on Observable in these examples:\n\n* [Boba Science](https://observablehq.com/@kristw/boba-science) by Krist Wongsuphasawat\n* [U.S.G.S. World Earthquake map](https://observablehq.com/@jashkenas/quakespotter-0-1) by Jeremey Ashkenas\n* [Inverted NASA photos](https://observablehq.com/@asg017/inverted-nasa-photos) by Alex Garcia`","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"md`## Meet your instructors`","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"md`The class will be taught by a rotating cast of four professional journalists.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"html`

${teachers.map(\n t => html`\n

`\n)}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"md`Each of the teachers has used Observable to develop ideas for graphics.\n\n* [Heat index](https://observablehq.com/@sahilchinoy/heat-index) by Sahil Chinoy\n* [Projecting satellite images](https://observablehq.com/@irisslee/project-satelite-image) by Iris Lee\n* [California buildings in severe fire hazard zones](https://observablehq.com/@palewire/california-buildings-in-severe-fire-hazard-zones) by Ben Welsh\n* [Mapbox Map Maker](https://observablehq.com/@aboutaaron/mapbox-map-maker) by Aaron Williams`","pinned":false,"hidden":false,"mode":"ojs"},{"id":710,"value":"teachers = [\n {name: \"Sahil Chinoy\", job: \"New York Times\", photo: \"https://gist.githubusercontent.com/palewire/bacf1cb7743ce55ff39f47c8cf8bffa8/raw/ec2237725e52e6793bb6fee5ce5a835010971e91/sahil-chinoy.png\", twitter: \"sahilchinoy\"},\n {name: \"Iris Lee\", job: \"Los Angeles Times\", photo: \"https://gist.githubusercontent.com/palewire/bacf1cb7743ce55ff39f47c8cf8bffa8/raw/ec2237725e52e6793bb6fee5ce5a835010971e91/iris-lee.jpg\", twitter: \"irisslee\"},\n {name: \"Ben Welsh\", job: \"Los Angeles Times\", photo: \"https://gist.githubusercontent.com/palewire/bacf1cb7743ce55ff39f47c8cf8bffa8/raw/ec2237725e52e6793bb6fee5ce5a835010971e91/ben-welsh.jpg\", twitter: \"palewire\"},\n {name: \"Aaron Williams\", job: \"Washington Post\", photo: \"https://gist.github.com/palewire/bacf1cb7743ce55ff39f47c8cf8bffa8/raw/ec2237725e52e6793bb6fee5ce5a835010971e91/aaron-williams.jpeg\", twitter: \"aboutaaron\"}\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":551,"value":"md`The instructors created this class in an effort to channel the stimulating feeling of exploration we feel when challenged by computers. This course is best enjoyed while listening to Kraftwerk, musicial artists who embrace the same creative spirit.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":549,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":553,"value":"md`Press play. And let us begin.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"md`## Hello Notebook`","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"md`The class begins by logging in at Observable with GitHub or another service.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"md`We then take a quick tour of the menu, showing off how to:\n\n* Explore the curate list of notebooks on the homepage\n* Search for notebooks, people, groups\n* Review your personal portfolio of notebooks\n* Create a new blank notebook\n* Publish and share it with others`","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"md`Next we create our first blank cell and do some basic math by running it.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"2 + 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":167,"value":"md`Point out that the result is above the code.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"md`Point out the \"...\" button and each of its features. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"md`Create another cell and set a variable.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"md`Create another cell and use the variable in a simple formula`","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"x = 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":184,"value":"x + 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":317,"value":"md`## Hello reactivity`","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"md`Show how to drag the new cell to just above where the variable is defined. Point out that this means the order of cells doesn't matter, unlike other notebooks.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"md`Change the value of x to another number. See the output of our third cell change. Stop. Explain reactivity. Go slowly. Answer questions. Contrast it with other notebooks.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"md`Create a new cell that attempts to redefine x. See the code break. Explain how variables must be unique in a reactive system.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"md`Show that you can write traditional javascript functions in a cell`","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"add2 = function(y) {\n return y + 2\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":215,"value":"md`Run it`","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"add2(2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":295,"value":"md`## Hello arrow functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"md`Explain [ES5](https://www.w3schools.com/js/js_es5.asp) and [ES6](https://www.w3schools.com/js/js_es6.asp). Go slowly. Ask if anyone knows what it is, or has used it. Call up pages with a list of all the functions. Explain that some browsers can't run this code, but Observable can.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":228,"value":"md`Point out [arrow functions](https://www.w3schools.com/js/js_es6.asp) in the Mozilla docs. Show an example. Explain how these can save time and space.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"md`Now rewrite the function above as an arrow.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"arrow2 = y => y + 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":239,"value":"md`Pause and compare the two. Point out that there's no function definition. No parenthesis. No brackets. No return statement.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"md`Run our arrow function to show it does the same thing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"arrow2(2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":247,"value":"md`To show how we can chain functions into our workflow, pass our first variable into the function.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"arrow2(x)","pinned":true,"hidden":false,"mode":"ojs"},{"id":252,"value":"md`Change the x variable setting again. Watch all the changes ripple out.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"md`## Hello template literals`","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"md`Edit the headline of the page. Point out the md literal syntax.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"md`Use an html literal instead and substitute in an h1 tag.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"md`Explain that these are examples of another new JavaScript feature, [template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals). Slow down. Look at the docs. Explain the backtick button. Point out Observable's variation with the prefix. Point out that the docs show how you can run code in the literal.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"md`Write our first template expression.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"html`

The value of x is ${x}

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":267,"value":"md`Add a bold tag.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"html`

The value of x is ${x}

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":274,"value":"md`Make it blue.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":278,"value":"html`

The value of x is ${x}

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":281,"value":"md`Show that you can also run functions inside the literal.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"html`

The value of x times 100 is ${x*100}

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":292,"value":"md`## Hello imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":338,"value":"md`Talk about how Observable lets you quickly reuse code by importing cells from any public notebook.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":340,"value":"md` Importing cells from notebooks has several advantages:\n\n* The imported code will always stay up-to-date\n* No need to copy&paste a ton between notebooks\n* You can modify the imported code on the fly`","pinned":false,"hidden":false,"mode":"ojs"},{"id":344,"value":"md`An example is right here, where you can see we've imported the interactive globe the top of this lesson plan from [another notebook](https://observablehq.com/@palewire/newport-beach-california) by Ben.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":346,"value":"import {chart as globe} from \"@palewire/newport-beach-california\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":353,"value":"md`Stop and review all the elements of the code above, from the import statement, to the aliasing to the notebook path provided to from.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"md`## Hello data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":360,"value":"md`Now let's import something we'll use for our chart. Ben prepared a list of all of President Trump's tweet in another notebook, which scrapes the data from [trumptwitterarchive.com](http://trumptwitterarchive.com/). This is what we will use to make our chart.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"import {tweets} from \"@palewire/trump-tweets\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":370,"value":"md`We could have copied the code he used to pull the tweets into our notebook, but we're on deadline. And the advantage of this approach is that we can regularly pull the latest Trump tweets with very little code since Ben already wrote it.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":372,"value":"md`Explain why we are using viewof.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":375,"value":"md`Now that we have all of President Trump's tweets, let's use Observable to explore the data.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"tweets","pinned":true,"hidden":false,"mode":"ojs"},{"id":381,"value":"md`Stop and use the inspector. Point out the row count. Click the arrows all the way down. Point out all the attributes. The sort order.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":385,"value":"md`Save the count of how many tweets President Trump has sent to a variable`","pinned":false,"hidden":false,"mode":"ojs"},{"id":374,"value":"numberOfTweets = tweets.length","pinned":true,"hidden":false,"mode":"ojs"},{"id":388,"value":"md`Retrieve his first tweet`","pinned":false,"hidden":false,"mode":"ojs"},{"id":390,"value":"firstTweet = tweets[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":395,"value":"md`Retrieve his latest tweet`","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"latestTweet = tweets[tweets.length - 1]","pinned":true,"hidden":false,"mode":"ojs"},{"id":398,"value":"md`Good news. Mike Bostock, one of Observable's inventors, has [a notebook](https://observablehq.com/@mbostock/tweet) that embeds tweets. Let's import it.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":493,"value":"md`## Hello embeds`","pinned":false,"hidden":false,"mode":"ojs"},{"id":400,"value":"import {tweet as embed_tweet} from \"@mbostock/tweet\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":406,"value":"md`Now let's embed that latest tweet`","pinned":false,"hidden":false,"mode":"ojs"},{"id":408,"value":"latestEmbed = embed_tweet(latestTweet.id_str)","pinned":true,"hidden":false,"mode":"ojs"},{"id":412,"value":"md`Now, combining all the tricks we've learned so far, let's make an automatically generated news story driven by our data.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"html`President Trump has sent ${numberOfTweets} tweets since ${new Date(firstTweet.created_at)}.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":421,"value":"html`He sent is most recent tweet on ${new Date(latestTweet.created_at)}, when he wrote:\n\n${latestEmbed}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":288,"value":"md`## Hello interactivity`","pinned":false,"hidden":false,"mode":"ojs"},{"id":431,"value":"md`Imports can do more than just embed tweets. Jeremy Ashkenas, one of the co-founders of Observable, has a wonderful notebook simply titled [\"inputs\"](https://beta.observablehq.com/@jashkenas/inputs) that contains an assortment of ready-to-rock inputs for work in Observable. While we could go to this notebook and copy and paste the slider code, we can simply import it with a single command:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":435,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":438,"value":"md`Now we have a slider. Let's test it out.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":440,"value":"firstslider = slider()","pinned":true,"hidden":false,"mode":"ojs"},{"id":442,"value":"md`Point out it only goes between 0 and 1. Now let's configure it to suit our needs.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":448,"value":"configuredSlider = slider({\n min: 0, \n max: 100, \n step: 1\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":455,"value":"md`Now let's try to access the number in our slider in another cell.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":457,"value":"configuredSlider.value","pinned":true,"hidden":false,"mode":"ojs"},{"id":461,"value":"md`Move the slider above around. Note that the value in our related cell does not change. It's not reactive. This is a bummer.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":464,"value":"md`To fix this, we need to create what's called a generator cell. According to the geniuses behind this whole thing, \"any cell that refers to a generator cell sees its current value [and] the referencing cell is re-evaluated whenever the generator yields a new value.\"`","pinned":false,"hidden":false,"mode":"ojs"},{"id":466,"value":"md`Basically, we need to tell Obserbable to always return the current value our slider in all other cells whenever we change. To do this, we can use a special operator called viewof.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":482,"value":"md`Now let's reference that value in a new cell.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":478,"value":"md`Let's do that.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":470,"value":"viewof viewSlider = slider()","pinned":true,"hidden":false,"mode":"ojs"},{"id":484,"value":"viewSlider","pinned":false,"hidden":false,"mode":"ojs"},{"id":486,"value":"md`Now let's put that into a sentence with a template literal.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":472,"value":"md`The value of this slider is ${viewSlider}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":495,"value":"md`Now let's configure a chart that can navigate President Trump's tweets.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":497,"value":"viewof trumpSlider = slider({\n min: 1,\n max: numberOfTweets,\n step: 1,\n value: 1\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":503,"value":"md`And let's hook it to the embed tool.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":507,"value":"embed_tweet(tweets[trumpSlider-1].id_str)","pinned":true,"hidden":false,"mode":"ojs"},{"id":300,"value":"md`## Hello filter`","pinned":false,"hidden":false,"mode":"ojs"},{"id":509,"value":"md`Now let's try a different input, the text box. We will use it to filter through Trump's tweets to find ones that match a particular string.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":513,"value":"md`First we import it from Jeremy's notebook.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":511,"value":"import {text} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":515,"value":"md`Now let's make one.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":517,"value":"viewof box = text()","pinned":true,"hidden":false,"mode":"ojs"},{"id":521,"value":"md`Let's spit out the result up to a new cell`","pinned":false,"hidden":false,"mode":"ojs"},{"id":524,"value":"box","pinned":true,"hidden":false,"mode":"ojs"},{"id":528,"value":"md`Now try typing into the box. You'll see your words in the cell above.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":564,"value":"md`How do we use this box to filter our tweets? We started another newfangled JavaScript method, filter. Every list can do it.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":567,"value":"tweets.filter","pinned":true,"hidden":false,"mode":"ojs"},{"id":574,"value":"md`It expects you to pass in a function that will test each tweet in the filter and return true or false. We can right one of these functions in a just few words with an arrow function.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":576,"value":"boxTweets = tweets.filter(x => x.contains(box))","pinned":true,"hidden":false,"mode":"ojs"},{"id":578,"value":"md`Type words into the box and watch the filtered list change. Inspect the JSON above to see it work.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":580,"value":"md`Let's use the tricks we've learned to create a sentence summarizing the results.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":582,"value":"md`President Donald Trump has made ${boxTweets.length} tweets containing \"${box}\"`","pinned":true,"hidden":false,"mode":"ojs"},{"id":589,"value":"md`Now embed a random tweet from the filtered set.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":591,"value":"embed_tweet(boxTweets.getRandomTweet().id_str)","pinned":true,"hidden":false,"mode":"ojs"},{"id":302,"value":"md`## Hello fork`","pinned":false,"hidden":false,"mode":"ojs"},{"id":594,"value":"md`Now we're going to take a big leap forward and put all these tricks together to edit and publish an interactive graphic with the [d3](https://d3js.org/) data visualization library.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":596,"value":"md`We don't have time in this class to cover how to make a d3 chart from scratch, so we're going to start with this one we've already drafted. And we'll use another of Observable's excellent features, the ability to \"fork\" someone else's notebook into your own independent copy, to get started.\n\nEveryone should click into [@palewire/cumulative-line-chart](https://observablehq.com/@palewire/cumulative-line-chart), pull down the \"...\" menu in the upper right and hit \"Fork.\"`","pinned":false,"hidden":false,"mode":"ojs"},{"id":599,"value":"md`[![Fork](https://gist.githubusercontent.com/palewire/bacf1cb7743ce55ff39f47c8cf8bffa8/raw/ed229c2c3a35d47bf0b0633f38bafa3cbff17709/fork.gif)](https://observablehq.com/@palewire/cumulative-line-chart)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"md`## Hello graphic`","pinned":false,"hidden":false,"mode":"ojs"},{"id":601,"value":"md`Take a moment to review all the d3 code that generates the line chart. Don't get too in the weeds. Point out how the configuration variables below the chart are controlling its appearance.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":607,"value":"md`Show we can begin to introduce other inputs, like the color picker.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":610,"value":"import {color} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":613,"value":"viewof areaColor = color({\n value: \"#fff3d6\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":603,"value":"md`Challenge a student to come to the front of the class and write the code to replace the static height variable with a slider.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":605,"value":"md`Challenge another student to come to the front and do the same for the margin value.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":621,"value":"md`Challenge another student to come to the front and do the same for the line color.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":618,"value":"md`Challenge another student to come to the front and do the same for the circle radius.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":627,"value":"md`Together we add the text box to the top.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":629,"value":"viewof filter = text({\n title: \"Filter Trump's tweets\",\n placeholder: \"Enter a word, like 'Sad!'\",\n value: \"Witch Hunt\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":640,"value":"filteredTweets = tweets.filter(t => t.contains(filter))","pinned":true,"hidden":false,"mode":"ojs"},{"id":648,"value":"md`Watch that ripple out through the chart. Encourage people to experiment and share interesting searches.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":651,"value":"md`Add a label beneath the search that prints out the hit count.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":653,"value":"md`${filteredTweets.length} matches`","pinned":true,"hidden":false,"mode":"ojs"},{"id":306,"value":"md`## Hello world`","pinned":false,"hidden":false,"mode":"ojs"},{"id":658,"value":"md`Explain how we can republish our work from Observable by exporting our d3 charts out as SVG or PNG files. Show examples by [Aaron](https://observablehq.com/@aboutaaron/border-arrests) and [Ben](https://observablehq.com/@palewire/california-buildings-in-severe-fire-hazard-zones) of doing just that.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":662,"value":"md`Introduce Mike Bostock's [saving-svg](https://observablehq.com/@mbostock/saving-svg) notebook. Import its serialize function.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":665,"value":"import {serialize} from \"@mbostock/saving-svg\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":669,"value":"md`Create a cell where you can download your filtered chart to SVG.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":671,"value":"html`DOM.download(serialize(chart), 'chart.svg', 'Download as svg')`","pinned":false,"hidden":false,"mode":"ojs"},{"id":685,"value":"md`Hit the button. Open the SVG. Discuss how you could edit this file in Illustrator.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":687,"value":"md`Import the rasterize feature from Bostock's notebook.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":691,"value":"import {rasterize} from \"@mbostock/saving-svg\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":694,"value":"md`Make a button to download the chart as a PNG.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":696,"value":"html`DOM.download(rasterize(chart), 'chart.png', 'Download as png')`","pinned":false,"hidden":false,"mode":"ojs"},{"id":698,"value":"md`Download the PNG. Encourage students to publish their forks and tweet out their PNGs with a link and the hashtag [#firstobservablenotebook](https://twitter.com/search?f=tweets&q=%23firstobservablenotebook&src=typd).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":700,"value":"md`## The end`","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}