The avatar for @dchong
Daniela Chong
Published
Big Data Visualization and Society
Edited
Apr 7, 2019
Big Data Visualization and Society
Observable vs Regular Flavor JavascriptWeek 12 - Interaction and Animation: D3 Transitions, Behaviors, and BrushingMarkdown summaryWeek 2b - Advanced JavascriptWeek 4b - Advanced Data Management
Week 5a - Web APIs
Week 3 - Data Management with ZebrasZebras RevisionParsing API ResponsesWeek 10(a) - Intro to D3.js: Making a ChartWeek 0 - Introduction to Observable
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
resolveAfter2Seconds = function(x) {
return new Promise(resolve => {
setTimeout(() => {
resolve(x)
}, 2000)
})
}
Insert cell
f1 = async function(number) {
var x = await resolveAfter2Seconds(number);
console.log(x)
return x
}
Insert cell
f1(5)
Insert cell
Insert cell
Insert cell
Insert cell
vegalite = require("@observablehq/vega-lite@0.1")
Insert cell
z = require('https://bundle.run/zebras@0.0.11')
Insert cell
Insert cell
// Load a file locally
viewof text = html`<input type=file * ">`
Insert cell
tweetsStrings = Files.text(text)
Insert cell
tweetsDF = Object.values(JSON.parse(tweetsStrings))
Insert cell
Insert cell
count = {
let countArray = []
let groupedLocations = z.groupBy(x => x.location, tweetsDF)
for (const key of Object.keys(groupedLocations)) {
countArray.push({location: key, count: groupedLocations[key].length})
}
return countArray
}
Insert cell
Insert cell
countSorted = z.sortByCol('count', 'des', count)
Insert cell
vegalite({
data: {values: countSorted.slice(0,40)},
mark: "bar",
encoding: {
x: {field: "location", type: "nominal", sort:'*'},
y: {field: "count", type: "quantitative"},
color: {"field": "location", "type": "nominal"}
}
})
Insert cell
Insert cell
notNull = z.filter(r => r.lat != null, tweetsDF)
Insert cell
vegalite({
data: {values: notNull},
mark: "point",
encoding: {
x: {field: "lon", type: "quantitative"},
y: {field: "lat", type: "quantitative"}
}
})
Insert cell
Insert cell
// Loop through all the locations, and see if they are similar to Boston, then create a new column
newTweets = {
let newLocations = []
let locations = z.getCol("location", tweetsDF)
for (let id in locations) {
if (locations[id].toLowerCase().includes('boston')){
newLocations.push('Boston, MA')
} else {
newLocations.push(locations[id])
}
}
return z.addCol("cleanLocations", newLocations, tweetsDF)
}
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more