Research Application Manager with the Alan Turing Institute / PhD from @GC_CUNY / formerly Research Software Engineer @LivingwMachines and @dhinstitutes project mgr
egoDataset = "https://gist.githubusercontent.com/kallewesterling/2b3d520976e5e251b75db09b4b13ad48/raw/ego-networks-14-days-no-unnamed.json"
network14dataset = "https://gist.githubusercontent.com/kallewesterling/fd3d7baa63410db5ed73d25b2f0d8086/raw/live-co-occurrence-grouped-by-14-days-no-unnamed-performers.json"
network3dataset = "https://gist.githubusercontent.com/kallewesterling/4e77f1c731f8100ddfaa3692fc0feb0d/raw/live-co-occurrence-grouped-by-3-days-no-unnamed-performers.json"
footnote = (referencingCellName, number, text) => {
// See @jashkenas/markdown-style-footnotes for the inspiration
text = linkify(text);
return html`<a id="footnote${number}"></a><ol start=\"${number}"><li><a class="footnote" onclick="document.getElementById('${referencingCellName}').scrollIntoView()">↑</a> ${text}</li></ol>`;
}
renderAllParagraphs = (paragraphs, ix) => html`${paragraphs.map(d=>d.outerHTML).join('\n')}`
paragraph = (number, text) => html`<a id="p${number}"></a>${text}`
footnoteRef = (fn) => html`<sup><a class="footnote" onclick="document.getElementById('footnote${fn}').scrollIntoView()">${fn}</a></sup>`
renderAllFootnotes = (footnotes) => html`${footnotes.map(d=>d.outerHTML).join('\n')}`
smallNav()
figures = {
let d = {
1: {
image: await FileAttachment("image@2.png").image(),
caption: html`An unfiltered view of the entire network of performers without community-detecting algorithm enabled.`
},
2: {
image: await FileAttachment("image@3.png").image(),
caption: html`An unfiltered view of the entire network of performers with a community-detecting algorithm (Louvain) enabled.`
},
3: {
image: await FileAttachment("image@4.png").image(),
caption: html`A filtered view of the network of performers connected to more than 15 other performers, with a community-detecting algorithm (Louvain) enabled and forces pulling communities together.`
},
4: {
image: await FileAttachment("image@5.png").image(),
caption: html`Advertisement in the <em>New York Daily News</em>.`
},
5: {
image: await FileAttachment("image@6.png").image(),
caption: html`Detail from Advertising booklet, “Legpads” Sherman P. Camp, New York: undated, Kokoon Arts Club and Philip Kaplan papers, Special Collections and Archives, Kent State University Libraries.`
},
6: {
image: await FileAttachment("image@8.png").image(),
caption: html`A filtered view of the entire network of people involved in the U.S. drag collective in the 1930s highlights Jack Mason’s position in relation to others. The red nodes are directly and secondarily connected to him, and the red edges show his connection to them.`
},
7: {
image: await FileAttachment("image@9.png").image(),
caption: html`A visual representation of the performers in the dataset, each appearing as a freestanding node divided into three swarms. From left to right are represented performers who appeared (1) only in a solo act, (2) in a mix of solo and group acts, and (3) only in a group together with other performers, in a nightclub or theatre performance.`
},
8: {
image: await FileAttachment("image@10.png").image(),
caption: html`A visual representation of the connections in early attempts to visualize the relationships between performers, venues, and cities.`
},
9: {
image: await FileAttachment("image@11.png").image(),
caption: html`A visual representation of the “overcrowding” of datapoints due to the three different types of nodes in the original visualization.`
},
10: {
image: await FileAttachment("image@12.png").image(),
caption: html`A visual representation of relaying multiple dimensions of metadata through edges between the nodes in the finished network visualization, foregrounding the social aspect of the network.`
},
11: {
image: await FileAttachment("image@13.png").image(),
caption: html`A filtered view of the entire network of people involved in the U.S. drag collective in the 1930s highlights Fay Norman’s position in relation to others. The red nodes are directly and secondarily connected to her, and the red edges show her connection to them.`
},
12: {
image: await FileAttachment("image.png").image(),
caption: html`A blurry and dimly lit photo of one of the Gay Boy Revue members in the Baldwinsville, NY courtroom from <em>Syracuse Journal</em>, April 4, 1935, 1.`
},
13: {
image: await FileAttachment("image@1.png").image(),
caption: html`One of the Gay Boy Revue advertisements announcing “See It—Live It—Dance It” from <em>Syracuse Journal</em>, March 29, 1935, 41.`
},
}
d = Object.keys(d).map(k=>Object.assign(d[k], {
figure: html`
<div class="figure">
${d[k].image}
<p><strong>Figure ${k}.</strong> ${d[k].caption}</p>
</div>
`
}))
return d
}
tables = {
let d = {
1: {
image: await FileAttachment("image@7.png").image(),
caption: html`Distribution of content by ten most occurring keywords across 353 advertisements.`
}
}
d = Object.keys(d).map(k=>Object.assign(d[k], {
table: html`
<div class="table">
${d[k].image}
<p><strong>Table ${k}.</strong> ${d[k].caption}</p>
</div>
`
}))
return d
}
/*
chapterStyle = html`<style>
.footnote {
cursor: pointer;
color:#3182bd;
}
h2 {
padding-top: 40px;
}
sup {
line-height: 0.25em;
}
p {
font-size: 1.1em;
}
div.figure {
float: right;
width: 400px;
}
div.figure img {
min-width: 50%;
max-width: 75%;
padding-top: 40px;
}
div.figure p {
padding-bottom: 40px;
font-size: 0.9em;
}
</style>`
*/
moment = require('moment')
ga = (ua = "G-60HKCT7QWE") => {
const script = document.createElement('script');
script.src = `https://www.googletagmanager.com/gtag/js?id=${ua}`;
script.type = 'text/javascript';
script.async = true;
script.onload = () => {
window.dataLayer = window.dataLayer || [];
function gtag() {
var dataLayer = window.dataLayer;
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', ua);
};
document.body.appendChild(script);
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.