2e:null 2f:["$","title",null,{"children":"Distribution of Art and Science in Houston, Texas | Justin Gosses | Observable"}] 34:T418,html `

Quick thoughts on a quick port from an index.html in a github pages page to an Observable notebook.

Quick to drop in here
Can't turn the entire page black or control all CSS to build a nice visual theme like you can with an html page.
Like tableau, little harder to get the CSS exactly right when importing other things through iframes.
Little less obvious how I would do certain things like link to different parts of the document, but suspect super easy if I wasn't so tired.
Tend more towards vertical layout of blocks where as I more naturally tend to put elements side by side if working in html. Different ways to building push you slightly in different directions.
Both work pretty easily, but the original looks way better due to the more consistant theme and a little bit constrained notebook layout on Observable.
I wasn't really doing much javascript control of the data visualizations but if I was it would be easier in Observable notebook.

`35:[] 32:{"id":"1d557db4d344863c","slug":"distribution-of-art-and-science-in-houston-texas","title":"Distribution of Art and Science in Houston, Texas","thumbnail":"e55499c475ccb94b1099a9825570f5e023caf54f5dcaaf23960fb1f7f1d13cdb","access_level":"public","create_time":"$D2019-10-10T02:34:05.906Z","update_time":"$D2019-10-10T03:10:59.508Z","view_time":null,"first_public_time":"$D2019-10-10T03:02:48.797Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"3168f49a68f07e98","login":"justingosses","name":"Justin Gosses","avatar_url":"https://avatars-next.observableusercontent.com/eba66f9b9de3134c0c22c453a1d562b450a8cf7f2274c4ed1ff16b7455312520","tier":"starter_2024"},"version":75,"publish_version":75,"role":null,"authored":false,"authors":[{"type":"individual","id":"44bc5e36abcab180","login":"justingosses","name":"Justin Gosses","avatar_url":"https://avatars-next.observableusercontent.com/eba66f9b9de3134c0c22c453a1d562b450a8cf7f2274c4ed1ff16b7455312520","tier":null}],"members":[{"type":"individual","id":"44bc5e36abcab180","login":"justingosses","name":"Justin Gosses","avatar_url":"https://avatars-next.observableusercontent.com/eba66f9b9de3134c0c22c453a1d562b450a8cf7f2274c4ed1ff16b7455312520","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Distribution of Art and Science in Houston, Texas","cells":[{"id":17,"value":"html `

Distribution of Art and Science in Houston, Texas

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"html`\nDistribution of locations of art venues advertising events in Glasstire Art website vs. companies that advertised science jobs in Houston in October 2017:\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"html `

Premise

This work was originally presented in a single github pages page as part of the Glasstire Datahack. A single html page pulled in iframes from other HTML pages created with the Kepler widget for Jupyter Notebooks & Tableau Public embedded visualizations. I wanted to see how easy or hard it was to present the same information (already processed) in Observable notebooks. I also wanted to see how quickly moving the information into this different form factor affected how the information was initially organized and presented.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"html `

Clicking on the bars will bring up some additional information. Clicking on the items on the right will bring up labels. Click on the arrow in top left will let you change the appearance.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"html `

Density of Art and Science in Houston, Texas

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"html`\nDensity of locations of art venues advertising events in Glasstire Art website vs. companies that advertised science jobs:\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"html `

Where did the data come from?

Science Dataset:

Locations of companies that advertised a job with science keywords in 2017. Scraped with python & cleaned with Scikit-learn machine-learning.\nYou can find more information about the generation and cleaning of the Science job dataset I created on its original github repository. I apologize in advance for it not being cleaned or organized post hackathon.

Art Dataset:

Locations of art events tied to art venue locations. includes artist unique identifiers but not names.\nYou can find more information about the art venue dataset provided by Glasstire on this site for the hackathon or on their main Glasstire website.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"html `

You can find out more by going to the original hackathon project page here.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"html `

This work was originally presented in this single github pages page as part of the Glasstire Datahack.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"