The avatar for @aaronkyle
Aaron Kyle Dennis
Social development practitioner. Trying to understand our world.
Published unlisted
Edited
Mar 6, 2019
Fork of First Observable Notebook 2019
Insert cell
Changed in parent
-
md`# First Observable Notebook 2019

+
md`# First Observable Notebook


This 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.`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Changed in parent
md`Each of the teachers has used Observable to develop ideas for graphics.

* [Heat index](https://observablehq.com/@sahilchinoy/heat-index) by Sahil Chinoy
* [Projecting satellite images](https://observablehq.com/@irisslee/project-satelite-image) by Iris Lee
* [California buildings in severe fire hazard zones](https://observablehq.com/@palewire/california-buildings-in-severe-fire-hazard-zones) by Ben Welsh

-
* [Mapbox Map Maker](https://observablehq.com/@aboutaaron/mapbox-map-maker) by Aaron Williams`
+
* [Border arrests](https://observablehq.com/@aboutaaron/border-arrests) by Aaron Williams`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
2 + 2
Insert cell
Insert cell
Insert cell
Insert cell
x = 2
Insert cell
Insert cell
x + 2
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
add2 = function(y) {
return y + 2
}
Insert cell
Insert cell
add2(2)
Insert cell
Insert cell
Insert cell
Changed in fork
-
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.`
+
md`Point out [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) in the Mozilla docs. Show an example. Explain how these can save time and space.`
Insert cell
Insert cell
arrow2 = y => y + 2
Insert cell
Insert cell
Insert cell
arrow2(2)
Insert cell
Insert cell
Changed in fork
-
arrow2(x)
+
arrow2(2)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
html`<p>The value of x is ${x}</p>`
Insert cell
Insert cell
html`<p>The value of x is <b>${x}</b></p>`
Insert cell
Insert cell
html`<p>The value of x is <b style="color:blue">${x}</b></p>`
Insert cell
Insert cell
html`<p>The value of x times 100 is ${x*100}</p>`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import {chart as globe} from "@palewire/newport-beach-california"
Insert cell
Insert cell
Insert cell
Insert cell
import {tweets} from "@palewire/trump-tweets"
Insert cell
Insert cell
Insert cell
Insert cell
tweets
Insert cell
Insert cell
Insert cell
numberOfTweets = tweets.length
Insert cell
Insert cell
firstTweet = tweets[0]
Insert cell
Insert cell
latestTweet = tweets[tweets.length - 1]
Insert cell
Insert cell
Insert cell
import {tweet as embed_tweet} from "@mbostock/tweet"
Insert cell
Insert cell
latestEmbed = embed_tweet(latestTweet.id_str)
Insert cell
Insert cell
html`President Trump has sent <b>${numberOfTweets}</b> tweets since <b>${new Date(firstTweet.created_at)}</b>.`
Insert cell
html`He sent is most recent tweet on <b>${new Date(latestTweet.created_at)}</b>, when he wrote:

${latestEmbed}`
Insert cell
Insert cell
Insert cell
import {slider} from "@jashkenas/inputs"
Insert cell
Insert cell
firstslider = slider()
Insert cell
Insert cell
configuredSlider = slider({
min: 0,
max: 100,
step: 1
})
Insert cell
Insert cell
configuredSlider.value
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
viewof viewSlider = slider()
Insert cell
Insert cell
Insert cell
Insert cell
md`The value of this slider is ${viewSlider}`
Insert cell
Insert cell
viewof trumpSlider = slider({
min: 1,
max: numberOfTweets,
step: 1,
value: 1
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
viewof box = text()
Insert cell
Insert cell
box
Insert cell
Insert cell
Insert cell
tweets.filter
Insert cell
Insert cell
boxTweets = tweets.filter(x => x.contains(box))
Insert cell
Insert cell
Insert cell
md`President Donald Trump has made ${boxTweets.length} tweets containing "${box}"`
Insert cell
Insert cell
embed_tweet(boxTweets.getRandomTweet().id_str)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import {color} from "@jashkenas/inputs"
Insert cell
viewof areaColor = color({
value: "#fff3d6"
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
viewof filter = text({
title: "Filter Trump's tweets",
placeholder: "Enter a word, like 'Sad!'",
value: "Witch Hunt"
})
Insert cell
filteredTweets = tweets.filter(t => t.contains(filter))
Insert cell
Insert cell
Insert cell
md`${filteredTweets.length} matches`
Insert cell
Insert cell
Insert cell
Insert cell
import {serialize} from "@mbostock/saving-svg"
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import {rasterize} from "@mbostock/saving-svg"
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell