3e:null 3f:["$","title",null,{"children":"First Observable Notebook 2023: Hello \"show me another\" (David) | Ziyu Peng | Observable"}] 45:T41c,Wow. Really neat, and yet so unsatisfying! But that's part of the fun of this technique. We're already honing our intuitions. What jumps out? * Lots of stops seem to take 30 min or more. Maybe. Worth looking at the distribution there. * Number of years of experience for officers is interesting, could be analyzed. * Since street is it's own variable, we could see the most active streets just by grouping on the name. * What are the possible list of agencies and how active are they? * We should definitely ask ourselves if the LGBT and perceived limited English columns actually mean much. There may be other columns like this. In a real world scenario, we might take more effort to show more columns, as well, or display this more legibly. Again, the sky is the limit here with what you show. It's such a light and simple pattern, and easy way to build up insight and find actionable paths of analysis, that you can really adapt it to all kinds of circumstances without having to do anything advanced in terms of processing or analyzing the data.46:[] 43:{"id":"274228122a9ee162","slug":null,"title":"First Observable Notebook 2023: Hello \"show me another\" (David)","thumbnail":"cbfe0eb2e01737add28865391a8faa4f7ecb14a0edcb12953608dd020abb7303","access_level":"public","create_time":"$D2023-03-03T17:11:13.294Z","update_time":"$D2023-03-03T17:11:13.294Z","view_time":null,"first_public_time":"$D2023-03-03T17:11:13.294Z","has_unpublished_edits":null,"fork":{"id":"7b498de1b8975077","slug":"first-observable-notebook-show-me-another","title":"First Observable Notebook 2023: Hello \"show me another\"","owner":{"id":"25f41a0c6eb997df","login":"data-reporting-notebooks","name":"Notebooks for data reporting"}},"stars":0,"starred":false,"owner":{"type":"team","id":"a2be307cfcf66ceb","login":"zu-peng","name":"Ziyu Peng","avatar_url":"https://avatars-next.observableusercontent.com/2b8634a45f84f34ff4932cc9af9050519b74f8fc99ab9a8841c5a01553461df7","tier":"starter_2024","bio":"","following":false},"version":278,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ee8aa2d4d0e74de1","login":"zu-peng","name":"Ziyu Peng","avatar_url":"https://avatars-next.observableusercontent.com/2b8634a45f84f34ff4932cc9af9050519b74f8fc99ab9a8841c5a01553461df7","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"ee8aa2d4d0e74de1","login":"zu-peng","name":"Ziyu Peng","avatar_url":"https://avatars-next.observableusercontent.com/2b8634a45f84f34ff4932cc9af9050519b74f8fc99ab9a8841c5a01553461df7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"First Observable Notebook 2023: Hello \"show me another\" (David)","cells":[{"id":0,"value":"# First Observable Notebook 2023: Hello \"show me another\" (David)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":134,"value":"For open-ended data investigation, reviewing individual records can be a wonderful starting point for analysis and developing systemic insights and data intuitions.\n\nWe immediately start to ask questions. Why does a field appear to have bad data? Could we compare this value to the average? What columns are mis-named? What values repeat over and over? \n\nOften, you'll feel a little frustrated by show me another because you'll want to see more context. When that happens, you know it's working. Write down what you want to analyze or dig into and keep sampling.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":140,"value":"## Playing madlibs with data\n\nRemember Mad-libs? They're those little cards with blanks that you can fill in to write a humorous story. That's what we'll be doing, only with _powerful templating technology_ but it's easiest if you just remember how Mad-libs work:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":145,"value":"

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":150,"value":"Let's translate this to Observable code. Define a variable called `protagonistName`:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":143,"value":"protagonistName = \"Elinor Dashwood\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"Now, we can reference that variable in any text cell. That's right, every text cell in Observable behaves as a template. Take a look at the HTML cell below:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":155,"value":"

${protagonistName} awoke to the rising sun.

\n
${alexei.first_name}, one of the many ${alexei.last_name} brothers, was only ${alexei.age} and working as a ${alexei.job} when misfortune befell the young man known as \"${alexei.nickname}\" along with his whole family.
\n

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":132,"value":"## Preparing the data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":122,"value":"Let's import data from our initial notebook:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":113,"value":"import { san_diego_stops } from \"@eads/first-observable-notebook-imports\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"And then we'll Arquero-ize it.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":120,"value":"data = aq.from(san_diego_stops)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"## Sampling with Arquero","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":190,"value":"To get a sample from Arquero, simply call the sample method on the data table with the number of rows you wish to sample:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":192,"value":"sample5 = data.sample(5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"Inputs.table(sample5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"We need to do a bit of extra work to convert a single sample back into a native Javascript object by calling the `.object()` method of the Arquero table and getting the zero-th (first) element:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":214,"value":"single_sample = data.sample(1).object(0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"Let's unpack this a bit more. Our `data` variable is an [Arquero table object](https://uwdata.github.io/arquero/api/table.html). If we call `data.sample(1)` we get back a one-row table object. To get a simple Javascript object version of a row, we call `.object(0)`. The zero just means the zero-th (or first) row. In this case, that's the only row there is!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":224,"value":"We can start to play a simple version of mad libs with this!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":226,"value":"

There was a traffic stop for ${single_sample.reason_for_stop} in ${single_sample.address_city} on ${single_sample.date_stop} at ${single_sample.time_stop}.

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":196,"value":"## Adding interactivity and more detail","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":238,"value":"This next part will probably baffle and confuse you until the very end of this course, but that's why we're going to show it to you now. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":243,"value":"First, we're going to define a button. Putting the magic `viewof` prefix on the variable assigned to the button makes it reactive to changes. Calling `Inputs.button(\"message\")` calls Observable's built-in interactive component library to create a button.\n\nThat is often be some kind of structured input (like a select box with US states) but in this case it's just a button. Go ahead, click it, and watch the counter below increment.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":84,"value":"viewof showAnother = Inputs.button(\"Show me another\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"The button has been clicked ${showAnother} times.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":257,"value":"This weird bit of code executes every time the `showAnother` variable increments, which forces it to get a new sample on every button click.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":37,"value":"sample_stop = {\n showAnother;\n return data.sample(1).object(0);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"Pretty inscrutable! But also a pretty easy pattern to follow. And if you do, the sky is the limit in terms of how you present the sample:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":43,"value":"

When: ${sample_stop.date_stop} at ${sample_stop.time_stop}

\n\n

Who initiated stop? ${sample_stop.assignment} agent from ${sample_stop.agency} on beat ${sample_stop.beat_name} with ${sample_stop.exp_years} years experience.

\n\n

Where did it happen? ${sample_stop.address_block} ${sample_stop.address_street}, ${sample_stop.address_city}.

\n\n

Who was stopped? Perceived to be ${sample_stop.perceived_age} year old ${sample_stop.perceived_gender}. Perceived to speak ${sample_stop.perceived_limited_english ? \"limited\" : \"fluent\"} English. ${sample_stop.perceived_lgbt === \"No\" ? \"Not perceived\" : \"Perceived\"} to be LGBT.

\n\n

How long was the stop? They were stopped for ${sample_stop.stopduration} minutes.

\n\n

Why were they stopped? ${sample_stop.reason_for_stop} - ${sample_stop.reason_for_stop_code_text} ${sample_stop.reason_for_stop_detail} - ${sample_stop.reason_for_stop_explanation}